Одним из требований сайта для визажиста Полины Славиной была возможность самостоятельно изменять и наполнять будущий онлайн источник. При этом с точки зрения формата Полина склонялась к лендингу, то есть одностраничному сайту, где вся информация собрана в виде блоков. Так выбор пал на платформу Tilda, которая несмотря на некоторые ограничения как раз дает подобные возможности.

Так как я не работаю с шаблонным подходом, да и Заказчик тоже не хотела получить безликий сайт «как у всех», который быстро затеряется среди таких же. Поэтому работу мы начали с дизайна и концепции будущего проекта. На примере главного блока была создана первая концепция, показаны возможные фирменные шрифты, подобраны фирменные цвета.

На основе подобранных шрифтов было создано фирменное написание имени, которое выглядит и ощущается как полноценный логотип и одновременно поясняет суть услуги в короткой подписи. Были подобраны дополнительные цветовые решения (в фирменных цветах, утвержденных на сайте), чтобы имя можно было использовать как на темном, так и на светлом фоне. Используется два стиля, более сдержанный в темном и белом цвете, а также более яркий и игривый, с универсальным оттенком, одновременно читающимся и на светлых, и на темных носителях.

Так постепенно нам удалось выработать единый стиль для сайта. При этом мы не создавали проект сразу в конструкторе Tilda и не использовали шаблонов, что дало возможность не ограничивать себя с точки зрения визуального языка.

Когда дизайн был готов, работа продолжилась уже в конструкторе сайтов. Готовые дизайн-макеты верстались в Zro Blocks Tilda с учетом всех 5 разрешений устройств (2 ориентации для смартфона, 2 ориентации для планшета, компьютер и ноутбук), то есть фактически создавался индивидуальный дизайн в пяти вариациях для каждого индивидуального блока.

Фоны, иконки, и другие стилеобразующие элементы создавались индивидуально под каждый блок. В иконках была учтена толщина линий, и их стилистика, чтобы в целом не ломалось впечатление от сайта (как это бывает, когда в шаблонные сайты размещают иконки с разным стилем, взятых просто из интернет). Даже такие «стандартные» иконки как логотип Instagram обратабывались перед версткой, чтобы их вид не нарушал общей концепции. Так, например, «Галерея Моих Макияжей» имеет на самом деле две версии формата фото-изображением из портфолио Полины. Одна фотография используется для настольных устройств с большим экраном, другая, имеет иное соотношение сторон, чтобы идеально вписываться в экран смартфона. При этом для пользователя будет незаметна разница в форматах, и будет одинаковое впечателение при просмотре этого блока сайта на смартфоне с вертикальным экраном или на традиционном компьютере с «более длинным» экраном. Аналогичный подход используется во всех блоках, где изображения, формат и интерактивные элементы оптимизированы для всех возможных разрешений и ситуаций.

Отдельное внимание было уделено главному меню. Был использован скрипт, который позволял заменить шаблонное меню Tilda на собственное, созданное с нуля на Zero Bloscks. При этом его вид гибко адаптировался к мобильной версии, чтобы заменить список пунктов меню на традиционную «иконку-гамбургер» на мобильном устройстве. Чтобы навигация была наиболее удобной, главное меню фиксируется при перелистывании страницы, так, что пользователь может в любой момент перейти к нужному разделу.

Аналогичный подход был использован и для кнопки «Записаться», для создания которой я привлек одного из своих разработчиков. Дело в том, что данная кнопка была органично встроена в дизайн главного блока сайта, стилистически становилась его частью. Когда же пользователь перелистывал страницу ниже, нужно было сохранить такую же кнопку, но «висящей» поверх страницы, при этом чтобы она не нарушала дизайна сайта и не мешала пользователю. Самый очевидный вариант был разместить кнопку в главном меню, однако это бы привело к тому, что она будет дублироваться на главном блоке, плюс меню было и без того довольно большим, был риск его «перегрузить» информацией, поэтому после обсуждений мы отказались от такой концепции.

В итоге было решено размещать кнопку внизу экрана, в правой зоне на настольных устройствах. Для правильного поведения кнопки был написан отдельный скрипт. Таким образом «плавающая» кнопка «Записаться

В создании прототипа сайта помогала Наталья Шелабнева, так, что со структурой изначально не возникало вопросов. Однако несколько изменений мы все же внести, и в частности использовать блок «Проекты» с мини-блогом вместо обычной галереи работ. Идея данного блока расширить возможности сайта, сохранив при этом простоту в его менеджменте. Блок «Проекты» представляет собой страницу блога визажиста. Так, как модуль блога использует Потоки Tilda, создание статей занимает минимум времени и максимально упрощено для пользователя. Что дает возможность создавать мини-статьи, публиковать кейсы или просто галереи проектов гибко и быстро, а главное значительно расширяет возможности по сравнению с обычной галереей с картинками.

В процессе сотрудничества я также предоставлял консультации для Полины, мы обсуждали потенциал сайта с точки зрения маркетинга, помогал разобраться в технических вопросах, давал рекомендации по развитию проекта.

Клиент — Визажист Полина Славина

Маркетинг и прототип — Наталья Шелабнева
Реализация — Ульященков Сергей и команда The Art of Digital
Сайт проекта: slavinamake.ru