Новые награды в копилку наград (теперь их стало 11) 😳


Отдельное спасибо всем, кто голосовал за сайт. Благодаря вам получена грамота Special Kudos ❤️

#работа

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

[исследования]
Традиционно любой проект я начинаю с небольших исследований. Полноценные исследования провожу только с привлечением UX-дизайнера {но очень хочу сама стать немного дизайнером продукта}. В данном проекте я начала с изучения конкурентов на нашем рынке и поняла, что их нет: упор делается на отсутствии ароматов и экологичности 😥. После анализа нескольких брендов выделила минусы и какие тезисы мы можем взять с сайтов конкурентов (да, не всегда стоит просто обосрать конкурентов, у них можно и учиться).

Минусы: старые сайты с плохой структурой и визуалом, некрасивые упаковки средств {которые мы просто прячем по раковину или переливаем мыло для рук в свой дозатор}.

Что можем использовать:
✧ люди боятся ароматизаторов из-за риска аллергии и идентифицируют такую продукцию опасной — пишем, что составы безопасны и не аллергенны (у нас и фотография есть с милейшим ребенком)
✧ пишем, что разработка была во Франции — это устоявшийся паттерн того, что продукты лучше в качестве (в пример приведу Skinjestique, которые год делали спф в России и не сделали 😪)
✧ не скрываем качества продукта за семью замками

После анализа я зацепилась за слоган компании «Косметика для дома™» и отправилась изучать сайты косметических брендов. Ассоциации по итогам можно увидеть на слайде. Если же мой рассказ был интересен и хочется увидеть следующую часть поста, то ставьте единорожек под пост 🦄

#работа

Продолжу рассказ о проекте Aromenenage.

Напомню, что в прошлом посте я рассказала о проведении базовых исследований.

[мудборд]
Данному этапу я уделяю большое количество времени, ибо правильный подбор референсов уменьшит количество правок в дальнейшем (как нибудь я расскажу вам историю о том, как один клиент одобрял все этапы работ, а на этапе готовности концептов все развернул, ибо не смотрел референсы, концепты и вообще лень 🤡). После проведения исследований стало ясно, что делать ориентир на стандартные сайты бытовой химии нельзя. Поэтому в поиске референсов я ни разу обратилась к этой тематике. Из предложенных приемов мы выбрали: журнальный стиль, необычную композицию и капельку брутализма (уменьшить отступы, сделать все тексты lowercase).

[дизайн-концепты]
"делаем холст, ставим логотип и текст, понимаем что плохо получилось хуйня какая-то вышла и уходим страдать, что ничего не умеем".

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

Были сделаны два варианта:
✧ симметричный вариант с отсылкой на этикетку
✧ ассиметричный вариант в стиле zara home. в этом варианте я добавила еще одну колонку в сетку, подчеркнула одну из силовых линий и добавила чуть больше текста

В итоге мы решили совместить два макета, взяв с первого header, а со второго сетку в 5 колонок и приступили к дорисовке главной страницы. Про которую нужно рассказывать отдельно (ибо синий цвет там не от балды нарисовался). Буду рада реакциям и комментариям ❤️ (иначе мне придется писать только про скандалы-интриги-переживания-расследования).

#работа

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

Aroménage — это бренд косметики для дома из натуральных компонентов с очень крутыми ароматами. От себя отмечу потрясающую упаковку, которую точно захочется оставить когда средство кончится (я уже приспособила бутылку под воду для цветов).

Целью было создать стильный сайт отличающийся от стандартных сайтов с бытовой химией: стильный, минималистичный и эффектный. Помимо главной страницы мы сделали каталог, карточку продукта и страницу о компании. Сайт был сверстан на тильде и очень сильно кастомизирован {а я не умею иначе, простите ☺️}.

Посмотреть сайт тут →


Что было сделано:
— эффект загрузки страницы с имитацией дозагрузки страниц
— вариативный эффект наведения для пунктов меню и немного стилей для анимации шапки
— стилизация стандартного мобильного меню
— стилизация футера и собственной модификации аккордеона
— кастомный слайдер на странице "Каталог" в Zero Block
— переделка стандартного блока магазина под сетку проекта
— переделка блока "карточка со ссылкой", превращение в слайдер и встраивание его в Zero Block (линейка ароматов)
— изменение стилей popup товара: сетки, перенос аккордеона, добавление кнопок, стили текста
— слайдер из блока "карточка со ссылкой" на странице "о компании"
— стилизация стандартного блока "блог": изменение сетки, добавление стрелки при наведении и временный ховер
— базовая оптимизация, чтобы сайт быстро грузился (попали в зеленую зону lighthouse)
— анимации на мобильном


Для этого сайта как раз был написан эффект искажения с этой страницы, но я не смогла победить шейпы в Zero Block и проблему с тем, что он выборочно отображается в Safari (ставлю цель накопить на macbook ради красивых эффектов ☹️). MOT традиционно не взят.

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


#работа

Я знаю, что вы любите До/После переделки блоков на тильде 😎

Нужно было сделать страницу для публикации новостей и стилизовать её под сайт. Что я сделала:
1. Переделала сетку потоков под ту, которая используется на всём сайте.
2. Сделала нормальный адаптив для сетки потоков.
3. Переделала убогие кнопки разделов в менее активные.
4. Самую малость поправила popup с новостью.

Но больше всего на этом сайте горжусь эффектом перехода по страницам, имитирующим переход без перезагрузки {когда очень хочется роутинг на тильде} 😍

Кстати, у ребят на Ozon очень милые обложки и появилось средство для мытья фруктов и овощей (поставь лайк, если терпеть не можешь отскребать воск с яблок 😭).

#работа