FaceCode — сайт-визитка визажиста в Ташкенте
Сделали для визажиста FaceCode сайт-визитку: программы макияжа с ценами, звонок в одно касание, переход в Instagram и короткая форма заявки. Записей на консультацию стало на 49% больше, а фотографии открываются быстрее двух секунд.
Задача
FaceCode — частный визажист из Ташкента, который продвигает свои услуги и портфолио онлайн. Клиентов принимают в салоне Prime Look на улице Махтумкули, 99, а в работе шесть программ: нюдовый, вечерний, свадебный и пробный макияж, smoky eyes и графические образы.
К визажисту приходят за конкретным образом — свадебным, вечерним или графическим, и решение принимают по трём вопросам: как выглядят работы, сколько это стоит и как быстро записаться. Сайт-визитка визажиста должен был отвечать на все три с первых экранов, без длинных текстов и лишних страниц.
Цена — самый частый вопрос к мастеру красоты, и не каждый готов задать его в личных сообщениях. Когда прайса нет на сайте, знакомство начинается с переписки о деньгах, а не о результате. При этом стоимость нужно было показать аккуратно, не превращая эстетичную подачу в таблицу.
Работу визажиста оценивают глазами, поэтому главный язык такого сайта — крупные фотографии. Они задают настроение, но на мобильном интернете легко делают страницу тяжёлой, а снимок, который медленно проявляется, портит первое впечатление.
Запись тоже должна была стать проще. Клиенту достаточно оставить имя, телефон и пару слов о поводе, а форма не должна превращаться в мишень для спам-ботов. Ещё нужен был понятный ответ на вопрос «куда ехать» — адрес салона и карта рядом с формой.
Решение
Мы собрали сайт как короткую ленту из полноэкранных чёрно-белых кадров. Каждый кадр — отдельный раздел: «Программы», «Контакты» и «Инстаграм», а следом идут форма заявки и карта с адресом салона. Вся навигация сводится к прокрутке и одному нажатию.
Нажатие на «Программы» открывает окно «Услуги и цены» с шестью программами и стоимостью в сумах, для свадебного и графического макияжа указана вилка. «Контакты» показывают номер, по которому можно сразу позвонить, «Инстаграм» ведёт в профиль визажиста, а форма просит только имя, телефон и сообщение.
Сайт работает как одностраничное React-приложение: его собирает Vite, а размещён он на Vercel. Каждый кадр сначала показывается как превью в WebP меньше килобайта, а полноразмерная фотография до 80 КБ подгружается следом. Заявки уходят в веб-приложение Google Apps Script, скрытое поле-ловушка отсекает ботов, а тёмная карта — это Яндекс Карта, перекрашенная CSS-фильтром в стиль сайта.
Полноэкранные разделы-обложки
Главная собрана из трёх крупных чёрно-белых кадров с подписями «Программы», «Контакты» и «Инстаграм». Каждый кадр работает как большая кнопка: посетитель не ищет меню, а сразу нажимает на то, что ему нужно.
Программы и цены в одном окне
Окно «Услуги и цены» перечисляет шесть программ: Nude, свадебный, пробный и вечерний макияж, smoky eyes и графический образ. У каждой указана стоимость в сумах, поэтому главный вопрос клиента закрывается ещё до переписки.
Звонок в одно касание
Раздел «Контакты» открывает окно с номером телефона визажиста. На смартфоне достаточно нажать на номер, чтобы начать звонок, — без копирования цифр и поиска контакта в мессенджерах.
Короткая форма заявки
Форма «Отправить заявку» просит имя, телефон в формате +998 и пару слов о поводе. Скрытое поле-ловушка отсекает спам-ботов, а после отправки клиент сразу видит подтверждение, что заявка дошла.
Лёгкие фотографии в WebP
Снимки хранятся в WebP: полноразмерный кадр весит до 80 КБ, превью — меньше килобайта. Сначала появляется превью, затем чёткая фотография, а ленивая загрузка не тянет лишнее, пока посетитель не долистал до раздела.
Салон на карте
Финальный экран — карта с адресом салона Prime Look на улице Махтумкули, 99, перекрашенная в тёмные тона под стиль сайта. Карта грузится лениво, а ссылка «Открыть в Яндекс Картах» помогает сразу проложить маршрут.
Результаты
Главные итоги проекта в цифрах.
- +49%Записи на консультацию
Цены на виду, звонок в одно касание и короткая форма — на консультацию стали записываться заметно чаще.
- <2 сЗагрузка фотографий
Полноэкранные кадры в WebP с лёгкими превью открываются меньше чем за две секунды даже с телефона.
- 6Программ с ценами
Nude, свадебный, пробный, вечерний, smoky eyes и графический макияж — стоимость видна прямо на сайте.
- 4 дняОт старта до запуска
Разделы-обложки, окно с ценами, форма заявки и карта салона заняли четыре дня работы.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- React
- Vite
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.