prezentatsiya_VKR_Erokhin_frontend_3d_print (1)

1.

FRONTEND
Разработка веб-платформы
для сервиса печати
робототехнических
деталей.Frontend.
Выпускная квалификационная работа
Студент: Ерохин Евгений · группа 621021
Тула, 2026
ВКР · Frontend-платформа сервиса 3D-печати
1

2.

Актуальность
Почему нужен удобный интерфейс сервиса 3D-печати
Инженерам нужен
быстрый доступ к заказу
Ручное согласование
увеличивает сроки
Нет единого интерфейса
для каталога и корзины
Проблема
Вывод
Без удобного фронтенда пользователь вынужден
согласовывать детали вручную: выбирать
материалы, уточнять цену и сроки отдельно, а
также не видит понятного пути от выбора изделия
до заказа.
Интерфейс должен объединить регистрацию,
вход, каталог деталей, карточки товаров,
корзину, расчёт суммы и понятную навигацию в
единой веб-платформе.
ВКР · Frontend-платформа сервиса 3D-печати
2

3.

Цель и задачи
От требований предметной области к пользовательскому интерфейсу
Цель
Разработать frontend-часть веб-платформы,
которая обеспечивает удобный заказ
робототехнических деталей через вебинтерфейс.
1. анализ аналогов сервисов 3Dпечати
2. определение структуры сайта
3. выбор инструментов
4. создание макетов в Figma
5. верстка HTML/CSS страниц
6. проверка интерфейса и итогов
Ключевая идея: frontend должен быть не набором отдельных страниц, а понятным
пользовательским маршрутом — от регистрации до корзины и оформления заказа.
ВКР · Frontend-платформа сервиса 3D-печати
3

4.

Предметная область
Пользовательский интерфейс должен учитывать процесс заказа деталей
Пользователь
инженер, студент, заказчик
Каталог
товары, материалы, цены
Разделы сайта
Вход
Регистрация
Заказ
количество, сумма, корзина
Данные интерфейса
Главная
Каталог
Корзина
товарные карточки
Требования к frontend
• простая навигация
• понятные формы авторизации
• карточки товаров с материалами и ценами
• удобное изменение количества в корзине
ВКР · Frontend-платформа сервиса 3D-печати
материалы и цены
количество и итог
4

5.

Функциональная модель
Основные сценарии пользователя веб-платформы
1
Регистрация
2
Вход
3
Каталог
4
Корзина
5
Заказ
имя / email / пароль
логин и пароль
карточки деталей
количество и сумма
оформление и связь
В системе реализованы
макеты в Figma · логотип · регистрация · вход · главная страница · карточки товаров · корзина · HTML-разметка ·
CSS-стили · единый стиль
ВКР · Frontend-платформа сервиса 3D-печати
5

6.

Структура frontend-проекта
Разделение страниц, стилей и статичных ресурсов
Пользователь
браузер
HTML-страницы
index / login / register /
cart
CSS styles
единое оформление
templates
HTML-документы
static
изображения и стили
ВКР · Frontend-платформа сервиса 3D-печати
6

7.

Технологический стек
Инструменты выбраны для макетирования и быстрой верстки
Figma
Adobe Photoshop
HTML
макеты, сетка, прототипы
разработка логотипа
структура веб-страниц
CSS
Google Fonts
стили, сетка, адаптивность
единая типографика
Дополнительно: рабочая область 1920×1080, папки templates/static, PNG-логотип, карточки товаров, формы,
кнопки и единые CSS-классы.
ВКР · Frontend-платформа сервиса 3D-печати
7

8.

Структура страниц
Интерфейс построен из повторяемых элементов
Логотип
Карточка
Шапка
Кнопка
Количество
Корзина
Количество
цена
Особенности реализации
Единая цветовая гамма · повторяемые CSS-классы · формы ввода · сетка каталога · понятное отображение цены,
материала и количества.
ВКР · Frontend-платформа сервиса 3D-печати
8

9.

Ключевые frontend-модули
Реализация покрывает базовый путь пользователя
регистрация и вход
layout
шапка, логотип, навигация
catalog
карточки популярных товаров
cart
количество, цена, итог
styles
CSS-классы и оформление
scripts
добавление в корзину
auth pages
ВКР · Frontend-платформа сервиса 3D-печати
9

10.

Удобство и визуальная логика
Интерфейс ориентирован на быстрый путь от входа к заказу
Новый пользователь
регистрируется
создаёт профиль
Заказчик
просматривает каталог
выбирает детали
Оператор
в будущем сможет
управлять заказами
центральные формы
единая навигация
контрастные кнопки
сетка каталога
понятные цены
минимум лишних действий
Интерфейс спроектирован так, чтобы пользователь быстро переходил от авторизации к выбору деталей и
формированию корзины.
ВКР · Frontend-платформа сервиса 3D-печати
10

11.

Реализация и проверка интерфейса
Результаты подтверждают выполнение практической части
4
1920×1080
основные страницы
размер макета
Пользовательский сценарий
регистрация → вход → просмотр каталога → добавление
товара → изменение количества → итоговая сумма
Проверка верстки
Корректность отображения форм, карточек, кнопок и
корзины проверялась по готовым макетам и структуре
проекта templates/static.
ВКР · Frontend-платформа сервиса 3D-печати
11

12.

Итог работы
Что было получено в результате разработки
Макеты
страницы спроектированы
в Figma
Верстка
HTML и CSS-код
интерфейса
Интерфейс
каталог, авторизация и
корзина
Научная новизна
Практическая значимость
Адаптация структуры интерфейса веб-сервиса 3D-печати к
задачам робототехники: путь от регистрации до корзины,
карточки деталей, материалы и цены.
Frontend можно использовать как основу веб-платформы
для кружков, лабораторий и малых предприятий;
страницы готовы к подключению backend и базы данных.
ВКР · Frontend-платформа сервиса 3D-печати
12

13.

Дальнейшее развитие
Как довести frontend до полноценной платформы
Backend-интеграция
Калькулятор
Загрузка STL
Django / REST API
цена по 3D-модели
OBJ / STEP
История заказов
Адаптивность
Чат поддержки
личный кабинет
мобильная версия
обратная связь
Спасибо за внимание!
ВКР · Frontend-платформа сервиса 3D-печати
13