Designing Mobile Apps, Where to Start?

Mobile Design is an area of design that started to develop and evolve a couple of years ago. With the launch of the iPhone and the App Store in 2008, the development of mobile applications started to become a more interesting market, since there was finally good mobile hardware and ecosystem. With the development of more and more mobile apps, the design of such apps started to become increasingly more important, to create a good experience to the user, while creating powerful applications.

Nowadays the design and development of mobile applications is a reality, and you already know that. But if you haven’t yet hopped on the mobile design wagon, in this article you’ll be able to find what are the most important things you have to do to start designing mobile apps right away.

Know your market

One of the first things you should do to prepare and inform yourself to design mobile apps, is to own a smartphone. This should be obvious, but it’s still one of the things I found to be the biggest advantage for me while designing mobile apps, was being a heavy mobile user for some years. You should try be a user before being a designer, and by using the device and its apps, it will be a lot easier to understand the needs and the problems about a mobile application. Your focus should always be on either iPhone or Android, since these are the two most common platforms and OS’s developed for. Recently, with the launch of the Windows Phone 7, there’s also a market and people designing for that platform, and even though you should be aware of the kinds of applications designed there, I’d still recommend you to focus on iOS and Android, at least for the time being.

The biggest difference between developing a mobile application and a desktop application or even a website, is context, and this is what makes these mobile apps so powerful and interesting. Each app is used for its own purpose, on a specific time and place. If you’re creating a restaurant guide, you’ll want to create something that show the most relevant results to the user in the least time, since the user will probably be on the street or on the move, and is looking for a quick recommendation. This opens a lot of possibilities for innovation in mobile development, and as a designer you should always be informed of and testing the latest apps to be up to date on what is being created.

So, if by any chance you’re still not a smartphone user, go get one and start downloading and testing these apps, as this user experience is definitely one of the most important things for you to design a rich and powerful mobile application. And don’t restrain yourself to the device you own, try to be informed about the others too. You can check some screenshots of the applications in each market, App Store for iOS, Google Play for Android and Apps+Games for Windows Phone. I recommend you check one service and how this service spans between mobile platforms, this way you can see the style and differences between each platform. As an example, you can see here Facebook for iOS, Android and Windows Phone.

Facebook mobile

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

You should also consult the official documents on design guidelines for each platform, since each has its own style and guidelines to follow. You can check iOS Human Interface Guidelines, Android User Interface Guidelines and User Experience Design Guidelines for Windows Phone.

Visual Inspiration

The mobile ecosystem is one constantly changing and evolving based on experimentation and innovation, and there are a lot of approaches being designed everyday. From reading applications, to photo sharing and productivity and to-do lists, there’s all kinds of apps available to the user. Each and every one of these apps have a specific visual style and tone, depending on the objective and context of the app.

Visual knowledge is something that every designer should improve in any field. In mobile design I believe it’s even more important, since everyday there’s a new interface, a new design pattern, a new mobile style. By watching and analyzing others designs, it gives you, the designer, a better knowledge and a bigger visual information for every time you need to work on a project of your own.

Inspiration

You should inspire yourself in the great mobile apps that are being created as we speak. Sites like mobile-patterns.com and pttrns.com have hundreds of high quality screens of mobile applications. If you want to check some inspiration on iOS icons, that is essentially your app’s brand, you can also visit iicns.com.

Visual inspiration it’s not only important because of the looks of your app, but also because of the way the user interacts with it. Try to learn all possible gestures, understand how the user wants to interact with the app, and ask yourself what’s the easiest and most natural way to accomplish an action, and how can you really innovate in this area?

Mobile Design Patterns

Before starting to design, you should study the existing patterns of mobile design, and design with the user expectations in mind. I’ll be giving a small explanation.

A design pattern is defined as a general repeatable solution to a commonly occurring problem in software design. Theresa Neil wrote a really great about Mobile Design Patterns, and you can check most of those and get the book at mobiledesignpatterngallery.com.

Patterns

In these patterns, you can study and analyze various kinds of interfaces, menus and navigations, and use those as a foundation for your mobile app design, based on your content and your app objective. There are several ways to accomplish the same action in mobile, and it’s up to you, the designer, to design and choose the most effective way. Design Patterns are really helpful as you can see in a simple way what solutions already exist and how it affects your interface. This is where you will first start your design, in your head, by mentally testing these layouts, and thinking what is more adequate for your own app.

Ask yourself these questions: “What is my app main goal?”, “How many and What are the most important sections in my app”, “What kind of actions should be available to the user through-out the app use?”. These are questions that will help you choose your patterns and define your app base layout.

Start Designing

After being informed, testing, watching, inspiring, comparing what’s out there and knowing what you can and should be doing, now is the time to hop the design wagon. But, and depending on the type of person you are, you shouldn’t jump right in to Photoshop and create pixels. Think, sketch, prototype and iterate.

For sketching, you can get an iPhone sketchbook to help you design in an iPhone grid, or just download one of their free templates and print your own. This will help you sketch your design ideas right into an iPhone layout and preview it right on paper.

After some sketching, you should probably want to build a basic version of your app, your prototype. There are a lot of prototyping applications to help you out, but be sure to choose one that already has an iPhone template, so that you can easily build your app skeleton just by dragging and dropping elements to get a feel of what you’re trying to achieve.

iOS Elements

Once you have your screens and app layout laid out, you can start creating those final polished pixels in Photoshop. I’d recommend you to get a good PSD such as this teehan+lax iOS templates to work on. This way you don’t need to design the default iOS elements such as buttons, select menu, notifications, etc. Don’t worry if you’re designing for Android, there’s also a template for that.

There are also a lot of design resources available already, that you can use to help you design your app. Pandora UI from Designmodo is a complete and detailed user interface pack, available with various different styles to help you achieve quickly and easily your preferred style and tone on your own app.

Pandora UI

Mobile Apps Design Examples

Final Remarks

So these are the most important things to start designing mobile apps right away. As always, everyone has its own workflow and preferred apps, so try to choose your platform, your preferred design software, your template and start being creative on the mobile area, it’s a great platform to design in.

When your design is done, try to work as closely as possible to the developer, ensuring that your vision and design is developed exactly as you imagined, and so that you can help guide and give all the assets needed to the developer. Just as in web development, this is a tricky and sometimes boring job, but it has to be done so that your final product is exactly as you want.

Let us know in the comments if you’re already a mobile designer, and if so, what’s your work process?

I'm an Interactive and Web/Mobile Designer who also writes code for the web. Co-founder and designer at unplu.gg, I sometimes also write at antoniopratas.com. You can follow me on twitter at @antoniopratas.

Newsletter

7 Comments
  1. Sandeep Apr 11, 6:15 pm

    Excellent article to kick off designing mobile apps! great points and example

    Reply
    +8
  2. Faidon Apr 11, 7:48 pm

    Another very useful website with nice mobile design examples (just for iPhone though) is http://www.mobilemozaic.com/

    You can browse by category or UI pattern.

    Reply
    +2
  3. Ricardo Apr 11, 11:59 pm

    Whoa! What a nice piece of article. I’ve bookmarked it and i will be back to it when office hours are over :) it’s worth to have my full attention.

    Thanks António Pratas.

    Reply
    +1
  4. Vallen Apr 13, 10:12 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -5
  5. Richard Bennett Apr 16, 10:54 pm

    Mobile designer/developer here.

    I personally love LiveWires for iPad. I build app wire frames with it on the go, all the time.

    I’m primarily a hybrid HTML5 developer, so when I design the UI and work through the UX for an app, I’m trying to be as platform-agnostic as I can.

    iOS is great in terms of potential market, but platforms like Android & BB10 are much easier to gain exposure on due to the limited amount of quality (ahem, _usable_) apps.

    Look for inspiration on dribbble, meer.li, mobile-patterns, and even Google image search (although the more prevalent results are not always the best designed).

    Great article. :]

    Reply
    +4
  6. Steven Hoober May 5, 9:15 pm

    Thanks for the perfect example of how no one understands what it takes to make non-terrible mobile experiences. That so very many people don’t understand interaction, transition, IA, information design, or think of the user at all for that matter. The examples are mostly atrocious, as well. Totally the wrong kind of widget for the selection happening, over and over. But it’s shiny!

    Yes, I can do better. Google my name for (well read) books and articles about designing for users, for services, for interaction and success. Keep going and find many others who talk about the deeper, more important issues of design and strategy.

    Reply
    -4
  7. Phil Jan 8, 10:06 am

    What about the technical side of it?
    What languages and skills do we need to actually be able to make one

    cheers

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters