Создайте два стильных сайта и начните собирать своё портфолио веб-дизайнера прямо на курсе! Пошагово, без лишней болтовни опытный преподаватель проведёт вас от установки Figma до готовых проектов. Как сочетать цвета? Что выбрать вместо Arial и Comic Sans? Как адаптировать сайт под смартфон и планшет? Ответы на все вопросы ждут вас в переработанной версии курса-бестселлера. Он учитывает последние обновления Figma и даёт ещё больше пользы. Например, базу по Photoshop для уникальных макетов.
- Бонус! Figma Jam
Что такое Figma JamОбновления Figma Jam
- Бонус! Работа в Photoshop
Рекламная паузаПодготовка программыРабота со слоями в PhotoshopРасширяем границы изображенийУдаляем ненужное из фотоКак вырезать человека из одного фото и вставить его в другоеКак работают маски в PhotoshopЭкспорт файлов из PhotoshopЧто дальше?
- Дизайн-система
Нужен ли дизайнеру PhotoshopКак приобрести лицензионный Photoshop из РоссииЧто такое дизайн-системаДелаем лист стилей для типографикиДоделываем карту стилейПрактика. Создайте свою дизайн-систему
- Продвинутая работа с фигурами
Как работает инструмент Pen ToolПрактика. Pen ToolДелаем следующую секцию сайтаРазница фреймов и групп
- Бонус! Figma Jam
Что такое Figma JamОбновления Figma Jam
- Основы Figma
Какие размеры у сайтаСоздаём frame сайтаЧто такое сетка gridОсновы работы с фигурами, изображениями, слоямиОсновы работы с текстомГруппировка слоёв и немного про режим презентацииКак сохранять и передавать файлы FigmaРазница UX и UI
- Маски и плагины
Как работают маскиДополнительная практика по маскамФигура с изображениемКак работают плагиныДоделываем сайт
- Эффекты и стили
Как работают эффектыКак работают стили
- Работа с цветом
Подбор цвета из изображенийПрактика. Подберите цвет из изображенияЧто такое HSB. Точная настройка цветаИнструменты подбора цвета для проектаКак работать с градиентомПравило пропорций цвета 60/30/10
- Отступы в веб-дизайне
Правила отступов в веб-дизайнеПрактика. Отступы в веб-дизайне4px grid vs 8px grid
- Работа со шрифтами
Важность шрифтовТипы шрифтовГде брать новые шрифтыКак подбирать шрифтыПрактика. Подберите шрифтыНастройки шрифтаПрактика. Настройка шрифта
- Адаптивный дизайн
Основы constraintsКак работают constraints с gridПрактика. ConstraintsЧто такое адаптивный дизайнЧто такое DPI и PPIАдаптируем первую страницу сайтаПрактика. Адаптируйте сайт
- Ускорение работы
Полезные горячие клавишиПолезные плагины
- Что дальше?
До свидания!
- Ускорение работы
Полезные горячие клавишиПолезные плагины
- Компоненты и варианты в Figma
Делаем следующую секцию сайтаКак работают компонентыОрганизация и хранение компонентовКак работают вариантыПрактика. Создайте собственные варианты
- Основы Auto Layout
Основы работы с Auto LayoutПрактика. Auto Layout
- Бонус! Дизайнерские трюки
Трюки с наложением элементов друг на другаОдинаковые элементы на страницеТрюки с повторениямиТрюки с контрастомТрюки с пустым пространствомКак развиваться в дизайне
- Маски и плагины
Как работают маскиДополнительная практика по маскамФигура с изображениемКак работают плагиныДоделываем сайт
- Подготовка к курсу
Скачиваем материалыКак проходить курсОставайтесь со мной на связи
- Углублённая работа с Auto Layout
Как создать подкатегории стилейСоздаём следующую секцию сайтаКак создавать многоуровневый Auto LayoutИспользуйте готовые элементы из других макетовAuto Layout, pro-версияДелаем страницу блогаКак работают min-width и min-heightКак работает абсолютное позиционированиеДоделываем сайтПрактика. Создайте дизайн сайта
- Экспорт
Экспорт изображенийКак работать в команде
- Подготовка к курсу
Скачиваем материалыКак проходить курсОставайтесь со мной на связи
- Работа с цветом
Подбор цвета из изображенийПрактика. Подберите цвет из изображенияЧто такое HSB. Точная настройка цветаИнструменты подбора цвета для проектаКак работать с градиентомПравило пропорций цвета 60/30/10
- Платная или бесплатная Figma?
Отличия платной и бесплатной Figma
- Углублённая работа с Auto Layout
Как создать подкатегории стилейСоздаём следующую секцию сайтаКак создавать многоуровневый Auto LayoutИспользуйте готовые элементы из других макетовAuto Layout, pro-версияДелаем страницу блогаКак работают min-width и min-heightКак работает абсолютное позиционированиеДоделываем сайтПрактика. Создайте дизайн сайта
- Работа с изображениями
Разница растровой и векторной графикиВыбирайте качественные изображенияКак тонировать изображенияТехника экстремальной обрезкиТехника мягкой обрезкиРабота с иконкамиКак создать свою иконкуКак изменять фигуры
- Что дальше?
До свидания!
- Бонус! Дизайнерские трюки
Трюки с наложением элементов друг на другаОдинаковые элементы на страницеТрюки с повторениямиТрюки с контрастомТрюки с пустым пространствомКак развиваться в дизайне
- Дизайн-система
Нужен ли дизайнеру PhotoshopКак приобрести лицензионный Photoshop из РоссииЧто такое дизайн-системаДелаем лист стилей для типографикиДоделываем карту стилейПрактика. Создайте свою дизайн-систему
- Работа с изображениями
Разница растровой и векторной графикиВыбирайте качественные изображенияКак тонировать изображенияТехника экстремальной обрезкиТехника мягкой обрезкиРабота с иконкамиКак создать свою иконкуКак изменять фигуры
- Экспорт
Экспорт изображенийКак работать в команде
- Платная или бесплатная Figma?
Отличия платной и бесплатной Figma
- Подготовка к новому проекту
Как создавать страницы в проектеБриф с заказчикомКак создавать mood boardЧто такое wireframe сайтаПрактика. Создайте собственный mood board и wireframe
- Отступы в веб-дизайне
Правила отступов в веб-дизайнеПрактика. Отступы в веб-дизайне4px grid vs 8px grid
- Основы Figma
Какие размеры у сайтаСоздаём frame сайтаЧто такое сетка gridОсновы работы с фигурами, изображениями, слоямиОсновы работы с текстомГруппировка слоёв и немного про режим презентацииКак сохранять и передавать файлы FigmaРазница UX и UI
- Работа со шрифтами
Важность шрифтовТипы шрифтовГде брать новые шрифтыКак подбирать шрифтыПрактика. Подберите шрифтыНастройки шрифтаПрактика. Настройка шрифта
- Основы Auto Layout
Основы работы с Auto LayoutПрактика. Auto Layout
- Компоненты и варианты в Figma
Делаем следующую секцию сайтаКак работают компонентыОрганизация и хранение компонентовКак работают вариантыПрактика. Создайте собственные варианты
- Адаптивный дизайн
Основы constraintsКак работают constraints с gridПрактика. ConstraintsЧто такое адаптивный дизайнЧто такое DPI и PPIАдаптируем первую страницу сайтаПрактика. Адаптируйте сайт
- Прототипирование
Режим «Презентация макета»Углублённые настройки прототиповБазовая анимация в FigmaКак работают кривые БезьеРабота open Overlay & Scroll toКак работает Swap OverlayКак работает After DelayКак работает Smart AnimateАнимируем меню сайтаПрототипирование компонентовReset Position & Component StateЗаключение
- Бонус! Работа в Photoshop
Рекламная паузаПодготовка программыРабота со слоями в PhotoshopРасширяем границы изображенийУдаляем ненужное из фотоКак вырезать человека из одного фото и вставить его в другоеКак работают маски в PhotoshopЭкспорт файлов из PhotoshopЧто дальше?
- Подготовка к новому проекту
Как создавать страницы в проектеБриф с заказчикомКак создавать mood boardЧто такое wireframe сайтаПрактика. Создайте собственный mood board и wireframe
- Прототипирование
Режим «Презентация макета»Углублённые настройки прототиповБазовая анимация в FigmaКак работают кривые БезьеРабота open Overlay & Scroll toКак работает Swap OverlayКак работает After DelayКак работает Smart AnimateАнимируем меню сайтаПрототипирование компонентовReset Position & Component StateЗаключение
- Эффекты и стили
Как работают эффектыКак работают стили
- Продвинутая работа с фигурами
Как работает инструмент Pen ToolПрактика. Pen ToolДелаем следующую секцию сайтаРазница фреймов и групп
-
Цена - 2 490 руб.
- Продолжительность курса составляет 17 часов
