Сайт для Полины Славиной
Красота и гибкие возможности для управления.
Одним из требований сайта для визажиста Полины Славиной была возможность самостоятельно изменять и наполнять будущий онлайн источник. При этом с точки зрения формата Полина склонялась к лендингу, то есть одностраничному сайту, где вся информация собрана в виде блоков. Так выбор пал на платформу Tilda, которая несмотря на некоторые ограничения как раз дает подобные возможности.
РАБОТЫ ВКЛЮЧАЛИ:
1
Экслюзивный дизайн
Дизайн создавался с нуля без использования шаблонов. Сначала мы отвердили общую концепцию, после чего дизайн макеты верстались с использованием Zero Blocks в самой Tilda с индивидуальной версткой для 5 устройств и разрешений (смартфоны, планшеты и компьютер). Также были подобраны шрифты специально под проект и его эстетику. Внедрена веб-анимация некоторых блоков. Дизайн мобильной версии прорабатывался отдельно, чтобы потенциальные клиенты Полины могли одинаково комфортно пользоваться сайтом как на мобильных, так и на настольных устройствах.

Все графические материалы, в том числе иконки, стиле образующие элементы, создавались под проект. Фотографии тщательно обрабатывались и подстраивались под формат сайта, чтобы их внешний вид идеально дополнял общую картину.
2
Разработка на Tilda с собстенным подходом и консультации
Готовый дизайн интегрировался в Tilda с использованием Zero Blocks. Однако в некоторых ситуациях использовались и шаблонные блоки, которые тщательно настраивались, чтобы их вид не отличался от нового дизайна. Одновременно использовались и собственные средства, которые расширяли ограниченные возможности Tilda. Таким образом удалось добиться баланса, когда внешний вид и поведения сайта не отличается от более сложных аналогов (сайтов), и при этом сохраняется простота в редактировании сайта и внесении изменений.

Гибкий подход позволил дать возможность развивать сайт в будущем, а также вносить простые правки и вести Блог/портфолио самостоятельно. При этом сопровождением сайта сможет заниматься как Клиент своими руками, так и передать менеджеру по работе с контентом.

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

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

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

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

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

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

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

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

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