Apps World Series

Navigation Area

Apps World

Pioneering innovation in multiplatform apps

Understanding the key principles of App design to create the best UI possible.png

Understanding the key principles of App design to create the best UI possible Article

App design has steadily evolved since the release of the very first iPhone. An app’s user interface is intrinsically linked to their user experience. What is considered ‘en vogue’ in app design is continually changing, but there are key principles that have stood the test of time.


Creating the app’s workflow is integral to the app’s success. When designing the workflow, it is important to consider all possible user journeys. Not every user will use your product in the same way. From the offset take time to plan out the workflow, the wireframing stage is the perfect opportunity to consider your diverse user group before creating the full visuals.


Space is important in app design. A cluttered interface can distract the users from the text and actions on the screen. The app Service is a great example of the importance of space. The customer service app uses large open space around text boxes and icons, making the contents clear.  Using one screen for a single sentence and icon, instantly draws the user’s eye to the important content.

Space---Service Space---Service-2

Tappable elements

Nothing within an app should be tricky to find or action, navigation should be simple and large tappable elements are key to achieving this. This Duolingo animation shows off the value of maximising the size of tappable elements. Duolingo have incorporated these elements seamlessly into their interface, matching space and primary colours to make navigation super easy. Tappable elements should also let the user know they have completed an action, whether this be through a change in colour, opacity or an animation.

Buttons Duolingo GIF

(Credit – Duolingo by Frank Rapacciuolo)

Consistent colour

The colour palette you choose for your app should be consistent. There are some awesome examples of the use of colour. The Trainline app is an all rounder in app design, the use of the brand’s key colours; mint green and dark blue not only solidify the brand identity, but enhance navigation.

Consistent-colour---Trainline Consistent-colour---Trainline-2


Again, considering the diversity of your users and their devices is essential in app design. It may sound obvious but not everyone has the same size hands, reaching those top corners on an iPhone 6 + isn’t always easy. New video streaming app, Hyper maximises these principles to provide both the best UI and UX. The app has removed the standard hamburger menu for settings and instead the settings page is a simple two swipes left from the main feed. This feature is accessible to all users, creating a seamless and uncluttered interface.


These key principles of app design create an engaging user interface, that not only looks great but enhances the user experience. Sticking to these cores principles provide the foundation of an app users will love.

By Lucinda Vieira-Martins

Lucinda is lead UX/ UI Designer at Red C, a mobile app design and development agency, based in London. A product design graduate from Central Saint Martins, applying her skills to the world of app and web design. Obsessed with all things design, crafting wireframes and high quality visuals.

Don’t forget you can learn from amazing developers on topics including Design, UX & UI at Apps World 2016 in London.

Apps World Developer Banner

Tags: , , ,

  • Share this post:


  • Great stuff and extremely useful, especially with regards to optimising the use of negative space and not cluttering the screen. So often overlooked by many a designer :)

  • All the points mentioned above are extremely useful while developing an app with great UI. Thanks for the article.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>