Mobile app design
the new basics

Mobile app design the new basics

Good mobile app design is hard to notice because it fit our needs so well and serving us without drawing attention to itself.

Details in detail—we spend years designing commercial mobile apps. Today we’d like to share some common basic we’ve learned so far.

Last updated — Oct 06, 2018


1. Shading background to emphasise the Card UI

01 Mobile App Design — Do
01 Mobile App Design — Don't

Instead of a pure white background colour #ffffff, try slightly shading of grey to make the white card UI more visibility and smoother its drop shadow. Something like #fafafa or #f8f8f8 is very close to white #ffffff but still shading nicely.

2. Define one colour for CTA.

02 Mobile App Design — Do
02 Mobile App Design — Don't

Try to define/limit one accent colour (complementary colour of the primary brand colour) for clickable jobs, such as CTA, button, hyperlink, etc. So it easy for people to recognise and expect which elements that they can interact with. Don’t mix that colour with non-clickable things such as headline, body-text or an icon (if you do not plan to make it clickable). 

3. Add at least 24px invisible touchable area on top of the small icons.

03 Mobile App Design — Do
03 Mobile App Design — Don't

Unified a decent touchable area around the utility icon will merely improve the ability to touch that icon. Make sure you communicate with the engineer teams that there is an invisible space around the icon not just true pixels of width and high on the icon itself.

4. Formulate an input with its button.

04 Mobile App Design — Do
04 Mobile App Design — Don't

In mobile app design, a consistent visual clue will help people recognise the elements that belong together and digest the information faster.

5. Differentiate primary from secondary actions.

05 Mobile App Design — Do
05 Mobile App Design — Don't

As a mobile app designer, we intend to help people focus on one thing (that matter) at a time. Differentiate primary from secondary actions is a great technique that helps people stay on the right track. Bonus — make a primary action right-hand side.

6. Try a ghost button for multi-choice options.

6. Try a ghost button for multi-choice options.

06 Mobile App Design — Do
06 Mobile App Design — Don't

Ghost button is the outline style button. We usually use it for secondary action. On the other hand, the solid button is a colour filled-out button and the majority we use it for decisive action. For more than 3 multi-choice options, we shouldn’t stack solid buttons on top of each other because it makes all option become an important option. As you can imagine, once everything important nothing is important. Moreover, it also makes a screen feel off balance.

See how we applied

See how we applied

interviwo Portfolio Cover

Interviwo App

Interviwo App

Mobile app design for a video interview platform that simplifies the early stages of the recruiting process.

freelancer Portfolio Cover

Freelancer App

Freelancer Apps

iOS, Android and Mobile Web app design for a global crowdsourcing marketplace company (25+ million users).

7. Show all selection options if under 6.

07 Mobile App Design — Do
07 Mobile App Design — Don't

A selector drop-down requires two clicks and hides the options. Moreover, a selector drop-down UI also separates a controller with its result. Try to use a pattern that shows all options if it less than 6 options in the mobile app design.

8. Make CTA descriptive.

8. Make CTA descriptive.

08 Mobile App Design — Do
08 Mobile App Design — Don't

A call to action (CTA) should state the intent. Try to fill the blank space of  "I want to ..." when you writing for a CTA. For example, at a "Sign up page" — as a user I want to "Sign up".

9. Avoid extensive information on the splash screen.

09 Mobile App Design — Do
09 Mobile App Design — Don't

Try to avoid putting a long company slogan or massive visual design that people need some time to process on a splash screen (a first split second page that people see first when they open the app). The splash is like a highway billboard, we need to communicate at a feeling level not Thinking level. If you are not so creative, just make it relevant to the app icon is good enough.

10. Make navigation visible.

10 Mobile App Design — Do
10 Mobile App Design — Don't

When you design a new app, it’s a good practice to start your mobile app design foundation around the navbar, not the hamburger menu. It will help you to focus on a core value of the app.

Bonus; a typical mobile nav bar layout.

Position 01—Core Value i.e. Explore, Feed, Article, etc.
Position 02—Discovery i.e. Search, Bookmark, Saved, etc.
Position 03—Core Action i.e. Take a photo, Create a new article, etc.
Position 04—Inform i.e. Notifications, Messenger, Inbox, etc.
Position 05—Others i.e. Setting, Secondary Menu, Account, etc.

You don’t have to follow this basic layout, be creative.

11. Give a clue and context about why they can’t go.

11 Mobile App Design — Do
11 Mobile App Design — Don't

If the user needs to do something before they can process to the next step. Make it clear that something is missing. For example, if the users have to accept the terms before they can continue to the next screen, you may make a CTA disable and dynamically communicate with them with the context (Message in the CTA).

12. Focus on one (or related group key-behaviour) at a time for a long forms mobile app design.

12 Mobile App Design — Do
12 Mobile App Design — Don't

Focus on one thing until success at a time to helps people minimise a cognitive load. Keep in mind, in the most scenario the keyboard interface will take a lot of the valuable real estate of the screen in order to assist you to fill out the form, so use it wisely.

Are we missing something here? Let us know

Are we missing something here? Let us know

See how we applied

See how we applied

uno refi Portfolio Cover

uno mobile web

uno mobile web

Mobile web app for an online mortgage broker that help Australians win home loans through smart technology.

handled Portfolio Cover

Handled App

Handled App

iOS app design, in-app brand identity for a startup tech company that helps people get on a better energy deal. 

© 2019—Kocha Studio  ·  Privacy

Kocha's Twitter     Kocha's Medium     Kocha's Linkedin     Kocha's Dribbble

Get in touch

220 Pacific Hwy
Crows Nest NSW 2065

What can we do for you? Let us know