РЕКОМЕНДАЦИИ ПО ДИЗАЙНУ ИНТЕРНЕТ-МАГАЗИНА

Многие заказчики спрашивают, зачем отрисовывать уникальный дизайн интернет-магазина, если можно просто купить шаблон за 20-25 долларов на THEMFOREST и на базе него сделать сайт. Да, такой вариант рабочий и недорогой. Но если Вы хотите создать интернет-магазин с крутым юзабилити, с конверсионным UI UX дизайном, чтобы сайт хорошо продавал и конвертировал посетителей в клиенты, в покупатели. Чтобы люди хотели создавать личные кабинеты у Вас на сайте и заходить много раз к Вам за покупками, рекомендуем разработать интернет-магазин на базе уникального дизайна, с созданием Customer Map Journey (CJM), UI UX китов, с прораработками сценариев взаимодействия. Посмотрите нише рекомендации дизайнеров YIS, которые помогут Вам создать Ваш интернет-магазин, а также ряд фишек, которые увеличат конверсии страниц.

Посмотреть акцию

Что Вы сможете узнать из данной статьи?

Время прочтения данной статьи около 7-12 минут. Прочитав данную статью Вы узнаете следующую информацию о прототипах:

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

Термины и определения, используемые в данной статье

Дизайнерская сетка - 12-колонечная сетка, ее можно наложить при разработке прототипа в Adobe, Axure, Figma. Помогает отцентровать и правильно расположить элементы на дизайн-макете или прототипе.
Что такое User Flow - это действия, последовательность действий пользователя в интерфейсе, для достижения своих целей или решения поставленных задач. Состоит из такого компонента как task flow - т.е. перечень бизнес-процессов, который выполняется пользователем на каждом этапе основных действий пользователя.
Пользовательский сценарий в UX дизайне - это разработка сюжетов, историй, прогнозирование последовательности действий, которые будут совершать пользователи на сайте.
CJM - customer map journey. Карта путей клиента по сайту.
Mood board (Доска настроения) - это набор материалов, компонентов, для определения цветов, линий, стиля дизайна.

Перечень инструментов прототипирования и дизайна

В последнее время популярность заявоевал инструмент FIGMA для прототипирования и дизайна. Сделан на быстром движке, очень удобный интерфейс, поделиться дизайном можно отправив просто ссылку.
Adobe Photoshop, Adobe Experienced Design, Adobe Illustrator являются эффективными инструментами для дизайна.
Программа Sketch для отрисовки скетчей и прототипирования
Colorbox - программа для создания цветовой стилистики дизайна интерфейсов
Kite Compositor - позволяет создавать анимированные прототипы для iOS, Android
Adobe Color - инструмент для работы со цветом

ИЗ ЧЕГО СОСТОИТ СОВРЕМЕННЫЙ ДИЗАЙН ИНТЕРНЕТ МАГАЗИНА, ЧТО ЯВЛЯЕТСЯ ЕГО ОСНОВОЙ ?

Основой для разработки современного дизайна интернет-магазина являются статистические данные, аналитика (открытая и закрытая) по вашей целевой аудитории, по вашим клиентам. Без глубокого анализа топовых сайтов конкурентов, данных по целевой аудитории, которая посещает эти сайты и без сбора данных ваших покупателей оффлайн или онлайн, сложно будет разработать действительно отличный дизайн под вашу целевую аудиторию. Важно учитывать потребительские предпочтения, привычки, паттерны поведения вашей целевой аудитории в интернете. Без скрупулезно собранной информации, лучше не проводить разработку веб дизайна действительно крупных и дорогих проектов. Инструменты: Adobe Illustrator (для отрисовки иконок, кнопок), Adobe Experience Design (разработка дизайна и прототипа), Adobe Photoshop (создание графики, изображений), Adobe Fuse (создание 3D фрагментов, персонажей), Corell Draw (векторная графика) и другие. Для отрисовки прототипа подойдут инстурменты Marvel, Invision. Подбор цветовой гаммы сайта можно сделать с помощью сервиса Colorhunt

ПОЧЕМУ ВАЖЕН БРИФ НА ПЕРВОНАЧАЛЬНОМ ЭТАПЕ ДИЗАЙНА?

Этап брифования и общения с клиентом через бриф является важным в разработке дизайна интернет-магазина, любого интерфейса. Без качественного и полноценного брифования в итоге можно выполнить проект, который не примет клиент и он не будет полностью оплачен. Поэтому очень важно все обговаривать, обсуждать, брифовать и потом уже переходить к реализации.

Через бриф передается информация о компании, ее основных продуктах, решениях, услугах.
В брифе указывается информация о конкурентах, о сайтах-партнерах, о том, какие сайты нравятся, а какие нет.
В брифе указывается функционал, который хотел бы клиент видеть на сайте.
Указывается стилистика, цвета, пожелания к дизайну.
Дается информация о сильных сторонах компании, ее продуктов и услугах.

ПРОТОТИП МАКЕТОВ ДИЗАЙНА ИНТЕРНЕТ-МАГАЗИНА

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

Прототипирование всегда начинается с создания списка элементов, разделов, UI элементов будущего прототипа. Прописывается элемент, его бизнес-процессы и функционал. За что он отвечает, как способствует задачам клиента и задачам владельцев интернет-магазина.
Проектирование прототипа рекомендуем вести в FIGMA, либо в инструментариях Adobe Photoshop.
Далее разрабатывается прототип главной страницы. Большое внимание уделяется разделу HEADER, а также главному меню сайта. Расставляются акценты, определяются формы и размеры элементов. Прорабатывается функционал. Определяются наборы шрифтов и компонентов.
На основе анализа ЦА, сценариев пользователей, прорабатывается CJM (customer map journey) и на его базе формируются пункты меню, подменю, иконки контактов, обратной связи.
Определяются основные точки экранов. Чем больше их будет - тем удобнее будет для программистов верстать сайт.
В проектах E-commerce обязательно боковое меню, с выводом популярных разделов каталога товаров, с раскрывающимися списками меню. Вверху идет обычно основное меню сайта. Далее под боковым меню выводятся формы, акции, баннера, могут также выводиться системы фильтрации, если посетитель переходит в каталог или в разделы сайта.
Обязательно на этапе прототипирования рекомендуем на главной и в разделах вывести блок - HOT PRODUCTS, и отобразить 3-6 горячих основных товаров. Как правило далее, на странице главного каталога выводятся чаще всего не сами товары, а разделы товаров, оформленных в виде карточек товаров, с указанием заголовков, картинок, текстов.
Есть смысл в разделах и подразделах товаров вывести блок - новые поступления. Осообенно актуален данный блок для интернет-магазинов, продающих модную одежду, обувь. Люди следят за новинками и с удовольствием обновляют свой гардероб.
Также важны при прототипировании области - это область выставления фильтров, область сортировки товаров. Это наиболее важные и часто используемые людьми области. Поэтому над ними нужно посидеть, проработать удобный функционал, с учетом специфики Вашего интернет-магазина и бизнеса.
В футере выводятся как правило, информация и ссылки на страницы доставки, оплаты, возврата, покупки в рассрочку, дублируются ссылки каталога, контактов, выводится ссылка на блок и новостной раздел сайта.

ОТРИСОВКА МИКРО-ЭЛЕМЕНТОВ ПРОТОТИПА

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

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

РЕАЛИЗАЦИЯ ДИЗАЙНА ИНТЕРНЕТ-МАГАЗИНА

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