This is a continuation of the case-article about the training project “ Wine not?”. If you haven’t read the first part, read the short description below.
In the previous part:
Made a user map of the app “ Wine not?”
Created Wireframes for different types of users, among them:
A super administrator.
Now let’s continue. After forming the structure of the web application, we move on to the visual design. The interface should be clear and convenient, the colors should be contrasting, and the fonts should be readable.
UI process. Chapter One: Mood board
The first step is to search for references and build a mood board. This is useful for later work as well as fun and exciting. I prefer to just collect your favorite images in one composition.
The mood board should include suitable color palettes, illustrations, and font options. Below is the result of my work on collecting references.
The app “Wine not?” has been created for a restaurant chain that organizes the delivery. Therefore, the first references to the mood board are obviously food photos. Based on these images, the rest of the mood board and the future palette of the app are built.
The palette should consist of colors that cause an appetite: hot scrambled eggs for breakfast, a ruddy crust of a little toasted bacon, a glass of orange juice and a piece of pumpkin pie. Delicious, isn’t it? Imagining all this, you begin to feel a slight feeling of hunger.
Now let’s turn to the psychology of color: “colors like yellow and orange are associated with happiness, sunshine, enthusiasm, and archaism (in its darker, calmer shades). Provide energy, but gently, at the same time creating a feeling of comfort”
It just fits our goals. Results? We created a color palette and decided on the style of illustrations.
UI process. Chapter Two: Colors, Fonts and Constructions
What’s next? Then you need to choose the main colors and accent colors. I decided on the main colors earlier — yellow and orange — accent colors should be contrasting with the main ones — purple and terracotta — and we will select additional colors using a specialized tool — palettable.com
To slightly reduce the load on the eyes, the text color should be different from black, then we will strain our eyes less when reading, and the design will seem soft and warm. At the same time, do not forget that you need to ensure a sufficient level of contrast according to WCAG standards. In our example, the standard card was rated 5.64, which is a good level of availability.
Fonts. Due to the requirement for the quick perception of information, the font has been chosen based on the criterion of “readability of information”. Thus, the main font of the application is the “Sans Serif Lato” typeface — simple and clear with a lot of characters for different purposes.
Return to the layout of the structure and see that in some parts the application needed the illustrations to be placed because of the empty state of the blocks. They are presented below.
Illustrations for the “Wine not?” project
The purpose of the illustrations in the app is to make it more user-friendly, and some parts of it clearer to the user. For example, an incoming order shows a girl calling the waiter, which means that the customer is waiting for their order. The style has been chosen according to modern trends in graphic design, it is minimalistic, with smooth lines and exaggerated proportions. The colors of the illustrations correlate with the overall color scheme of the app and fit seamlessly into the product.
What did we get as a result? First, it is an interesting project for a portfolio that meets the UI/UX design standards. Secondly,while researching for the project, we’ve learned new information that will be useful in the future. And thirdly, it is interesting and useful to spend time doing something that helps you to relax and escape from the daily hustle and bustle. The effect is achieved — the “burnout” stage is passed.
Here you can see the results of the work done: https://www.behance.net/gallery/90725303/Wine-not-UIUX-web-and-mobile-design