KODI Professional
Mobile First концепт главной страница интернет-магазина косметики
О компании
KODI Professional — производитель безопасной косметики, учитывающий все последние научные разработки и технологии.
Задача
По ранее разработанным нами прототипам десктопной версии магазина, нужен дизайн, но по принципу mobile first.
Прототипы
Ранее были разработаны детальные кликабельные прототипы в Axure. Их нужно взять за основу при разработке дизайна главной
Концепция
Прежде всего, мы показали клиенту дизайн нескольких блоков в различных цветовых вариациях:
Строгий чёрный
Оранжевый
Фиолетовый (трендовый цвет в тот момент)
Ранее, от клиента было требование сделать воздушно и просто, поэтому мы сделали основной акцент на крупную и легко читаемую типографику с большим количеством воздуха. Основной баннер должен занимает бОльшую часть экрана и позволяет удобно его свайпать.
Обратная связь
Получили от клиента обратную связь — выбрали оранжевый цвет, попросили показать как будут смотреться текущие баннеры, а также нужно немного переделать шапку, не потеряв при этом в лёгкости считывания.
Основной дизайн
Первый экран
Шапку сделал с белой заливкой, а основные иконки разнёс по разным сторонам. Слева меню и поиск, а справа профиль и корзина
В верхней части первого экрана располагается важное сообщение, а баннеры реализованы крупными понятными визуалами.
Лидер продаж
Это удобный слайдер с дополнительными категориями над карточками товаров
Призыв к подписке
Сделал этот блок ярким и контрастным, чтобы при скролле он однозначно бросался в глаза.
Категории товаров
Ссылки со счётчиком товаров внутри категории и возможностью перейти в детальный каталог. Я учёл, что это мобильная версия, поэтому сделал большие отступы между категориями, для удобства попадания по ним пальцем.
Новости
Удобный слайдер с понятными визуалами
!@%#^грам
Клиенту было важно продвигать !@%#^грам компании, поэтому я пошёл по принципу блока с подпиской — сделал его чёрным и контрастным, чтобы бросался в глаза
Блог
Такой же удобный раздел, как и новости
Футер
Расположил в нём минимум информации. Клиенту необходимо продвигать свою службу поддержки, поэтому акцент сделан на номере телефона. Также, в футере расположил ссылки на соц.сети, возможность сменить язык и перейти на сайт представительства в другой стране.
Спасибо за внимание =)
