smart home mobile app design

Mobile app design: A beginner's guide

[Image: Pixabay]

So, you've decided to try mobile app design, but you're not sure where to start. No worries, we've got you covered. In this article, we'll outline five things you need to know to help get you started in mobile app design.

This guide is aimed at beginners to mobile app design. If you've already got some skills, take a look at our roundup of tutorials that will walk you through different aspects of how to make an app, in detail.

What is mobile app design?

To put it in very broad terms, app designers are in charge of making an app look good, while developers make it work correctly. Mobile app design encompasses both the user interface (UI) and user experience (UX). Designers are responsible for the overall style of the app, including things like the colour scheme, font selection, and the types of buttons and widgets the user will use. So, where do you start? At the beginning.

Which platform should I design for?

Two mobile phones — Android or iOS? [Image: Pixabay]

Depending on your reasons for wanting to design mobile apps, you may already know which platform you want to work with and why. But, if you're just starting out and you're not sure which is right for you, got for the one you're most familiar with.

If you're using an Android phone, design for Android. If you're using an iOS device, start there. Alternatively, you could decide design for both, but it's best not to bite off more than you can chew – at least not in the beginning.

Photoshop, Adobe XD and Sketch logos — Photoshop, Adobe XD and Sketch are all strong contenders

Once you know what platform you're designing for, the next step is to select the right web design tools to get the job done. When it comes to designing mobile apps, the good news is that regardless of the platform, you can generally use the same tools for both.

Popular options for app design include Adobe Photoshop, Adobe XD, and Sketch. There are many, many more, but these are the heavy hitters in the industry. Sign up for Adobe Creative Cloud here.

You might think Photoshop is your best option for mobile app design – especially if you've used it for other types of design work – however when it comes to designing mobile apps, you're better off with Adobe XD or Sketch. That said, Sketch is considered the de facto standard here, although Adobe XD is putting in some strong competition, having recently added design systems.

One of the biggest reasons for using Adobe XD or Sketch over something like Photoshop is that these two tools are built with designing and prototyping in mind. They help streamline your design workflows and are targeted at UI and UX designers, whereas Photoshop is more for image manipulation.

One important note here: If you're planning on cross-platform development or support, Adobe XD is the clear winner here as Sketch is only available on macOS.

OS design guidelines

Before you start designing, because you first need to understand the dos and don'ts of your platform. Generally speaking, mobile app design shares some similarities between the different operating systems, such as:

Goal-driven design
Keep it simple (less is more)
Maintain the flow
Readability is key
Respect the platform

That last one, 'respect the platform', is more important than you may realise. When users download and install an app to their device, they expect it to behave in a way that's familiar and intuitive to them. They base their opinions on what they know, so when an app goes against 90 per cent of the OS-specific design rules, users are likely to delete it.

Not only do you need to consider the different navigation patterns that iOS and Android have, but you also need to think about buttons, font selection, and placement of UI objects – all of which vary for each platform.

The good news is that you don't need to guess what's acceptable. Both Apple and Android have a set of design guidelines that you can review before you get started (and while you're actively designing):

iOS Human Interface Guidelines
Android Design Guidelines

Wireframes and app flow

A wireframe drawn in pen — Use a dedicated wireframe tool, or stick to pen and paper [Image: Pixabay]

Before designing an app's look and feel, it's essential to work on its flow control and structure. This is where wireframes come into play. Wireframes help you understand how users will navigate and use an app. They're generally simplified in their design so that the focus is on flow and usability.

While there are many dedicated wireframe tools, it's not uncommon for designers to simply use a pen and paper. However, if you're looking for something more hi-tech and collaborative (which is especially important when you're working with a remote team), consider creating your wireframes in Sketch or Adobe XD. The benefit of using these tools for wireframing is that you can turn your low-fidelity wireframes into high-fidelity previews with relative ease.

Note: With Adobe XD, you can even grab yourself some free kits to help get you started.

Mockups and prototypes

Visualisation of a mobile app design — Time to turn your wireframes into working products [Image: Pixabay]

Once you've worked through your wireframes and shared them with the development team and/or your client for discussion and approval, it's time to make some mockups and prototypes.

This step is generally easier if you've used the same design tool to create both your wireframes and your mobile app design. If you haven't it might take you a little longer to populate your design tool, but once you do, you're well on your way. Many tools, including UXPin (which integrates with Sketch), include ways to annotate your wireframes with the detailed information required by devs, to remove the need for any guesswork.

While you're working on the app's design is an excellent time to start building a shared library of assets. For example, standard buttons, icons, and other elements that you create here might prove useful in other apps you design, so make sure you save them.

Find out more about this step in our article: 4 different ways to create website and app mockups.

Handing over to development

Someone handing a wireframe drawing to someone else — This step won't actually look like this [Image: Pixabay]

Designers are also responsible for delivering these elements and visual assets to the developer. Things like icons, backgrounds, logos, and even fonts, are all things a designer might hand off to a developer.

Once the developer has everything they need, it's their job to take that design – and its various parts – and make it work. Sometimes, however, a designer doesn't understand the limitations a developer faces. And when that happens, all hell breaks loose.

As a mobile app designer, you could ignore the developer and the development process altogether, but it's better to understand the challenges a developer faces, whether they be with the tools they're using or the limitations of the operating system and/or devices on which your apps will run. Armed with this knowledge, you can design mobile apps more efficiently, with less push back from your developer, while at the same time fostering a more collaborative environment.

Read more:

How to create an app with Vue.js
Get to grips with mobile app onboarding
Top Sketch plugins to try

Tammy is an independent creative professional. She enjoys working on projects from content creation – including books, tutorials, videos, and podcasts – to the design and development of cross-platform applications and games.