A UI designer scrolling through a mobile app on their smartphone

Mobile App UI Design: 10 Key Principles For Beginners

Maria de la Riva

Your first mobile app design project should be exciting, not intimidating. With a clear roadmap and the right considerations in mind, the design process is enjoyable and much lighter than you’d expect.

If you are a new designer just getting started, here are ten key points to keep in mind when designing your first mobile interface.

10 Key Considerations For Your First Mobile App Design Project


1. Users

Everything we do revolves around our users and their needs. Before coloring in the first pixel, stop to review your research.

Who are your users? What matters most to them? Why? Reference your personas throughout your design process and remember to put yourself in your user’s shoes. Are the choices you are making helping them accomplish their goals or getting in the way? Empathize always!

2. Platforms

iOS and Android require that we consider different style philosophies and platform-specific conventions. They don’t look or behave the same way. To create an app that a user feels at home in, aim to align with the guidelines that each platform offers.

If you’re designing for Android, you can find everything you need to know here. If you are designing for iOS, go here.

When creating bespoke UI components or elements for your interface, do so considering platform guidelines. Use color, typography, and any other visual design elements in a way that aligns with what is recommended. Yes, the structure will be new, but the elements will feel like they belong on the platform.

3. Branding

When designing a mobile interface, it’s important to consider the wider brand. If the app you’re creating is part of a family of products, you’ll need to adhere to the brand colors, logo, and typography. Which brings us onto the next key principle…

4. Consistency

Our screens are made up of a bunch of reusable parts, otherwise known as UI elements. When designing our first mobile app, our goal isn’t to be inventive with every instance, but rather, to keep these elements consistent. If primary buttons are blue and rounded, for example, they should always be blue and rounded, no matter where we use them.

We also want to be consistent with what is being done in other products, platform, and industry conventions. Aligning with what is commonly used elsewhere will help you create an interface that feels familiar to your users, making it easier for them to use it.

I like to use the example of the search icon with students. It’s a little magnifying glass, and appears as such everywhere. Are there other symbols that can say “search?” Absolutely. But, because they are not what we commonly see being used, any other icon would mean taking time to figure out what it does. This can create a frustrating user experience!

5. Spacing System

Before you begin, define a spacing system.

Spacing systems use a base number for your grid that will govern not only the space between elements, but also their dimensions.

Say we select the number 8 as our base number. Your grid, the space around elements, their dimensions, and even your type should then be informed by the number 8—or in other words, be multiples of 8. Here is a fantastic article detailing how to set one up. 

6. Hierarchy

Hierarchy creates a visual order that makes content easy to digest and navigate.

We want to use the different visual design elements, like color, size and typography, to help us generate hierarchy on a screen. This will make it easy for the user to make his or her way around our app.

Before diving into a screen, ask yourself: what should the user be able to do here? We should prioritize elements that help the user perform this action.

7. Typography

From how it is set to what size it is, everything about your copy is hugely important! Text is a big part of interfaces. Pay close attention to:

  1. The typeface you select. It should align with your branding
  2. How type is set. Carefully kerning a headline or adjusting a paragraph makes a huge difference!
  3. Size. Material Design offers a great typography section to help you define your sizes

8. Cursor versus Thumbs

On the web, we’ve got a nifty cursor to help us click on things. On a mobile phone, we’ve got our fingers.

Aim to create a comfortable tapping experience. When elements are too close to each other, for example, it is easy to tap on one meaning to tap on the other. This is frustrating!

Pull up your design on apps like Sketch Mirror and tap away. How comfortable is it?

9. Custom Components

You’ll want to align with native UI elements and platform-specific components as much as possible. However, you’ll almost always have to create a custom part.

When doing so, study how each platform recommends you use color, type, and other visual design elements. As you create this nifty new part, apply the best practices defined for each visual design element to it.

10. Microcopy

It may not be a visual design element, but the copy you use on your interface can make or break the experience. Carefully selecting the words you’ll use on buttons or error states, for example, can enhance the experience.

If you’re working with a copywriter, sit down with them to discuss what it should sound like and to share with them what the user should be able to do on every flow.

If you’re flying solo, reference your brand guidelines to define how your app should sound and propose copy that aligns with it.

Mobile App Design: The Takeaway

Your very first app can be scary, but don’t let fear get the best of you! Dive in and give it your best shot. You’ll do better than you can imagine and will also learn valuable lessons you’ll be able to apply to your next app. It is all part of the learning cycle!

Happy designing!

If you’d like to learn more about mobile app design, take a look at these guides:

What You Should Do Now

  1. If you’d like a step-by-step intro to find out if UI design is right for you - sign up here for our free 7-day UI short course.
  2. If you are interested in becoming a UI Designer check out our UI design course (you'll learn the essential skills employers need).
  3. If you’d like to speak to an expert Career Advisor for free about how you can really get a new job in tech - connect with us here.

If you enjoyed this article then so will your friends, why not share it...

Maria de la Riva

Maria de la Riva

UX/UI Designer

Maria de la Riva is a UX/UI Designer digital nomad. For the past 4 years, she’s worked with online education startups, like CareerFoundry, mentoring and writing curriculum content. Currently, she is Head of Product at Iguama Inc., a startup developing the technology loyalty programs need to help their users redeem points on online retailers. Maria is an avid diver and sailor.