Команда проекта «Сайт для запоминания формул» Московского политехнического университета представляет собой 3 подгруппы по сферам: дизайн, front end, back end. Каждый участник проекта должен был определиться с тем, какую работу он будет выполнять согласно установленному руководителем каждой группы дедлайну.
Работа дизайнеров
Первыми работу над проектом начали дизайнеры, их задачей была разработка структуры и дизайна сайта, который будет не только функциональным, но и приятным для восприятия. Основной задачей было разработать стиль, который будет поддерживать академическую атмосферу, но при этом выглядеть современно и привлекательно для студентов. Для этого дизайнеры выбрали несколько ключевых направлений работы: цветовая палитра, выбор шрифтов, стиль и расположение кнопок, а также общий вид сайта, который должен соответствовать брендингу Московского политеха.
Цветовая палитра
На основе фирменного стиля университета были выбраны основные цвета — черный и белый, чтобы подчеркнуть лаконичность и структурированность сайта. Эти цвета создают нейтральный фон для элементов интерфейса, позволяя сконцентрировать внимание пользователя на образовательном контенте и важных элементах навигации. Кроме основных цветов команда разработала и дополнила дизайн яркими акцентными цветами, среди которых: фиолетовый, синий, зеленый и красный. Эти цвета служат для выделения интерактивных элементов, таких как кнопки и ссылки. Каждый цвет был выбран с учётом удобства восприятия и читабельности.
Шрифты
Шрифты играют значительную роль в восприятии сайта, и команда дизайнеров уделила этому особое внимание. Основной шрифт сайта — Gilroy, который используется в нескольких вариантах: от тонкого до жирного. Это позволяет гибко использовать его для заголовков, основного текста и вспомогательных элементов, сохраняя при этом целостный стиль. Для выделения второстепенных элементов, таких как заметки или указатели, используется Verdana, что помогает структурировать информацию и облегчить восприятие.
Все это было отображено ими в брендбуке:
Стиль кнопок и навигация
Кнопки — это важнейший элемент взаимодействия пользователя с сайтом, и дизайнеры позаботились о том, чтобы они были удобными, заметными и интуитивно понятными. Для каждой кнопки был подобран цвет из акцентной палитры, что позволяет пользователю быстро ориентироваться и взаимодействовать с интерфейсом. Стиль кнопок выдержан в простом, но современном стиле, с закруглёнными углами и крупными надписями, чтобы их было легко увидеть и нажать. Текст на кнопках написан крупным шрифтом и сопровождается приглушённой тенью, что добавляет глубину и улучшает восприятие на светлом фоне.
Общий образец
Процесс создания дизайна включал несколько итераций и обсуждений с участием всей команды. Дизайнеры рассматривали разные варианты цветовых схем и компоновок элементов, стремясь создать визуально привлекательный, но при этом практичный интерфейс. Команда пришла к выводу, что минималистичный стиль, который подчёркивает образовательную направленность сайта, будет наиболее удачным решением.
Работа backend
Свою работу команда backend начала со сбора сущностей проекта, определения атрибутов сущностей и связей между ними, тем самым формируя ER-модель. Эта схема позволяет визуализировать данные и их взаимодействие в рамках системы. ER-модель используется при проектировании баз данных, поэтому построение верной схемы является ключевым этапом.
Одной из главных проблем, требующих серьезного анализа, был выбор оптимального языка программирования, который поможет осуществить задуманные идеи. Для backend-разработки был выбран Python и фреймворк Django, который предоставляет такой набор инструментов, как работа с базами данных, внедрение бизнес-логики, управление пользовательскими аккаунтами, обработка форм и другое. Данный фреймворк был раннее хорошо знаком членам команды и удобен в использовании, поэтому и был выбран.
Далее была поставлена задача реализации основных RESTful эндпоинтов для CRUD операций (создание, чтение, обновление, удаление) с формулами, после чего разработчики провели тестирование с использованием Postman для проверки корректности работы эндпоинтов и обработки запросов.
Во время тестирования были выявлены ошибки при сериализации данных в формат JSON. Это потребовало дополнительной отладки и внедрения корректных методов сериализации.
Работа frontend
Разработчики внешней стороны платформы для своей части работы решили использовать фреймворк Vue языка Java Script. Он предоставляет не только готовый набор шаблонов, но и возможность изменять данные в режиме реального времени. Это позволяет сразу получать новые данные вместо постоянного обновления страницы в браузере каждый раз после совершенствования модели. В общем, реактивность и хорошая совместимость Vue сыграла ключевую роль.
После общей доработки программы и реализации взаимодействия с интерфейсом оставалось только заполнить саму базу необходимыми данными.