Создание интернет-магазина на Node.js с нуля. Часть 1: Дизайн. Основы работы в Figma

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

• Дизайн и прототипирование

  На начальном этапе важно создать привлекательный и удобный интерфейс, который будет радовать пользователей и способствовать продажам. Для этого мы воспользуемся Figma — мощным инструментом для проектирования UI/UX. С помощью Figma вы сможете легко создавать макеты, экспериментировать с различными элементами дизайна и согласовывать их с командой. Прототипирование позволит вам заранее увидеть, как будет выглядеть ваш магазин, и внести необходимые корректировки еще до начала кодирования.

• Фронтенд-разработка

  После разработки дизайна переходим к верстке. Здесь нам поможет React. Эта технология позволит создать адаптивный и быстрый сайт, который будет хорошо смотреться на любых устройствах — от смартфонов до десктопов. Мы уделим внимание кроссбраузерности и доступности сайта, чтобы обеспечить максимальное удобство для всех категорий пользователей.

• Бэкенд-разработка

  Серверная часть нашего интернет-магазина будет реализована на Node.js. Этот мощный и гибкий инструмент позволяет быстро разрабатывать высокопроизводительные веб-приложения. Для работы с базой данных мы выберем MongoDB, которая является одной из наиболее популярных баз данных NoSQL. Она отлично подходит для хранения и обработки больших объемов данных, что особенно актуально для интернет-магазинов. Чтобы упростить взаимодействие с MongoDB, мы используем Mongoose — объектно-реляционное отображение (ORM), которое абстрагирует работу с базой данных и делает ее более удобной и безопасной.

• Деплой и настройка сервера

  Развертывание проекта на виртуальном сервере. Мы разберем процесс запуска сайта на хостинге, настройки домена и SSL-сертификата для безопасного соединения. После успешной установки и настройки сервера наш интернет-магазин будет готов принимать первых покупателей!

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

В первую очередь нам необходимо определиться с интерфейсом нашего будущего онлайн магазина. Создавать дизайн мы будем в Figma.

vds

Основы работы в Figma

В этом разделе рассмотрим, как устроена Фигма: создадим первый файл и поработаем с ним.

Установка Figma

В сервисе можно работать из браузера или скачать приложение на компьютер. Выбирайте браузер, если часто пользуетесь разными устройствами. Для этого зайдите на сайт Figma и зарегистрируйтесь.

Вы можете бесплатно скачать Figma на ПК. Для этого зайдите на страницу загрузки и выберите версию программы для MacOS или Windows.

Также доступно мобильное приложение для iOS и Android. Рекомендуем его использовать для просмотра дизайна мобильной версии вашего проекта.

Интерфейс Figma

После регистрации перед пользователем открывается главная страница Figma:

Рассмотрим пункты меню:

1. Аккаунт
2. Поиск
3. Недавние файлы
4. Команда
5. Доски
6. Проекты
7. Корзина
8. Комьюнити

Давайте рассмотрим каждый пункт подробнее.

Аккаунт

По нажатию на стрелочку откроется список.

• Пункт «Theme» изменяет тему Figma. Доступна светлая и тёмная темы и автоматический режим в зависимости от настроек системы.
• Пункт «Settings» открывает настройки.
• Пункт «Get desktop app» перенаправит вас на страницу установки программы.
• Далее указан ваш Community-профиль, он необходим для публикации своих проектов в открытый доступ. Если вы его не регистрировали (это можно сделать здесь), то данного списка у вас не будет.
• Пункт «Add account» позволяет подключить дополнительный аккаунт Figma для быстрого переключения между ними.
• Пункт «Log out» завершает сессию аккаунта.

Поиск

Интерфейс поиска выглядит следующим образом:

Благодаря поиску можно удобно и быстро находить необходимые файлы в Figma. 

Недавние файлы

Здесь находятся все файлы в хронологическом порядке.

Команда

В данном пункте меню вы можете выбрать созданные команды или создать новую.

Команды позволяют работать над проектом совместно с другими участниками. Это полезно, когда разработчик видит актуальный дизайн, менеджер видит стадии работы над проектом, а заказчик может оставлять комментарии прямо в файле. При нажатии на кнопку «Create new» открывается окно, где необходимо придумать название для команды, что помогает структурировать работу и улучшить коммуникацию между всеми участниками проекта.

Далее при помощи email вы можете пригласить участников в команду. Данный пункт можно пропустить и добавить участников позже. Для этого нажмите кнопку «Skip for now».

И в завершение необходимо выбрать тариф.

Для начала нам подойдет тариф «Starter», для углубленной работы стоит рассмотреть покупку платных пакетов.

Доски

В этом пункте мы можем увидеть все созданные нами доски.

Сейчас данный пункт пуст, но после создания макета здесь появятся наши файлы.

Проекты

В данном пункте мы можем увидеть все проекты нашей команды.

Корзина

Здесь мы можем увидеть все файлы, которые мы удалили.

Комьюнити 

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

Редактор Figma

Design, figjam и слайды — три разных подхода и форматов представления материалов в Figma, каждый из которых имеет свою специфику и область применения.

Design

Design («дизайн») — классический инструмент для проектирования интерфейсов, иконографики, иллюстраций и визуальных элементов. Это основной режим работы в Figma, используемый дизайнерами и UI/UX-специалистами для разработки макетов приложений, веб-сайтов и любых цифровых продуктов. Основные особенности дизайна включают:

• Создание и редактирование векторных объектов, шрифтов, цветов и слоев.

• Работу с сетками, компоновкой и интерактивностью прототипов.

• Совместную работу над проектами командой дизайнеров, разработчиков и менеджеров проектов.

Это наиболее распространенный способ взаимодействия с Figma для большинства пользователей.

Figjam

Термин «Figjam» часто используется среди российских специалистов по дизайну и UX-исследованиям. Этот термин возник от английской фразы foggy jam («затуманенный хаос») и обозначает ситуацию, когда дизайнерская идея запутывается и теряет ясность из-за большого количества итераций, неопределенности требований заказчика или переизбытка вариантов решения проблемы. Сам термин «figjam» относится скорее к процессу работы и возникающим сложностям, нежели к конкретной функциональности программы Figma.

Таким образом, figjam не является самостоятельным инструментом или типом файла в Figma, а описывает типичные сложности, возникающие во время рабочего процесса, такие как трудности принятия решений, конфликты мнений внутри команды или недостаточная ясность целей проекта.

Слайды

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

Основные преимущества слайдов в Figma:

• Легкость интеграции графики и анимаций из режимов дизайна.

• Возможность вставлять компоненты дизайна непосредственно в слайды.

• Поддерживает общую экосистему совместной работы и комментирования.

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

Итоги сравнения:

Таким образом, разница между этими тремя понятиями определяется характером задач и этапами процесса проектирования.

В нашем случае мы будем использовать «Design». Для этого перейдем на страницу «Drafts» (доски), наведем курсор на кнопку «+Create» и выберем «Design».

После создания файла перед нами открывается рабочее пространство с тремя областями: панель слоев, рабочая область и инспектор.

Для создания объектов используется нижнее меню.

В данном меню:

1. Первый пункт — меню выбора режима работы курсора:

• • Move отвечает за выбор объекта и его перемещение.
  • Hand tool используется для передвижения по доске, заменяется нажатием на колесико мышки.
  • Scale изменяет размер объекта.

2. Создание Frame, Section и Slice.

2. • Frame — контейнер фиксированного размера для группировки элементов дизайна с возможностью установки границ и фона.

   • Section — инструмент для структурирования содержимого внутри фреймов, помогающий организовать элементы по смысловым блокам.

   • Slice — специальная область для экспорта отдельных частей макета в виде изображений или файлов определённого формата.

3. Создание фигур.

4. Инструменты для рисования векторов.

5. Инструмент для написания текста.

6. Инструмент для создания комментариев.

7. Меню асетов и плагинов.

8. Dev-режим, платная функция.

Создание интерфейса магазина

Теперь можно приступить к созданию интерфейса нашего интернет-магазина. 

Главная страница

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

Теперь мы можем переходить к созданию дизайна. Для начала определите, что необходимо на странице. 

Наша структура будет следующей:

Далее определимся с цветовой гаммой. Мы будем реализовывать как светлую, так и темную тему, и наша цветовая палитра будет следующей:

Темная тема:

Светлая тема:

Теперь мы можем переходить к созданию макета. Начнём с подготовки компонентов. Создаем Header (меню для магазина). В нашем случае структура меню будет следующая:

Для поиска иконок воспользуемся плагином Phosphor Icons. Установить его можно из меню Фигмы:

Откроем данный плагин и найдем иконки для:

• Изменения темы
• Локации
• Корзины
• Избранных товаров
• Аккаунта

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

Далее для структуризации всех иконок создайте Frame «UI-Kit». В него будем добавлять все загруженные иконки. 

Для выравнивания иконок добавим к Frame свойство Auto layout.

Создание Header

После создания UI-Kit переходим к созданию Header. Опираясь на шаблон, создаем Frame (фрейм) «Header - light». Структура нашего Frame следующая:

Элементы в нашем Header:

• Кнопка переключения темы («Vector»)
• Frame «Content»:
  • Frame «Location»:
    • Иконка локации («MapPinArea»)
    • Текст «Москва»
  • Frame «Logo»:
    • Frame «Text»:
      • Текст «Online»
      • Текст «Store»
  • Frame «Icons»:
    • Объект для иконки корзины («ShoppingCartSimple»)
    • Иконка для избранных товаров («Heart»)
    • Иконка для профиля пользователя (“Regular/User»)

В данном примере в качестве лого магазина мы используем текст, поэтому каждое из слов пишем на отдельном элементе «Text». По этой причине мы создаем дополнительный фрейм «Text». Если использовать картинку, то ставим ее вместо фрейм «Text».

Переходим к настройке Auto layout для каждого элемента.

Элемент «Location»:

• Ширина: Hug (по размеру элементов)
• Высота Fill (заполнить высоту контейнера)
• Направление в сторону
• Отступы между элементами 10
• Выравнивание по центру с левой стороны

Элемент «Logo»:

• Ширина: Hug (по размеру элементов)
• Высота Fill (заполнить высоту контейнера)
• Направление в сторону
• Отступы между элементами 0 
• Выравнивание по центру с левой стороны

Элемент «Icons»:

• Ширина: 120
• Высота Fill (заполнить высоту контейнера)
• Направление в сторону
• Отступы между элементами Auto
• Выравнивание по центру

Используем ранее составленную палитру цветов и получаем два Header, в светлой и темной теме:

Теперь переводим наши Header в компоненты.

Создание поиска и меню быстрой навигации

Составим структуру:

Ссылки в меню быстрой навигации будут на страницы:

1. Каталог
2. Отслеживание заказа
3. Поддержка
4. FAQ

Создаем Frame «Search» и создаем структуру:

Рассмотрим четвертый Frame «Search»: 

• Ширина: Fill (100% ширины)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами Auto
• Выравнивание по центру
• Padding 10px

Рассмотрим Frame «Button»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 8
• Выравнивание по центру
• Padding по горизонтали 24, по вертикали 14

У активной кнопки добавляем Fill с цветом из палитры.

После всех настроек переводим Frame «Search» в компонент.

Создание виджетов с топ товарами

Составим структуру виджетов:

В виджете мы будем показывать наши товары, к их созданию мы перейдем позже. Создаем фрейм Widgets внутри которого будут еще два фрейма: Widget и Small Widgets. Рассмотрим структуру фрейма Widget:

Рассмотрим отдельно каждый элемент.

Первый Frame «Content»:

• Ширина: 356
• Высота 232
• Направление вниз
• Отступы между элементами 24
• Выравнивание по центру с левой стороны

Второй Frame «Content»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление вниз
• Отступы между элементами 24
• Выравнивание по левому краю

Frame «Button»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 12
• Выравнивание по центру
• Цвет: #7177F8

Рассмотрим структуру Small Widgets.

Frame «Content»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление вниз
• Отступы между элементами 18
• Выравнивание по левому краю

Frame «Info»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление вниз, отступы между элементами 5
• Выравнивание по левому краю

Frame «Button»: 

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 8
• Выравнивание по центру
• Цвет: #7177F8

По аналогии создаем второй Frame. В итоге получаем Frame «Widgets».

Создание товаров

Теперь нам необходимо создать товары для нашего онлайн-магазина. 

Мы будем продавать футболки, поэтому переходим в Community и пишем запрос «T-Shirt Mockup». Среди результатов ищем то, что нам подходит большего всего, и по инструкции внутри файла создаем макеты. 

После того как макеты футболок сделаны, нам необходимо их экспортировать. Для этого переходим в инспектор, листаем вниз и выбираем пункт «Export». Далее выбираем необходимый размер и нажимаем кнопку Export. 

В данном интернет-магазине мы будет продавать три футболки:

Добавление товаров в виджеты

Добавим наши товары в созданный Frame и получаем:

Теперь создаем такой же Frame для светлой темы сайта:

Переводим Frame в компоненты.

Создание блока с информацией

Структура блока:

Информация которую мы будем указывать:

• Быстрая доставка

• Доставка по МСК за 24 часа

• 24 часа на возврат

• 100% возврат по гарантии

• Защищенная оплата

• Твои данные защищены

• Поддержка 24/7

• Помощь в любое время

Создайте Frame «Features» и следующую структуру:

Блок Feature клонируем 4 раза, заменяя значения.

Компонент «Duotone/Package» — это иконка, которую мы добавили проект ранее.

Рассмотрим Frame «Feature»:

• Ширина: Hug (по размеру элементов)
• Высота: Hug (по размеру элементов)
• Направление в сторону
• Отступы между элементами 16
• Выравнивание по центру
• Padding 16

Создаем остальные три фрейма «Feature» и получаем:

Создаем из Frame компонент.

Создание блока с товарами

Для начала определимся со структурой блока:

Создадим Frame «Best Deals» и добавим следующую структуру:

У «Товара 1» мы покажем информацию о рейтинге, названии, описании, цене, скидке и поставим отметку HOT.

Добавим все элементы и получаем:

У данного элемента мы не настраиванием Auto layout.

Создадим сетку из 8 товаров. Сетка будет состоять из восьми фреймов «Product». Структура фрейма будет следующая:

У данного компонента мы также не настраиваем Auto layout.

Добавим все элементы и получаем:

Клонируем Frame «Product» до необходимого количества.

Настроим родительский Frame для «Product».

Добавим Auto layout. 

• Ширина 1000 и ограничитель max-width со значением 1000
• Направление в сторону с переносом на новую строку
• Выравнивание по центру с левой стороны
• Все отступы оставим в 0

Проверяем, что у нас получилось:

По аналогии создаем блок для светлой темы:

Переводим Frame в компоненты.

Создание страницы

Проверим, что все элементы у нас готовы:

Все страницы мы будем делать внутри Frame, поэтому создаем фрейм и задаем размеры 1440 на 1080 — это эталонные размеры для области контента. Далее необходимо дать название нашему фрейму. Сейчас мы создаем главную страницу, поэтому назовем его «MainPage PC light» («PC» — так как версия для ПК, а «light» — так как светлая тема).

Создаем Frame и добавляем настройки:

• Ширина: 20 Hug
• Высота: 20 Hug
• Направление вниз
• Отступы 10
• Выравнивание по левому углу

Ничего страшного, что наш фрейм стал размером 20 на 20. Добавляем в него созданные элементы:

По аналогии добавляем темную тему:

Более подробно посмотреть процесс создания данных страниц можно в видео на Rutube.

Cтраница товара

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

Создадим страницу для товара «Футболка OnlineStore».

Информация, которую мы добавим:

• Путь: Главная/Магазин/Мужская одежда/Футболки/Футболка OnlineStore 
• Оценка: 4.7 (21,671 Оценок)
• Артикул: A264671
• Бренд: Tutorial
• Наличие: В наличии
• Категория: Футболки
• Цена: 750 ₽ со скидкой 50%
• 3 цвета: синий, белый, черный
• Размерный ряд: XS, S, M, L, XL

Используя эти данные, составим Frame «Product Detail».

Создадим Frame «path», добавим данные и получим:

Добавим адаптацию под светлую и темную тему:

Фрейм «path» остается одинаковым как для светлой, так и для темной темы.

Страница отслеживания заказа

Для того чтобы наши клиенты могли узнать состояние заказа, добавим страницу отслеживания. Ее структура:

Путь до страницы: Главная/Отследить заказ

Для получения информации о заказе пользователь должен сообщить ID заказа и свой email.

Составим страницу и получим:

Добавим адаптацию под светлую тему и получаем:

После проверки данных пользователя будет перекидывать на страницу с активностью заказа. Структура данной страницы:

Используя макет, создадим страницу:

И создадим адаптив для светлой темы:

Страница избранного

Популярная и востребованная функция в интернет-магазинах — возможность добавить товар в избранное. Создадим данную страницу, используя следующий макет:

Путь до страницы: Главная/Избранное.

Для примера добавим все три товара в список избранного и получим следующую страницу:

Адаптируем страницу под светлую тему и получаем:

Корзина

Для создания корзины воспользуемся макетом:

Для примера добавим два товара в корзину:

Реализуем адаптацию под светлую тему:

Страница оформления заказа

Для создания страницы оформления заказа воспользуемся макетом:

Составим страницу, ориентируясь на макет, и получим:

Адаптируем дизайн под светлую тему и получим:

Далее мы перенаправим пользователя на главную страницу и отправим на электронную почту информацию по заказу.

Админ-панель

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

• Главная (общая аналитика, последние заказы, самые популярные товары)
• Товары (просмотр товаров, создание новых, товарный остаток)
• Заказы (все активные и архивные заказы)
• Пользователи (все зарегистрированные пользователи)
• Статистика (выручка за день, неделю, месяц; количество активных заказов; время большей активности; самый популярный товар)

Создадим структуру нашего меню:

Теперь создадим наше меню в Figma:

Применим к меню Auto layout и настроим его:

Далее добавим структуру:

В Frame «Content» находится всё наше меню:

• Return — возврат в магазин
• Logo — картинка, в нашем случае текст «OnlineStore | ADMIN»
• Icons — иконки навигации

Далее создадим темную тему для меню:

Переходим к созданию самой страницы. Ее макет выглядит следующим образом:

Создадим раздел с аналитикой. Его макет:

Создадим Frame «Activity». Структура и настройки:

Настройки Auto layout:

В результате получаем:

Добавим адаптацию под темную тему:

Для «Активных заказов» и «Популярных товаров» создадим обычную таблицу:

Адаптируя, получаем:

Собираем страницу и получаем:

Добавим адаптацию для темной темы:

По аналогии создаем все остальные страницы. В результате получаем следующие страницы.

Страница товаров:

Страница заказов:

Страница пользователей:

Страница аналитики:

Выгодные тарифы на VDS/VPS в Timeweb Cloud

Заключение

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

Теперь мы можем переходить к следующему этапу — разработке backend-логики магазина.