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:
- The typeface you select. It should align with your branding
- How type is set. Carefully kerning a headline or adjusting a paragraph makes a huge difference!
- 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 palette—and 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: