Привет! В этом посте расскажу про учебный проект по созданию многостраничного сайта бьюти-студии «River» на платформе «Тильда»Время на чтение - 5 минут.СодержаниеО проектеОсновные этапы проектаАнализ конкурентовСоздание портретов пользователейСоздание прототипа сайтаПоиск референсов и создание мудбордаРазработка визуальной концепции сайтаВерстка на платформе «Тильда»Оформление кейса для портфолиоО проектеНеобходимо создать многостраничный сайт на платформе «Тильда» для бьюти-студии «River». Сайт должен включать не менее 3-х страниц, одна страница должна быть подготовлена с помощью zero-блока.«River» - это уютный салон красоты в Санкт-Петербурге. В салоне оказывают услуги маникюра, педикюра, ухода за бровями и ресницами.Сайт нужен для ознакомления с работой мастеров, размещения прайса и для онлайн записи на процедуры.Заказчик ожидает увидеть простой, удобный, светлый и минималистичный сайт. Необходимо продемонстрировать эстетику и качество работы мастеров.Потенциальные клиенты - девушки из Петербурга, 20-35, делают бьюти процедуры, важно качество и экономия времени.Основные этапы проектаАнализ конкурентовСоздание портретов пользователейСоздание прототипа сайтаПоиск референсов и создание мудбордаРазработка визуальной концепции сайтаВерстка на платформе «Тильда»Добавление анимацииАдаптация под мобильные устройстваОформление кейса в портфолиоАнализ конкурентовДва основных конкурента - Pilki и Beauty. Для более качественного анализа изучила сайты и других салонов красоты, а всю информацию свела в таблицу. Исследуя сайты, обращала внимание на состав страниц и блоков, вопросы и отзывы клиентов. Главная цель этой работы была — определить структуру будущего сайта, чтобы наилучшим образом реализовать необходимый функционал и предоставить ответы частые на вопросы по услуге.Вот так выглядят первые страницы сайтов конкурентовПортреты пользователейРисую портреты будущих клиентов, чтобы образно представлять их потребности и тревоги.Получилось так:МарияЕленаВ результате получилось сформулировать вопросы потенциальных клиентов, на которые должен ответить сайт.Основные вопросы клиентов сайта:Какие виды услуг можно получить в студии?Какая стоимость услуг?Что говорят клиенты студии?Какие мастера работают, что могут, как посмотреть их работы?Как записаться?Где находится студия и как быстро добраться?Создание прототипа сайтаС помощью брифа, результатов анализа конкурентов, вопросов потенциальных покупателей был сформирован состав страниц, блоков и разделов будущего сайта и создан прототип сайта (wareframe).ПрототипПоиск референсов и создание мудбордаВдохновение я искала на сайте Behance, просматривая проекты по теме бьюти индустрии. А также на реальных сайтах, близких по теме, например сайте Kenzo.Подходящие проекту фото подбирала на сайтах Unsplash и Freepik.В проекте хотелось отразить чистоту, способность видеть красоту, внимание к деталям. ВдохновениеРазработка визуальной концепции сайтаВизуальная концепция выстроилась на основе изображения, которое мне захотелось использовать в проекте.Для акцентов я выбрала теплый оттенок розового цвета, чтобы вызвать ассоциации с цветами и красотой природы.Цвета сайтаДля шрифта заголовков я выбрала шрифт Inglobal. Это гротеск с очень плавными и утонченными изгибами букв. Я предположила, что такой шрифт подчеркнет современность применяемых бьюти-студией технологий, творческий подход и красоту результата.В качестве шрифта основного текста решила использовать шрифт TildaSans.Для подбора шрифта заголовков я использовала возможности Шрифтотеки студии «МЫ С КОТОМ». Разработка логотипаСоздание логотипа не было частью задания, но мне захотелось его придумать.В основе идеи — витраж с узором из лепестков, по форме напоминающих изгибы реки. Символизирует красоту природы, воплощенную в произведении искусства. Получилось вот так:ЛогоДизайнНиже размещены страницы сайтаПервый экран главной страницы сайтаВ верхней части первого экрана главной страницы — бегущая строка с информацией об акциях.На главной странице сайта информация о студии, ее преимуществах, об услугах и ценах, мастерах, местонахождение на карте, форма для записи в электронном виде и отзывы.ПреимуществаПри создании сайта добавила небольшой параллакс эффект для лепестков при скролинге. Как получилось можно посмотреть здесьГлавная страница в мобильной версииИнформация об услугах и ценахИнформация о мастерах студииФорма для записиСтраница портфолиоСтраница портфолиоВерстка на платформе «Тильда»Страницы сайта разработала с помощью шаблонных блоков и zero-блоков платформы Tilda (бесплатная версия) и адаптировала под мобильные устройства.Посмотреть работу сайта можно здесьОформление кейса для портфолиоПриглашаю посмотреть кейс на BehanceБуду рада обратной связи🧡
Приятный сайт, создаёт лёгкое ощущение.