В данной работе описан процесс разработки дизайна сервиса для систематизации и упрощения работы волонтеров, а также подачи заявок нуждающимися. В процессе разработки были решены следующие задачи: 1. Проанализировать существующий рынок веб‑сайтов. 2. Выявить современные тенденции в UI/UX дизайне. 3. Провести сравнительный анализ аналогов сайтов и других сервисов для волонтеров. 4. Разработать концепцию дизайна интерфейса сайта. 5. Разработать интерактивный прототип сайта. 6. Разработать видеоролик на основе прототипа. В ходе работы были изучены особенности поиска работы и коммуникации волонтеров, продумана удобная система организации связей между ними и нуждающимися и налажена возможность оnline‑обучения волонтеров. Был разработан простой, «дружелюбный» дизайн с опорой на нужды ЦА, созданы маскоты  персонажи, помогающие пользователю ориентироваться на сайте. В результате разработана концепция веб‑сайта «Спутник», готовая к дальнейшей работе над ним, а также презентационный материал, показывающий сайт подробно и динамично. Для создания иллюстраций и проектирования страниц сайта использованы редакторы для работы с растровой и векторной графикой.

This paper describes the process of developing a service design to systematize and simplify the work of volunteers, as well as submitting applications to those in need. During the development process , the following tasks were solved: 1. Analyze the existing website market. 2. Identify current trends in UI/UX design. 3. To conduct a comparative analysis of analogs of websites and other services for volunteers. 4. Develop the concept of the website interface design. 5. Develop an interactive prototype of the site. 6. Develop a video based on a prototype. In the course of the work, the features of job search and communication of volunteers were studied, a convenient system of organizing connections between them and those in need was thought out, and the possibility of online training of volunteers was established. A simple, "friendly" design was developed based on the needs of the target audience, mascots characters were created to help the user navigate the site. As a result, the concept of the Sputnik website has been developed, ready for further work on it, as well as presentation material showing the site in detail and dynamically. To create illustration and design the pages of the site, editors for working with raster and vector graphics were used.

• ВВЕДЕНИЕ
• ГЛАВА 1. ПРЕДПРОЕКТНОЕ ИССЛЕДОВАНИЕ
  • 1.1.Анализ целевой аудитории
    • Рис. 1.1. Численность участников волонтерского дви
  • 1.2.Тренды в веб‑дизайне
    • Рис. 1.2. Пример иллюстрации в стиле Memphis
    • Рис. 1.3. Пример страницы сайта с иллюстрациями вм
    • Рис. 1.4. Пример использования необычных иконок
    • Рис. 1.5. Пример визуального разделения экрана
  • 1.3.Виды адаптации под мобильные устройства
  • Выводы по главе 1
• ГЛАВА 2. ОБЗОР АНАЛОГОВ, ПРОГРАММНЫХ И АППАРАТНЫХ
  • 2.1. Аналоги
    • Рис. 2.1. Страницы обучающего блока
    • Рис. 2.2. Главная страница в фирменном стиле
    • Рис.2.3. Обучающий блок на другом сервисе
    • Рис. 2.4. Главная страница
  • 2.2. Выбор программ для реализации проекта
  • 2.3. Референсы тематических персонажей для сайта
    • Рис. 2.5. Референсы из интернета
    • Рис. 2.6. Первый запрос для маскота «Круг»
    • Рис. 2.7. Второй запрос для маскота «Круг» с добав
    • Рис.2.8. Добавление кудрявых волос
    • Рис. 2.9. Первый запрос для маскота «Квадрата»
    • Рис. 2.10. Добавление цвета Рис. 2.11. Цвет
    • Рис. 2.13. Первый запрос для маскота «Треугольник»
    • Рис. 2.14. Второй запуск для маскота «Треугольник»
    • Рис. 2.15. Добавление бирюзового
    • Рис. 2.16. Лучшие референсы «Круга» Рис.2
    • Рис. 2.18. Лучший референс «Квадрата» Р
    • Рис. 2.20. Лучший референс «Треугольника»
  • Выводы по главе 2
• ГЛАВА 3. РЕАЛИЗАЦИЯ
  • 3.1. Определение страниц сайта и создание карты фу
    • Рис. 3.1. Карта функционала
    • Рис. 3.2. Карта функционала: главная страница
    • Рис. 3.3. Карта функционала: личный кабинет нужда
    • Рис. 3.4. Карта функционала: личный кабинет курат
    • Рис. 3.5. Карта функционала: личный кабинет волон
  • 3.2. Выбор цветов и разработка маскотов
    • Рис. 3.6. Основные цвета и самые часто используемы
    • Рис. 3.7. Образ маскота‑волонтера в цвете
    • Рис. 3.8. Образ маскота‑волонтера в цвете
    • Рис. 3.9. Образ маскота‑волонтера в цвете
  • 3.3. Разработка логотипа, других графических элеме
    • Рис. 3.10. Логотип проекта
    • Рис. 3.11. Знак проекта
    • Рис. 3.12. Фирменный блок проекта
    • Рис. 3.14. Мокапы пакетов для еды и термокружек
    • Рис. 3.15. Уникальные иконки на сайте
  • 3.4. Вайрфрейм страниц
    • Рис. 3.16. Вайрфрейм декстопных и мобильных стран
    • Рис.3.17. Вайрфрейм декстопных и мобильных страниц
    • Рис.3.18. Вайрфрейм декстопных и мобильных страниц
    • Рис. 3.19. Вайрфрейм декстопных и мобильных страни
    • Рис. 3.20. Вайрфрейм страниц регистрации и входа
  • 3.5. Дизайн страниц сайта
    • Рис.3.21. Дизайн главной страницы, первые три блок
    • Рис. 3.22. Дизайн страниц входа и регистрации
    • Рис. 3.23. Дизайн страниц подачи заявки
    • Рис. 3.24. Дизайн страниц поиска вакансий и конкре
    • Рис. 3.25. Дизайн основных страниц аккаунта нуждаю
    • Рис. 3.25. Дизайн основных отзывов и мероприятий
    • Рис. 3.27. Дизайн аккаунта куратора, страниц отзыв
    • Рис. 3.29. Мобильный дизайн учебных страниц курато
    • Рис. 3.30. Дизайн страницы вакансии для куратора в
    • Рис. 3.31. Дизайн страницы аккаунта и рабочих стра
    • Рис. 3.32. Дизайн учебных страниц волонтера
    • Рис.3.33. Дизайн страницы вакансии для волонтера в
  • 3.6. UI‑kit
    • Рис. 3.34. Стили цвета
    • Рис. 3.35. Стили текста
    • Рис. 3.36. Компоненты
    • Рис. 3.37. Персонажи
    • Рис. 3.38. Хедер и футер
    • Рис. 3.39. Сетки
    • Рис. 3.40. Кнопки и карточки
  • Выводы по главе 3
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ