Красота
как исскуство
как исскуство
Personal Website · Makeup Artist · UX/UI Design · Tilda
Проблема:
Бизнес Майры достиг потолка роста, ограниченного возможностями социальных сетей. Отсутствие централизованной платформы приводило к двум ключевым проблемам:
- Неэффективная конверсия: Привлеченная из соцсетей аудитория "остывала", пока вручную выясняла детали услуг и искала свободное время, что приводило к высокому проценту оттока.
- Низкая ценность бренда: Разрозненная подача информации не позволяла сформировать образ премиального специалиста и обосновать стоимость услуг.
Решение:
Проект был реализован в виде одностраничного сайта
на платформе Tilda с использованием Zero Blocks.
Была разработана уникальная визуальная система
с акцентом на типографику, минимализм и цветовую палитру, отражающую эстетику beauty-индустрии.
на платформе Tilda с использованием Zero Blocks.
Была разработана уникальная визуальная система
с акцентом на типографику, минимализм и цветовую палитру, отражающую эстетику beauty-индустрии.
Задачи проекта:
- Разработать UX/UI-дизайн, ориентированный на женскую аудиторию 20–40 лет
- Подчеркнуть индивидуальный стиль мастера через визуальную идентичность
- Продумать структуру сайта и пользовательский сценарий для повышения конверсии
- Визуализировать услуги, портфолио и обучение в формате понятных карточек
- Встроить форму обратной связи и CTA-кнопки для записи
- Реализовать верстку на платформе Tilda с адаптацией под мобильные устройства
Цель проекта:
Разработать современный, визуально выверенный и функциональный одностраничный сайт-портфолио для стилиста-визажиста Майры Андреевой с фокусом на продуктовый подход.
Дизайн должен не только отражать премиальность и профессионализм мастера, но и быть основан на аналитике пользовательских сценариев: упрощать путь клиента, повышать доверие и конверсию, а также системно представлять услуги и обучение через продуманный UX и визуальную иерархию UI.
Дизайн должен не только отражать премиальность и профессионализм мастера, но и быть основан на аналитике пользовательских сценариев: упрощать путь клиента, повышать доверие и конверсию, а также системно представлять услуги и обучение через продуманный UX и визуальную иерархию UI.
этапы работы:
цветовая палитра:
Цветовая палитра сочетает нежные и контрастные оттенки которые передают эстетику и премиальность:
wireframe:
На этом этапе была выстроена логическая структура сайта. Каждый блок продуман с точки зрения удобства пользователя: акценты на ключевых действиях, понятная иерархия информации, чёткий пользовательский путь.
Это помогло заранее спланировать визуальный ритм и избежать перегрузки интерфейса на стадии дизайна.
Это помогло заранее спланировать визуальный ритм и избежать перегрузки интерфейса на стадии дизайна.
ТИПОГРАФИКА:
Для проекта были выбраны две гарнитуры: изящная и утончённая гарнитура Cormorant Garamond, подчёркивающая эстетику бренда и создающая ощущение премиальности.
Вторая гарнитура Manrope для подчеркивания акцентов.
Вторая гарнитура Manrope для подчеркивания акцентов.
Десктоп версия:
Полноценная десктопная версия сайта разработана
с учётом удобной навигации, акцентов на визуальный контент и лёгкого восприятия.
Проект включает несколько отдельных страниц: главную, страницы с услугами, галереей работ и страницу
c обучением.
с учётом удобной навигации, акцентов на визуальный контент и лёгкого восприятия.
Проект включает несколько отдельных страниц: главную, страницы с услугами, галереей работ и страницу
c обучением.
Результат:
Сайт получил чёткую структуру и визуальную логику
Повысилось вовлечение пользователей благодаря акценту на фотографиях и удобной навигации. + 20% новых клиентов.
Упрощён путь пользователя к записи на услугу или обучение
Была создана база для дальнейшего продвижения в социальных сетях и через рекламу.
Повысилось вовлечение пользователей благодаря акценту на фотографиях и удобной навигации. + 20% новых клиентов.
Упрощён путь пользователя к записи на услугу или обучение
Была создана база для дальнейшего продвижения в социальных сетях и через рекламу.
Что было сделано:
- Создан нейминг и логотип "MAIRAS.BEAUTY" в стилистике Cormorant Garamond
- Первый экран (Hero-блок) формирует эмоциональную связь. Блоки "Услуги" и "Портфолио" работают с рациональными доводами и снимают возражения. Блоки "Отзывы" и "Контакты" являются финальным толчком к целевому действию — записи".
- Написаны уникальные тексты для каждого раздела, отражающие ценности и tone of voice бренда
- Собраны и оформлены карточки услуг с иконками и понятной иерархией
- Продуман дизайн блока "Обучение" с детальным описанием курса
- Реализована мобильная адаптация всех блоков
- Произведена вёрстка в Tilda, включая микроанимации, визуальные акценты, формы и CTA
- Проведён UX/UI-аудит после запуска и внесены финальные корректировки
Антон Мурлыкин
2025
©