Министерство образования и науки Республики Башкортостан Государственное бюджетное профессиональное образовательное учреждение Уфимский государственный колледж технологии и дизайна Проектирование пользовательского интерфейса сайта для социальной сети InclusiveConnect, объединяющей людей с ограниченными возможностями. КУРСОВАЯ РАБОТА 09.02.07. МДК08.02.ИСП-21-39. 1/8.19П3 Руководитель курсовой работы ____________Самигуллина Р. Р. ______________________2024 г. Разработала ______________Прокопенко В.С. ________________________2024г. СОДЕРЖАНИЕ Введение Глава 1 Особенности композиционного решения экранов сайта 1. Общее содержание вэб-сайта 2. Дизайн вэб-сайта Глава 2 Разработка детальной концепции и визуального дизайна сайта 1. Основная концепция вэб-сайта 2. Программное обеспечение Заключение Список литературы И Ли № докум. Разраб. Прокопенко Провер. Самигуллина Реценз. Н. Контр. Утверд. Подп Да Лит. Лист Листов ГБПОУ УГКТиД ВВЕДЕНИЕ Тема курсового проекта “Проектирование пользовательского интерфейса сайта для социальной сети InclusiveConnect, объединяющей людей с ограниченными возможностями.” Данная тема была выбрана по ряду причин: Актуальность: В современном обществе всё больше людей с ограниченными возможностями сталкиваются с трудностями в повседневной жизни, и им, как никому другому, требуется больше поддержки от таких же людей. Моя цель - создать такое сообщество, где люди с ОВЗ могут общаться друг с другом и поддерживать в нелёгком жизненном пути. Практическая значимость: Разработанный сайт для социальной сети может стать реальным инструментом для помощи и общения людей с ОВЗ, предоставляя им возможности развития, информацию о доступных ресурсах, консультациях специалистов и так далее. Инновационность: Использование веб-технологий и дизайнерских решений для создания удобного, простого и понятного интерфейса сайта может привлечь внимание к данной социальной сети и сделать его более доступным и эффективным для пользователей с ОВЗ. Образовательная ценность: Разработка дизайна интерфейса для социальной сети - сложный процесс, требующий знания и понимания принципов вебдизайна, программирования и маркетинга. Работа над проектом позволит студенту применить свои знания на практике и понять алгоритмы работы, что пригодится в дальнейшем развитии. Личная заинтересованность: В своей жизни я немало повстречала людей с разными видами ОВЗ, один из таких людей был моим другом долгое время. Я представляю, как им трудно и как иногда не хватает поддержки и мотивации для решения самых обычных повседневных задач. Моя социальная сеть должна помочь справиться с такими проблемами, как недостаток общения, недостаток информированности о различных возможностях и ресурсах. Я стараюсь дать понять людям с ограниченными возможностями, что они тоже являются неотъемлемой частью общества и что у них такие же шансы стать успешными в своём деле. На сегодняшний день существуют разные интернет-ресурсы для людей с ОВЗ и с инвалидностью, но ещё никто не создавал социальную сеть для общения таких людей между собой. Я считаю, что несмотря на обилие вебсайтов и информированности обычных людей о понятии инклюзивности, люди с ОВЗ в праве самим выбирать, с кем они хотят общаться и чем они хотят заниматься в своей жизни. Моя социальная сеть предусматривает как раз такие цели. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P Предмет исследования - проектирование пользовательского интерфейса сайта для социальной сети InclusiveConnect, объединяющей людей с ограниченными возможностями. Объект исследования – процесс создания дизайна интерфейса сайта для социальной сети InclusiveConnect, объединяющей людей с ограниченными возможностями. Цель исследования - разработать эффективный графический дизайн сайта для социальной сети InclusiveConnect, объединяющей людей с ограниченными возможностями. В соответствии с целью, объектом, предметом исследования были определены следующие задачи: 1. анализ конкурентов: изучить сайты конкурентов, чтобы понять, что работает, а что нет. 2. исследование целевой аудитории: узнать, кто является потенциальным клиентом, что им нужно и как ваш продукт может им помочь. 3. определение целей и задач приложения: определить, какие функции должен выполнять веб-сайт, чтобы достичь поставленных целей. 4. создание прототипа веб-сайта: разработать структуру и дизайн веб-сайта, учитывая результаты предыдущих исследований. 5. анализ результатов: проанализировать результаты работы продукта, чтобы определить, какие аспекты требуют улучшения и какие изменения необходимо внести. Методы исследования: 1. анализ литературы — это метод исследования, который предполагает изучение и критическую оценку научных публикаций, статей, книг и других источников информации по теме исследования; 2. сравнительный анализ — это метод исследования, который заключается в сопоставлении и сравнении двух или более объектов, явлений или процессов с целью выявления их сходств и различий, а также определения их значимости и влияния на исследуемую проблему; 3. опрос пользователей — это метод исследования, при котором собирается информация от реальных или потенциальных пользователей; 4. тестирование прототипа — это процесс проверки работоспособности и функциональности разработанного продукта или решения перед его окончательным выпуском; 5. статистический анализ данных - позволяет выявить закономерности, тенденции и взаимосвязи между различными параметрами, что может помочь улучшить продукт или решение. Этапы исследования: 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P 1. организация исследования осуществлялась в три этапа: подготовительный, основной и заключительный. 2. подготовительный этап исследования предполагал теоретический анализ литературы по теме курсовой работы. 3. основной этап предполагал определение численных параметров объекта исследования. 4. аключительный этап исследования: анализ и интерпретация результатов исследования, формулирование выводов и оформление курсовой работы. Базой исследования является государственное бюджетное профессиональное образовательное учреждение Уфы УГКТиД. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P ГЛАВА 1 ОСОБЕННОСТИ КОМПОЗИЦИОННОГО РЕШЕНИЯ ЭКРАНОВ ПРИЛОЖЕНИЯ 1.1 Общее содержание веб-сайта “InclusiveConnect” - социальная сеть для людей с ограниченными возможностями. Целью и основной задачей сайта социальной сети "Inclusive Connect" является объединение и поддержка людей с ограниченными возможностями, обеспечивая им комфортное и включающее онлайнпространство. Основные информационные блоки сайта: 1. О нас - основной блок с информацией о социальной сети, представление незарегистрированному пользователю о возможностях, которые он получит после регистрации. 2. Регистрационное окно или окно входа - пользователь может зарегистрироваться и добавить информацию о себе 3. Аккаунт - информация о пользователе, которую он может как добавить, так и удалить или отредактировать. 4. Уведомления - пользователь может получать оповещения в настоящем времени, это может быть заявка в друзья и т.д. 5. Сообщения - блок, где пользователь может общаться с кем угодно и о чём угодно, получать и отправлять сообщения. 6. Статьи - собранная и рассортированная на модули информация, которая поможет пользователю совершенствоваться и развиваться. 7. Настройки - регулирование таких параметров, как конфиденциальность, безопасность, чёрный список и специальные возможности. Целевая аудитория: - Люди с ОВЗ, инвалидностью или психическими расстройствами. - Близкие люди, семья, друзья людей с ограниченными возможностями. - Волонтёры, которые могут оказать помощь людям с ОВЗ. Аналоги: DISLIFE - онлайн-сервисы для инвалидов, объединенные общей целью - соединять людей с людьми. C помощью этих сервисов люди находят помощников, а волонтеры – тех, кому нужна помощь, соискатели – работодателей и наоборот, желающие общаться – друзей и любовь, ищущие поддержку властей – возможность рассказать о своей проблеме. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P ОВЗ.РФ - всё об обучающихся с ограниченными возможностями здоровья. Это прежде всего общедоступный портал информации, где пользователь может задать любой вопрос о людях с ОВЗ и получить на него ответ. ВОИ РФ - Всероссийское общество инвалидов. На сайте можно найти информацию об этом обществе, когда оно было организовано, какие мероприятия проводит и новости. ВОС - Всероссийское общество слепых. Конечно, это не относится ко всем людям с ОВЗ, но тем не менее это помогает людям. На сайте представлены последние новости о деятельности общества, информация о предприятиях, их продукции и деятельности. 1.2. Дизайн веб-сайта Логотип социальной сети “InclusiveConnect” представляет собой сочетание двух заглавных букв названия логотипа - IC, а также дорисованное под ними подобие колеса инвалидной коляски. Под ним написано полное название социальной сети. Разрабатывая логотип, я хотела, чтобы он получился прежде всего понятным, и чтобы вызывал ассоциации, мне кажется, что у меня это получилось. Логотип выполнен в темно-синем цвете, он выделяется на фоне сайта и привлекает к себе внимание. В качестве основного шрифта был выбран Century Gothic с начертанием Regular-Bold, так как он способен привлечь к себе внимание пользователей. За счет того, что у него нет засечек, Bold выглядит спокойно и ненавязчиво, Italic выделяет наш сайт среди общего информационного потока. Фон веб-сайта “InclusiveConnect” имеет градиентный светлоголубой цвет, поскольку он символизирует чистоту, невинность, добро и истину. Светло-голубой сочетается с другими цветами и оттенками, при этом он не отвлекает пользователя от основной информации. Элементы веб-сайта выполнены в следующих цветах: Белый, синий, розовый и фиолетовый, эти цвета выбраны из-за значений каждого из них, а также из-за их расположения на цветовом круге относительно друг друга: Белый: это новое начало, легкость и свежесть, безупречность и беспристрастность. К положительным характеристикам белого цвета относятся: открытость, единство, легкость, самоотдача. Розовый: этот цвет означает романтичность, доброту, любовь. Вызывает чувство комфорта, успокаивает, избавляет от навязчивых мыслей. Его питает аура невинности и чистоты. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P Фиолетовый: загадочный, насыщенный и спокойный. Этот тон достаточно легко погасить другими оттенками, но сам по себе фиолетовый очень эффектный и глубокий. Фиолетовый цвет связан с артистизмом, большими идеями, а еще с чувством интуиции. Синий: цвет неба и моря, холодный и сдержанный, но в то же время дарящий умиротворение и безмятежность. Синий цвет – самый «спокойный» цвет для психоэмоционального восприятия. Именно поэтому важные блоки и иконки сайта выполнены в синем цвете. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P ГЛАВА 2 РАЗРАБОТКА ДЕТАЛЬНОЙ КОНЦЕПЦИИ И ВИЗУАЛЬНОГО ДИЗАЙНА САЙТА 2.1 Основная концепция вэб-сайта Социальная сеть “InclusiveConnect” предназначена для социализации и общения людей с ограниченными возможностями здоровья. Основная концепция заключается в создании удобного и интуитивно понятного интерфейса, который позволит любым пользователям легко заводить новые знакомства, социализироваться, общаться и саморазвиваться. Приложение наводит на идеологию доброты, эмпатии к людям, взаимопомощь и неравнодушие к окружающим. Это показывается через стилеобразующие элементы: цвета, шрифты, логотип, инфографику. Сильной стороной сайта является проработанная панель навигации, заголовки не прячутся, а значит по ним можно легко найти информацию для себя. Также для того, чтобы пользователь легко ориентировался на сайте была использована интуитивно понятная инфографика, а также начертание Bold, так как оно умеренное и приятное для чтения пользователю. Самой заметной и значимой частью мобильного приложения является логотип. Он представляет собой фигуру напоминающую колесо инвалидной коляски. Снизу находится название самой социальной сети. Такая композиция прекрасно передает главную тематику социальной сети “InclusiveConnect”. Логотип выполнен спокойном синем цвете, поскольку этот цвет означает умеренность, надёжность и спокойствие. 2.2 Программное обеспечение Программное обеспечение (ПО) – программа или множество программ, используемых для управления компьютером. В рамках выполнения курсовой работы, были изучены следующие программные обеспечения: Adobe Photoshop, Adobe Illustrator. Adobe Photoshop – многофункциональный растровый графический редактор, разрабатываемый и распространяемый компанией Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. При выполнении курсовой работы, данная программа применялась для оформления окон сайта социальной сети. Adobe Illustrator – векторный графический редактор, разработанный и распространяемый компанией Adobe Systems. При выполнении курсовой работы данная программа применялась для создания векторных изображений, в частности, создание инфографики. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P Исходя из опыта работы со всеми вышеперечисленными программами, можно сделать вывод, что Adobe Photoshop – универсальная программа, наиболее подходящая для разработки дизайна. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P ЗАКЛЮЧЕНИЕ В результате выполнения курсовой работы была разработана концепция и дизайн социальной сети, предназначенной для людей с ограниченными возможностями здоровья. Основные выводы и результаты курсовой работы: 1. Проведен анализ существующих аналогов сайтов для людей с ограниченными возможностями здоровья и определены их недостатки с точки зрения доступности для людей с ОВЗ. 2. Определены основные функции социальной сети, такие как регистрация и вход, общение людей с ОВЗ, специальные возможности, возможность саморазвития людей с ОВЗ и т.д. 3. В процессе выполнения курсовой работы были приобретены навыки работы с современными инструментами и технологиями разработки дизайна мобильных приложений, что позволит успешно использовать их в профессиональной деятельности. 4. Сформулирована основная концепция социальной сети для людей с ограниченными возможностями здоровья. 5. Определена целевая аудитория социальной сети для людей с ограниченными возможностями здоровья. 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P СПИСОК ЛИТЕРАТУРЫ 1. ГОСТ Р 52874-2007 “Интернет-технологии. Спецификации и руководство по доступности веб-контента 2. ГОСТ Р 53998-2010 “Доступность и использование интернет и вебсервисов” 3. ГОСТ Р 57495-2017 “Информационные технологии. Интернет вещей. Устройства и сервисы для людей с инвалидностью и пожилых людей” 4. ГОСТ Р ИСО 9241-310-2011 “Эргономика взаимодействия “человексистема”. Часть 310. Принципы организации доступа к электронным зданиям” 5. WCAG (Руководство по доступности веб-контента) – общепризнанный набор требований для обеспечения доступности программного обеспечения, веб-сайтов и содержимого для людей с нарушениями здоровья. Было разработано W3C (Консорциум Всемирной паутины). 6. Проектирование для доступности: принципы и лучшие практики (Smashing Magazine 2021). 7. Проблемы доступности и удобства использования в мобильных приложениях: систематический обзор литературы (International Journal of Mobile and Blended Learning 2019). 8. Разработка мобильных приложений: тенденции, проблемы и лучшие практики (Mobile Information Systems 2018) 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P ПРИЛОЖЕНИЕ 09.02.07 МДК08.02.ИСП-21-39. 1/8.19ПЗ Из Ли № докум. Подп Да Ли P
