UX-FVD. Создание визуального дизайна. Figma (UI)
Длительность дисциплины: 32 ак.ч.
Аннотация
Целью реализации модуля «UX-FVD.Создание визуального дизайна. Figma (UI)» является освоение базовых принципов создания и обработки изображений, предназначенных для отображения на различных устройствах: мониторы, мобильные телефоны, а также приобретение практических навыков создания оригинальных проектов различных видов визуальной продукции,
предназначенной для размещения в сети Интернет, дизайн и верстка сайтов.
Знания и умения, полученные в результате изучения
В результате освоения программы обучающийся должен уметь:
• строить интеллект-карту структуры будущего сайта;
• создавать, оптимизировать и сохранять изображения в зависимости от целей дизайн-проекта;
• создавать оригинальный проект дизайн-макета сайта;
• подготавливать дизайн-макет сайта к последующей верстке страниц сайта.
В результате освоения программы, обучающийся должен знать:
• области применения и особенности отображения графики в Веб;
• основные графические форматы веб-графики;
• принципы юзабилити веб-интерфейсов;
• способы представления и особенности отображения текста на экране монитора;
• различные стили веб-графики;
• принципы и алгоритмы создания дизайн-макета сайта.
В результате освоения программы обучающийся должен приобрести практический опыт:
• оптимизации изображений и сохранения их в различные графические форматы, предназначенные для отображения в сети Интернет;
• создания анимированных изображений;
• создания векторной графики;
• создания графических элементов интерфейса сайта;
• создания графического дизайн-макета страницы сайта.
Содержание дисциплины
Тема 1. Введение в проектирование интерфейсов
1.1 Особенности и назначение веб-графики
История развития веб-графики.
Особенности отображения графической информации в современных браузерах.
1.2 Программы, используемые для создания веб-графики
Классификация программных продуктов по типам графики, разрабатываемой для сети Интернет.
Возможности современных графических редакторов по созданию и обработки, предназначенной для отображения на экране
Практические занятия
1. Особенности и назначение веб-графики
2. Программы, используемые для создания веб-графики.
Тема 2. Основные инструменты прототипирования
2.1 Рабочая область
Обзор компонентов рабочей области, разделов меню, панелей слоёв.
2.2 Обзор инструментов разработки
Основные инструменты.
Области разработки, фигуры, перо.
Заливка фигур, градиенты.
Практические занятия
1. Работа с меню, рабочей областью. Панель слоёв, страницы.
2. Работа с фреймами. Базовые фигуры и перо.
Тема 3. Форматы графических файлов
3.1 Форматы файлов, используемых для представления графической информации в сети Интернет.
Форматы файлов, используемых для отображения графической информации в сети Интернет.
Классификация графических форматов файлов, используемых для веб-графики.
Особенности и области применения формата SVG.
3.2 Характеристики форматов и особенности оптимизации графики
Основные характеристики графических форматов файлов, используемых для веб-графики.
Поддержка прозрачности и анимации в различных форматах.
3.3 Средства оптимизации изображений. Программа Figma
Задачи, решаемые дизайнером при разработке веб-графики с использованием программы Figma.
Средства программы Figma, используемые для экспорта графических форматов файлов.
Возможности оптимизации изображений средствами программы.
Средства сохранения.
оптимизированных изображений.
Практические занятия
1. Форматы файлов, используемых для представления графической информации в сети Интернет.
2. Характеристики форматов и особенности оптимизации графики.
3. Средства оптимизации изображений. Программа Figma.
Тема 4. Разработка графического макета сайта
4.1 Классификация сайтов с точки зрения графического макета.
Типы сайтов и их назначение.
Классификация сайтов с точки зрения графического макета.
Особенности графического оформления различных типов сайтов.
Современные принципы и техники создания графических макетов сайтов.
4.2 Типовые схемы компоновки страниц
Понятие о типовой схеме сайта.
Принципы построения схемы сайта.
Классификация типовых схем сайтов по информации, представляемой ими в сети Интернет.
Практические занятия
1. Классификация сайтов с точки зрения графического макета.
2. Типовые схемы компоновки страниц
3. Модульные сетки в веб-дизайне
Тема 5. Элементы оформления веб-страниц
5.1 Типовые решения оформления веб-страниц
Основные элементы оформления, используемые при создании сайтов для сети Интернет.
Понятие о навигации сайта.
Типы навигационных панелей.
Глобальная и локальная навигация сайта.
Стили оформления навигации.
Стили оформления гиперссылок.
Области применения пиктограмм в дизайне сайтов.
Применение узоров, текстур и фоновых изображений при создании графического макета сайта.
Понятие о «шапке» сайта (header).
Назначение и стили оформления нижних элементов страницы сайта (footer).
5.2 Графическое оформление содержимого сайта.
Стили в веб-дизайне.
Классификация сайтов по стилям графического оформления.
Современные тенденции в веб-дизайне.
Практические занятия
1. Особенности работы с текстом в веб-дизайне.
2. Графическое оформление содержимого сайта. Стили в веб-дизайне.
Тема 6. Создание и редактирование графики в веб-приложении программными средствами
6.1 Цвет в веб-дизайне
Основные приемы работы с цветом и цветовыми композициями при разработке дизайн-макета сайта.
Принципы и приемы создания гармоничных цветовых сочетаний.
Программные средства, используемые для создания гармоничных цветовых сочетаний.
6.2 Особенности работы с текстом в веб-дизайне.
Особенности отображения текстовой информации в браузерах.
Настройка сглаживания текста в программе Figma при создании графических элементов оформления сайта и разработке дизайн-макета страницы.
6.3 Микроанимация
Средства анимации изменения элементов внутри Figma.
Практические занятия
Добавление графических и цветовых решений в макет сайта
Тема 7. Создание дизайн-макета сайта программными средствами
7.1 Средства программы Figma, используемые для создания дизайн-макета сайта
Понятие атомарный дизайн.
7.2 Автоматическое выравнивание элементов
Понятие auto-layout в Figma.
Использование auto-layout понятия и термины по выравниванию из CSS.
7.3 Сдача макетов разработку.
Переменные и темы в Figma.
Режим разработчика.
Практические занятия
1. Работа с компонентами дизайн системы.
2. Использование dev-mode внутри Figma.
3. Оформление макетов
Тема 8. Промежуточная аттестация
Практические занятия Зачет