Назад к списку кейсов

Сайт-портфолио визажиста

Сайт-портфолио визажиста из Новосибирска: витрина работ с двухуровневым фильтром, свой лайтбокс, две темы и два языка.

Введение:

Сайт-портфолио визажиста из Новосибирска. Сделал целиком — от структуры до вёрстки.

Задача была не в текстах, а в показе работ: человек должен быстро найти нужный тип макияжа и рассмотреть результат вблизи.

Первый экран сайта-портфолио визажиста: витрина работ с фильтром по типам макияжа
Главная страница: витрина работ визажиста.

Ход работы:

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

Двухуровневый фильтр работ визажиста: категории макияжа и уточняющие теги под ними
Два уровня фильтра: сверху категория, под ней — уточняющие теги.
Витрина работ визажиста, отфильтрованная по категории «брови и ресницы»
Выбрана категория «брови и ресницы» — во втором ряду только подходящие теги.

Работы выложил плиткой разной высоты, без обрезки под общий формат — фотографии не искажаются. Подгрузка идёт частями и в обе стороны.

Сетка работ визажиста: плитка разной высоты без обрезки фотографий
Работы выложены плиткой разной высоты, без обрезки под общий формат.
Просмотрщик работы визажиста: увеличенное фото на размытом фоне со счётчиком кадров
Просмотр работы: увеличенный кадр на размытом фоне, перелистывание и счётчик кадров.

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

Сайт работает в светлой и тёмной теме — выбор запоминается. Есть русская и английская версии.

Отдельно — страница об авторе с отзывами клиентов и страница услуг с ценами и ответами на частые вопросы.

Страница об авторе на сайте-портфолио визажиста с отзывами клиентов
Страница об авторе с отзывами клиентов.
Страница услуг сайта-портфолио визажиста: перечень услуг с ценами
Услуги с ценами, ниже — ответы на частые вопросы.
Блок с кнопками перехода в мессенджеры на сайте-портфолио визажиста
Кнопки ведут прямо в мессенджеры — формы заявки на сайте нет.

Формы заявки нет, и это решение, а не упущение: все кнопки ведут прямо в мессенджеры, где автор и общается с клиентами.


Моя роль:

Проект мой от начала до конца: структура, дизайн, вёрстка, просмотрщик работ, две темы и два языка.


Результат:

Сайт-витрина, где работы разложены по типам и открываются в один клик. Лёгкий на мобильном, с тёмной темой и двумя языками.

На сайт!

Для тех, кому интересен сайт или работы Алёны.