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. Промежуточная аттестация
Практические занятия    Зачет