Дизайн-проект конструктора сайта интернет-магазина «Технополюс»

Capa

Citar

Texto integral

Resumo

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

Цель — ускорить и систематизировать разработку дизайна интернет-магазинов с помощью использования библиотеки универсальных взаимозаменяемых дизайн-элементов; оптимизировать работу дизайнера над проектами дизайна сайтов; увеличить конверсию интернет-магазинов путем внедрения универсальных дизайн-элементов из библиотеки (конструктора), созданных в соответствии с рекомендациями UX дизайна интернет-магазина и шаблонов пользовательского поведения.

Методы. В рамках разработки дизайн-проекта были поставлены следующие задачи: определение целевой аудитории интернет-магазинов; изучение и анализ исследовательских материалов; анализ конкурентов, мирового и отечественного опыта; формирование перечня рекомендаций к UX дизайну интернет-магазинов; сбор референсов и формирование доски вдохновения; эскизирование, схематизация структуры сайта; создание библиотеки дизайн элементов (конструктора).

Целевая аудитория: товарный бизнес — офлайн- и онлайн-предприниматели в РФ, занимающиеся оптовой и розничной продажей различной продукции. Основные сферы деятельности ЦА: автозапчасти и автотовары; одежда, обувь, аксессуары; парфюмерия, косметика; товары для дома и ремонта; электроника и техника (рис. 1) [1].

 

Рис. 1. Отношение конверсии заказов товаров разных категорий в сфере e-commerce

 

На основе сбора и анализа исследований Baymard Institute [2], принципов дизайн-системы Google Material Design [3], законов UX дизайна Джона Яблонски [4] был сформирован перечень рекомендаций и стандартов UX дизайна и структуры интернет-магазина, на основе которого разработана библиотека (конструктор) интернет-магазина.

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

 

Рис. 2. Схема-структура интернет-магазина

 

Рис. 3. Дизайн-элементы конструктора интернет-магазина

 

Результаты. Итог проделанной работы — библиотека дизайн-элементов, страниц, а также планшетной и мобильной версий интернет-магазина, которая находится в виртуальном облачном пространстве программы Figma, откуда ее можно скачать в виде файла на внешний носитель или отправить на нее ссылку, после перехода на которую можно будет в браузере скопировать дизайн-систему к себе в файлы аккаунта Figma и пользоваться ей, создавая дизайн-проекты интернет-магазинов различной тематики (при наличии зарегистрированного аккаунта Figma). Без авторизации в Figma конструктор будет доступен только для просмотра. Также в качестве апробации на основе разработанного конструктора был создан дизайн интернет-магазина по продаже бытовой техники. Использование библиотеки в работе дизайнера позволит, во-первых, оперативно и систематизировано собирать графические макеты дизайна интернет-магазинов различной тематики и наполненности; во-вторых, обеспечивать высокий уровень качества дизайна создаваемых интернет-магазинов благодаря проработанным дизайн-элементам и страницам в соответствии со стандартами UX дизайна;
в-третьих, способствовать повышению конверсии разрабатываемых сайтов благодаря структуре и дизайну, созданным на основе существующих шаблонов пользовательского поведения. Результатом разработки является библиотека (конструктор) готовых дизайн-элементов для оперативного создания высококонверсионных, продающих интернет-магазинов.

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

Texto integral

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

Цель — ускорить и систематизировать разработку дизайна интернет-магазинов с помощью использования библиотеки универсальных взаимозаменяемых дизайн-элементов; оптимизировать работу дизайнера над проектами дизайна сайтов; увеличить конверсию интернет-магазинов путем внедрения универсальных дизайн-элементов из библиотеки (конструктора), созданных в соответствии с рекомендациями UX дизайна интернет-магазина и шаблонов пользовательского поведения.

Методы. В рамках разработки дизайн-проекта были поставлены следующие задачи: определение целевой аудитории интернет-магазинов; изучение и анализ исследовательских материалов; анализ конкурентов, мирового и отечественного опыта; формирование перечня рекомендаций к UX дизайну интернет-магазинов; сбор референсов и формирование доски вдохновения; эскизирование, схематизация структуры сайта; создание библиотеки дизайн элементов (конструктора).

Целевая аудитория: товарный бизнес — офлайн- и онлайн-предприниматели в РФ, занимающиеся оптовой и розничной продажей различной продукции. Основные сферы деятельности ЦА: автозапчасти и автотовары; одежда, обувь, аксессуары; парфюмерия, косметика; товары для дома и ремонта; электроника и техника (рис. 1) [1].

 

Рис. 1. Отношение конверсии заказов товаров разных категорий в сфере e-commerce

 

На основе сбора и анализа исследований Baymard Institute [2], принципов дизайн-системы Google Material Design [3], законов UX дизайна Джона Яблонски [4] был сформирован перечень рекомендаций и стандартов UX дизайна и структуры интернет-магазина, на основе которого разработана библиотека (конструктор) интернет-магазина.

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

 

Рис. 2. Схема-структура интернет-магазина

 

Рис. 3. Дизайн-элементы конструктора интернет-магазина

 

Результаты. Итог проделанной работы — библиотека дизайн-элементов, страниц, а также планшетной и мобильной версий интернет-магазина, которая находится в виртуальном облачном пространстве программы Figma, откуда ее можно скачать в виде файла на внешний носитель или отправить на нее ссылку, после перехода на которую можно будет в браузере скопировать дизайн-систему к себе в файлы аккаунта Figma и пользоваться ей, создавая дизайн-проекты интернет-магазинов различной тематики (при наличии зарегистрированного аккаунта Figma). Без авторизации в Figma конструктор будет доступен только для просмотра. Также в качестве апробации на основе разработанного конструктора был создан дизайн интернет-магазина по продаже бытовой техники. Использование библиотеки в работе дизайнера позволит, во-первых, оперативно и систематизировано собирать графические макеты дизайна интернет-магазинов различной тематики и наполненности; во-вторых, обеспечивать высокий уровень качества дизайна создаваемых интернет-магазинов благодаря проработанным дизайн-элементам и страницам в соответствии со стандартами UX дизайна;
в-третьих, способствовать повышению конверсии разрабатываемых сайтов благодаря структуре и дизайну, созданным на основе существующих шаблонов пользовательского поведения. Результатом разработки является библиотека (конструктор) готовых дизайн-элементов для оперативного создания высококонверсионных, продающих интернет-магазинов.

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

×

Sobre autores

Тольяттинская академия управления

Email: valya.cot123@gmail.com

студентка, группа ДзБ19

Rússia, г. Тольятти

Тольяттинская академия управления

Autor responsável pela correspondência
Email: foks1973@list.ru

преподаватель, кафедра дизайна

Rússia, г. Тольятти

Bibliografia

  1. datainsight.ru [Электронный ресурс]. Маркетинговое исследование Конверсия интернет-магазинов Рунета в разных категориях [дата обращения: 04.05.2023]. Доступ по: https://datainsight.ru/Conversion2016
  2. baymard.com [Электронный ресурс]. Free UX Research [дата обращения: 04.05.2023]. Доступ по: https://baymard.com/free-ux-research
  3. m3.material.io [Электронный ресурс]. Material Design [дата обращения: 04.05.2023]. Доступ по: https://m3.material.io/
  4. Яблонски Д. Законы UX-дизайна. Понимание психологии пользователя — ключ к успеху. Санкт-Петербург: BHV-СПб, 2022. 160 c.

Arquivos suplementares

Arquivos suplementares
Ação
1. JATS XML
2. Рис. 1. Отношение конверсии заказов товаров разных категорий в сфере e-commerce

Baixar (75KB)
3. Рис. 2. Схема-структура интернет-магазина

Baixar (275KB)
4. Рис. 3. Дизайн-элементы конструктора интернет-магазина

Baixar (146KB)
5. Рис. 3. Дизайн-элементы конструктора интернет-магазина

Baixar (187KB)

Declaração de direitos autorais © Балан В.В., Самсонова Т.А., 2023

Creative Commons License
Este artigo é disponível sob a Licença Creative Commons Atribuição 4.0 Internacional.

Este site utiliza cookies

Ao continuar usando nosso site, você concorda com o procedimento de cookies que mantêm o site funcionando normalmente.

Informação sobre cookies