Over the past few months, I have been researching and practicing mobile design from a graphic designer’s perspective. As a graphic designer, I wanted to learn about the constrictions, features, aesthetic direction, specifications and constraints when working on a mobile design. Through creation, online classes and research, I discovered how to better create effective and innovative mobile designs.
1. Aesthetic and Layout
As a designer, I’ve learned that my choice of metaphor dramatically affects the design aesthetics of the interaction. It brings meaning to the design. Interactive elements should be visible, recognizable, reactive (i.e., elicits feedback), safe, and consistent.
A good mobile design does what the user expects it to do and has positive responses to the interactions. I think it is important to consider what the audience desires or likes through an emotional connection with the design. The look and feel should be consistent and designers should obtain any corporate branding materials from the client during the definition phase of the project.
Jen Gordon of Tapptics suggested that when selecting a color palette, a designer should consider the variety of environments for the user when they are using a mobile device. Designing high-contrast elements are helpful in legibility and readability. She said that a designer should have a character count limit for the body copy. This will help keep the design layout less cluttered during the development of the app.
Jen also noted that a four- or five-column layout is best for an app. The reason is because the standard iOS tab bar on the bottom can have no more than five icons. It is best to create columns for every tab element that a designer has within their design.
I found that Brian Fling’s mobile design process is best suited for a graphic designer when designing for mobile. It also was clear and concise. I have listed Fling’s process below:
“IDEA The first thing we need is an idea that inspires us.
NEEDS & GOALS Identify a basic need with our desired user.
CONTEXT The circumstances where information adds value.
STRATEGY How we can add value to the business.
DEVICE PLAN Choose the devices that best serves our audience.
DESIGN Create a user experience based around needs.
PROTOTYPE Test the experience within the context.
DEVELOPMENT Put all the pieces together.
TESTING And test, and test, and test some more.
OPTIMIZATION Reduce all assets to its lowest possible size.
PORTING Adapt for other devices that fit our strategy.”
3. Features and Gestures
When designing, every screen should have a purpose and gestural interaction defined. It is important to plan out the gestures that the user will be using during storyboarding/wireframing. A designer should define the navigational flow when creating sketches. All of the sketches should be rough at first.
Next, a second round of sketches should be created within a grid structure that has more detail and written definition. I have found that these second round of sketches can be used within a basic prototype.
As a result, the navigation and user experience issues that occur later on in the process can be address before any art is created. Through the creation of a prototype made from sketches, the usability can be tested before any graphics are created within Adobe Photoshop or Illustrator.
Because there are so many different platforms and devices when designing for mobile, it is important to know what the specific platform and device will be for the end product. As a result, I’ve come to know that a designer needs to know the dimensions, orientation, sensors and inputs on the device. They must know if it is iOS, Windows or webOS. These choices are going to affect the size of the assets for a developer and overall resolution.
I discovered that when complex designs are displayed on different mobile devices, the limited color depth on one device could cause banding, or unwanted posterization within a graphic. From a production standpoint, I realized it is good to use Adobe Photoshop with vector smart objects that are from Adobe Illustrator. It is best practice to use vector shape layers rather than bitmaps. If bitmaps have to be used, it is important to recreate create them as shape layers or smart objects.
Here is a list of the specifications for various iOS devices:
For iPhone Retina Display
For iPhone Non-Retina Display
320 px wide
480 px high
For iPad (portrait)
768 px wide
1024 px high
For iPad (landscape)
1024 px wide
I discovered that it is so important to design everything at the smallest file size first then the largest size to maintain fine details and prevent problems with composition and limited real estate. It is also best that when prepping file for the developer, you need to make elements the size they are going to appear in the final application. For example, a vector smart object in Adobe Illustrator should be the final size it will be exported as in Adobe Photoshop.
There are some good practices to follow when saving out files for a developer. For example, leaving a pixel buffer around images when saving out images will allow for better rendering of graphics. I also have come to know that PNGs are the best file type for all graphics when providing them to the developer. The reason is when any other file format is utilized, the iPhone has to do the same processing that Xcode does but it is doing it at run time rather than build time. Basically, the app will run slower if anything other than PNGs are utilized.
For iOS apps, designers also need to save out app icons in various sizes for developers. Apple’s iOS Human Interface Guidelines explains them.
As with any design project, the user and target audience need to be a major factor during the entire phase of the project. When designing for mobile, designers need to consider the persona of the user and when will they use the device, how often they will use the device and where they will use the device. It is important to remember that unlike the iPhone, iPad users won’t always have Internet access.
In addition, it is more effective to design a website for mobile first and then design for the desktop. “Users don’t complain about lack of features,” said Red Foundry CEO Jim Heising. “Users complain about features that don’t work.” Designers need to compress content where possible, and avoid providing unnecessary content.
I’ve learned that a designer needs to create and test the app during the sketching and wireframing in Adobe Photoshop. There are only two states when creating buttons, an inactive and an active state. Test designs on the device it will live on at the end of the project. I’ve used FieldTest
and found it very efficient and effective. A designer needs to consider the tactile interaction design and use the icons and buttons that are recognizable in mobile design. This makes the usability more efficient for the user.