<img src="//bat.bing.com/action/0?ti=5036286&amp;Ver=2" height="0" width="0" style="display:none; visibility: hidden;">
Sep 29

Design 101: Designing for Mobile

       

In: Tutorials

I got my first cellphone in 2001. It was a Nokia with a large 1.5 × 1 inch screen that could reveal the entire spectrum of colors as long as those colors were black or white. With the increased functionality (not to mention screen size) of today’s cellphones and tablets, one of the biggest changes for designers has been figuring out how to tailor their designs for mobile platforms and devices. Here at Union (formerly Studiobanks), we’ve seen a huge increase in the number of mobile-based projects that we’re working on. Mobile websites and apps used to be an afterthought—now they’re more important than ever.

Many designers groan at the thought of designing mobile websites and applications. They may feel that the small space confines their creativity and as a result a lot of mobile apps and websites look pretty similar. I’m in the other camp. I thoroughly enjoy designing for these small spaces. The tight confines of a mobile platform force you to concentrate on what’s important, adhere to strict principles of design and really focus on the end user experience. Here are a few things we keep in mind at Union when we’re designing for mobile:

Keep it simple

This should go without saying when designing for any medium, but it’s especially important when it comes to mobile. Users are visiting the site or app to access the content, not to view your awesome design. Don’t overwhelm the visitor with graphics that may slow down the site and hinder the quality of their experience. A good approach is to remove all unnecessary design elements until only crucial aspects of the design remain.

Don’t be afraid of scrolling

This is something we battle everyday, even with sites designed for desktop viewing. Clients are afraid that content will be lost if the user is forced to scroll down the page. It’s 2011—mobile users are used to scrolling for content, in fact they expect it. If we can reduce the amount of pages the user has to load, the overall experience will be more rewarding and far less frustrating. Let’s not get too crazy, though. Not all content should be condensed to a single page. Think about how to best organize the site’s content so that it’s aesthetically pleasing and gives users the information they need.

Don’t leave out the cool stuff

A lot of mobile websites have a tendency to oversimplify their experiences. They might leave out certain aspects of a site such as videos, photos, blog entries, etc. and condense the experience to the standard Home, About Us and Contact pages. While I agree that sometimes all users want to find is your address as they step into a cab, they may also want to explore your content when they have the time. A lot of the content we deem unessential also enhances the overall experience because it not only provides depth to your site, but also lets users immerse themselves in content.

This week, Union launched Hendrick Motorsports’ mobile website which is a great example of how to find this balance. The site focuses on what’s important to the user (news and schedules) while still retaining all of the cool video and photo features from the desktop site.

Make your buttons usable

Lastly, this should seem obvious but it’s often forgotten. Make sure that your buttons are large enough for a fingertip. Apple has said that the average fingertap on an iPhone is 44 × 44 pixels. This doesn’t mean that we need to create enormous buttons – just add enough padding around smaller buttons to enlarge the clickable area.

About UNION

UNION is a full-service digital agency. We create experiences that help brands thrive. We believe to be relevant in today’s marketplace, brands must lead with a digital-first philosophy. We craft engaging digital experiences and integrated campaigns that are built on strategy and driven by data. At the heart of what we do is help brands create meaningful and enduring relationships with highly connected consumers.

Get in Touch


Subscribe to our Blog & Newsletter

Also found in Tutorials