How to start building an app: wireframes and prototypes

What are the first steps behind the design of an app? How do you lay the foundations to build an effective and easy-to-use app? How are the customer’s business ideas and objectives translated into clear visual elements, arranged in a strategic and intuitive way for the user?

Below we will look at some good practices that, in our experience, can be useful in overcoming the blank sheet panic and breaking the ice in creating an app from scratch.

Listen carefully, ask the right questions, and ban perfectionism

The general rule is: don’t worry about getting everything right on the first try, because it’s impossible and paralyzing. A good creative process always starts by asking the right questions, namely:

1. Who are the end users?

2. What are the business objectives?

3. How can I organize content to support these goals?

Listen to your clients with religious attention and try to fully understand their ideas and expectations, in order to be able to give them a visual form.

At this stage, you canbegin to sketch a sitemap, which is a hierarchical diagram that shows the organization of the pages as an immediate general overview of the user flow. For now, don’t waste too much time hypothesizing every possible scenario and don’t get lost in too much detail. Just use the sitemap as a starting point.

Get inspiration from others

Take a look at those who have already found themselves solving problems similar to yours and get an idea. Learning from others is always good and can save you a lot of time. In this regard, we recommend some platforms that can help you in this design phase: behance.net, Pinterest, pttrns.com (the latter is not entirely free).

Get pencil and paper

It helps us to start from drawing by hand, because it allows ideas to take visual form quickly, without worrying too much about precision and getting lost in frills and details that would only be a waste time at this stage.

Now it’s time to sketch the wireframes, that are low fidelity layouts of what the final product will be. This is a sort of draft that serves to make the customer understand how the user will navigate the pages of the app. Wireframes are quick, inexpensive screens made to undergo changes as you gather more information and customer feedback. Usually, we replicate the hand drawn sketches on Adobe Xd or Figma for presentation to the client. To speed up the workflow, both platforms offer the possibility to download ready-made component kits (tabs, menus, buttons, filters, fields, icons, text areas, etc.)

Imagine the customer journey and segment it into many small steps

Getting to the heart of the design, we first suggest that you hypothesize the customer journey, that is the series of steps that a user takes to reach a certain goal. Be flexible and keep in mind the different scenarios that can happen; for example, if a user is looking for a product online, what happens if he/she doesn’t find it? How can you direct him/her to search by making things easier? Also remember that the flow is not the same for everyone.

Start drawing without colors or details. Try to imagine a few fundamental and redundant elements that are necessary for navigation (footer / header) and then refine and add elements. Prioritize important tasks for the user and for the customer’s business (goal conversion).

Select and listen to feedback

Make the process as collaborative as possible. Share your project with a team of people and add annotations. Imagine the flow of the user, put descriptive titles on the screens and explain what happens. Create a clear step by step funnel and draw arrows to make the logic behind the transitions immediate; if you want, add the gestures (or explain them).

The feedback from the team, whether positive or negative, is essential to move forward with the work without getting stuck and to make it evolve at its best. Never take it personally and always be prepared to change what were your initial assumptions if better ones are presented to you.

At the same time try to understand what are the comments that can lead you astray (they are inevitable) and leave them alone. Finally, we recommend that you take note of any feedback that is currently not relevant, but which may become so at a later stage of development.

The structure: grids, columns, modules and margins

A house stands if it has solid foundations. The same goes for an app. The arrangement of the elements that populate the interface, their size, dimensions and spacings are not random. In order not to give the annoying feeling of elements that float chaotic in space, it is necessary to set up a grid, that is a structure that helps to organize the contents in a consistent way. Building a solid foundation takes some initial time investment, but it will go a long way in developing and ordering the elements of your interfaces consistently.

First of all, it is essential to set a base unit, that is, a starting measure of which the other measures are multiples. 8 px, for example, is a well scalable measure (most measures are divisible by 8 and 8 is divisible by itself). All elements of the user interface should be measured as an increment of the base unit and the same rule should apply to negative space and line spacing. This helps maintain visual solidity, balance and consistency.

Another fundamental element for the organization of space are the columns, or the vertical blocks of space that go from left to right of the screen. The number varies according to the type of project (web or mobile). For mobile, we usually use 12 (divisible by 2,3,4,6, makes it easier to draw for responsive). We keep the white spaces between columns of 16 px (multiple of 8 px, which we have set as the base unit). We try to respect the multiples rule also for the outer edges of the frame.

Draw for the user

Easier said than done: you have to make the product easy and pleasant to use for the user. Making a product self-explanatory in its use, that is, making the complex simple, is one of the most difficult aspects of the job. Here the skills in the user experience and user interface come into play, a vast world that deserves a separate discussion. Generally, we recommend that you create recognizable components and use them consistently across screens. Repetition creates a sense of familiarity for the users’ eye and guides them more easily to perform the right actions.