Демо-сайт марки ухода «Состав»

Описание

«Состав» — вымышленная марка ухода за кожей. Тема взята из моего списка направлений: косметика и уход, подбор по анкете, отзывы с фото. Это демо для портфолио, а не заказ, и внутри всё сделано так, как делалось бы для настоящего клиента.

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

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

Третье условие техническое: файл открывают ссылкой и вложением в мессенджере, где встроенный просмотрщик не выполняет скриптов. Сайт должен выглядеть одинаково везде.

Решение

Одна фраза, из которой выведено всё остальное: в бьюти принято продавать обещание — мы продаём таблицу.

Жанр развёрнут наизнанку. Электрический синий вместо пудры, гигантский гротеск вместо тонкой антиквы, прямые углы вместо скруглений. Продукт называется номером, а не именем: №4, а не «Сияние утра». Номер сразу говорит, где продукт стоит в порядке нанесения.

Главный экран сайта — этикетка. Полный состав сыворотки развёрнут в таблицу на пять колонок: ингредиент с международным названием, доля, полоса-масштаб, что делает, происхождение. Восемь строк, сумма ровно 100%. Проценты не случайные: ниацинамид 5%, сквалан 8%, глицерин 6% — рабочие доли, при которых ингредиент действительно работает.

Вторая половина приёма — блок «Чего здесь нет и почему». Шесть строк с причиной, а не список запретов: отдушка прячет до тридцати веществ в одном слове, спирт даёт матовость в обмен на барьер. Без этого блока открытость выглядела бы выборочной.

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

Словарь бьюти-маркетинга. Шесть терминов, из-за которых переплачивают: «без парабенов» ничего не говорит о качестве, «натуральный» не регулируется, феноксиэтанол — это плюс, а не оправдание. Сайт спорит с привычкой читателя, а не подыгрывает ей.

Работа с фотографиями. Съёмки не было — кадры синтезированы под макет: макро флаконов для линейки и макро-кропы кожи без лиц для отзывов. При сборке фон каждого снимка сведён в палитру сайта маской по цвету, сам предмет не тронут; пары «до / после» приведены к одному свету — экспозиция вторых кадров подтянута к первым, тёплый сдвиг тона срезан. В одной паре часть красноты пришлось вернуть: пятно стёрлось почти полностью и картинка спорила с текстом отзыва рядом.

Ноль скриптов. В файле нет ни одного тега script. Ссылки в шапке — якоря, бегущая строка — CSS-анимация, полосы в таблице — проценты в разметке. Всё, что выглядит интерактивным, нарисовано, и об этом сказано прямо.

Типографика вынесена в сборку: неразрывные пробелы после предлогов, между числом и единицей и перед тире. Переносы проверяются автоматически — скрипт меряет последнюю строку каждого абзаца и печатает всё короче 22% ширины блока.

Результат

Одностраничный сайт на одиннадцать секций в одном автономном HTML на 1,51 МБ: 19 фотографий и 12 начертаний вшиты внутрь, ноль обращений к внешним сервисам (проверено прогоном в браузере с перехватом запросов). Адаптив доведён до 412 px: таблица состава переносится построчно и не уезжает в горизонтальную прокрутку.

Живая версия: dariaseehof.ru/sostav

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

Что проверяемо: 11 секций, 19 фотографий и 12 начертаний в одном файле, 0 тегов script, 0 внешних запросов, нижняя граница адаптива 412 px, таблица формулы с суммой ровно 100%.

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