Создание многостраничного сайта на Тильде для бьюти-студии

Привет! В этом посте расскажу про учебный проект по созданию многостраничного сайта бьюти-студии «River» на платформе «Тильда»

Время на чтение - 5 минут.

Содержание

  • О проекте
  • Основные этапы проекта
  • Анализ конкурентов
  • Создание портретов пользователей
  • Создание прототипа сайта
  • Поиск референсов и создание мудборда
  • Разработка визуальной концепции сайта
  • Верстка на платформе «Тильда»
  • Оформление кейса для портфолио

О проекте

Необходимо создать многостраничный сайт на платформе «Тильда» для бьюти-студии «River». Сайт должен включать не менее 3-х страниц, одна страница должна быть подготовлена с помощью zero-блока.

«River» - это уютный салон красоты в Санкт-Петербурге. В салоне оказывают услуги маникюра, педикюра, ухода за бровями и ресницами.

Сайт нужен для ознакомления с работой мастеров, размещения прайса и для онлайн записи на процедуры.

Заказчик ожидает увидеть простой, удобный, светлый и минималистичный сайт. Необходимо продемонстрировать эстетику и качество работы мастеров.

Потенциальные клиенты - девушки из Петербурга, 20-35, делают бьюти процедуры, важно качество и экономия времени.

Основные этапы проекта

  1. Анализ конкурентов
  2. Создание портретов пользователей
  3. Создание прототипа сайта
  4. Поиск референсов и создание мудборда
  5. Разработка визуальной концепции сайта
  6. Верстка на платформе «Тильда»
  7. Добавление анимации
  8. Адаптация под мобильные устройства
  9. Оформление кейса в портфолио

Анализ конкурентов

Два основных конкурента - Pilki и Beauty. Для более качественного анализа изучила сайты и других салонов красоты, а всю информацию свела в таблицу.

Исследуя сайты, обращала внимание на состав страниц и блоков, вопросы и отзывы клиентов. Главная цель этой работы была — определить структуру будущего сайта, чтобы наилучшим образом реализовать необходимый функционал и предоставить ответы частые на вопросы по услуге.

Вот так выглядят первые страницы сайтов конкурентов
Вот так выглядят первые страницы сайтов конкурентов

Портреты пользователей

Рисую портреты будущих клиентов, чтобы образно представлять их потребности и тревоги.

Получилось так:

Мария
Мария
Елена
Елена

В результате получилось сформулировать вопросы потенциальных клиентов, на которые должен ответить сайт.

Основные вопросы клиентов сайта:

  • Какие виды услуг можно получить в студии?
  • Какая стоимость услуг?
  • Что говорят клиенты студии?
  • Какие мастера работают, что могут, как посмотреть их работы?
  • Как записаться?
  • Где находится студия и как быстро добраться?

Создание прототипа сайта

С помощью брифа, результатов анализа конкурентов, вопросов потенциальных покупателей был сформирован состав страниц, блоков и разделов будущего сайта и создан прототип сайта (wareframe).

Прототип
Прототип

Поиск референсов и создание мудборда

Вдохновение я искала на сайте Behance, просматривая проекты по теме бьюти индустрии. А также на реальных сайтах, близких по теме, например сайте Kenzo.

Подходящие проекту фото подбирала на сайтах Unsplash и Freepik.

В проекте хотелось отразить чистоту, способность видеть красоту, внимание к деталям.

Создание многостраничного сайта на Тильде для бьюти-студии
Вдохновение
Вдохновение

Разработка визуальной концепции сайта

Визуальная концепция выстроилась на основе изображения, которое мне захотелось использовать в проекте.

Для акцентов я выбрала теплый оттенок розового цвета, чтобы вызвать ассоциации с цветами и красотой природы.

Цвета сайта
Цвета сайта

Для шрифта заголовков я выбрала шрифт Inglobal. Это гротеск с очень плавными и утонченными изгибами букв. Я предположила, что такой шрифт подчеркнет современность применяемых бьюти-студией технологий, творческий подход и красоту результата.

В качестве шрифта основного текста решила использовать шрифт TildaSans.

Для подбора шрифта заголовков я использовала возможности Шрифтотеки студии «МЫ С КОТОМ».

Разработка логотипа

Создание логотипа не было частью задания, но мне захотелось его придумать.

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

Лого
Лого

Дизайн

Ниже размещены страницы сайта

Первый экран главной страницы сайта
Первый экран главной страницы сайта

В верхней части первого экрана главной страницы — бегущая строка с информацией об акциях.

На главной странице сайта информация о студии, ее преимуществах, об услугах и ценах, мастерах, местонахождение на карте, форма для записи в электронном виде и отзывы.

Преимущества
Преимущества

При создании сайта добавила небольшой параллакс эффект для лепестков при скролинге. Как получилось можно посмотреть здесь

Главная страница в мобильной версии
Главная страница в мобильной версии
Информация об услугах и ценах
Информация об услугах и ценах
Информация о мастерах студии
Информация о мастерах студии
Форма для записи
Форма для записи
Страница портфолио
Страница портфолио
Страница портфолио
Страница портфолио

Верстка на платформе «Тильда»

Страницы сайта разработала с помощью шаблонных блоков и zero-блоков платформы Tilda (бесплатная версия) и адаптировала под мобильные устройства.

Посмотреть работу сайта можно здесь

Оформление кейса для портфолио

Приглашаю посмотреть кейс на Behance

Буду рада обратной связи🧡

11
1 комментарий

Приятный сайт, создаёт лёгкое ощущение.

1
Ответить