150 thousand new apps are registered in the App Store and Google Play every month. Smart design of mobile apps helps attract users ‘ attention and achieve commercial success. So, according to a study by McKinsey, companies with good design increase revenue by more than a third.
We will tell you what knowledge and skills an app designer needs, how to create a mobile app, and what needs to be taken into account when developing it in our blog.
Let’s start from the beginning.
What a mobile designer needs to know
Coloristics is the art of color combination.
For example, it is not recommended to use green and red together — rich colors that seem to overlap each other. It turns out that the interface is blurry, there is no contrast, and objects are difficult to distinguish on the screen. For incongruous colors, designers even came up with the definition of “green” (green + blue).
For color selection, special palettes or color circles are often used — for example, Material palette, Adobe Color.
You can also take note of the palette of finished products. For example, in America, there is a certain cult of sneakers, where they are bought not for the sake of replacing an old pair, but rather from an aesthetic point of view. Therefore, some instances can be called a source of inspiration for designers who use color schemes of sneakers for their products. The color distribution can be configured using the color tool (Material Design)
Typography is the ability to arrange the text with the set and layout.
In fact, design is the design of content, 80% of which is transmitted through text. Any information is arranged in a hierarchy — the main and secondary parts, which are highlighted using a certain text styling.
For example, the title levels — level 1 or level 2-differ in font size and serve as navigation, as well as make the material structured.
Left alignment makes the text look neat and easier to read. The lines start at the same level, and the eye quickly finds the beginning of the next line-it is convenient and you quickly get used to it.
Composition – ability to correctly manage objects in space.
What dimensions of the object, margins between objects and the edges of the screen, distances and connections between objects will allow you to create a harmonious composition for better perception of objects.
If we talk about how the colors, typography and composition affect the user behavior and the effectiveness of the interface, it is necessary to mention the four types of loads.
Cognitive loads are the efforts we make to recognize an object, the logic of its operation, and make a decision about further actions. For example, we understand that we have a button in front of us, not a rounded rectangle, and you can click on this button to get to the desired screen.
The more effort it takes for the brain to identify an object, the more tired we become.
Visual loads — the effort to identify an object on the screen by visual features (circle, sky, cat) and distinguish it from others.
The more objects in the interface, the more tired we get.
Motor loads-occur during physical contact with the interface: swipe, tap, and others.
The more gestures we use to control the interface and the more complex they are, the more tired we get.
External loads-occur when the user interacts with the app (a dog barks, a car drives by, it rains). These loads are difficult to predict exactly — you can only assume in what conditions the application will be used most often.
The more distractions we have, the more we try to focus and get tired faster.
All types of loads go together, affecting each other.
Stages of creating a mobile app
We dive into the goals and objectives of the business.
We study the target audience.
Research is divided into quantitative and qualitative.
Quantitative research answers the questions ” how much? “and”how often?”. They are usually conducted through surveys, questionnaires, and telephone interviews.
They answer the questions “who?” and “why?”. Get information in individual in-depth interviews, group discussions (focus groups), or using expert assessments.
If the application is made from scratch, then first use a combination of methods to conduct qualitative research, then quantitative research.
If the app is already developed and needs to be improved, then statistics are collected using quantitative methods first, and then using qualitative methods.
Then we conduct a competitive analysis, study other business communication channels: website, presentations, advertising, if available — offline points.
This is necessary for the correct positioning of the business in the app. Each brand or company has its own language of communication with the client. Through communication channels, the brand transmits messages to the audience. For example, the Nike slogan “Just do it” is reflected in the simple, sporty and casual style that the company’s stores and websites are designed in.
II. Analysts pre-process business requirements and package them into clear models: mindmap, business process diagrams, typical user paths, and more. they create Analytics artifacts.
The designer makes decisions based on the above artifacts.
Artefacts also help you manage communication with your business: so that changes don’t arrive every week, all business requirements are discussed and recorded. This is important so that you don’t have to do Desk work and avoid endless completions.
If new requirements come in every week, the business customer doesn’t know or understand what they really want. And if there are no clear acceptance criteria, it will be difficult to show the result of work. You can get caught in a loop of incessant edits and constant alterations.
In essence, this is creating the app’s skeleton: the designer understands where the information will be, spreads the content across screens, and determines how many screens there will be in each user scenario.
To test this logic in practice, the designer builds a draft of the app. There, he tests a bunch of screens, checks that the interface components are located in the correct place and it is clear how to interact with them: you need to click, pull, select or delete something.
At this stage, it is important not to go into the visual design and not to delve into the questions from the series “what color will the button be” or “what to make rounding the image”.
For design, black-and — white prototypes are most often used-wireframes that are created in a graphic editor.
Before wireframes, some people create paper prototypes — they make a sketch of the future application on paper by hand.
There are many intermediaries between the idea in your head and its implementation: the interface of the graphic editor, the monitor screen, the keyboard, and the mouse. And when working with paper, the idea becomes tangible faster.
IV.After release: implementation of features
When the app’s audience starts using it, new data appears. For example, which sections are frequently visited and which are not visited at all; which screen is not passed through; how many users do not complete a purchase, or how many people added an item to the cart but did not pay for it.