Creating your own Android app: Part 3 – Design

Introduction

The Android platform has millions of users and is growing each day. With this growth so do the number of people that want to explore the platform by creating their own Android app. While a lot of those people are professional software developers, there are many that have little to no experience in developing and publishing software. This led me to write this series on creating your own Android app: “Creating your own Android app, from vision to reality”

In this series I will be covering the development cycle from concept to deployment. I Will give my recommendations on what steps you should undertake to get your app to the public.

Keep in mind this series is meant to be a helpful guide and not a set of instructions that should be followed exactly step by step. Try out what steps work best for you and in the I hope you will have a software development cycle that gives great results.

In this post I will be covering the design stage. If you have not yet read the previous chapters I advice to read them first:
Part 1 – Concept
Part 2 – Planning

I Hope you will enjoy reading the series as much as I have writing it.

– Martin

Design

In the design stage you will finally get to see how your app is going to look like. You will sketch out your user interface and create mockups of the end product. If you have no designing experience this step might be a lot harder than it looks. Decide if you have the ability to create a nice looking user interface, do you have the creative skills or will it be better to outsource the work? A Good design will lift a fair app to good and a good app to excellent. The common mistake for companies that outsource the design is to try to get the job done for the least amount of money. I Cannot stress enough that you should not try to cut corners here, go with a good designer, ask for a portfolio and references.

If you do decide on tackling the design stage yourself and you are new to world of designing I can recommend the book “The Non-Designer’s Design and Type Books, Deluxe Edition”. The book is easy to read and shows simple design concepts with good examples. Even if you are not going to design your own app you might give this book a try since it is also very helpful when creating nice looking documents, business cards etc.

Juhani Lehtimaki also wrote an excellent book on Android user interface patterns called “Smashing Android UI”. It’s a great book specifically targeted to Android user interface.

Mood board

A Mood board will help you get the feel for your app. Just think about a good app you have installed on your phone or tablet, what is the feeling it gives you? It may be luxury or fresh and fun or maybe a business feel. A Bad app will not have a consistence feel, it will be a mess and a chaotic appearance. By making a mood board you can help narrow down the feel for your app. But before you start creating your mood board go back to the concept stage and think about your target audience. Your mood board should reflect and appeal to your users.

Creating a mood board is easy. Get a big piece of paper, or a pin board, you can even make a digital mood board with any paint program. The goal is to get as many pictures or items on there that you want your app to reflect. To start I suggest to go out to your local book store and get some magazines. Think about your target audience, what magazines would they buy? After your trip to the local book store go and get some wallpaper samples, these usually are free and can help you find the right colors or textures for your user interface. When you are back with a bag full of stuff, get out some scissors and start cutting out images or texts you like and put them on your mood board. Don’t be afraid to replace images as you go through the process, this will create a better result in the end.

Sketches

When designing user interfaces there is no replacement for quick sketches. They allow you to quickly scrabble down ideas and give a rough idea of how your app will look like. There are several way’s to make sketches, for example you can use print out templates. Juhani has published some templates on his blog:
UI Sketching on Paper – Templates

An alternative to using pen and paper is to use a sketching application, there is a free online tool available here:
Android mockup

I Prefer to use pen and paper because it does not limit you in the available components, an other benefit of using pen and paper is that there is no need to learn new software, so anyone can join the process.

Creating sketches of your interface is a quick way of deciding what works best for your app work flow.

Color scheme

Everyone who is going to design a user interface should be aware of color schemes. By using color schemes you can create a uniform look throughout your app and can also be used for creating a website or banners. The color scheme will also helps the feel of your app, it can be warm, cold or energetic. A Good way to start creating your color scheme is to go back to your mood board, find the essential base color and start from there.

A Simple color scheme is usually created with five colors. You need a light color, a dark color, two accent colors and a highlight color. All colors should compliment each other, the two accent colors normally are close matches of the light or dark color. The highlight color is most likely to have a big contrast on the other four colors and should pop out from the rest. By sticking to your color scheme you will find that your can drastically improve your designs.

Example of a color scheme. From left to right: Light, Accent 1, Accent 2, Dark, Highlight

Color scheme made from holo dark colors

Mockup

Mockups are used to be an accurate representation of the final product. There is more skills involved in creating mockups that simple sketches. Some of the things you should consider when creating mockups are: Fonts, Colors (use the color scheme you created), positions, margin’s and icons. Use the sketches you made to start with a rough layout and work from there. You can try looking at apps you like and see what makes the user interface work well. Stick to your color scheme to create a nice uniform look while also use the Android design guidelines to make sure the app fits the overall look for the Android platform. The Android design guidelines can be found here:
Android developers design guide

Here is an example of a mockup I have created with the color scheme from the section “color scheme”.

You can use all kinds of software to create mockups. Some would like to use Adobe software like Photoshop or Illustrator, but you can use any other painting or vector tool. Taylor Ling has a great set made for Photoshop which you can download from his blog:
Android ICS/JB Photoshop GUI design kit

Mockups of your app should be as accurate as possible, when working in teams or for a client the final app should be nearly identical to your mockups.

Resources summary

This is a list of resources mentioned in this post.

Books

Links

UI Sketching on Paper – Templates
Android mockup
Android developers design guide
Android ICS/JB Photoshop GUI design kit

Till next time

That’s it for this post. In the next chapter I will cover the development stage, you can subscribe to my blog with the RSS icon on the top of this page.

Till next time, happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *