All you need to know to get started with mobile app design.
[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.
Latest Videos From Creative Bloq
Which platform should I design for?
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.
What tools should I use?
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.
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):
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
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.
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.
Tammy is an independent creative professional, author of Apple Game Frameworks and Technologies, and the maker behind the AdventureGameKit – a custom SpriteKit framework for building point and click adventure games. As an innovative problem solver and industry leader, Tammy enjoys working on projects from content creation – including books, tutorials, videos, and podcasts – to the design and development of cross-platform applications and games. For Creative Bloq, she has written about an array of subjects, including animation, web design and character design.
![Mobile app design [Image: Pixabay]](https://cdn.mos.cms.futurecdn.net/x6CKadQhsnwUUonx3P4jR9-795-80.jpg.webp)
