About the authorJen Gordon, owner/creative director

of mobile design shop Clever Twist,

enjoys teaching her girls lyrics to

Dolly Parton songs, and blogging

about mobile design at www.

mobilelove.org.

iPhone app designer Jen Gordon describes the creative process behind

designing for the smaller screen in this specialist visual masterclass

OVER THE LAST few years, the web design

and mobile design worlds have become

more closely entwined than ever before.

The cumbersome and clunky days of WAP have been

consigned to history now that device technology has

begun to offer genuine online experiences on the

move. Love it or loathe it, Apple’s iPhone has probably

done most to spark interest and excitement around a

mass consumer mobile internet service and certainly

defined the market for mobile apps. It has captured

our imagination for a new mode of interaction with our

handsets, and spawned a new ‘4G’ series of smartphones

or superphones that continue to push boundaries.

Throw the Palm Pre, RIM’s latest BlackBerry and the

brand new Google Nexus One into the mix and you have

a formidable army of mobile phones set to dominate the

scene for years to come.

So what does this mean for web designers? Why

should we care? Well, if web audiences are widening and

we can apply our skills to a new area of demand then it

seems like a no-brainer. Whether applied to designing

sites, GUIs, apps, or indeed mobile operating systems,

there are new constraints and demands on screen size

and interfacing that must be embraced.

In order to illustrate the creative workflow for mobile

design we’ve asked Jen Gordon of iPhone app agency

Clever Twist to give us an example-packed look at some

of the key facets. Along the way we’ll look at why mobile

design matters and highlight the nuances associated

with producing native and web-based mobile

applications – from concept to design.

There’s also time to get a word with market

experts and designers to get their take on successful

mobile projects and even a brief look at the areas so

synonymous with the modern mobile experience, such

as icon design. There’s never been a better time to make the leap

into mobile design and if it guarantees your content a

brighter future then you definitely can’t afford to ignore

it any longer!

34 | Web Designer

MOBILE DESIGN

iPhoneNexus OneBlackBerry

Palm Pre

MOBILE MOBILE DESIGN

Web Designer

034-041_WD_167.indd 1 22/1/10 16:42:27

MOBILE DESIGN

Web Designer | 35

In years past, design for mobile has not been a hot topic in the design community. In smartphones only a few years old, the DOS screen aesthetic abounds. However, since the launch of touch-screen smartphones, interest in the mobile GUI (graphical user interface) has made a radical turnaround. Designers are looking for ways to break into this exciting new field of design. The purpose of this article is to define why design for mobile matters, and highlight the nuances of designing native and web-based mobile applications.

Designing for Web vs. Mobile Unless you’ve been living under a rock, you’ve probably heard that designing for mobile is different than designing websites or desktop applications. And the differences are multiplying rapidly as more devices with additional functionality hit the market. So why does design for mobile matter? Let’s take a look at the differences between web vs. mobile to get a better understanding of how users interact with each platform.

Desktop For the purposes of this article ‘desktop’ refers to laptop/desktop-based websites, web apps and applications. We don’t think of this hardware as interactive in the same way as mobile. We’re not going to pick up and tilt our monitors. In fact the tactile interactions are typically limited to:

• Mouse clicks • Keyboard • External tablet and pen • Microphone input • Speaker audio output

Mobile Mobile is a completely different animal. It’s people-centric. After all, think of what we call it – a handset. It fits in our hand, our pocket, next to our wallet. It’s a phone, it’s social, it’s personal. It has a ton of interaction points:

• On-screen touch keypad • Gestures • Mic input that can result in an immediate action • Sound feedback upon interaction

• Direct manipulation of content. On touch-screen devices, users have the ability to manipulate objects in a much more tangible manner than on a desktop application. There is no intermediate device like a mouse, only direct touch with the fingers that allows users to interact.

• Feedback based on time and location

Design Considerations There are many unique design considerations when designing for mobile, and those considerations start with knowing the hardware and operating system you’re working with. You don’t have to purchase lots of mobile devices, instead visit the app store for the respective operating system (eg iTunes App Store, Android Market found on Android handsets). From there take a look at apps that have a solid design aesthetic. If a developer has spent time on the GUI, it’s likely they also spent time on usability and flow. The idea in mobile is not to convert but to create. Take lessons from mobile apps that have done an elegant job of porting their desktop web presence to mobile.

Design for the Mobile Context The dictionary defines context as “the parts of a discourse that surround a word or passage and can throw light on its meaning”. In more practical terms, context enhances our experience or understanding of people, places, things and situations. Providing context takes apps from good to great.

For example, two of the most unique features of mobile devices is the ability to detect time and location. Planning for ways to take advantage of this data is essential. Let’s say you want to build a coffee finder app that lists all coffee shops within a ten mile radius of your location. Sounds like a useful application, but how can you make it better? The device already knows the exact time when the user is searching, why not display only the coffee shops that are open?

Create an Elegant Solution on a Small Screen Mobile device screens are smaller than desktop monitors, but what does that really mean? Size things down? Squeeze them in? The temptation may be to make things simply ‘fit’ into a smaller screen, when just the opposite is true.

Even when you’re trying to communicate many things to the user, less is more. Your primary goal from a design standpoint is to create a simple, elegant solution that’s easy to use.

Localisation Mobile apps are unique with regard to worldwide proliferation. Many app developers are targeting global markets for their apps and guess what? This impacts design. For example, your app includes in-app purchasing for

global app stores. Your checkout button looks great when you mock up “Buy now” in English, but how big does that button need to be when the phrase is translated to “покупка теперь” ?

Designing for Mobile Interaction Unlike design for desktop websites and/or applications, the variety of ways you can interact

Above : An extreme example of an app that HAD to simplify

Right : The New York Times iPhone app with simplified format

“ Like it or not, developing for mobile requires some technical knowledge of the platform you’re developing for”

The USA Today app is a great example of a hybrid app

Web vs. Native AppsWhat’s the difference between web-based, hybrid and native apps, and why does it matter to designers? First let’s address the “what”. Web-based mobile applications are built using your standard HTML, CSS, and JavaScript while native apps use the software development kit and native programming language for that operating system. Hybrid apps are a mixture of the two, for example an iPhone app such as USA Today pulls in dynamic web content while utilising C+ to code the shell that pulls in that data.

Who cares, you might ask. Why does it matter? Like it or not, developing for mobile requires some technical knowledge of the platform you’re developing for in order to create the graphics to the proper spec. Additionally it helps to know the capabilities of web vs. native to understand what functionality you can design for and which you cannot. When considering hybrid apps know you can combine the functionality of both.

Web-based apps allow usage of most functions that would typically work in desktop browsers. However, they are not able to respond to hardware inputs the same way a native app can. For example, they do not allow usage of the accelerometer (which detects shaking and positioning of the phone), audio input via mic, robust audio feedback options, camera/video integration, or the native animation capabilities.

Native apps allow all of the above items but cannot connect to web-based content. The app is static until it’s updated and re-submitted to the App Store. Many apps are going the hybrid route to allow dynamic content to flow into a native shell.

034-041_WD_167.indd 2 22/1/10 16:43:05

36 | Web Designer

with and get feedback from a mobile device

radically differs from its desktop counterpart.

Mobile apps aren’t just pretty pictures, you’re

developing a piece of software. Designing for mobile is a

combination of interaction, product/industrial and graphic

design. Think about all the things a mobile touch-screen device

can react to: touch, shaking, tilting, vibrating, audio input and

feedback, location and time tracking. With these elements,

design takes on an entirely new dimension. It’s your job as a

designer to consider these features when concepting how an

app will work.

Designing for Scalability Like most products, apps that have a user base are destined to

change in some way or another over time. Feature requests are

made, bugs reported and content needs to be added, among

other things. Thinking about long-term plans for the app and

anticipating features that will be requested down the road can

save you a lot of time re-designing the app later. This applies to

both utilities and games. A good example is the casual game

Mouth Off. When the app initially launched, they only had one

set of mouths to choose from, the Signature Mouths. As the

app added more mouths, they had to accommodate for those

additions in the layout.

Designing to Help Users Help Themselves In mobile application design, the goal is to provide an

application that thinks for the user. It predicts the next step and

provides simple and implicit controls to get there. Providing a

‘help’ screen or ‘how to use this app’ screen should set off an

alarm in your brain that the app architecture, flow and control

labelling needs rework. To illustrate the idea of being implicit

and intuitive let’s take a look at the Postage app. It is a prime

example of an app that could be easily bogged down with a lot

of controls, text and navigation blunders, but instead has a fluid,

organised, intuitive flow.

Mouth Off moves illustrated mouths to the words you speak. Tons of fun…

Postage makes it easy to send cute picture cards to friends Subtle in-line call-out tells you what to do

And then it fades out

The nav bar clearly implies what ’s next

The custom tab bar along the bottom provides image manipulation

You go into many levels of functionality

The controls transition nicely and the GUI is rich!

Mouth Off

And then it fades out

The nav bar clearly implies what ’s next36 | Web Designer36 | Web Designer

Postage makes it easy to send cute picture cards to friendsPostage makes it easy to send cute picture cards to friendsPostage makes it easy to send

Mobile technologyWe speak to Andy Betts, editor

of Smartphone Essentials,

for his view on how the new

generation of devices is

impacting on the way we view

mobile interaction

The advent of the iPhone turned

conventional wisdom about mobile

devices on its head. Before 2007 each

generation of mobiles simply had to be

smaller yet more powerful than the last,

but Apple’s approach brought the user

experience to the fore, and put the screen

as the focal point of the hardware.

It was revolutionary. Endless menus

and nested submenus were replaced

by a more human interface built around

a series of gestures that were entirely

intuitive. Touching, swiping, pinching:

the same gestures you would use when

working with physical products sat on

your desk, and producing an entirely

holistic experience where the software

and hardware were working in unison.

Every function on the phone works in a

uniform way, whether it be a part of the OS,

interacting with the web or using one of

the apps for the platform.

The change ushered in a new era

of smartphones, where devices like

Google’s self-styled ‘superphone’ the

Nexus One, the iPhone-inspired Palm

Pre and RIM’s BlackBerry range replaced

traditional names like Nokia as leaders in

mobile innovation.

Google’s Android OS looks likely to

dominate the smartphone marketplace

in the years to come, but it presents some

not-insignficant challenges to developers,

however. Although the Nexus One is

Google’s vision of what a smartphone

should be, other big names like Motorola,

Sony Ericsson and Samsung also have

Android devices in their portfolio,

and fragmentation of the platform is

becoming a concern. You can currently

buy Android smartphones running five

different versions of the OS with at least

four different screen resolutions, meaning

that compatibility in both design and

functionality across the board cannot

be guaranteed. It’s a long way from the

uniformity of the iPhone.

MOBILE DESIGN

034-041_WD_167.indd 3 22/1/10 16:43:49

MOBILE DESIGN

Serious EntertainmentHave the same characteristics of Fun Games, but with added depth in virtual realities and role-playing.

• Graphically rich, commonly have storylines to follow• Single screen, maybe one level deep at most • Efficiency focused, large buttons, legible from 5ft away

Web Designer | 37

Types of AppsThere are many categories of apps in the App Store, which can be broken down into four main types of apps. Know where your app falls, and it’ll help you establish proper design boundaries.

Southwest Airlines uses icons, colour and a clear layout to help its customers take care

of business

Ratio calculates your ingredient ratios for you

Colour, implied graphics help visualise the numbers quickly

Fun Tools • Moderately graphically rich • Show path to productivity and flatten the hierarchy • No more than two-to-three levels deep

Fun Games • Intensely graphical • Fall outside of the standard operating system user interface • Move away from a hierarchical navigation • Get into playing game immediately • Multi-touch gestures • LOUD visual feedback • “Success” pop up or audio feedback “Yaay!” • Tell users when they do something right or wrong

Outside is a graphically rich app with a practical function. Forecasting the weather!

Conver tbot makes conversions fun

Soft Freak Fiesta includes uber-rich graphics and global multiplayer gaming

Charadium is an interactive, multiplayer game of mobile

charades

Kroll is a storyline-based, multiplayer game

Skies Of Glory recreates the experience of being a WWII pilot

Serious tools• Keep it clean• Establish a clear grid for alignment and layout• Avoid redundant controls• Get things out of the way of productivity• Use ‘implied’ graphics • Visually prioritise info using typography and colour

034-041_WD_167.indd 4 22/1/10 16:44:17

38 | Web Designer

Market Research Depending on the type of app you’re working on, it’s always

a good idea to do some market research around the type of

app to be designed. You can learn a lot from those who have

gone before you. Find out what your competition is doing and

think about how you can not only make it better, but deliver a

surprising twist. Users love to be pleasantly surprised!

Target Audience Knowing your target audience is very important in defining a

design style, typography and layout. Does your app appeal to

accountants or 18-25-year-old gamers? Having this information

and diving even deeper to develop ‘personas’ is essential to

understanding what the demographic wants to see, and the

context in which they’ll use the app.

For example, Mike Todd is an 18-year-old college student in

New York City. This tells us a lot more about Mike. He is in college,

around other students his age, most with similar schedules.

Mike may want a game with two-player interaction. Would we

have thought of two-player interaction if we only knew Mike’s

age? Depending on the app, maybe or maybe not. Regardless,

drawing out personas brings richness to your brainstorming

and helps draw out functionality that’s important to your target

audience, and important to the design.

Use Case Scenarios Once personas are defined, the characters need to be placed

in relevant, true-to-life circumstances. Where are the users that

use the app? Are they on foot, by car

or travelling by train?43-year-old Bill is driving to a

meeting in London and wants to

stop for a cup of coffee. Should the

app require that Bill tap the screen

several times before finding his

coffee shop? Thinking through

the variety of circumstances users

find themselves in, and dialling

in on scenarios where certain

functionality repeats, is the key

to defining what screens you will

be designing.

Site map Site maps for mobile are critical

to design. To design a flow that’s

intuitive, understanding the

relationship of content to other

content provides a way to design simple and usable controls.

Mobile app site maps differ from website site maps as mobile

apps should not present the user with multiple ways to get to

one place. One door to one room, that’s it. Mobile users don’t

have time to make a wrong move then go ‘back’ and try to find

the proper path.

Wireframing and Paper Prototyping Data collected from the case scenarios will define the content

and controls that need to be present on the screens defined in

the site map. From there you have to design a preliminary layout

that accounts for each of these design elements. Define a grid,

establish importance of information and design from the top

down. Ergonomically speaking, users hold touch-screen mobile

devices in a way that the fingertip and thumb position is typically

pointed towards the top of the screen. This brings their eye

towards the top and tells you as a designer “hey, put the most

important and general categories of info towards the top!”

Consider the variety of ways content can move on and off

screen. For example, mobile sheets are a great way to hide

actionable controls until the user is ready to use them.

Minimise user input. Who wants to be bogged down with

entering a bunch of text? Provide users with a Picker Table so

they can select a choice from a menu instead.

In mobile design, paper prototyping will save you lots of time.

Much like any design or illustration process, having iterations

of your design allows you to explore a wider variety of design

options to a deeper degree. And with paper prototyping there’s

The Design ProcessIf you are a designer, the good

news about mobile apps is

design is everything. Whether you’re building a utility or a

game, appearance has a great

impact on usability. Cluttered or

disorganised apps are difficult

to understand, and hard to use. This isn’t to say that a ‘serious

tool’ should be embellished with an overdone GUI. A great app

design balances appearance with function.

In terms of function there are

areas of app development that

are not the ‘designer’s job’ per

se, but have a great impact on

the design conceptually and in

the development of a creative

direction. If you are working on

an app, and these jobs are not

being filled, find someone who has these skills or give it a try

yourself. Skipping these steps can

lead you down a costly path of

revisions when it’s found the app

is missing functionality or has a poor flow.

I absolutely adore designing for mobile devices,

as it’s one of the few opportunities that you get

to work within a fixed resolution and don’t have

to worry about the issues of different resolutions.

This essentially allows you to create something

truly unique and bespoke to the targeted device,

and for a designer, this is nothing short of a dream

come true.

I’ve worked on a number of iPhone games,

creating the core interface and HUD elements,

and there are so many things you have to take into

account. Navigating an interface with a fat finger

is worlds apart from a delicate mouse. You have

to think about where the user’s hands are going

to sit and how close each button is to their key

fingers/thumbs. To add to this you need to leave

ample room between buttons to allow the device

to pick up the user’s choice accurately and make

the buttons large enough to be easily pressed. This

could initially be interpreted as an annoying hurdle,

but I personally see it as fun challenge, and it allows

you to create some really sexy, made-to-measure,

interfaces and designs.

Regarding mobile web browsing, it’s rare that

companies are willing to devote funds to dedicated

mobile sites (other than large companies with larger

budgets), so it’s often the case that I use some basic

rules in my design when needing to keep mobile

browsing in mind. I try to minimise reliance on heavy

JavaScript and Flash and aim to make impact with

strong static imagery. In some cases this can make

for longer downloads, but on sites that require

visual punch, I believe it to be worth the wait. If a

site is trying to sell something that relies on visually

rich media, like a videogame or movie, then the site

needs to showcase that to the best of its ability.

The future of mobile interface and web design is

pretty exciting, as ever since the iPhone introduced

multi-touch technology, it’s leading to an ever

evolving interactive experience, and this is only

going to grow as time goes on. Couple this with

the ever increasing leaps in technology, allowing

us to experience faster, more processor-intensive

experiences; we truly are in for some mobile

interactive treats! I for one cannot wait!

Michael Heald, Fully Illustrated www.fullyillustrated.com

The paper prototype for Replace Your Face category screen

I absolutely adore designing for mobile devices,

MOBILE DESIGNMOBILE MOBILE DESIGNDESIGN

034-041_WD_167.indd 5 22/1/10 16:45:05

iPhone specs

less ‘risk’, less attachment to a scrap of paper than a Photoshop file. For example, working on Post-it notes is useful in being able to re-order, add or delete screens until the flow is right.

Focus on the App’s Primary Task The most enjoyable apps establish and maintain focus on one primary task. To do this you must determine what that primary task is by creating a product definition statement, a concise explanation of your app’s main purpose and its intended audience. Pick the few features most frequently used by the majority of your users, most appropriate for the mobile context. A quick way to do this is to fill in these blanks for the application you’re working on:

(Your differentiator) (your solution) for (your audience)

Here’s an example for iPhone’s ‘Photos’ app: Easy-to-use digital photo sharing for casual iPhone users.

The primary focus of Sound Hound is to find song lyrics. The first screen you see minimises user input by requiring only one tap for a song to be identified. The action is fast and the result is immediate. From there the user has the option of drilling down into more detailed information about the song.

What’s the number one thing you want to do when you open a recipe app? Epicurious clearly understood its target audience and the primary task it wanted to complete.

Design Tools & Image Specs Designers who are new to mobile often ask “How are apps created? What kind of software tools are necessary?” You’ll be happy with the answer. Tools of the trade for mobile designers are the same as your typical web/web application design tools (Photoshop, Illustrator). The general rule is to export all graphics for native applications in web-optimised transparent PNG-24 format. If you’re creating graphics for a web-based application, you can export web-optimised .gif or .jpg or PNG-24 images. For free downloadable templates visit: http://templates.mobilelove.org.

Similar to web design, the software program of choice is Photoshop, as you can easily slice out graphics and get pixel-precise and still manipulate images as vector graphics with shape layers.

Web Designer | 39

Thanks Sound Hound for making life easy

All I want is to find a recipe and Epicurious gets that

“The most enjoyable apps establish and maintain focus on one primary task”

And the final design

MOBILE DESIGN

034-041_WD_167.indd 6 22/1/10 16:45:46

40 | Web Designer

Plan for AnimationUnless your background is in Flash design, the need for planning

for animation in traditional web design is not omnipresent. With

mobile apps, however, if you’re not mimicking the fluid touch

interface with animations you’re not taking advantage of the

design aesthetic animations bring to the interface.

Design around Device Input Design for touch-screen gestures. To perform actions on a

touch-screen device, users use their fingers to swipe, drag,

pinch, tap and flick on-screen elements.

Planning for and integrating these gestures into your design

provide a rich user experience that takes advantage of the

unique attributes of touch-screen devices. Keep in mind that

users are using gestures a lot in apps that ship with the device so

be sure to use them appropriately so they don’t defy convention.

For example, you wouldn’t require a user to pinch/zoom to scroll

a list view.

ContrastWhen exploring colour palettes, consider the variety of lighting

conditions where mobile devices are used. Under bright

fluorescent lighting or on a sunny day, lack of contrast in text

or graphical elements may be difficult to discern. Even under

normal lighting conditions, proper contrast is helpful for those

who may have vision problems. Aside from lighting and screen

considerations, using contrast in your layout serves to draw the

user’s eye, and encourage action or feedback.

LayoutGrid layouts are a common tool used in print, web and mobile

design. For utilities in particular it’s important to establish a

clean grid layout during your prototyping phase to establish

proper hierarchy, balance and breathing room between click-

able elements.

SoundSounds tell a story. Although sound isn’t graphical in nature,

it does interact with graphics and add depth to the overall

experience. Using sound as a design element can reduce visual

noise by taking the place of text. For example using the ‘whoosh’

noise when an email is sent, rather than having a text alert. Keep

in mind for sound to increase the value of an application, it must

be relevant, balanced and pleasing, not an annoyance.

USABILITYEffective CommunicationMany of us are familiar with visual cues in the desktop world that

communicate quickly and effectively exactly what’s going on. With

mobile the same opportunities arise to keep users informed and

happy! For example, the spinning pinwheel in MacOS is an irritating

sign, but what if an application was hung up and you didn’t see that

spinning pinwheel? Now double that frustration level and you have

fast-paced mobile users that will delete the app before taking even a

minute to report the problem. Key things to remember to give users:

AVOIDING OOPSIES – A way to undo/redo.

Give the user plenty of time to cancel an operation

before it begins, and make sure you alert the user

before they take a potentially destructive action!

Design easy and elegant ways for users to stop

operations that are under way.

FEEDBACK – When users take an action within

an app, their expectation is to see immediate visual

change. Plan for these in your design. First visual, then

consider how subtle audio or animated feedback may

be appropriate.

REQUEST PROCESSING– If a user taps and

you know it will take a while to load what they want,

let them know. “Hey buddy this is going to take a minute.” Simple as that and they’ll love you for it.

GRPHICS – Showing an animated graphic to indicate things like download status, progress bars and wait times are examples of appropriate feedback animations.

SOUND – When designing audible feedback keep it only to necessary elements and make sure the sounds do not conflict with existing sounds in the mobile operating system. For example, you wouldn’t want to use the ‘incoming mail’ sound for the taps in your app or users will think they’re getting an email every time they tap!

TypographyTo say that typography in mobile’s yesteryear has been a moot

point is an understatement. Only recently is the conversation

even possible, with more phones allowing wider varieties of

typefaces through the native OS and web-based applications.

Below are best practices in typography for mobile apps:

Choose your serifs wisely. Similar to typography on the web,

using sans-serif fonts for large blocks of copy is recommended

for readability purposes.

The Guardian is an example of how serifed fonts are necessary

to maintain brand identity. This app is proof that with adequate

leading, proper kerning and font size, serifed fonts can be an

elegant solution.Contrast of the text in relation to the background colour it

layers over is necessary to ensure both visibility and readability.

DESIGNWhen designing for mobile the

small screen should not be

a barrier to creativity or letting

your imagination run wild. No matter what the subject of

the app, your goal should be to deliver a high-fidelity user

interface. Even applications that fall into a ‘utility’ category can

have fresh, tactile design.

Core techniques

or graphical elements may be difficult to discern. Even under

normal lighting conditions, proper contrast is helpful for those

who may have vision problems. Aside from lighting and screen

considerations, using contrast in your layout serves to draw the Strongly contrasting colours make it easy to tell the time

Strongly Strongly contrasting colours Strongly contrasting colours Strongly

make it easy to contrasting colours make it easy to contrasting colours

tell the timemake it easy to tell the timemake it easy to

Clear and concise layout makes life easier for everyone

The Guardian’s serifed fonts are an impor tant par t of its brand…

… and they survived the transition to mobile

Plan for AnimationUnless your background is in Flash design, the need for planning

for animation in traditional web design is not omnipresent. With DESIGN

When designing for mobile the small screen should not be

a barrier to creativity or letting

your imagination run wild. No

MOBILE DESIGN

034-041_WD_167.indd 7 22/1/10 16:46:23

MOBILE DESIGNResist the temptation to decrease line-spacing to fit more

information on a page. Give your type plenty of room to stretch out and relax in copy blocks and list views. Avoid bunching up several tapable text elements on the screen. This causes tap-confusion and fussy users.

Been Verified is a great example of a list view that very clearly calls out the three main categories of action, with a blurb of detail copy below that does not interfere with the eye dialling in on the three main points.

The typography, colour and spacing of Call Of Duty’s list view leaves the user’s eye bouncing all over the screen. Where do I take my first action on this screen? Do I tap on News, Blog, a sub item or arrows? The typography could make this more obvious and intuitive.

If you’re interested in learning more about typography, The Typography Manual has released a beautiful app that includes tools and resources for designers serious about type.

www.imagineshop.co.uk

Exclusive back issue archive featuring every page within a fully searchable interface, plus all project files and a FREE Web Design 3 book with Volume 2!

33 issues, 2,600+ pages, across 2 superb DVD editions...

On sale now

Volumes 1 & 2

ONLY£19.99each

DON’T OVERDO IT – Keep in mind you don’t

need to alert users of what is about to happen unless

there is a delay that is noticeable.

ANIMATION – Subtle animation that doesn’t

annoy users is another way to provide feedback to

users and help visualise the results of their actions.

LABELS – Avoid technical jargon and instead

focus on user-centric terminology. Be selfless, think

about your target audience. What words or phrases

are meaningful and intuitive to them?

BE IMPLICIT – The best apps have functionality

that is implied, rather than expressly stated.

CONTROLS – Make sure your users, not your

application, initiate and control actions. The controls

have to be easy to understand and remember.

KEEP IT SHORT AND SWEET – When you

provide on-screen text, keeping it in short, quickly

digestable nuggets is preferred. This is very important

for controls, where users should know what a control

will do in a glance.

PROVIDE TAPABLE TARGETS –

Sounds obvious, but the recommended size for

tapable areas on a device like the iPhone is 44px by

44px. If you want to go smaller be sure to adequately

space your tapable areas to prevent mis-taps.

Been Verified makes

you want to get a

background check

Call Of Duty might have you going

AWOL

SEARCHKeyword search is familiar to web users and many apps or mobile browsers rely on this as a primary mode of navigation – situated at the top of the screen

BRANDINGLike the header on a webpage, mobile content must establish identity in a way that doesn’t compromise screen real estate

LAYOUTMobile apps and sites favour a single slim-line format for lists and menus, often using image thumbnails and tabbed content to form a two-column layout

IMAGESGraphics may be restricted due to the

screen size but they offer an immediate

and recognisable way to convey information

quickly while catching the eye

DASHBOARDA footer row of icons act as quick links to key areas of content, using simple and abstract icons

Usability could make or break the successfulness of your app

A GUI DISSECTEDKey design components of a mobile interface with We Are Vi’s brand new LIV app for LIVING TV

034-041_WD_167.indd 8 22/1/10 16:47:16

“Think about a colour scheme that will cause that icon to stand out above the rest”

GLOSSY OR MATTe?Spend a minute in the iTunes App Store and you’ll see how Apple

has tried to bring a common design element to app icons, the

glossy-highlight effect. Standardisation of icons in this way is also

becoming trendy with Android and webOS developers too, but

needn’t mean you must follow suit. If you’re going to take the

time to make a custom icon, be sure to communicate with your

developers that no standard highlights/gloss be applied to the

artwork. If you want a highlight, do it yourself in Photoshop and

have complete control over every pixel to ensure consistency

over your design.

TELLING STORIES Mobile app icons often need to tell a story of what users can

expect. An example of a fantastic application that tells nothing

of the function of the app is Ramp Champ. The application and

icon are both beautifully designed, but would you ever guess it’s

a skee-ball application by looking at the icon?

On the other hand the second, less graphically rich Skee-Ball

application clearly communicates the app’s function, and just

happens to be ranked #1 in paid apps…

SHORT & SWEET Using words on app icons is discouraged and negates the entire

purpose of designing an icon. Remember an application icon is

not a logo, it’s a visual representation of a word, object, concept

or operation. If your app is about your company, and your

company logo is a set of recognisable letters, this is an exception

to the rule. Otherwise, think about how you would describe

your app in ten words or less, then marinate on analogies or

metaphors that communicate that core message.

ICON ART Many of the most successful mobile icons for apps or within

the phone’s OS feature rich, deep, texturised graphics often

featuring a very clear and simple iconography. You can often see

very clearly how icon techniques have evolved from pioneering

desktop GUIs like Mac OS and Windows. Just because you’re

limited to 57px by 57px does not mean you take shortcuts in the

execution. Look for ways to add depth and emphasise the most

important elements that communicate what the content behind

the icon does. Another way to communicate the purpose of a mobile

app is to use part of the application’s user interface within

the icon design. Obviously this won’t actually work for every

single example, but in the case of an app like Convertbot they

were able to use part of the user interface but pushed the

concept further by creating a robot-like face to inject a touch of

personality and warmth.

Also, check out your competition if you are struggling

for inspiration. If the project you’re designing for is in a

highly competitive category, take a look at the icons that the

competition use. The iTunes App Store, Android Market and

webOS App Catalog all rely on icons to gain user attention

among an often bewildering array of choice. Assuming it doesn’t

compromise the user’s understanding of what the app actually

does, and works within the application’s colour palette, think

about a colour scheme or other visual elements that will cause

that icon to stand out above the rest.

For additional online resources centred around designing for

mobile, check out http://resources.mobilelove.org.

The Soduku icon created depth the old-fashioned way, with a touch of Photoshop

A glossy finish doesn’t always suit

the feel of your design, so feel free

to ditch it

Beautiful icon, but what does it mean? I’m a gold medalist?

Weak design but communicative. This game is

about skee-ball…

Prominent logos or brands can

yield exceptions to the rules

A nice robot-like face feels welcoming

Flight Check has a nice dial/clock that pops right off the screen

Despite the gloss, App Vault ’s icon is a

solid concept and well illustrated

The OMG Pirates! icon is an eyecatching image that completely meshes with the style of the app

My Face? Who would

ever know this app is about cosmetics without

running it?

There are so many other options it could have explored for this

42 | Web Designer

My Face? Who would

ever know this app is My Face? Who would

ever know this app is My Face? Who would

about cosmetics without ever know this app is about cosmetics without ever know this app is

running it?

MOBILE DESIGN

Content Branding & Mobile IconsWhen working through the branding of an application, or any mobile content, the key is to

keep it refined and unobtrusive. Mobile users want to get things done, or be entertained.

Staring at a bunch of advertisements gets in the way of a positive and productive user

experience. Plan for your app brand to shine in the icon design, but be sure to not simply

repurpose your logo for the icon. Icons and logos are two completely different animals,

with expressly different purposes. Here are some quick icon design tips to get you started.

034-041_WD_167.indd 9 22/1/10 16:47:40