В первой главе вы познакомитесь с интерфейсом Figma и научитесь работать с ключевыми инструментами этой программы. Для закрепления полученных знаний в финале этой главы вы под руководством автора создадите первый экран сайта.
- Пользовательский интерфейс
- Фреймы и группы
- Слои и ограничения
- Маски
- Типографика
- Стили и эффекты слоёв
- Работа с векторными объектами
- Комьюнити
- История версий
- Преимущества платной версии
- Передача файла в разработку
- FigJam
- Делаем первый экран сайта
Домашнее задание
Самостоятельно сделать первый экран сайта (можно взять свою тему или выбрать из списка предложенных).
- ГЛАВА №2. ПРОДВИНУТЫЕ ТЕХНИКИ
В этой главе вы познакомитесь с продвинутыми техниками работы в Figma. Начнёте уверенно работать в Figma с компонентами, вариантами, функцией Auto-layout и модульной сеткой. Для закрепления полученных знаний в финале этой главы вы под руководством автора создадите полноценный лендинг.
- Модульные сетки и направляющие
- Компоненты
- Варианты
- Auto-layout
- Фишки Figma для ускорения работы
- Делаем лендинг с использованием компонентов
Домашнее задание
Самостоятельно сделать лендинг (можно взять свою тему или выбрать из списка предложенных).
- ГЛАВА №3. ОСНОВЫ ГРАФИЧЕСКОГО ДИЗАЙНА
В этой главе вы познакомитесь с основными принципами графического дизайна, которые лежат в основе любого изображения и макета. Это важные и необходимые знания для любого дизайнера, который хочет создавать визуально привлекательные сайты и приложения.
- Композиция
- Контраст
- Приближённость
- Иерархия
- Рисуем иллюстрацию в Figma
- Делаем постер
Домашнее задание
Самостоятельно сделать постер. Нарисовать иллюстрацию в Figma (опционально).
- ГЛАВА №4. СЛОЖНЫЕ ИНТЕРФЕЙСЫ
В этой главе вы будете создавать мобильное приложение и дэшборд. На этих примерах вы научитесь проектировать опыт взаимодействия пользователя с продуктом, будь это мобильное приложение или веб-сайт. Также подготовите полноценный UI-kit для передачи в разработку.
- Создаём приложение
- Полезные плагины
- Создаём панель управления (дэшборд) c UI Kit'ом
- Подготовка UI KIT'а к передаче в разработку
- Библиотеки для командной работы
Домашнее задание
Сделать приложение или дэшборд с UI Kit'ом.
- ГЛАВА №5. ПРОТОТИПИРОВАНИЕ И АНИМАЦИЯ
В этой главе вы научитесь работать с инструментами прототипирования. Научитесь создавать кликабельные прототипы, которые помогут вам наглядно показать заказчику, как будет работать сайт или приложение.
- Прототипирование и простая анимация в Figma
- Умная анимация
- Интерактивные компоненты
- Больше практических примеров
Домашнее задание
Сделать собственный интерактивный прототип для приложения или дэшборда из предыдущей главы.
Портфолио и советы по поиску работы
Сейчас активно растёт спрос на веб-дизайнеров и дизайнеров интерфейсов. Поэтому в бонусной главе мы решили разместить несколько важных занятий, которые помогут вам успешно начать карьеру в веб- или UI/UX-дизайне.
- Портфолио и социальные сети для дизайнера интерфейсов
- Где применить полученные навыки
- Советы для устройства в студию
- Заключение