Общая информация: Проект: Hairmaniac.ru — сообщество по уходу за волосами.
Целевая аудитория: Преимущественно женщины, интересующиеся уходом за волосами.
Задачи:
1) Разработка логотипа
Цель: Создать современный, запоминающийся и адаптивный логотип, который станет визуальным символом бренда.
Логотип должен подходить к моб и десктоп версии сайта. Адаптивность: Логотип должен быть читаемым и хорошо смотреться как в крупном размере (шапка сайта), так и в уменьшенном (фавикон, мобильная версия, десктоп).
Можно взять за основу мой пример (файл Logo – приложен).
Требования к логотипу:
- обязательно иконка, девушки, ухаживающей за волосами. Стилизованное изображение девушки, ухаживающей за волосами. Должна передавать динамику, заботу, уход за волосами.
- Формат: Векторный (.ai, .eps, .svg) (на прозрачном фоне, несколько размеров).
- название: Hairmaniac
- подпись: Сообщество по уходу за волосами
- референс по цветам: Актуальная палитра сайта hairmaniac.ru (CSS-цвета).
- цель, чтобы по высоте логотип был не слишком большой. Чем уже тем лучше. Но без перегибов.
- 2-3 варианта логотипов. Дополнительная идея: можно обыграть элементы, связанные с уходом: пена шампуня, брызги краски, струящаяся линия волос.
- Цвета лого и подписи, либо розовые, либо лого розовый – текст черный. #dd127b #333333
2) Дизайн верхнего меню (мобильная версия).
Цель: Создать интуитивно понятный, современный и визуально легкий интерфейс мобильной навигации.
Необходимо прорисовать в Figme верхнее меню сайта.
За основу структуры верхнего и нижнего меню берем сайт dzen.ru
Схематичный пример, как должно выглядеть на сайте hairmaniac.ru: файл MobMenu.jpg (файл приложен)
Требования к верхнему меню:
- По возможности фон верхнего меню овальный (как на dzen.ru – моб версия), за контурами овала прозрачный фон.
- Сначала идет иконка поиска.
- Сам поиск по дизайну будет таким же как и сейчас на сайте hairmaniac.ru. В макете показать.
- далее идет иконка соц сети: ВК
- далее логотип
- Последним элементом идет иконка входа на сайт
- Фон овала (на ваше усмотрение, главное, чтобы было стильно, возможно и черный #333333, не факт что черный впишется в общую концепцию). Как вариант, возможно, от концепции овала можно будет отказаться и оставить белый фон. Однако, нужно понимать, что меню верхнее будет прикреплено к верхнему краю и будет ездить с прокрутной (как на dzen.ru).
- Иконки поиска, ВК – при наведении должны становиться розовыми.
- Нужно 2 варианта.
3) Дизайн нижнего меню (мобильная версия).
Необходимо прорисовать в Figme нижнее меню сайта.
За основу структуры верхнего и нижнего меню берем сайт dzen.ru
Схематичный пример, как должно выглядеть на сайте hairmaniac.ru: файл MobMenu.jpg
Нижнее меню будет прикреплено в нижнему краю.
Требования к нижнему меню:
- 4 раздела с иконками подходящими: Лента, Сообщество, Марафон, Конкурсы
- Иконка меню (сендвич стандартный для мобилки)
- – При нажатии какие цветом выделяются элементы меню. И этим же цветом меню остается выделено, когда пользователь в нем.
Цвета нижнего меню (рекомендация):
- Фон — белый с легкой тенью.
- Неактивные иконки — черный (#333333).
- Активная иконка — розовый (#dd127b).
- Подписи к иконкам — черный (#333333).
4) Дизайн раскрывающегося меню (мобильная версия).
При нажатии на иконку меню – будет раскрываться меню, снизу.
Необходимо прорисовать в Figme.
За основу берем вариант:
(значок плюса необязателен)
Для пунктов с подменю — использовать стрелочку-индикатор ▶ (в закрытом состоянии) и ▼ (в открытом).
Требования:
- css цвета используем, что есть на сайте.
- разделы будут все что сейчас есть на сайте, после Конкурсов.
- Поведение: Выезжает снизу на 70% высоты экрана.
- Группировка и визуальные разделители между группами пунктов.
- Макеты в Figma для всех состояний меню (с раскрывшимся подсписком и без).
- При нажатии какие цветом выделяются элементы меню.
Цвета для раскрывающегося меню:
Фон — белый.
Текст — черный (#333333).
Разделители — светло-серые (#666666).
Ховер-эффект — светло-розовый фон (#fff5f7).
Акцент — розовый (#dd127b) для стрелочек и выделения.
Дополнительные требования:
- Pixel-Perfect: Все макеты должны быть выполнены аккуратно, с выверенными отступами и размерами.
- Система компонентов: Приветствуется создание стилей (Color, Text Styles) и компонентов в Figma для удобства дальнейшей работы.
- Творческий подход: Мы ценим не только техническое исполнение, но и свежие идеи, которые усилят бренд и UX.
- Продуманный UX
- Cтилевое единство во всех элементах
5) Время на правки. Рассчитываю на плодотворное сотрудничество в дальнейшем. Будут еще задачи. Нужен творческий подход для проекта.
Срок: 4 дня.
Бренд-бук прикладываю.
Формат поставки:
- Ссылка на проект в Figma с открытым доступом.
- Архив с исходными векторными файлами логотипа.
Обязателен опыт на FL. С новичками и студиями не работаем. Обязателен опыт прорисовки логотипов и мобильных интерфейсов.