Житаев.В.А-2

1.

Министерство образования Республики Мордовия
Государственное бюджетное профессиональное образовательное
учреждение Республики Мордовия
«Саранский политехнический техникум»
КУРСОВАЯ РАБОТА
Тема: «Разработка веб-сайта для сервисного центра с
функциональном онлайн-записи и поддержки клиентов»
Автор работы
студент группы ИСП 403
Руководитель
В.А. Житаев
М.А. Падерова
Саранск 2025

2.

Цель курсовой работы:
Разработка веб-сайта для сервисного
центра с функциональном онлайн-записи и
поддержки клиентов

3.

Задачи:
1. Разработать структуру будущего веб-сайта и расположение блоков
2. Разработать веб-дизайн сайта (удобного и приятного интерфейса)
3. Верстка и фронтенд-разработка
4. Разработать и сверстать основные элементы веб-сайта
5. Наполнение контентом и SEO-базовая настройка
6. Тестирование и исправление ошибок

4.

Задача №1
Разработать структуру будущего веб-сайта и расположение блоков
Я использовал Figma как ключевой инструмент для
проектирования структуры и компоновки будущего
сайта. Это позволило:
Сфокусироваться на логике и удобстве
Визуализировать сетку, отступы и адаптивное
поведение блоков до начала вёрстки.
Создать интерактивный прототип для проверки
сценариев взаимодействия.
Предоставить разработчику точные спецификации
(размеры, расстояния, и тд )
Использование Figma сделало мой процесс разработки
структуры легче

5.

Пример использования Figma
Figma

6.

Задача №2
Разработать веб-дизайн сайта (удобного и приятного интерфейса)
Для разработки дизайна интерфейса я выбрал Figma как наиболее комплексный
инструмент. Он позволил:
Создавать единую дизайн-систему (цвета, шрифты, компоненты) для
визуальной целостности и согласованности каждого элемента.
Проектировать интерактивные прототипы с анимацией переходов, чтобы
тестировать и демонстрировать не только статичную «картинку», но и
ощущение от интерфейса - его отзывчивость и плавность.
Быстро итерировать на основе обратной связи: вносить правки в цвет, контраст,
размер элементов в реальном времени.
Гарантировать, что созданный эстетичный интерфейс будет точно реализован в
вёрстке благодаря точным спецификациям и экспорту ресурсов для
разработчиков.

7.

Пример использования Figma

8.

Задача №3
Верстка и фронтенд-разработка
Перевод утвержденных дизайн-макетов из Figma в код:
В пример возьмем слайдер, который
идет после меню управления

9.

Задача №4
Разработать и сверстать основные элементы веб-сайта
Создать функциональные компоненты (блоки, шапка,
основной контент, подвал), из которых впоследствии будет
собран весь сайт.
В пример возьмем шапку нашего сайта:

10.

11.

Задача №5
Наполнение контентом и SEO-базовая настройка
Обеспечить пользователей полной и полезной информацией,
одновременно оптимизировав структуру и код сайта для
эффективного взаимодействия с поисковыми роботами.

12.

Задача №6
Тестирование и исправление ошибок

13.

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

14.

СПАСИБО
ЗА
ВНИМАНИЕ!