Привет, меня зовут Инна. Я учусь на курсе «Профессия веб-дизайнер» от Логомашины. Хочу поделиться опытом выполнения учебного проекта по созданию дизайна лендинга (одностраничного сайта) для презентации нового мужского аромата.
Время на чтение: 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
Я изучила их сайты и сделала таблицу. В строках таблицы я отмечала разделы сайта и отдельные элементы, используемые конкурентами для описания парфюма. В ячейках таблицы делала отметки о каких-то особенностях, об удачных и неудачных решениях.
Далее я анализировала каждую строку таблицы (раздел или какой-то элемент сайта) , сверяла с брифом, вопросами потенциальных покупателей и принимала решение нужен ли этот раздел в лендинге.
В последнем столбце таблицы я указала элементы, которые посчитала нужным реализовать на своем лендинге. Также в примечаниях сразу писала какие-то особенности по возможным интерфейсным решениям, если какие-то идеи казались удачными у конкурентов.
В результате анализа конкурентов проявились очертания структуры будущего лендинга, появилось понимание о возможных ожиданиях потенциальных посетителей сайта.
Полезно было почитать отзывы покупателей и разделы с часто задаваемыми вопросами, чтобы нарисовать для себя портет пользователя и понять, что он скорее всего будет искать на сайте.
После изучения сайтов конкурентов была сформулирована гипотеза (описание каким лендинг должен увидеть клиент и как он им будет пользоваться) и создан портрет потенциального покупателя
Гипотеза
Лендинг должен быть ярким, нескучным, атомосферным, вызывать ассоциации с мощью воды, водопадом.
Для этих целей необходимы интересные фото, коллажи, легкая анимация.
Информация должна быть структурирована и выдаваться посетителю сайта постепенно от более общей (выразительные фото и художественное описание аромата) к детальной.
Решила включить в лендинг следующие блоки:
Портрет пользователя
Было интересно представить себе потенциального покупателя и попробовать сформулировать его вопросы по продукту.
Эти вопросы нужно было учесть при создании прототипа лендинга, чтобы каждый посетитель сайта смог найти все что ему необходимо.
Целевая аудитория — это замужние женщины, 35-50 лет, проживающие в Москве и Петербурге. Они покупают парфюм для своих мужей или отцов, интересуются воспитанием, офлайн-шопингом и обустройством быта.
Вот какие портреты получились у меня.
В итоге получились вот такие вопросы пользователей, на которые должен ответить лендинг
Кто создал парфюм?
Какие ноты в аромате?
Для кого подойдет парфюм?
Сколько стоит?
Где и как можно купить?
Какой аромат?
Какая стойкость у аромата?
Подойдет ли для подарка?
Что говорят покупатели?
Какой объем?
Возможна ли покупка онлайн и доставка?
Вайрфрейм
После анализа условий задачи, изучения сайтов конкурентов и поиска подходящих решений были определены разделы, состав элементов будущего лендинга и создан вайрфрейм.
Создание мудборда
Следующим этапом было создание дизайна сайта. Я вдохновлялась сайтами на тему моды, парфюма, путешествий и спорта на ресурсах: behance и awwwards и просто в сети.
Большое вдохновение я получила от сайта Kenzo. Для меня оказалось созвучным их видение мира. На сайте Kenzo меня впечатлили красивые видео и подкупила лаконичность оформления.
Фотографии в этом проекте очень важны. Они создают настроение и атомосферу.
Вот такая доска настроения/вдохновения у меня получилась.
Разработка дизайна лендинга
Для заголовков был выбран шрифт Tenor Sans, он подчеркнет изысканность продукта.
Для основного текста был выбран шрифт Montserrat, он удобен для чтения, выглядит достаточно основательным за счет квадратных букв и сформирует ощущение надежности.
Для логотипа был выбран шрифт Krona One. Этот шрифт с четкими уверенными линиями и немного приземленными устойчивыми буквами выразит силу, надежность и мощь — качества, которые необходимо было подчеркнуть при оформлении лендинга.
Шрифты я подбирала с помощью ресурса Google Fonts.
Оформление лендинга не должно отвлекать внимание от фотографий, поэтому основные цвета лендинга — белый и близкий к черному. Этот момент я запомнила при просмотре сайтов конкурентов и решила использовать в своем лендинге тоже — фотографии должны быть на первом месте.
Акцентный бирюзовый созвучен цвету воды, приглушенный апельсиновый — противоположный ему на цветовом круге и поэтому создает приятное сочетание.
Вот такой дизайн получился в результате.
Разработка дизайна мобильной версии
Создание презентации проекта
Презентация проекта важная часть работы. В презентации необходимо было рассказать как и почему были выбраны те или иные дизайнерские решения, какая работа над проектом была проделана.
Также был оформлен кейс в мое портфолио, приглашаю вас посмотреть.
Буду рада поддержке и фидбеку от профессионального сообщества.
Спасибо за внимание!
Клепать сайты пачками подобного формата по шаблонам в Elementor - ну тут даже учиться не надо: открыл обучалки на YouTube и через 20 минут уже есть понимание как это работает.
Не шедевр конечно, но для навыка работы с шаблонами как практикум - сойдёт. Я вижу с отступами прям беда пока, доработайте.
в целом все равно неплохо,картинка приятная
спасибо)
спасибо, ок
в итоге получилось очень даже красиво
Спасибо)
Хорошо получилось
Спасибо)
А мне цветовая гамма понравилась, все как-то изысканно