Сайт для студии эстетики: кейс Beauty Grace
Для студии эстетики тела и лица Beauty Grace мы с нуля сделали корпоративный сайт: долго и кропотливо прорабатывали макет, нарисовали дизайн, сверстали страницы и добавили личный кабинет клиента и покупку клубной карты прямо на сайте.
6 недельот первого макета до готового сайта4 недели дизайн, 2 недели разработка
20версий макетакомпозиция, шрифты, плотность
Факты о проекте
- Срок
- 6 недельдизайн 4 · разработка 2
- Тип проекта
- Корпоративный сайт, 2024
- Ниша
- Студия эстетикикрасота тела и лица
- Состав
- Макеты, дизайн, вёрсткаличный кабинет, покупка карты
Beauty Grace — студия эстетики тела и лица: лазерная эпиляция, массаж, аппаратные процедуры. Мы сделали для неё с нуля корпоративный сайт: макеты, дизайн, вёрстка, личный кабинет клиента и покупка клубной карты. 2024 год, срок 6 недель: четыре недели на дизайн и две на разработку.
Задача клиента
Студии нужен был сайт, который выглядит так же аккуратно, как сама студия, и помогает человеку дойти от знакомства с услугой до записи и покупки.
- Показать студию, пространство, оборудование и команду так, чтобы вызывать доверие.
- Рассказать об услугах и дать прайс-лист, в котором легко найти нужную зону и процедуру.
- Рассказать о клубной карте и дать возможность купить её на сайте.
- Дать клиентам личный кабинет.
- Сделать запись на услугу короткой: небольшое окно с полями и кнопкой.
Что мы сделали
- Прошли 20 версий макетаОт первой идеи до утверждённого варианта: композиция, шрифты, плотность.
- Спроектировали структуруГлавная, «О нас», услуги, прайс-лист, клубные карты, подарочный сертификат.
- Оформили главнуюГлавный экран с призывом, блок о студии, популярные услуги с переключением процедур, преимущества, отзывы, форма записи.
- Сделали страницу «О нас»Рассказ о студии, пространство с фотографиями, оборудование, команда.
- Сделали страницу услугиНа примере лазерной эпиляции: преимущества, аппарат, подготовка, показания и противопоказания, «до и после», запись на приём.
- Нарисовали прайс-листВкладки по процедурам и раскрывающиеся разделы по зонам.
- Сделали клубную карту и сертификатСтраницы, окно оформления и переход к оплате.
- Добавили личный кабинет клиентаКлиенты студии могут зайти в личный кабинет на сайте.
- Нарисовали окна и страницы ошибокОкна записи, страницы 404 и 500, баннеры.
- Сверстали сайтДля компьютера и для телефона.
Как мы прорабатывали макет
Дизайн этого сайта занял четыре недели, и почти всё это время ушло на макет. Мы не торопились: делали версию, смотрели на неё свежим взглядом и возвращались к ней снова.
20версий макета
Условная схема: каждая полоска — версия, жёлтая — утверждённая
- Поиск 1Композиция
Где поставить главный экран, прайс и клубную карту, чтобы они не терялись среди текста и фотографий. Блоки переставляли не один раз.
- Поиск 2Шрифты
Перебирали сочетания заголовка и основного текста: заголовок должен был стать характером сайта, а текст читаться с первого раза.
- Поиск 3Плотность
Сколько воздуха оставить вокруг заголовков, насколько крупными делать подписи, как уместить длинный прайс-лист на телефоне и не утомить читателя.
Нас интересовало не «красиво вообще»: каждый экран должен выглядеть спокойно, читаться с первого раза и подходить студии. Поэтому мы возвращались к одним и тем же блокам по несколько раз и меняли мелочи: отступы, размер текста, расположение кнопок.
Над чем ещё работали
- Главный экран и баннеры
- Прайс-лист на телефоне
- Страница клубной карты
- Цвет элементов при наведении
- Окна записи и оформления
- Страницы ошибок 404 и 500
Личный кабинет и покупка клубной карты
Кроме витрины услуг, на сайте можно купить. Клубная карта оформляется на отдельной странице, а рядом лежит страница подарочного сертификата. Клиенты студии могут зайти в личный кабинет.
- Страница клубной картыЧеловек видит условия, варианты по сроку и правила пользования картой и нажимает «Приобрести».
- Окно оформленияИмя, телефон, почта и выбор срока карты: четыре поля и одна кнопка, ничего лишнего.
- Переход к оплатеКнопка «Перейти к оплате» ведёт к оплате карты.
Подарочный сертификат устроен так же: правила, как заказать, как оплатить и как получить, форма с выбором срока и данными получателя.
Клиенты студии могут зайти в личный кабинет на сайте.
Стиль: цвета, шрифты, настроение
Спокойное, чистое настроение с большим количеством воздуха: глубокий бирюзовый, тёплый бежевый и тонкое золото, крупные заголовки, мягкие карточки и много фотографий.
Тонкая широкая надпись GRACE, золотая подпись «Студия эстетики тела и лица» и бирюзовый фон: эти же цвета работают в шапке, подвале, кнопках и клубной карте.
Светлые экраны бежевые или светло-серые, а золото остаётся тонкой линией и подписью.
- #115E66Глубокий бирюзовый: шапка, подвал, акцентные блоки
- #E0D8CCТёплый бежевый: светлые экраны
- #DCDCDEСветло-серый: главный экран, карточки
- #B69148Золотистый: тонкие линии и подписи
- #F8C56AСветлое золото: надписи на кнопках
- #154B50Тёмный бирюзовый: нижняя полоса подвала
- ЗаголовкиПопулярные услуги
Тонкий широкий шрифт заглавными буквами; крупно и с большим воздухом вокруг.
- Основной текстПростой рубленый шрифт для описаний, прайса и форм.
Спокойный гротеск: читается на любом экране, в том числе в длинном прайс-листе.
- Кнопки
Бирюзовая кнопка с золотой надписью и контурная: скруглённые углы, как в окнах записи.
Сайт студии на компьютере и на телефоне
Для каждой страницы мы нарисовали макет для компьютера и для телефона. На картинках макеты дизайна: цены и контакты клиента на них закрыты.
На компьютере
На телефоне
Клубная карта 
Страница услуги 
Главная: популярные услуги Подарочный сертификат
Блоки страницы
- Главная
- О нас
- Страница услуги
- Прайс-лист
- Клубная карта
- Подарочный сертификат
- Окна записи и оформления
- Страницы ошибок 404 и 500
- Баннеры
Что получил клиент
У студии Beauty Grace теперь корпоративный сайт в собственном стиле: страница о студии, услуги с подробным описанием, прайс-лист, клубная карта и подарочный сертификат, личный кабинет и короткая форма записи.
- Сайт готовВсе страницы нарисованы и сверстаны, есть версии для компьютера и для телефона.
- Своя айдентика сайтаБирюзовый, бежевый и золото, тонкие заголовки и мягкие карточки держат все страницы в одном образе.
- Покупка на сайтеКлубная карта и подарочный сертификат: окно оформления и переход к оплате.
- Личный кабинет и записьКабинет для клиентов студии и короткое окно записи на услугу.
Срок и этапы
6 недель от первого макета до готового сайта
Комментарий студии
Над макетом для Beauty Grace мы работали долго и кропотливо: 20 версий, пока сайт не стал выглядеть так же спокойно и аккуратно, как сама студия. Мы возвращались к одним и тем же блокам, меняли отступы, шрифты и плотность и не торопились с выводом. Отдельно сделали покупку клубной карты и личный кабинет, чтобы сайт был не только витриной.
GreenOakвеб-студия
Нужен сайт, который выглядит так, как ваш бизнес?
Расскажите, чем занимается ваша компания и что должно быть на сайте: услуги, запись, покупка, личный кабинет. Скажем, что можно сделать, за какой срок и сколько это стоит.
- Срок
- 6 недель
- Тип
- Корпоративный сайт
- Состав
- Макеты, дизайн, вёрстка, кабинет
- Год
- 2024
Обсудить проект
Опишите задачу в двух-трёх фразах. Ответим и предложим варианты.
Понравился проект? Хочу такой же сайт: условия и цены · Другие примеры работ