Общая информация: Проект: 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. За основу берем вариант: https://ru.wordpress.org/themes/blogfull/preview/?device=mobile (значок плюса необязателен) Для пунктов с подменю — использовать стрелочку-индикатор ▶ (в закрытом состоянии) и ▼ (в открытом).
Требования: - css цвета используем, что есть на сайте. - разделы будут все что сейчас есть на сайте, после Конкурсов. - Поведение: Выезжает снизу на 70% высоты экрана. - Группировка и визуальные разделители между группами пунктов. - Макеты в Figma для всех состояний меню (с раскрывшимся подсписком и без). - При нажатии какие цветом выделяются элементы меню.
Цвета для раскрывающегося меню: Фон — белый. Текст — черный (#333333). Разделители — светло-серые (#666666). Ховер-эффект — светло-розовый фон (#fff5f7). Акцент — розовый (#dd127b) для стрелочек и выделения.
Дополнительные требования:
- Pixel-Perfect: Все макеты должны быть выполнены аккуратно, с выверенными отступами и размерами. - Система компонентов: Приветствуется создание стилей (Color, Text Styles) и компонентов в Figma для удобства дальнейшей работы. - Творческий подход: Мы ценим не только техническое исполнение, но и свежие идеи, которые усилят бренд и UX. - Продуманный UX - Cтилевое единство во всех элементах
5) Время на правки. Рассчитываю на плодотворное сотрудничество в дальнейшем. Будут еще задачи. Нужен творческий подход для проекта.
Срок: 4 дня.
Бренд-бук прикладываю.
Формат поставки: - Ссылка на проект в Figma с открытым доступом. - Архив с исходными векторными файлами логотипа.
Обязателен опыт на FL. С новичками и студиями не работаем. Обязателен опыт прорисовки логотипов и мобильных интерфейсов.
