3216д. Макетирование и разработка прикладных интерфейсов

Первый семестр

• Недель 16 Лек 16
• Недель 16 Лаб 30
• Недель 16 Лаб 30

Зачет

Второй семестр

• Недель 12 Лек 24
• Недель 12 Лаб 48
• Недель 12 Лаб 48

Экзамен

Курсовая работа (1 семестр) - список рекомендованных тем в конце данной страницы - зеленый цвет, указание номера группы - 3216д.

Литература и информационные ресурсы

• Психология цвета в веб-дизайне
• Психология цвета: значение, влияние, использование
• Форматы изображений в вебе (2024)

Учебники

• ПРИМЕНЕНИЕ СИСТЕМНОГО АНАЛИЗА ПРИ РАЗРАБОТКЕ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ИНФОРМАЦИОННЫХ СИСТЕМ
• Введение в проектирование пользовательских интерфейсов

Информационные сервисы

• Подбор цветов. Симуляция проблем цветового восприятия.

ПЕРВЫЙ СЕМЕСТР

Задание №1 (Время работы - до 4 пар, максимальный балл - 15)

Изучите онлайн-редакторы из предложенного списка:

• https://www.figma.com/
• https://www.photopea.com/
• https://pixlr.com/ru/
• https://create.vista.com/ru/
• https://supa.ru/
• https://penpot.app/

Подготовьте краткий отчет в формате:

1. Наименование сервиса
2. Назначение
3. Функционал
4. Область применения
5. Возможность практического использования в бесплатном режиме
6. Оценка полезности при разработке пользовательского интерфейса
7. Предложите собственный вариант сервиса, более подходящий, на ваш взгляд, для решения данных задач.

Задание №2 (Время работы - 2 пары, максимальный балл - 10)

Изучите статьи:

• Пользовательский интерфейс: правила и этапы разработки
• Словарь терминов UX/UI-дизайна
• Как создать прототип сайта: пошаговая инструкция

Задание №3 (Время работы - 2 пары, максимальный балл - 5)

Используя нейронную сеть создайте набор графических элементов для своего интерфейса - фон, рамки, кнопки, баннеры ...

В качестве результата работы нужно представить:

1. Графические элементы, соответствующие концепции скетча пользовательского интерфейса
2. Промты - для каждого элемента
3. Название сетей, которые были использованы в работе.

Варианты НС:

• https://stablediffusionweb.com/ru
• https://leonardo.ai/
• https://www.sberbank.com/promo/kandinsky/
• https://www.khroma.co/
• https://www.visily.ai/
• https://alice.yandex.ru/

Найдите более подходящую ИИ для этих целей: + 2 балла

Задание №4. (2 пары, максимальный балл - 5)

Разработайте прототип интерфейса адаптированный возможностям людей с особенностями зрения - дальтонизм, цветовая слепота, цветоаномалия

Используйте мобильные приложения или онлайн-сервисы, чтобы посмотреть на свой интерфейс с точки зрения людей с особенностями зрения.

• Daltonizer (Android): Это симулятор, который использует камеру вашего телефона, чтобы показывать мир с точки зрения дальтоника, с возможностью выбора различных режимов нарушения цветового зрения.
• Статья для ознакомления: Веб-дизайн глазами дальтоника

Задание 5. (2 пары, 10 баллов - задание вариативное, выбор по желанию)

Изучите "Сети Петри", как метод моделирования информационных систем. Подготовьте краткую презентацию о сути метода, с примерами его практического применения.

Задача 6. (2 пары, 5 баллов)

Цель: Освоить базовый интерфейс Figma, инструменты создания фигур, работу со слоями и свойствами.

Задание: Создайте набор иконок для мобильного приложения (например, "Домой", "Поиск", "Профиль", "Настройки") используя только простые геометрические фигуры (прямоугольники, круги, линии). Не используйте инструмент "Перо".

Что изучите:

• Создание Frame (Рамки).
• Инструменты Rectangle, Ellipse, Line.
• Выравнивание и распределение объектов.
• Панель слоев (Layers).
• Заливка (Fill) и обводка (Stroke).

Задача 7: (2 пары, 5 баллов)

Прототип экрана входа (Интерактивность)

Цель: Освоить связывание фреймов для создания интерактивного прототипа.

Задание: Создайте два экрана: "Вход" (поля для логина и парода, кнопка "Войти") и "Главный экран" (приветствие). Свяжите кнопку "Войти" на первом экране с переходом на "Главный экран". Добавьте эффект нажатия на кнопку (например, изменение прозрачности).

Что изучите:

• Создание связей (Prototype tab).
• Настройка взаимодействий (тип триггера и анимации).
• Эффекты Smart Animate или изменение свойств.

Задача 8: (2 пары, 5 баллов)

Система дизайна: Цвета и Текст (Styles)

Цель: Научиться создавать и применять стили для поддержания консистентности.

Задание: Создайте простую систему стилей для приложения.

1. Цвета: Основной, акцентный, цвет успеха, цвет ошибки, фон, текст.
2. Текст: Заголовок H1, Подзаголовок H2, Основной текст Body, Подпись Caption. Примените эти стили для оформления карточки товара из Задачи 2.

Что изучите:

• Создание Color Styles.
• Создание Text Styles.
• Применение стилей к объектам.
• Понимание важности консистентности в дизайне.

Задача 9: (2 пары, 5 баллов)

Интерактивная галерея (Варианты компонентов)

Цель: Научиться создавать и управлять вариантами компонентов для сложных интерактивных элементов.

Задание: Создайте компонент кнопки с тремя состояниями: Default, Hover, Pressed. Создайте компонент иконки "Сердце" с двумя состояниями: Empty и Filled. Соберите карточку товара, где кнопка "В корзину" реагирует на наведение, а иконка "Избранное" меняет состояние по клику.

Что изучите:

• Создание Component Variants.
• Настройка свойств компонентов (Property).
• Прототипирование с заменой вариантов.

Задача 10: (2 пары, 5 баллов)

Модальное окно и наложение (Overlay)

Цель: Освоить создание всплывающих элементов и работу с затемнением.

Задание: Спроектируйте модальное окно для подтверждения действия (например, "Удалить товар?"). Оно должно открываться по клику на кнопку "Удалить" и располагаться поверх основного интерфейса с затемнением (Background Overlay). Добавьте анимацию появления.

Что изучите:

• Создание многослойных прототипов.
• Работа с эффектами размытия и затемнения.
• Анимация Smart Animate для плавного появления.

Задача 11: (2 пары, 5 баллов)

Макет для разных устройств (Responsive Design)

Цель: Закрепить навыки создания адаптивных интерфейсов, работая с несколькими артбордами.

Задание: Создайте связный прототип одного экрана приложения (например, список задач) для трех устройств: десктоп (1200px), планшет (768px) и мобильный телефон (375px). Покажите, как меняется layout (расположение боковой панели, размер карточек) на каждом из разрешений.

Что изучите:

• Одновременная работа с несколькими Frame.
• Комплексное использование Auto Layout и Constraints.
• Подход к проектированию от мобильной версии к десктопу (Mobile First) или наоборот.

Прототипы контрольных заданий

Индивидуальные задания (прототипы - для понимания требований курса):

 Вариант № 1 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Сформулируйте и обоснуйте требования к дизайну веб-приложения. Приведите требования стандартов пользовательского интерфейса.

 Вариант № 2 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Разработайте структуру веб-приложения в соответствии с корпоративным стилем заказчика. Приведите составляющие элементы корпоративного стиля и стандартные разделы сайта.

 Вариант № 3 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Разработайте дизайн-концепцию веб-приложения в соответствии с корпоративным стилем заказчика. Какой порядок утверждения дизайн концепции веб-приложения?

 Вариант № 4 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Разработайте эскизы пользовательского интерфейса. Обоснуйте выбор эскизов пользовательского интерфейса.

 Вариант № 5 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Составьте техническое задание на разработку веб-приложения. Перечислите основные разделы стандартного документа «Техническое задание» на разработку веб-приложения.

 Вариант № 6 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Сформулируйте и обоснуйте требования к графическому дизайну веб-приложения. Приведите требования стандартов пользовательского интерфейса.

 Вариант № 7 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Разработайте прототип дизайна веб-приложения. Перечислите этапы разработки веб-приложения. Выделите требования к представлению главной страницы сайта.

 Вариант № 8 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Сформулируйте и обоснуйте технические требования к веб-приложению. Приведите классы пользователей веб-приложения.

 Вариант № 9 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Сформулируйте и обоснуйте функциональные требования к веб-приложению. Охарактеризуйте следующие функциональные требования:

 требования к разделению доступа, требования к системе управления сайтом, требования к представлению сайта.

 Вариант № 10 Проанализируйте заданную предметную область и целевую аудиторию веб-приложения. Сформулируйте и обоснуйте требования к видам обеспечения веб-приложения: требования к техническому обеспечению, программному обеспечению, информационному обеспечению, эргономическому обеспечению

 Тестовые задания (прототипы - для понимания требований курса):

 Т-1 «Организация меню»

 Вопрос 1. Интерфейсом между человеком и ЭВМ называется

 Варианты ответа:

 1. взаимосвязь пользователя и компьютера, которая состоит в обмене

 данными;

 2. перечень возможностей диалоговой системы;

 3. взаимосвязь пользователя и компьютера, представленная в виде графа состояний;

 4. взаимосвязь пользователя и компьютера на основе экранных форм.

 Вопрос 2. Меню называется

 Варианты ответа:

 1. перечень отображаемых на дисплее возможностей диалоговой системы, из которых пользователь может выбрать любую;

 2. набор возможностей компьютера, представленных с помощью таблицы;

 3. приглашение выбрать одну из операций, выведенное с помощью

 подсказки;

 4. диалоговая система, основанная на вопросах и ответах.

 Вопрос 3. Какой из видов диалога управляется не системой, а пользователем:

 Варианты ответа:

 1. диалог на базе команд;

 2. меню;

 3. вопросы и ответы;

 4. экранная форма.

 Вопрос 4. Расположить в порядке выполнения действий подпрограммы исчезающего меню:

 1. возвращение номера выбранной опции;

 2. восстановление экрана;

 3. получение от пользователя номера выбранной опции;

 4. вывод меню;

 5. сохранение области вывода меню.

 Т-2 «Построение диалоговых приложений»

 Вопрос 1. Установить соответствие между видами диалогов

 1. модальный диалог;

 2. немодальный диалог;

 и их описаниями

 1. продолжение программы не требует завершения этого типа диалога, и разрешается переключаться из этого диалога на

 другие окна приложения;

 2. программа дожидается завершения этого диалога, и только потом ее выполнение может быть продолжено.

 Вопрос 2. Установить соответствие между типами элементов управления

 1. button

 2. check box

 3. radio button

 4. listbox

 5. edit box

 и их назначением

 1. один или более элементов, часть из которых отключена, а остальные считаются выбранными;

 2. один или более элементов, из которых может быть выбран только один;

 3. список строк, из которых пользователь может выбрать одну;

 4. окно для ввода строки символов с редактированием;

 5. изображение кнопки на экране, которую пользователь активизирует щелчком мыши или нажатием клавиши Enter.

 Вопрос 3. Установить соответствие между стилями окна диалога и их назначением

 1. DS_MODALFRAME;

 2. WS_BORDER;

 3. WS_CAPTION;

 4. WS_CHILD;

 и их назначением

 1. модальный диалог;

 2. окно с рамкой;

 3. окно с заголовком;

 4. дочернее окно.

 Темы курсовых работ для группы 3215д (текст оформлен согласно ГОСТ, объем приблизительно 25 страниц, 2 главы, в каждой 2-3 подраздела, список литературы - 15 источников, оформленный согласно ГОСТ, при необходимости приложение. Распечатывать работу не требуется):

1. Сравнительный анализ цветовых моделей RGB и CMYK: выбор оптимальной модели для веб- и мобильных интерфейсов.
2. Разработка и анализ эргономичных принципов организации элементов управления в интерфейсах для людей с ограниченными возможностями.
3. Тенденции развития человеко-машинных интерфейсов: от графических к голосовым и жестовым.
4. Методология разработки технического задания на дизайн интерфейса: структура, содержание и инструменты.
5. Создание и внедрение дизайн-системы для веб-приложения в среде Figma.
6. Особенности проектирования адаптивного интерфейса для различных типов устройств (десктоп, планшет, смартфон).
7. Разработка интерактивного прототипа мобильного приложения с использованием возможностей Figma Prototype.
8. Создание комплекта иконографики и пиктограмм для тематического веб-сервиса
9. Оптимизация рабочего процесса дизайнера интерфейсов в Figma: использование плагинов и автоматизация рутинных задач.
10. Создание сложных графических композиций с использованием слоев и режимов наложения в растровом редакторе для оформления макета главной страницы сайта.
11. Разработка фирменного стиля и айдентики для программного продукта: от логотипа до элементов интерфейса.
12. Дизайн инфографики и данных: визуализация сложной статистической информации в интерфейсе аналитической системы.
13. Особенности использования векторной и растровой графики в современных пользовательских интерфейсах.
14. Проектирование пользовательского сценария  для процесса онлайн-покупки в интернет-магазине.
15. Анализ и проектирование систем навигации в сложных веб-приложениях (например, CRM-система).
16. Принципы разработки интерфейса для мобильного приложения
17. Создание прототипа веб-приложения с использованием компонентного подхода и их вариаций
18. Дизайн интерфейса для умных часов: особенности экранного пространства и взаимодействия.
19. Разработка пользовательской документации и интерактивного макета для нового программного продукта.
20. Анализ деятельности пользователя методом построения ментальных карт для улучшения информационной архитектуры.
21. Сравнительный анализ стандартных элементов интерфейса в iOS и Android.
22. Полный цикл разработки интерфейса для образовательного веб-приложения: от эскиза до интерактивного прототипа и ТЗ.
23. Проектирование и макетирование интерфейса киоска самообслуживания в общественном месте.
24. Разработка игрового интерфейса для казуальной мобильной игры: особенности визуального стиля и пользовательского взаимодействия.
25. Редизайн пользовательского интерфейса существующего программного продукта: анализ проблем и предложения по модернизации.
26. Психология цвета в интерфейсах: влияние цветовых моделей и культурных ассоциаций на восприятие и поведение пользователя.
27. Эволюция парадигм взаимодействия "человек-компьютер": от командной строки до контекстно-зависимых интерфейсов.
28. Теоретическое обоснование принципов эргономики в графическом интерфейсе: от ГОСТов и ISO 9241 к современным рекомендациям Apple и Google.
29. Типографика как система визуальной коммуникации: теоретические основы влияния шрифтовой гарнитуры на читабельность и восприятие контента.
30. Концепция "Адаптивных Интерфейсов": теоретический обзор моделей машинного обучения для персонализации на основе поведения пользователя.