Информация о проекте
Адрес сайта:
Моя роль в проекте:
UX и UI дизайнер, проект менеджер.
Год выполнение проекта
2019
Сделано для студии:
Главная страница 💣

Готовы к взрыву мозга? Главная страница имеет большое количество готовых блоков для красивой презентации товаров и категории магазина.


16 вариантов шапки 😙

16 вариантов шапки должны удовлетворить всех потребителей шаблона. Цвет шапки зависит от выбранной цветовой схемы в админке.

Плиточный вид карточки товара 💪

7 вариантов плиточного вида товара. Основное отличие — это панель добавления товара в корзину. Каждая имеет свои настройки.
Некоторые настройки: одинаковая высота карточки, показать\скрыть, купить в 1 клик, выбор цвета товара, выбор вида скидки и еще многое другое.

3 варианта анимации кнопок 💪

Микроанимация один из важных пунктов целости продукта

Каталог товаров 🔥

3 варианта отображения товара, 2 варианта фильтра (вертикальный и горизонтальный), 6 вариантов отображения подкатегории.



Страница товара ⭐️

3 варианта компоновки страницы товара.


Меню ⚡️

3 варианта вывода категории в меню – мегаменю, вертикальный и книжный. Все 3 типа меню нарисовано так, чтобы подходил всем вариантам шапки.




Мобильная шапка

4 варианта мобильной шапки с возможностью менять цвет на темный вариант.

Корзина и оформление заказа 🌎

Корзина и оформление заказа нарисовано с учетом технического ограничения CMS.


Корзина и оформление заказа 🌎

Корзина и оформление заказа нарисовано с учетом технического ограничения CMS.


Некоторые другие страницы 👽

Корзина и оформление заказа нарисовано с учетом технической ограничение CMS.

Если пользовалтель скролить страницу, сверху страницы появляется список товаров для удобной сравнение товаров

3 варианта подвала 🤟

Каждый вариант можно сменить на темную цветовую схему.

Над проектом работали:

Проектирование и дизайн: Сайдуллаев Фарход
Программинг: Евгений Леман
Верстка: Максадкулов Ильхом
Тестеры: Евгений леман, Сайдуллаев Фарход

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

Демо шаблона
Шаблон в маркетплейсе

Мысли вслух 🤠

Это самый долгий проект, который я рисовал. Потратил около 5 месяцев с перерывами на другие проекты. Это была настоящая проверка сила воли. Теперь могу с уверенностью сказать: «Я сделал это!»
Конечно, на этом еще работа не закончилась, лайфтайм продукта долгий. Каждый день нужно будет уделять немного времени, чтобы быть в тренде.

Задача

Нарисовать универсальный шаблон интернет-магазина, который должен подойти всем. Сам по себе универсальный шаблон — сложная задача. Легче рисовать под определенную тематику. Но я взял планку выше. Есть еще тут техническое ограничение в виде требования и возможности CMS-платформы.

Нужно не просто нарисовать универсальный шаблон, но чтобы было много опции и свободы выбора. Чтобы шаблон можно было подстроит под любую тематику.

Зайдем со стороны клиента. У 70% клиентов шаблон магазина с небольшим ассортиментом. Вот я нарисовал крутой шаблон, вставил туда фото айфонов, но клиент будет продавать иголки для вышивания или же свои нарисованные картинки. Вопрос: как будет смотреться мой шаблон с таким контентом? Вот такие моменты важно учесть.

Мне надо учесть, что продуктом будут пользоваться не так, как я хотел, а по-своему. Примерно вот так:

Дизайн система 🔵

Начало работы – май 2018. Тогда был бум дизайн-систем. Я тоже постарался нарисовать дизайн шаблона систематичным. Собрал исходник в Скетче максимально удобно и понятно, чтобы после меня кто-то открыл и не потерялся. Чтобы была возможность быстро собрать страницу из компонентов. Что-то получилось, что-то нет. В 2019 году перешел на фигму. Мне кажется, в фигме собрать эту же систему было бы намного легче.

Аналитика 🔺🔻

Портрет наших клиентов: Человек, у которого есть опыт заказа товаров через интернет-магазин. У него уже в голове есть представление, каким должен быть его интернет-магазин. Он интуитивно знает, каким он должен быть. Так как шаблон нарисован для СНГ, вот и надо учитывать дизайны популярных интернет-магазинов. Таких интернет-магазинов, как Мвидео, Озон, Днс-шоп, Яндекс.Маркет, Розетка.уа и других. Долго изучал шаблоны конкурентов: почему тот или иной шаблон в ТОПе, а другой крутой шаблон не продается. Выводы: должно быть не только наличие шаблона, но и нужна поддержка, документация, своевременное обновление.

Начало работы

Изучив клиентов и их потребности, приступил к работе. Составил список страниц и элементов, которые нужно нарисовать:

Главная страница
– Главная страницы с сайбаром

Каталог товаров
– Вид-1 – Плиточный (карточки)
– Вид-2 – Подробный
– Вид-3 – Линейный короткий
– Когда в категории нету товаров

Страница товара
– Комповка страницы-1
– Комповка страницы-2
– Комповка страницы-3
– Отзывы товара
– Отсуствие отзыв товара
– Показать таб описание товара
– Показать таб характеристик
– Информационная страница товара

Корзина
– Корзина
– Пустая корзина
– Компатная

Оформление заказа
– 1-этап данные покупателя
– 2-этап оплата
– 3-этап доставка
– 4-этап потверждение заказа
– Заказ успешно оформлен

Личный кабинет
– Главная страница кабинета
– История заказов
– Детали заказа
– Профиль
– Реферальная программа

Другие страницы
– Бренды
– 404
– Авторизация
– Регистрация
– Восстоновление пароля
– Блог

Элементы
– Шапка 15 вариантов
– Мобильная шапка 3 варианта
– Подвал 3 варианта
– Плиточный вид товара 7 вариантов
– 3 варианта главного меню

Отрисовка

Вот так все начиналось: делал скрин из самого первого исходника. Я не рисовал прототип. В последнее время стараюсь рисовать прототип, а потом перейти на отрисовку.

Карточки товаров

Один самых повторяемых элементов в шаблоне интернет-магазина — это плиточный вид товаров, другими словами, карточки товаров.

С виду кажутся обычными, но, как я выше писал, моя задача — систематизировать использование этих карточек. Давайте посмотрим внутрь карточки.

Вот как выглядеть один вариант карточки товара:

Шапки \ хедеры

Нарисовал 15 вариантов. Да, некоторые варианты похожи друг на друга. У нас есть техническое ограничение: не можем для каждой шапки сделать свои настройки.

Каждый вариант сопровождается вот такими подсказками для верстальщика:

Еще нужно показать все окошки для каждого типа шапки

Шапки \ хедеры в адаптиве

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

По моей задумке каждый вариант мобильной шапки имеет 2 основные настройки:
1. Возможность для каждого варианта выбора темной версии шапки.
2. Возможность включение кнопки «Каталог товаров» под шапкой. Если кнопка отключена, гамбургер станет ярким, чтобы дать понять, что там есть что-то интересное.

Ниже показываю один вариант шапки с разными настройками:


Вариант-1. Светлый. Каталог товаров в гамбургере

Вариант-1. Светлый. Каталог товаров под шапкой

Вариант-1. Темный. Каталог товаров в гамбургере

Вариант-1. Темный. Каталог товаров в гамбургере

Все варианты адаптивной шапки

Меню

Я-то нарисовал 15 вариантов шапки с разным типом меню. А теперь надо придумать, как правильно нарисовать выпадающее\раскрывающее меню, чтобы подходило для всех вариантов. Это тоже тот еще квест. Но я силен! Нет нерешаемых задач, есть лень и прокрастинация.

Нарисовал 3 варианта универсальных меню. Каждое мы назвали по-своему.


Мега меню

Мега меню (без подкатегории)

Вертикальный меню

Книжный меню

Вот представьте, как такое отправить на верстку, не показав каждый вариант шапки с каждым вариантом меню? Никак!
Лени тут не место, все должно быть идеально. Показываю каждое меню в каждом варианте шапки.

Мои ошибки (пункт будет дополняться)

Ошибка №1

Мобильная версия, страница товара. Почему «Выбор количества + » так далеко от основных кнопок? Чем я думал, когда рисовал эту позицию? Исправляем ситуацию.

Продолжение следует…