Проект по Feromon 47: лендинг для мужского парфюма

Совсем недавно закончила учебный проект по созданию лендинга для парфюма “Feromon 47” и захотела рассказать о нём вам.

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

Также поделюсь своими страхами, переживаниями и маленькими успехами :)

Итак, начинаем наше маленькое водное путешествие по аромату.

⠀

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

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

Важно: в прототипе не используем подобранные шрифты, цвета, иллюстрации. Другими словами не делаем дизайн.

Ширину экрана сделала в 1440 px. Далее настроила сетку из 12 колонок с гаттером в 20 px, лично для меня она самая удобная. Многие опытные дизайнеры советуют настраивать сетку не с самого начала, а лишь когда закончат верстать макет, чтобы сетка не мешала творческому процессу. Честно, я пыталась придерживаться этому правилу, но поняла, что лично мне пока комфортнее изначально выстраивать сетку. Не скажу, что она у меня постоянно включена, может быть, я делаю это потому, что немного побаиваюсь пустого листа.

Ниже представлен прототип:

⠀

Затем приступила к составлению мудборда. Для генерации идей воспользовалась источниками: behance, dribbble, awwwards и дизайнерскими каналами в телеграмме. Я брала идеи почти из разных тематик, где видела что-то необычное и в то же время более менее выполнимое для меня.

Куда без фотостоков :) Unsplash, Loon, freepik - основные ресурсы, откуда брала материал для контента. Италия, атмосфера леса после дождя, тёплое море и деловой мужчина. Думаю, более подробно описывать не буду, просто проникнитесь фотографиями :)

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

На фотографиях ниже представлены понравившиеся фрагменты:

1. Сайт национального театра. Здесь мне очень понравился блок с отзывами, и я решила применить такой стиль в своём проекте.
2. Блок местоположения.

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

⠀

Сначала за подбором цвета обратилась к сайту coolors.co (хороший сервис для подбора цветовых решений), но в последний момент, приглядевшись к фотографиям, которые были подобраны для мудборда, взяла оттенки из них и составила палитру. Не забываем цель: передать аромат не только через фотографии, но и через цвета.

Опишу каждый цвет и с чем они ассоциируются.

• Первый и второй цвета передают строгость, сдержанность, статус и легкую дымку - бензоин
• Третий цвет напоминает цитрусы, также присутствует в этом цвете оттенок зеленого - кипарис, ветивер, кедр
  
• Четвертый - чистота, свежесть и легкость
  
• Пятый - цвет воды, глубины и спокойствия

⠀

В проекте использовались шрифты El Messiri, Cormorant и Raleway.

Для начала мне хотелось найти шрифт, который бы передавал “текстуру” воды, то бишь был плавным, перетекающим. El Messiri как раз подходил для такого шрифта и использовался исключительно для названия и акцентных моментов. Cormorant - относительно строгий шрифт с засечками, применялся для заголовков. Начертанием похож на первый шрифт и задаёт уверенное настроение, силу и стабильность. И последний, Raleway, как раз подходит для больших текстов, передает воздушность и сдержанность. Подбирала шрифты с помощью сервиса fontjoy.

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

Ниже представлены кусочки дизайна десктопной версии:

Заметили? Блоки с отзывами и местоположением. Хорошо получилось адаптировать? :)

⠀

Думаю, самым сложным и интересным блоком в оформлении был именно этот. Да, он выглядит просто, но как говорится “иногда самое лёгкое, требует больше затраченного времени”.

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

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

Ниже скриншот с градиентом:

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

⠀

⠀

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

Скажу по секрету, иногда вы можете сходить в какие-нибудь места, где будет нужная для вашей работы атмосфера, и немного прочувствовать её. Что я и сделала :)

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

Работала над проектом я действительно долго. Причиной всему не только отсутствие вдохновения, но и мой перфекционизм. Это была дикая борьба с собой. Мне многое не нравилось, приходилось даже переделывать всё с самого начала. Но, знаете, это был удивительный опыт, потому что он заставил меня наконец-то научиться легче относится к процессу. Ведь иногда можно так целый год сидеть и с пикселями играться :)

⠀

Во время оформления проекта наконец-то научилась работать с компонентами и сделала свою самую первую анимацию! (нет, не только наведение на кнопку).

Спойлер: анимация есть в проекте на behance.

К тому же мой куратор дала мне немного знаний по UX части, одно из которых:

• когда делаем иконку с нажатием, её необходимо поместить в “контейнер”, чтобы верстальщик смог правильно определить область нажатия на иконку, и тогда пользователь точно попадёт по иконке (особенно в мобильной версии)

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

⠀

Спасибо за просмотр 💜

Буду рада вашей поддержке и комментариям :)