Mobile First концепт главной страница интернет-магазина косметики KODI Professional · 2019 · UXART

KODI Professional — производитель безопасной косметики, учитывающий все последние научные разработки и технологии.

Задача:
По ранее разработанным нами прототипам десктопной версии магазина, нужен дизайн, но по принципу mobile first.

1. Прототипы

Ранее были разработаны детальные кликабельные прототипы в Axure. Их нужно взять за основу при разработке дизайна главной

2. Концепция

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

Строгий чёрный
Оранжевый
Фиолетовый (трендовый цвет в тот момент)

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

3. Обратная связь

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

4. Основной дизайн

Первый экран

Шапку сделал с белой заливкой, а основные иконки разнёс по разным сторонам. Слева меню и поиск, а справа профиль и корзина

В верхней части первого экрана располагается важное сообщение, а баннеры реализованы крупными понятными визуалами.

Лидер продаж

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

Призыв к подписке

Сделал этот блок ярким и контрастным, чтобы при скролле он однозначно бросался в глаза.

Категории товаров

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

Новости

Удобный слайдер с понятными визуалами

Инстаграм

Клиенту было важно продвигать инстаграм компании, поэтому я пошёл по принципу блока с подпиской — сделал его чёрным и контрастным, чтобы бросался в глаза

Блог

Такой же удобный раздел, как и новости

Футер

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

Спасибо за внимание!

Вы молодец, что дочитали до конца. Меня это радует =)

Написать мне в телеграме: https://t.me/avlknff