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.
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.
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.
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.
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.
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.
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.
Mobile Apps Design Examples
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?