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