Аннотация 2
ГЛОССАРИЙ 8
ВВЕДЕНИЕ 10
ГЛАВА 1. ПРОЕКТИРОВАНИЕ ИНТЕРФЕЙСА ПРИЛОЖЕНИЯ 12
1.1 Теоретические основы создания пользовательского интерфейса 12
1.1.1 Определение понятий «пользовательский опыт» и «пользовательский интерфейс» 12
1.1.2 Роль UI/UX дизайна 13
1.1.3 Основные принципы проектирования пользовательского интерфейса по модели Джесси Гарретта 14
1.1.4 Эвристики Якоба Нильсена 15
1.2 Проектирование опыта взаимодействия 17
1.2.1. Цели и задачи приложения 17
1.2.2. Набор возможностей приложения 18
1.2.3. Структура 21
1.2.4. Компоновка 25
1.2.5. Визуальный дизайн 29
1.3 Разработка прототипа в Figma 31
1.3.1. Обзор инструментария Figma и его возможностей 31
1.3.2. Создание основных экранов в Figma 32
1.3.3. Создание элементов интерфейса в Figma 35
.3.4. Создание интерактивного прототипа в Figma 36
ГЛАВА 2. ОПРЕДЕЛЕНИЕ ПОДХОДА К СОЗДАНИЮ ЦВЕТОВЫХ СОЧЕТАНИЙ 38
2.1. Цветовые гармонии 38
2.1.1 Определение и принципы цветовых гармоний 38
2.1.2 Гармонии хроматических цветов 38
2.1.3 Гармонии ахроматических цветов 40
2.1.4. Гармонии смешанных цветов 40
2.2. Анализ существующих методов формирования цветовых комбинаций 41
2.1.3 Вектор силы отталкивания 41
2.2.2 Кластеризация методом k-средних 42
2.2.3 Равноудалённые цвета 43
ГЛАВА 3. РАЗРАБОТКА ПРИЛОЖЕНИЯ 45
3.1 Разработка серверной части приложения 45
3.1.1. Требования к приложению 45
3.1.2. Фреймворк 45
3.1.3. СУБД 47
3.1.4. Описание приложения 48
3.2 Разработка клиентской части приложения 54
3.2.1 Фреймворк 54
3.2.2 Структура проекта 55
3.2.3 Описание приложения 55
3.3 Деплой проекта 56
3.3.1 Бэкенд 56
3.3.2 Фронтенд 57
ЗАКЛЮЧЕНИЕ 58
СПИСОК ИСТОЧНИКОВ 59
Актуальность. Специалисты, занятые в сферах визуального дизайна и веб-разработки, часто сталкиваются с проблемой подбора цветовой гаммы. Правильное использование цветовых комбинаций может значительно повысить эстетическое восприятие и оказать существенное влияние на пользовательский опыт. Однако, выбор и формирование цветовых комбинаций является сложной задачей, требующей учета возможностей цветовых моделей и принципов цветовых гармоний.
Круг потенциальных пользователей приложения, помогающего решить эту задачу, достаточно широк. Веб-разработчики могут проявить интерес к экономии времени и усилий при выборе подходящих цветов для стилистического оформления продукта. Графические дизайнеры могут быть заинтересованы в поиске идей цветовых гамм для визуальных материалов, над которыми они работают. Маркетологи также заинтересованы в поиске цветовых комбинаций, соответствующих бренду компании. Помимо того, многие рядовые пользователи, занимающиеся творчеством, смогут использовать этот инструмент для подбора цветовых сочетаний с целью создания эстетически привлекательных изделий. Данное приложение позволит веб-разработчикам, дизайнерам и другим заинтересованным лицам создавать привлекательные и гармоничные цветовые схемы для своих проектов без необходимости специализированных знаний в области дизайна или теории цвета.
В этом контексте актуальность работы заключается в том, что веб-приложения может упростить процесс подбора цветов и сделать его более доступным для широкой аудитории.
Цель Целью данной работы является создании веб-приложения с доступным интерфейсом, решающего задачу автоматического создания цветовых сочетаний.
Для достижения этой цели необходимо разобраться в основных принципах теории цвета, а именно в её базовых принципах и типологии цветовых гармоний. Помимо этого, требуется провести обзор существующих методов формирования цветовых комбинаций и, наконец, подобрать наиболее эффективный подход, который будет учитывать не только требования визуального дизайна, но и эстетические аспекты восприятия цвета.
Помимо того, требуется спроектировать интерфейс, учитывающий основные принципы UX/UI дизайна, выбрать технологический стек и непосредственно разработать приложение. Наконец, требуется разместить приложение на хостинге.
Структура работы включает в себя введение, перечень используемых терминов и определений, основную часть, состоящую из трёх глав, а также заключение и список используемой литературы.
Основными задачами данной работы было спроектировать, разработать и разместить веб-приложение для создания цветовых сочетаний с пользовательскими настройками, позволяющее упростить процесс подбора цветовых палитр.
В ходе работы был сформирован список требований к приложению и спроектирован пользовательский интерфейс, опирающийся на 5-ступенчатую модель проектирования, предложенную Дж. Гарретом. Пользуясь инструментарием сервиса Figma был отрисован макет и разработан интерактивный прототип будущего приложения, моделирующий переходы между страницами и поведение при нажатии и наведении на различные элементы.
На основе изучения базовых принципов теории цвета и анализа методов создания цветовых сочетаний был выбран подход к генерации палитр. За основу были взяты цветовые гармоний полихроматических цветов, а в качестве метода создания цветовых палитр – принцип равноудалённых цветов в трёхмерном цветовом пространстве, основанном на базовых свойствах цвета.
На этапе разработки подобран технологический стек (React, Express, MongoDB) и с его помощью разработана серверная и клиентская части приложения. Также проект был размещён в открытый доступ на платформе Яндекс.Облако. Для приложения была настроена информационная инфраструктура, зарезервировано доменное имя и выпущен SSL-сертификат. Приложение доступно по URL-адресу https://color-app.ru.
Таким образом, по результатам проведённой работы удалось спроектировать, разработать и разместить веб-приложение для генерации цветовых палитр с удобным интерфейсом и полезным функционалом.
