Первые шаги в веб-дизайне: лендинг для мужского парфюма

Привет, меня зовут Инна. Я учусь на курсе «Профессия веб-дизайнер» от Логомашины. Хочу поделиться опытом выполнения учебного проекта по созданию дизайна лендинга (одностраничного сайта) для презентации нового мужского аромата.

Время на чтение: 10 минут

Необходимо было создать дизайн лендинга для нового мужского аромата «Feromon 47».

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

В задании была описана целевая аудитория — это замужние женщины, 35–50 лет, проживающие в Москве и Петербурге. Был приведён список конкурентов и сформулированы ожидания заказчика от сайта.

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

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

2. Составление портрета пользователя

3. Формирование гипотезы: как пользователь будет пользоваться лендингом

4. Разработка прототипа лендинга

5. Создание мудборда

6. Разработка дизайна лендинга

7. Разработка дизайна мобильной версии

8. Создание презентации проекта

Основные конкуренты были заданы в брифе:

Histoires de Parfums

Etat Libre D’Orange

Room 1015

Élisire

Kierin NYC

Eight & Bob

Juliette Has A Gun

Glossier

Я изучила их сайты и сделала таблицу. В строках таблицы я отмечала разделы сайта и отдельные элементы, используемые конкурентами для описания парфюма. В ячейках таблицы делала отметки о каких-то особенностях, об удачных и неудачных решениях.

Далее я анализировала каждую строку таблицы (раздел или какой-то элемент сайта) , сверяла с брифом, вопросами потенциальных покупателей и принимала решение нужен ли этот раздел в лендинге.

В последнем столбце таблицы я указала элементы, которые посчитала нужным реализовать на своем лендинге. Также в примечаниях сразу писала какие-то особенности по возможным интерфейсным решениям, если какие-то идеи казались удачными у конкурентов.

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

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

Лендинг должен быть ярким, нескучным, атомосферным, вызывать ассоциации с мощью воды, водопадом.

Для этих целей необходимы интересные фото, коллажи, легкая анимация.

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

Решила включить в лендинг следующие блоки:

Было интересно представить себе потенциального покупателя и попробовать сформулировать его вопросы по продукту.

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

Вот какие портреты получились у меня.

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

Следующим этапом было создание дизайна сайта. Я вдохновлялась сайтами на тему моды, парфюма, путешествий и спорта на ресурсах: behance и awwwards и просто в сети.

Большое вдохновение я получила от сайта Kenzo. Для меня оказалось созвучным их видение мира. На сайте Kenzo меня впечатлили красивые видео и подкупила лаконичность оформления.

Бесплатные фотографии для дизайна лендинга я искала и нашла на ресурсах unsplash и freepik.

Фотографии в этом проекте очень важны. Они создают настроение и атомосферу.

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

Для заголовков был выбран шрифт Tenor Sans, он подчеркнет изысканность продукта.

Для основного текста был выбран шрифт Montserrat, он удобен для чтения, выглядит достаточно основательным за счет квадратных букв и сформирует ощущение надежности.

Для логотипа был выбран шрифт Krona One. Этот шрифт с четкими уверенными линиями и немного приземленными устойчивыми буквами выразит силу, надежность и мощь — качества, которые необходимо было подчеркнуть при оформлении лендинга.

Шрифты я подбирала с помощью ресурса Google Fonts.

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

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

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

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

Также был оформлен кейс в мое портфолио, приглашаю вас посмотреть.

Буду рада поддержке и фидбеку от профессионального сообщества.

Спасибо за внимание!