Mobile UI design process

This is a step-by-step look at my mobile UI design process, where each phase of the process is outlined and explained, from initial rough sketches all the way to final design.

Mobile UI design step 1: rough sketches

I usually start with some rough concepts on paper. I have a bit of a thing for fancy sketchbooks and markers, so I tend to do my mobile UI design sketches in a Moleskine sketchbook, using a Copic Multiliner 0.2 pen, and a Y&C Stylist marker. I prefer using graphed paper, as it tends to work a little better for planning structured, organized layouts. I usually keep these sketches loose and scribbly – the idea is to view and compare ideas quickly, not to make it look pretty. Typically, I’ll spend less than 5 minutes per sketch. For these sketches, I tend to not draw them to-scale. I just start drawing in a box that’s drawn vaguely to the approximate proportions.

Mobile UI design sketching

Mobile UI design step 2: refined sketches

This is where I start to work at the correct proportions. I start by printing out a few pages of blank UI sketch templates (I use a mobile UI design sketch template by Envis Precisely). If they made notebooks with these templates as pre-printed pages, I would buy a hundred of them. I look through my rough sketches and consider the things that work or don’t work in each, and use those elements to make a more refined set of sketches. This step is really optional, since wireframing, which is the next step, is where I start to really nail down the layout and structure, but I like to use the refined sketches as an opportunity to begin working on an information architecture and content hierarchy strategy before moving forward.

Mobile UI design refined sketch

Mobile UI design step 3: wireframes

Wireframes, in my opinion, are the most important part of the process. This is where I start to establish the weight of visual elements in the mobile UI design. Scale is determined for visual elements, such as buttons, etc., so I try to draw the elements as accurately as I can with regards to shape and size. I also use wireframes as an opportunity to start planning the contrast in the interface, picking which elements will be darker, heavier, lighter, and how they will visually interact with surrounding elements. This helps control the audience’s eyeflow and determines how they browse and use the site, and gives me the opportunity to plan how to visually highlight and create focal points of any call to action or primary content that needs attention drawn to it.

There’s a lot of different sites out there that allow you to create wireframes online, using pre-made UI elements, but I honestly prefer to just draw these out manually in Adobe Illustrator, as I’m very comfortable with this software, and can work very quickly in it.

Mobile UI design wireframe

Mobile UI design step 4: prototype

This is the most time consuming step in the mobile UI design process, but by far the most fun! Now that the mechanical and technical steps are finished, the creative step begins. With the layout and site structure finalized, I can focus on the visual design concepts. Using the wireframes from step 3 as a guide, I develop the interface design, incorporating color, textures, contrast, and visual weight into the interface systems and elements. This is also where typography, photography, imagery, buttons, etc., brought into play to accurately represent how the final site will look.

Mobile UI design mockup

Mobile UI design step 5: file optimization for development

Typically this is the portion of the mobile UI design process that designers are not responsible for, but that doesn’t mean this is where our work ends. Handing off files to a web developer to be coded just means that the next step, bringing the site live, requires a bit of extra organization on the designer’s part. Take a look at the screenshot below, specifically at my layer structure. All layers are named and grouped accordingly, buttons have extra layers for mouseover states, all design elements are vector smart objects so they can be easily resized if necessary, etc. This makes it easier for somebody who is unfamiliar with my file to slice it up and prepare it for web, create CSS sprites of buttons, combine all the effects that make up a visual element, etc.

Mobile UI design file organization

Be Sociable, Share!

•