Graphic Design For Your App

Conceive the graphic design of your app: a how-to guide

Without being a substitute for the expertise of a graphic designer, these tips and tools will help you think of a design that is both elegant and relevant for your "tour guide" app.

Step 1: Define the architecture of your mobile app

Before you get started in its graphic design, you need to define the architecture of your app: its headings and sub-headings but also their number and their organization relative to each other.

The architecture determines the structure of your app — its number of tabs for example. It is therefore essential to fix it once and for all before looking at the design of your app.

Unlike websites, apps do not support complex architectures; a smArtapps app can have up to 5 tabs. Our advice: choose two or three main features so that browsing remains pleasant.

To illustrate the architecture of your mobile app, proceed as for a family tree. The main tabs — those on the tabbar of your app, such as the map and the list — are the trunk. From these tabs, users can access other content, such as STOP; these are the branches. From a STOP, it is possible to consult other documents, such as a photo gallery, an audio file or a STOP son: here are new branches.

An example of a simple architecture of a "tour guide" app.

Step 2: Create your moodboard

Before designing your app, combine in one place the elements used to develop its graphic chart: colors, fonts, icons, buttons, images … This will allow you to show the mood and style of your mobile app.

No need to spend hours looking for the perfect typo: your users are not experts either! Any simple and legible typography will fit perfectly. Good to know: both Apple and Google recommend the use of the typography Universe, available in several alphabets.

When choosing your colors, keep in mind that they have a strong cultural resonance. Thus, red immediately evokes prohibition and danger while green indicates permission.

Of course, it is important that the appearance of your app pleases you. However, don't forget that these colors are also significant elements and, as such, can be more or less effective. Be careful when choosing them, both from a practical and a symbolic point of view. Be sure to choose contrasting colors rather than shades so that everything in your app is visible on the screen.

To achieve harmonious color combinations, you can help you from these sites:

https://color.adobe.com/en/

https://flatuicolors.com/

https://coolors.co/79addc-ffc09f-ffee93-fcf5c7-adf7b6

Similarly, when choosing your pictograms, be sure to respect the match between their design and the audience you are aiming for. Feel free to download and compare apps on the same theme as yours so you do not make a misstep.

Where to find icons? Here are some icon banks where you will certainly find the ones you need:

https://thenounproject.com/

https://iconmonstr.com/

https://www.syncfusion.com/downloads/metrostudio

To change the color of your icons, you can use the free trial versions of the following software:

https://sketch.fr.softonic.com/mac — available on Mac only,

https://www.gimp.org/en/

Last but not least, from the very beginning of the project, start thinking about your icon launcher. It's the image that will appear in the stores and serve as a shortcut to your app on the phone users. The icon launcher is therefore a key element to identify your app, which should not be left to chance… nor decided at the last moment. 😉