One of the requirements of the website for makeup artist Polina Slavina was the ability to change and fill the future online source independently. At the same time, in terms of format Polina was inclined to a landing page, that is a one-page site where all the information is collected in the form of blocks. So the choice fell on the Tilda platform, which, despite some limitations, provides just such opportunities.

Since I do not work with a template approach, and the customer also did not want to get faceless site "like all", which quickly get lost among the same. Therefore, we began with the design and concept of the future project. By the example of the main unit was created the first concept, showing the possible corporate fonts, selected corporate colors.

On the basis of the selected fonts was created name branding, which looks and feels like a full-fledged logo and at the same time explains the essence of the service in a short caption. Additional colors were selected (in the corporate colors approved on the site) so that the name could be used on both dark and light backgrounds. Two styles are used, a more restrained one in dark and white, and a brighter and more playful one with a universal hue that is simultaneously readable on both light and dark media.

So gradually we managed to work out a unified style for the site. In this case, we did not create the project immediately in the Tilda constructor and did not use templates, which made it possible not to limit ourselves in terms of visual language.

When the design was ready, the work continued in the website builder. Ready design layouts were made in Zro Blocks Tilda, taking into account all the five resolutions of devices (two orientations for a smartphone, two orientations for a tablet, computer and laptop), so actually created an individual design in five variations for each individual block.

Backgrounds, icons, and other styling elements were created individually for each block. The icons took into account the thickness of lines and their stylistics in order to avoid breaking the impression of the site as a whole (as it happens when icons with different style taken simply from the Internet are placed in template sites). Even "standard" icons such as the Instagram logo were reversed before layout, so that their appearance does not violate the overall concept. So, for example, "My Makeup Gallery" actually has two versions of the photo-image format from Pauline's portfolio. One photo is used for desktop devices with a large screen, the other, has a different aspect ratio to fit perfectly on a smartphone screen. In this case, the user will not notice the difference in formats, and there will be the same impression when viewing this block of the site on a smartphone with a vertical screen or on a traditional computer with a "longer" screen. A similar approach is used in all blocks, where images, format and interactive elements are optimized for all possible resolutions and situations.

Special attention was paid to the main menu. A script was used, which allowed replacing the template menu of Tilda with its own, created from scratch in Zero Bloscks. At the same time, its appearance was flexibly adapted to the mobile version to replace the list of menu items with a traditional "hamburger icon" on a mobile device. To make navigation most convenient, the main menu is fixed when the page flips, so that the user can go to the desired section at any time.

A similar approach was used for the "Sign Up" button, for the creation of which I engaged one of my developers. The fact that this button was organically integrated into the design of the main block of the site, stylistically became part of it. When the user was browsing below the page, it was necessary to keep the same button, but hovering over the page, so that it would not interfere with the site's design and the user. The most evident variant was to place the button in the main menu, but this would lead to duplication of the button on the main page, plus the menu was already rather big and there was a risk to overload it with too much information, so we refused this concept after some discussions.
In the end, it was decided to place the button at the bottom of the screen, in the right area on desktop devices. A separate script was written to make the button behave properly. Thus the "floating" button "Enroll.

Natalia Shelabneva helped us in creating the prototype of the site, so that there were no questions about the structure initially. However, we still made some changes, and in particular to use the block "Projects" with a mini-blog instead of the usual gallery of works. The idea of this block is to expand the capabilities of the site, while maintaining the simplicity of its management. Block "Projects" is a page of a makeup artist's blog. Since the blog module uses Tilda Threads, creating articles takes a minimum of time and is as simple as possible for the user. That allows you to create mini-articles, publish cases or simply galleries of projects flexibly and quickly, and most importantly, it significantly expands the possibilities compared to the usual gallery with pictures.

In the process of cooperation I also provided consulting for Pauline, we discussed the potential of the site in terms of marketing, helped to understand the technical issues, gave recommendations for the development of the project.

Client — Polina Slavina

Prototype — Natalya Shelabneva
Creative director and development — Ulyashenkov Sergey and The Art of Digital team
Project website: slavinamake.ru