How to design an app in 5 simple steps

Do you get ideas about designing an app but don’t know where to start? Or you just want to experience designing but don’t have any idea yet? Whatever your case is, in this article we are going to tell you 5 simple steps for app design which can help you get started. For your information, you can also follow these steps if you are planning to design a website.

You need two things to design an app-

• An idea
• A procedure

You might have an idea of your own or of your client. If you couldn’t find an idea yet, just starting looking around you. Look for problems and try to think how they can be solved. After that, ask yourself this question-

” Can this problem be solved with the help of an app? “

Remember that not every problem can be solved with an app. So you need to find a suitable one.

You might already have a defined procedure if you are working in a company or have good freelance experience. But if you are just beginning with your independent UI/UX design journey and couldn’t finalize a procedure yet, you can take advantage of these 5 steps.

Let me notify you in advance that we are only covering app design in this article and not the development part. So, bring your snacks and continue scrolling…

1^st Step for App design -> Research and Strategy

In this step we do thorough user and market research and then accordingly plan the strategy to design our app. You are usually supposed to document all the important information and hand it over to your client. I would suggest you to do the documentation even if you are doing a hobby project. This is really going to clear your thoughts and bring out a better picture for your app design.

I know! I know! Document and all sounds boring. But this is the step which is going to make your app design stand out from the others. Your idea might or might not be unique, but how much efforts you put in planning can really make a difference.

User research

The aim of user research is to find our target audience and their needs. Target audience are those potential users who will have the maximum ratio in your total audience. For example, if you are designing an app for a pizza parlour, your target audience will be pizza lovers (me!! me!!). But there will also be other users who will use your app every once in a while.

Once we have finalized our target audience, we try to find their needs, expectations and pain points. After that, we design user personas with the help of these details. User personas are the virtual characters which represent our target audience.

You can do user research with the help of interviews, online surveys, questionnaires. If you don’t have potential users in the beginning, you can just ask your friends to act like users for you (choose wisely). You can also take help of the below mentioned tools.

Tools for user research

• Asure
• Dscout
• Hotjar

Free tools for user research

• Video conferencing tools like Google Duo, Skype, Microsoft Teams, etc
• Google forms
• Trello for card sorting

Market research

For this step, ask your client if they like any similar products in the market and start exploring those products. But if you don’t have a client, just start studying your competitors who are working on similar idea. This is going to help you by giving an idea of the things you should and should not do.

You might also find out the mistakes of your competitor and try to avoid or fix them in your app design. But don’t be a copy cat, alright? Our aim is just to find an inspiration. You should also be aware of the market trends before you start your app design. After all, you don’t want to design an app only to find out that it’s outdated.

Defining scope

After you have done all your research, now is the time to analyse it and define what all content and functionalities will be required for your app design. The scope usually consists of all the content and functionality requirements to design an app. Content is displayed to the users while functions require users to interact.

Examples of content requirements-

• Description
• Contact details
• Text, images, videos

Examples of functionality requirements-

• Sign-in
• Adding item to cart
• Applying filters

2^nd Step for App design -> Sitemapping

It’s time to develop a sitemap around all the requirements we have defined in the last step. We are going to structure the requirements in different pages and put them in categories. For example, the requirements of query form, physical address, phone number and calling function can be put together in a Contact us page.

Sitemaps are flow diagrams which represent all the pages, page hierarchy and navigation in a product. You can also think of these as road maps which take you to different locations in the app. Sitemaps help to design an app better as it gives a deeper understanding of the information architecture of the product. In addition, any loopholes or flaws can be easily found and corrected.

Tip: Place the independent pages which don’t link to any other page at the bottom of sitemap.

Let me tell you that there are various types of sitemaps. However, we are here talking about the ‘Visual sitemaps‘ only. The other types, for instance, are XML sitemaps, HTML sitemaps, etc which are used for search engine optimization.

Tools for sitemaps

• FlowMapp
• Octopus
• MockFlow

Free tools for sitemaps

• Gloomaps
• Microsoft word, paint or PowerPoint
• Pencil and paper

I would recommend using free Microsoft tools only if you are going to have a less complex app design. Otherwise, it can get too difficult to manage. You might want to use the free tools if you are just starting but they obviously have less features. The paid tools require investment, however, they almost always provide you with some kind of free trial or 1-2 free projects. So, you may explore and choose to your liking.

Best practice: Always start designing sitemaps and wireframes with pencil and paper.

3^rd Step for App design -> Wireframing

A wireframe is the basic structure of a page. A collection of all the wireframes forms the skeleton of your app design. They are used to make sure that all the content and functionality requirements have a proper place in the design of the app.

A wireframe doesn’t have any real content, colors, typography or graphics. It just shows the outlines of elements which will be placed in a page and as a result, looks like a rough sketch of the page.

For example, you can have a crossed box to show images, a lined boxed to show text, etc. There are no strict rules for wireframing so you can make your own. But the simpler you make it, the better. It should just be enough to convey your idea.

Wireframes act as a blueprint of your product and give everyone a basic understanding of what to expect. They can also be shared with the client to provide them an early idea of your app design. Wireframes can be easily modified on receiving feedback from the client.

I have here quickly designed two wireframe screens as examples so that you could visualise what each step looks like. I have kept it minimal but you can add more details, if needed.

Tools for wireframing

• Balsamiq
• InDesign
• Photoshop

Free tools for wireframing

• Adobe XD
• Wireframe.cc
• Pencil Project

4^th Step for App design -> Mockups

Mockups are the final designs of the pages of your app. These are the screens which you get to see after a product is developed. They are build upon the wireframes and follow the structure decided during wireframing. Mockup designs form the user interface of an app. However, they are only visual and not interactive yet.

Mockups provide a skin to the product’s skeleton by using colors, typography, content and graphics. Therefore, you can get creative here keeping in mind the design conventions and app requirements.

Have a look below and see how I converted the two wireframes into mockups. The main page shows a small description of the Paris Itinerary while the post page shows the full information. More like a blog…

How was the itinerary by the way? Follow it at your own risk. But you can surely follow the method for mockups.

Tools for mockups

• Photoshop
• Illustrator
• Figma

Free tools for mockups

• Adobe Xd
• Mockplus
• Pencil Project

5^th Step for App design -> Prototyping

Here comes the final step of designing. In this step we will make our mockups come to life by making them clickable and interactive. This is achieved through prototyping.

Prototyping is used to give actual feel of the product even before the development starts. It is used for testing purposes and also presented to the client to get their feedback.

A prototype is made by linking all the mockups together accordingly to the navigation plan. To see what a link looks like, find the Paris Itinerary example in the image below.

In the previous steps we can manage without a tool but prototyping cannot be done without a proper tool even at beginner level.

Tools for prototyping

• Invision
• Figma
• Balsamiq

Free tools for prototyping

• Adobe Xd
• Origami Studio
• Invisionapp

All these steps go on iteratively till a prototype is finalized for app design. Actual development of the product starts after this. We need to do all these early efforts so that the development can take place easily. If changes have to be performed during the development phase, it can raise the cost of development and can waste more time and efforts.

Conclusion

So, now you know how easy and fun it is to design your own app. You just need to take care of a few steps and voila! You have designed a masterpiece. I hope you will utilise this knowledge and give a form to your brilliant idea soon. I wish you all the best!

To sum up, in this article we learnt about how to design an app. The 5 steps are as follows-

• Research and strategy
• Sitemapping
• Wireframing
• Designing mockups
• Prototyping

If you have any questions, you can feel free to ask in the comments below. You can also connect with us on social media. If you liked this article, leave us your feedback in the comment section. If this article helped you in some way, don’t forget to share it with your friends.

We will be coming up with a lot of interesting articles about UI and UX design soon. So, stay tuned. See ya soon…