Это самый долгий проект, который я рисовал. Потратил около 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

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