The first question we get after people compliment us on Parable’s beautiful design - How did you find your designer? They’re always surprised to hear that we don’t have a dedicated designer and share design responsibilities amongst us.
Great design is a function of consistency and meticulous detail that any team can hope to attain with discipline. I’ve outlined Parable’s recipe of visual design guidelines to building gorgeous apps.
Brand
Your brand sets the foundation of the app design. It’s the answer to ‘What should a user feel when using your app?’. Start by identifying the key demographic or industry for your product; kids, teens, professionals, moms, students, doctors, designers, seniors etc. Then define a brand that resonates with these target users - playful for children, professional for enterprise users, efficient for moms, chic for designers, security for finance apps. App designs must remain consistent with their brand to build deeper product awareness and reduce user confusion e.g. social network for seniors might have bigger fonts while a stock trading app would reinforce security with strategically placed lock icons. If possible, consider picking a brand mascot; it adds a human element and reinforces your app’s recall among the audience.
Color Scheme
The color scheme defines the app persona and is an extension of the brand color. Since all the screens and assets share these colors, it forms the core of visual design. Start by selecting a unique color that bolsters your brand e.g. green represents memory in case of Evernote. Then create a color scheme around it. Vibrant colors that draw attention work well for consumer apps while neutral palates are more appropriate for professional products that focus on information e.g. Parable’s brand color is Tangelo orange, so we selected shades of grey as the primary color scheme in keeping with our persona of chic creativity. SnapChat, on the other hand, has a more vibrant color scheme that caters to its original teen audience.
Intuitive
In the competitive app world, there’s little time to babysit a new user through your product - the ‘time to hooked’ is ever so small. The best app is one you intrinsically understand from the moment it’s first launched. The trick is to tap into cues from widely used apps to reduce the odds of user confusion. Then comprehensively user test all interaction flows to optimization. The path to most important app interaction cannot be more than 3 taps e.g. 1 tap streaming on Meerkat, 3 tap photo posting on Instagram. It helps to use platform specific interactions that users are accustomed to.
Delightful
Driving engagement is the primary app metric for an acquired user. To make a sticky user, you captivate them with something unexpectedly delightful. Over time, endearing experiences leave an impression that hooks your app into the user’s routine. Great examples are the share animation in Pinterest and Parable or the dancing ghost in the SnapChat refresh screen animation.
Polish
For exceptional visual design, details matter; every pixel needs to be in the right spot and burnished. Let’s start with typography. Fonts give a face to your app, so a great typeface can set your app apart. Never stick with the standard font, either use one of the 50+ fonts in iOS or better still, buy and bundle your own. Serif fonts are better for reading long articles; san-serif ones enable more size variety while looking less crowded. Condensed variants allow more text to be packed on screens but don’t mix well with regular fonts. Next, let’s talk about iconography. The best icons convey the sentiment of the intended interaction accurately. Grab any of the free icon sets and custom create your own from them with PhotoShop. Stick to a single color when using solid color icons to avoid visual overload. Finally, let’s focus on visual assets. The post-skeuomorphic world simplifies asset development. Render designs in code as much as possible to reduce the app size. When adding assets, ensure that they are matched correctly to the screen sizes; pixelated assets are an obvious sign of shoddy craftsmanship.
Path and Flipboard are great examples of a pixel perfect apps. Notice however, how mixing of a bold condensed san-serif font with serif paragraph results in unbalanced typography in Flipboard.
Simplify
App developers frequently add complex navigation or clutter the interface with extraneous information. This creates a mental overload. Keep it simple! Screen layouts should be clear with information flowing hierarchically from the more relevant at top to the bottom. Surface only the most pertinent details and use analytics to identify unused actions to remove. Take a page from Apple’s philosophy - perfection is attained when there is nothing to remove. Consider the design of this neat Pinterest profile screen below. It anchors the user and pin-board entities, then drives the primary follow and like actions using carefully positioned buttons. The best apps take this concept further with dynamic context e.g. animating navigation bars away while scrolling or hiding buttons in multi-step interaction.
Everyone’s app has different goals, but good app design is universal. Apply these steps for your next app version and send me your thoughts on Twitter @amitpaka. p.s. download Parable.
