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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка Figma

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

Официальный сайт Figma

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

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

Интерфейс Figma

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

Интерфейс Figma

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

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

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

Аккаунт

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

Интерфейс Figma

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

Поиск

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

Интерфейс Figma

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

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

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

Интерфейс Figma

Команда

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

Интерфейс Figma

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

Интерфейс Figma

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

Интерфейс Figma

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

Интерфейс Figma

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

Доски

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

Интерфейс Figma

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

Проекты

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

Интерфейс Figma

Корзина

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

Интерфейс Figma

Комьюнити 

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

Редактор 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».

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

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

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

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

Опции для работы с объектами в интерфейсе Figma

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

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

Опции для работы с объектами в интерфейсе Figma

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

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

Опции для работы с объектами в интерфейсе Figma

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

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

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

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

Опции для работы с объектами в интерфейсе Figma

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

Опции для работы с объектами в интерфейсе Figma

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

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

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

Опции для работы с объектами в интерфейсе Figma

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

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

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

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

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

Работа с компонентами в интерфейсе Figma

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

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

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

Темная тема:

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

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

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

Установка плагинов в интерфейсе Figma

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

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

Выбор иконок в интерфейсе Figma

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

Настройка иконок в интерфейсе Figma

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

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

Настройка иконок в интерфейсе Figma

Создание Header

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

Структура фрейма в интерфейсе Figma

Элементы в нашем 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
• Выравнивание по центру с левой стороны

Настройка Auto layout для элемента в интерфейсе Figma

Элемент «Logo»:

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

Настройка Auto layout для элемента в интерфейсе Figma

Элемент «Icons»:

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

Настройка Auto layout для элемента в интерфейсе Figma

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

Хэдеры в интерфейсе Figma

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

Перевод хэдеров в компоненты в интерфейсе Figma

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

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

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

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

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

Структура фрейма в интерфейсе Figma

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

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

Настройка фрейма в интерфейсе Figma

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

Структура фрейма в интерфейсе Figma

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

Первый Frame «Content»:

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

Настройка фрейма в интерфейсе Figma

Второй Frame «Content»:

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

Настройка фрейма в интерфейсе Figma

Frame «Button»:

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

Настройка фрейма в интерфейсе Figma

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

Структура фрейма в интерфейсе Figma

Frame «Content»:

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

Настройка фрейма в интерфейсе Figma

Frame «Info»:

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

Настройка фрейма в интерфейсе Figma

Frame «Button»: 

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

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

Экспорт макетов в интерфейсе Figma

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

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

Просмотр фреймов в интерфейсе Figma

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

Просмотр фреймов в интерфейсе Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

Структура фрейма в интерфейсе Figma

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

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

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

Структура фрейма в интерфейсе Figma

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

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

Просмотр фрейма в интерфейсе Figma

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

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

Структура фрейма в интерфейсе Figma

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

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

Просмотр фрейма в интерфейсе Figma

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

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

Добавим Auto layout. 

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

Настройка фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

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

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

Просмотр элементов в интерфейсе Figma

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

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

Настройка фрейма в интерфейсе Figma

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

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

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

Корзина

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

Настройка фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

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

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

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

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

Настройка фрейма в интерфейсе Figma

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

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

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

Структура фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

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

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

Структура фрейма в интерфейсе Figma

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

Настройка фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

Просмотр фрейма в интерфейсе Figma

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

Просмотр страницы в интерфейсе Figma

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

Просмотр страницы в интерфейсе Figma

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

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

Просмотр страницы в интерфейсе Figma

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

Просмотр страницы в интерфейсе Figma

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

Просмотр страницы в интерфейсе Figma

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

Просмотр страницы в интерфейсе Figma

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

Premium 3.3 ГГц

• Premium 3.3 ГГц
• High CPU 5 ГГц
• Dedicated CPU 3.3 ГГц

Санкт-Петербург

• Санкт-Петербург
• Москва
• Новосибирск
• Казахстан
• Нидерланды
• Германия
• Нью-Йорк

12 мес Скидка 10%

• 1 мес Без скидки
• 3 мес Скидка 5%
• 6 мес Скидка 7%
• 12 мес Скидка 10%

Cloud-40

900 ₽/мес

Процессор

2 x 3.3 ГГц

Память

2 ГБ

NVMe

40 ГБ

Канал

1 Гбит/с

Публичный IP

Заказать VPS VDS сервер

Выбор клиентов

Cloud-50

1 080 ₽/мес

Процессор

2 x 3.3 ГГц

Память

4 ГБ

NVMe

50 ГБ

Канал

1 Гбит/с

Публичный IP

Заказать VPS

Показать еще 4 тарифа

Заключение

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

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