Mobile App UI Design: 10 Key Principles For Beginners

CareerFoundry Blog contributor 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 in 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. Keep these considerations in mind, find the right mobile app design tool for you, and know your color paletteand chances are that you’ll do better than you might imagine.

And for an example of what a mobile app done right looks like, read our article on what makes the TikTok UI so good.

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

What You Should Do Now

  1. Get a hands-on introduction to UI design and design your very first app screen with a free, self-paced UI design short course.

  2. Take part in one of our FREE live online UI design events with industry experts, and read about UI graduate Florian’s career change to product design.

  3. Become a qualified UI designer in just 4-9 months—complete with a job guarantee.

  4. This month, we’re offering a partial scholarship worth up to $1,365 off on all of our career-change programs to the first 100 students who apply 🎉 Book your application call and secure your spot now!

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs
blog-footer-image