Visual design of the mobile application

After agreeing on the concept on the target scenario, the designer finalizes the application:

covers all user scenarios;

handles the so-called border states: no internet, data entered incorrectly, successful and unsuccessful sending of data, blank screens (no data yet), contextual hints (short messages that tell the user how the interface works) and others.

Sometimes the final result in visual design may differ from what was shown to the client at the design stage due to new inputs in the finalization process - this is normal. The main thing is to keep the logic of interaction between interface components.

Most companies have design systems - sets of components that are implemented in visual design and in code, that is, they cover both design and programming at the same time. Because of this, the stage of creating wireframes is increasingly skipped.

For example, I only use paper prototypes to understand what I want to design in a graphics editor. And then I make a layout using a design system without using wireframes.

Design systems are usually assembled from built applications. This approach speeds up the creation and coordination of design with the customer, and designers can use proven solutions in new projects. 

Mobile app design concept

A design concept is a set of design decisions in the development of a product that gives a general idea of ​​it, in other words, a model of a future application.

At this stage, the designer selects visual references, checks with the company's brand book, works out one of the target scenarios from 5-6 screens ⟶ coordinates the design concept with the client.

The design concept is presented to the client in order to align with him in the style of delivering information and visual content.

Also, a discussion of the concept is necessary in order not to leave the client in an information vacuum and give the opportunity to ask questions, leave comments.

“Design speaks for itself” is a misconception. The customer needs to be shown the designer's path from analyzing information to creating an application concept. In this case, the designer will have more confidence and subsequently remove unnecessary questions from the client.

And after the design concept is agreed upon, wireframes are shown to the client to approve the rest of the application's functionality.

If the client agreed on wireframes, then the design concept of the target scenario is replicated throughout the application, that is, black and white wireframes take on the appearance of a familiar application.