This is a 2018 update from the article that first appeared on CreativeBloq.
Specialists generally assume that everything they know is obvious, and need to remind themselves that isn’t the case for most of the population.
What specialists do have is a speed at which they make decisions in their work. This is reflective of the years of targeted work and experience, and not an assumed reality that everyone possess. There is a point when a specialist has to step back and view the bigger picture of life, otherwise they remain interested in only the thoughts of other specialist; in effect making art for other artists.
One of the more valuable things that can be taught are the assumptions used to make decisions; an explanation of the strict rule set designers use will help others learn to ride their bikes quicker.
So here are 16 tips on mobile app design. Let’s go!
Let’s go. Mobile app design for non-designers:
1) Everything exists on a grid.
There’s an invisible grid on every surface. You may not see it, but it’s there to guide you.
2) Every element defines the spacing.The moment a dot, a word, a line is placed onto a canvas/monitor/screen, you have defined your grid – and thus defined your margins and padding. Every stroke defines the space you have to work with.With that, make sure to maintain consistent widths and heights with the margins and padding. Sixty pixels in one place and 20px in another had better have a good reason behind it (like one section is a child of the other). Otherwise, all should be the same.(Hey, wanna hear my favorite Joke? How do you hide from a developer?Answer: you dress up as margins or padding. Har harrr harr.)
3) Value creates hierarchy.
Value, how light or dark something is, should be used to denote purpose. Let’s start with black and grayscale. If you make one button black, the next dark grey, and the third light grey, what you are in effect saying is this : “Button one is most important to the visitor, button 2 is less important, and button 3 is least important”. An odd truth I’ve noticed is that red buttons aren’t as well received as other colors. I recommend avoiding making the “buy” or other call to actions buttons in a bright red—as that means stop in the US, and may actually prevent users from clicking it, often thinking it won’t get them to their goal.
This brings up the next point which is that color associations are culturally based and should be considered when defining the market. (As a side note, I worked on a team that had the main ‘access’ button as red which we later changed to green resulting in increased clicks by 2 fold.)Red can mean, “stop, don’t do it, are you sure? warning!” being aware of this will help you get results closer aligned to your needs.
4) Color is not about you liking it, it’s about the brand.
Brand is focused on the emotional relationship your consumers or customers have with your service or product. Color helps define that relationship in subtle yet effective ways. You don’t have to like your colors for them to be effective. You are probably not the target audience. The second you move onto the other side and become a creator of media – you are no longer the audience. So stop phrasing everything from your point of view!
5) Pink is not a shade of red.
Learn the meaning behind ‘shade’ and ‘tint’ as I will be all over you for misusing it in conversation. Color 101: Hue is the base color, like red, blue, green, etc. If white is added to a color, it is a tint of that color, if black is added, it is a shade of that color. Got it? Thus when describing the color of something it may have a red hue and be a shade or a tint but not both at the same time. What about Canary you ask? That’s a marketing color name used to inconsistently refer to furniture or nail polish.
I use colors like ‘Robins Blue,’ ‘Pumpkin Pie,’ and ‘Baby Vomit,’ when speaking with clients because it humanizes colors and gives then an appropriate association – but when speaking technically – use the words shade and tint. Oh, and whats baby vomit you ask? Thats a color I’ve been seeing creep up in logos as of late. I’ve always thought it couldn’t get worse when a client insist on using Corporate Blue. Well, it sure can. The new villain is Baby Vomit.
6) Logos add style but they don’t make or break
A brand makes the client as much as the client makes the brand. A logo isn’t going to make you a great business: but a poorly executed and thought out logo will reflect poorly on your business.
One of the things people say is that a logo is timeless. By default, design is trendy, therefore a logo cannot be timeless. Logos are stuck by the age they were created in. There’s nothing wrong with that. CocaCola isn’t timeless – it very much feels reminiscent of the 1920’s – around the time it was designed. It’s been updated to a clean vector since then, helping it feel appropriate to our sensibilities, but the essence is vintage – not modern.
And while we’re on the topic of logos – lets be clear – logos do not a brand make. They are one of the steps in understanding the language and effect of what a brand needs to embody. In addition to the voice – which creates the initial vibe – you have a series of components that need to be clarified in the visual language. You have to address the edge quality (round, smooth, sharp), stroke quality ( is it loose, naive, varied, thick), style (vintage, modern, flat, cowboy, disco), and of course content (the actual tangible associates consumers have with the art used) – all this in the full display of content, not simply the minor point of a logo.
7) The page title.
Screen titles on websites are excellent ways to remind the user of where they are after they opened 35 tabs and don’t recall the content. In apps, they take up precious space, and real-estate here is more expensive than in Manhattan, so if you think your user won’t forget which screen they’re on, you can sometimes skip it, or have it disappear (pull to display guys). (Although, titles do frame the screen well, and can give the design a polished look.
8)Define elements, then repeat them, this is a style guide.
For example if one ‘go’ button is the color purple, then all ‘go’ buttons should be the color purple. If one screen has 20px padding on all side, all screens should maintain this consistency. This is what we mean by defining elements and repeating them, each active point in an app should be consistently rendered, as should the colors inside the app.
9) Simple tricks can be used to separate text and create hierarchy.
All caps, title case, indent, contrast, and underline. They’re stylistic choices, none are necessarily better than any other and you can use them in any place as long as you are consistent.
10) Outdated is another word for not-trendy.
Design is focused on trends, and currently, the trend is to move toward a more flat design. Flat design does not mean it has no texture or shadows, nor does skeumorphic mean that every aspect should have a realistic texture. Generally you should be aware of what your audience will expect to see, as they will judge you for it. If your app looks outdated – users will note that.
“Skeuomorphism is a catch-all term for when objects retain ornamental elements of past, derivative iterations – elements that are no longer necessary to the current objects’ functions.” (Austin Carr– design and technology writer for Fast Company)
11) The majority of experiences in a mobile app is just a list.
The job of the designer is to hide the fact that it is just a list and make it an interesting experience that is both rewarding and fun. This is why information architecture and proper hierarchy is so important, with the right foundation, the layout can be very varied yet convey the same information. All the above examples show a list organized in space that isn’t always top-down.
12) How to make a decision on a layout.
Designers who have worked on product have experience which becomes intuition – this is number 1, after that, or without it, there are pattern libraries. Design libraries exist to help decide which layout is the best for a particular problem. Check here.
13) Each actions requires feedback, and fast.
Users have an expectation. This is that mobile phones will respond quickly, and efficiently to all their interactions. This isn’t always the case, and developers frequently tell me that certain interactions take a long time.
Find a way to fake it.
Make elements fade in if the server can’t get all the content at once. It’ll at least seem intentional—and more importantly—it’ll seem polished. When a user action (swipe, tap, click) is responded to with an animation, this gives the user feedback that they have been heard and their process is being executed on. Every interaction should have feedback. Re-read that last sentence, and this time image it in all bold caps. That’s how important it is.
Think about how it works in web design—when a user hovers over a button, it changes, and then again, on click: it changes—this should occur in mobile as well. If the user refreshes their needs to be a moving symbol, if they hit something: it should slide/glow/bounce—anything to let that user know that it is working. Feedback animations also give the system time to process the original interaction or call, making it appear like it was instant. A lot of interaction design is smoke and mirrors.
14) Postpone sign up.
Sign up on one page. Have the user signup once they “like” or “heart” an item, allow them to get engaged first. You’ll have significant user drop off from logins and usually the sign up does’t offer much value to the brand anyway.And SRSLY. Who are these people who still use a “confirm password” field. STOP.
15) When do you use a fancy font?
When designing comps, time can be better spent elsewhere. Most people quickly distinguish between serif, sans, decorative, or condensed but frequently think slab is serif, humanist is sans, and anything Jessica Hische is decorative. The most important considerations for selecting a font are:- can I easily use it on mobile/web- is there a variety of weights- is it legible
I subscribe to the belief that type design takes a really really really long time to get good at let alone master, so just pick a type from a good foundry and there shouldn’t be much of an issue.
With your mobile apps, keep in mind that a good number of users cannot distinguish between Arial, Avenir, Roboto, or Helvetica. This means that as long as the typeface is clean and easy to read, your’e ok. The time to add in a more complexly flavored font is when you’re focusing on brand, and less on usability. In this case, the new, atypical font will create a feeling of being somewhere, perhaps nostalgia, maybe even whimsy. Whether or not you do this is based on your decided priorities, but it isn’t something to get hung up on.
Or just remember this:
Roboto is Android (for meow).
iOS updated their default font to be San Francisco. If you’re not sure how or when to use the different variations it comes with then checkout this article.
16) Each system has visual guidelines.Android, Microsoft phone, and iPhone have design guidelines that cover different design styles and are rather detailed with specific information like widths between text. They’re a great resource when you’re not sure how to proceed. This is a good round up of rules to get you started. Let me know your thoughts!(A few images were borrowed from google, if you know who to attribute them to, give me a shout out. valerie @ swarmnyc.com)