❤️ Заканчиваю рабочую неделю просто потрясающим концептом

Несмотря на то, как сильно я устала {а у нас сдача крупного проекта на работе в пятницу}. Я почти бежала к этому концепту, молниеносно жмякая alt + tab. Не было зависаний и страха белого листа, не было "300 баннеров" {а это почти болезнь}. А все потому что изначально понятно, что нужно делать и как это хочет видеть заказчица.

если вы скажете что красивое {я же показываю} — мне будет приятно ❤️

#работа

Хочу рассказать о сайте маркетингового агентства, который мы делали совместно с 2Dots

На выбор клиенту были предложены две дизайн-концепции в совершенно разном стиле. Первая навсегда останется в моем сердечке ❤️

Была написана маленькая горсточка решений:
— Стили для текста: изменение обводок, добавление эффектов наведения, псевдоэлементы
— Подгонка блока TE610 под нашу ширину контента и превращение в слайдер для десктопа и мобильных устройств
— Небольшая доделка блока с новостями
— Подгонка блока FAQ под другую ширину и кастомизация текста
— Классное мобильное меню
— Базовый оптимизатион

Часть решений я делала на последнем стриме.

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

надеюсь, вы не против того, чтобы очень редко делилась тут работами

#работа

Новые награды в копилку наград (теперь их стало 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 очень милые обложки и появилось средство для мытья фруктов и овощей (поставь лайк, если терпеть не можешь отскребать воск с яблок 😭).

#работа

Сейчас я работаю одновременно над двумя интересными проектами {и самое важное, не конфликтными 🥺}.

✨Редизайн двух страниц косметики для дома

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

Создание проекта от и до есть по тегу ➡️ #работа. Кстати, их гель для стирки "капли розы" просто лучший. Подписавшись на рассылку можно получить промик на скидку.

✨Сайт для шале и коттеджа в Гудаури

Просто представьте, ребята привезли в горы Грузии сосну из Карелии и построили Шале. Я сразу вспомнила любимую передачу детства "Уникальные дома из дерева".

В ходе обсуждения стиля сайта были выбраны два совсем разных направления (что у меня случается редко):
➖с атмосферой лёгкости, стильный и аккуратный (c кучей отсылок на Грузию и лыжную тематику)
➖строгий, уверенный в духе старых лыжных постеров (ретро обработка фотографий и движение лыжника по пути).

Какой концепт выбрали попробуйте угадать самостоятельно 😤

#работа

Сайт комплекса в Гудаури — горнолыжном курорте в Грузии.

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

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

Этот проект я начала с изучения сайтов крупных и не очень отелей в Гудаури, найдя лишь пару действительно качественных, но устаревших сайтов. Поэтому в исследования попали сайты похожей ниши в России. Помимо этого я изучила отзывы на сервисах бронирования, чтобы выявить проблемы, с которыми сталкиваются посетители.

Минусы: большинство сайтов в Грузии либо устарели, либо не используются; на сайтах мало информации о номерах и нет правил проживания; не ясно какие услуги вообще включены в обслуживание; нет узнаваемого фирменного стиля {я нашла с десяток сайтов в Алтае, которые просто зеленые потому что в Алтае есть лес? ❔}.

Какие выводы мы сделали {гипотезы}:
*️⃣Многие люди перед посещением какого-то места {или заказа услуги} переходят на сайт компании в поиске нужной информации, но вместо этого часто предлагается позвонить и уточнить все детали. Мы же подробно расскажем всё уже на первой странице.
*️⃣Вместо простого минималистичного сайта делаем яркий сайт-постер, прорабатываем детали и придумываем свои фишки (ребята привезли сосну из Карелии в горы Грузии, что очень нестандартно и сайт должен быть не обычным).
*️⃣Как показало исследование отзывов на системах бронирования — многие люди считают оскорбительным только правильные ракурсы и лучшие детали объектов. Мы решили не обрабатывать фотографии объектов и не пытаться подобрать исключительно выгодные ракурсы.


По тегу #работа можно почитать подробно про еще один проект. Если вам интересны такие моменты — ставьте моих любимых единорогов под пост.