DIF
Три барбершопа DIF в Петербурге жили на Тильде. Мы сделали новый сайт в шести характерах, от афиши до талона, и показали их клиенту живыми макетами.
Задача
Сайт должен быстро открываться на телефоне, показывать мастеров и цены по филиалам и вести в запись YCLIENTS. Старый сайт на телефоне весил около 3,1 МБ и делал 121 запрос.
Шесть характеров
Все варианты собраны на одной библиотеке компонентов: «Вывеска», «Афиша», «Талон», «Графит», «Кислота» и Flovant. Общие части — сцена мастера, расписание на неделю по московскому времени, прайс по уровням мастеров и работы, которые съезжаются при прокрутке.
Сцена мастера
Имя мастера набрано во всю ширину экрана, а его фото поднимается поверх букв. Вырезки сделаны из круглых портретов со старого сайта системной маской macOS Vision, без ручной обтравки. У сцены три кадра — общий, средний и крупный, — их выбирают под каждое фото.
Результат
Новая главная на телефоне — около 1,3 МБ и 30 запросов. Фото переведены в WebP: 27 МБ стали 1,2 МБ. Прайс на узком экране перестраивается без горизонтальной прокрутки.
Как устроена сцена мастера
Сцена с подъёмником: за вывеской из букв в прорези стоит вырезка мастера. Рукоятка — это прокрутка страницы: чем дальше, тем выше вырезка, а кулисы сводят кадр от общего к крупному.
Экраны
Шесть вариантов первого экрана
Технически
- Шесть проектов на React 19, TypeScript и Vite с общей библиотекой компонентов.
- Вырезки мастеров маской macOS Vision из круглых портретов старого сайта.
- Расписание на ближайшие 7 дней по московскому времени, строка ведёт в запись YCLIENTS к мастеру.
- Прогресс прокрутки передаётся в CSS-переменную, анимации идут без тяжёлых библиотек.
- Около 1,3 МБ и 30 запросов на телефоне против 3,1 МБ и 121 запроса у старого сайта.
React · TypeScript · Vite · macOS Vision · YCLIENTS