Interactive Llama (The work of Stephen M. James) Scroll

Passion

Previous Next

Creativity

Promotes creative concepts to inspire, inform, and captivate.

Empathy

Empathizes with the user to create the best experience possible.

Balance

Balances visual and experiential aesthetics with usability.

Consistency

Implements a consistent user experience across the web.

Optimization

Excels at optimizing layouts—designed in photo and print tools—with pixel-perfect, yet responsive, perfection.

Change

Enjoys working in a field that changes every day.

Inclusion

Speaks up for the edge cases to ensure the fewest users are marginalized.

Persistence

Driven to make the project succeed.

Sample Work

  • Project thumbnail

Rachel Steely, Fine Artist

Identity & Website

Rachel Steely is a visual artist that takes fresh viewpoints on traditional subjects. She wanted an identity package that was traditional, yet contemporary--like her art--and a site that would place her work front and center for potential buyers.

Highlights

  • Responsive design including mobile first, "320 and up" methodology, fluid grids, media queries, and Javascript image replacement allowing screens and connections of all sizes to easily display its content
  • HTML5 semantic markup including rich snippets for SEO
  • Javascript polyfills to support older browsers (IE 7+)
Visit Site
Close
  • Project thumbnail

Golf With A Purpose

Website

There’s no such thing as an "instant fix" when it comes to improving your golf game. No book, video, or gimmicky gadget can give quantifiable, worthwhile results. The only proven method is practice. Golf With a Purpose is a journal that will improve your play.

Highlights

  • This is a mobile-first, adaptive site allowing screens of all sizes to easily display its content
  • Subtle parallax scroll animation
Visit Site
Close
  • Project thumbnail

Arts For Learning Indiana

Website

Arts for Learning Indiana empowers children to achieve their creative and intellectual potential through arts in education. The client asked for a colorful, friendly, yet corporate site that allows teachers to request local artists to perform for and teach their students.

Highlights

  • This is a mobile-first, responsive site including fluid grids, media queries, flexible images allowing screens of all sizes to easily display its content
  • Flexible slideshow
  • Easy to use
Visit Site
Close
  • Project thumbnail

Power Moves

Website

Power Moves offers tips that make a home or business more energy efficient and provides resources and applications to the members of the Wabash Valley Power Authority. The client requested a multifaceted site that allowed members to view a co-op specific site based on their ZIP code.

Highlights

  • This is a mobile-first, responsive site including fluid grids, media queries, flexible images allowing screens of all sizes to easily display its content
Visit Site
Close
  • Project thumbnail

Koorsen Fire & Security

Website

Koorsen Fire & Security offers total protection and from one source. It's a family-owned operation that has kept homes and businesses safe for more than 65 years, but they needed a new site. Our team delivered a font-icon carousel, mouse-only drop-downs, and a flat design that was trustworthy and clean.

Highlights

  • After the first week of launch, the leads from their website increased fourfold
  • This is a mobile-first, responsive site including fluid grids, media queries, flexible images allowing screens of all sizes to easily display its content
Visit Site
Close
  • Project thumbnail

Avondale Meadows

Website

Strategic Capital Partners is reviving this historic 100-acre property located along the Fall Creek Greenway less than four miles from the heart of Indianapolis. SCP requested a welcoming website to motivate developers to invest and create partners in the surrounding communities.

Highlights

  • Responsive design including fluid grids, media queries, flexible images allowing screens of all sizes to easily display its content
  • Flexible slideshow
  • Listed on Media Queri.es
Visit Site
Close
  • Project thumbnail

East Chicago Marina

Website

The East Chicago Marina is a welcoming stop for Lake Michigan travelers as well as home to the Boardwalk Grille & Banquet Center and the Indiana Harbor Yacht Club. The city wanted to promote their newly renovated (2010) marina and its amenities to the public.

Visit Site
Close
  • Project thumbnail

Environmental Recycling Solutions

Website

Waste disposal is a dirty business--and we're not talking about the trash. Many companies that claim to provide green services actually outsource some or all of their client's recycling operations to uncontrolled third party vendors. Indianapolis-based, ERS, Inc wanted to promote their proper, compliant recycling and disposal services to prospective clients and show that they help a company's bottom line while protecting our environment.

Visit Site
Close
  • Project thumbnail

Lorenzo's Ristorante

Micro-site

Inspired by the taste of Tuscany, Lorenzo's serves up Italian charm and authentic cuisine that will appeal to the most discerning tastes. Lorenzo's asked for a low cost, quick-turn-around, one-page micor-site that would be accessible to mobile users in preparation for Indianapolis hosting Super Bowl XLVI.

Highlights

  • Responsive design allowing screens of all sizes to easily display its content
Visit Site
Close
  • Project thumbnail

Meridian And Main

Website

Spread across 34 acres and offering more than 300,000 square feet of space, Meridian & Main will accommodate a wide variety of hospitality, medical, retail and commercial tenants. This premier address provides high visibility within the prestigious North Meridian business corridor and will serve as a primary gateway to Carmel, Indiana's downtown renaissance. This micro-site includes an interactive site plan and area demographics.

Visit Site
Close
  • Project thumbnail

MB2 Advertising

Website

In 2008, when Miles and Brinson, a full-service marketing firm, decided to rebrand to MB2 Advertising, they refreshed their website to display their creativity and show off their past work. This project features parallax Flash animation along with other creative touches.

Visit Site
Close

Contact

If you are interested in meeting with me, contact me today or if aren't ready to pull the trigger on interactive creativity, connect with me on Twitter or LinkedIn, so that we can stay in touch.

*

(The above question is to make sure you aren't a robot.)

Ideaboard

A place for ideas on design & development

Focus transition

Animation that makes the transition of navigating a web page with a keyboard more apparent.

Focus transition

Typography Beard Guide on Behance

 

Just for fun! Typography Beard Guide

If a feature or product were legitimately easy…

If a feature or product were legitimately easy the user would not be writing in to support about how stuck they are. Sure, some percentage of users will find questions to ask about any interface. But do you want to start the conversation by assuming the user falls into that percentage? You venture to learn much more if you assume the software is wrong, not the user.

— Andrew Spittle

Website Development Productivity on a small MacBook

We all love things big. We all love things small. It would be difficult for me to go back to working on a desktop machine, since I work on a MacBook with two external monitors (at home and at work). Luckily my home iMac is new enough to support mini-display if not Thunderbolt. However, once you’ve gotten used to seeing your IDE (Coda for me), your Photoshop mockup, your browser (480px and 960px simultaneously for responsive web design) and Element Inspector all at the same time, it’s difficult to work on an 13″ Macbook. The solution is a mix of built-in options and an $18 third-party application.

Continue Reading →

Niice. A search engine with taste.

Niice

It claims to be “A search engine with taste.” It’s a lot like Pinterest for only design, but it should be used for more than general viewing. The search function is, well, nice. Search for elephant or script or  a color.

New York City Transit Authority Graphics Standards Manual

I’m always a sucker for classic wayfinding–the design that you don’t notice.

The Art And Craft Of Arabic Type Design

Q: Where do you get your inspiration from?

It is always the streets of Beirut. Not the way my city is now, but how I wish it to be. When I studied graphic design in Beirut, I was always frustrated by the low quality of available Arabic fonts. It felt as if this is a reflection of a much larger state of being, of everything that is not OK in our part of the world. And that was a state of affairs that was intolerable, and so I set about trying to make my environment look better, one letter at a time.

The Art And Craft Of Arabic Type Design

Ultimate Website Checklist for Launch

Somedays I wish designing and coding websites was just Photoshop/Illustrator and a code editor (I like Coda at this time), but it’s not. Once you understand how the whole system works (Best Practices are changing everyday in this industry…) and you work at a place that has clients based on relationships (therefore valuing quality over shipping bad product), it’s a varied list of technologies to provide optimal performance, social sharing, error checking, compiling, and general quality assurance.  There are many of these lists out on the web. Mine is targeting the WordPress CMS, but should be applicable to most content management systems and probably most websites. Remember, it’s sometimes about removing a feature instead of adding one.

Continue Reading →

Truncation is not a content strategy

“Truncation is not a content strategy…”

-Karen McGrane 

Carousel Interaction Stats

Approximately 1% of visitors click on a carousel feature.

Carousel Interaction Stats

A Sampling of Mobile Design Patterns

A Sampling of Mobile Design Patterns

Great User Experiences Require Great Front-End Development

“If a Front-End Development team reports to Engineering, the team gets rewarded for solving back-end technology challenges. But front-end development is not about solving back-end technology problems. It should be about making sure a product’s user experience differentiates the product in its marketplace.”

Great User Experiences Require Great Front-End Development

Fullscreen Slit Slider with jQuery and CSS3 | Codrops

Fullscreen Slit Slider with jQuery and CSS3

Looking Beyond Common Media Query Breakpoints | Smashing Mobile

 

Looking Beyond Common Media Query Breakpoints

More Perfect Typography

Tim Brown – More Perfect Typography from Build.

Day4 – How we screwed almost the whole Apple community updated

 

Day4: – How easy is it to spread disinformation on the Internet? Case study in custom Apple screw rumors

UI Stencils—Website Stencil Kit

 

Website Stencil Kit

Forget about consistency, focus on coherence

Forget about consistency, focus on coherence.

Switches with Checkboxes and CSS3 only

 

Switches with Checkboxes and CSS3 only

The current limits of CSS and canvas are eerily similar to 1980/90s desktop publishing tools and games as the fashion and color palette arrive. Coincidence?