Введение в дизайн. Практика и инструменты
— Зона ответственности дизайнера.
— Как развивать в себе дизайнера.
— Как и где вдохновляться?
— Процесс создания дизайна.
Освоение программы Figma. Практика
— Знакомство с Figma
— Базовые инструменты
— Figma-тренажер
— Анимация в Figma
— Создаем интерактивный макет в Figma + используем GIF
— Стили в Figma
— Autolayout (теория). PRO.
— Autolayout (практика). PRO.
— Компоненты. PRO.
— Variants. PRO.
— FigJam
— Плагины
Модульная сетка и композиция
— Что такое модульная сетка?
— Как сконструировать модульную сетку
— Что такое композиция, как устроена
— Цвет, подбор цвета, теория цвета
— Работа с контентом
— Расположение элементов на сайте
— Нейроэстетика
— Модульная сетка. PRO.
— ДЗ-1. Рисуем сайт-портфолио
Типографика
— Настроение, классификация шрифта
— Анатомия шрифта: кёрнинг, трекинг, интерлиньяж
— Редактура: дефис, тире, кавычки, висящие союзы
— Сервисы, коммерческие шрифты и некоммерческие, тарификация шрифтов, цены.
— Верстка текста
— Шрифтовые пары
— Какие шрифты использовать
— Ошибки в типографике.
Работа с референсами
— Работа с референсами. 1 часть.
— Работа с референсами. PRO.
— Тренажер по референсам
Этапы разработки проекта
— Исследование
— Структура, прототип и макет
— Техническое производство
— ДЗ-2. Редизайн сайта бара/сайта дизайнера интерьеров (на выбор)
Технические особенности проектов
— Как сайт попадает в интернет
— Что такое фронтенд. Как работает код?
— Что такое бекенд?
— Домен и хостинг.
— Как сдавать макет в разработку? Что нужно приложить, в каком формате и зачем?
UX и аналитика
— Что такое UX. Из чего состоит?
— Информационная архитектура. Иерархия.
— Проектирование взаимодействия
— Визуальный дизайн
— Юзабилити тестирование
— UX-аналитика
— Пользовательские сценарии
— Метод персоны
— Mind-map
— Прототипирование
— Уровни по Джеймсу Гаррету.
— UX-паттерны
— Что такое дизайн-система?
— Дизайн-система. Практика
— Разбор ошибок в визуальном дизайне
— Принцип 4 вопросов
— Сложные детализированные прототипы
— ДЗ-3
— ДЗ-4
— Customer Journey Map (CJM)
— Тренажер UX/UI (beta)
— Зачем нужны UX-исследования.
— Количественные исследования. Опросы.
— Инструменты для создания опросов.
— Качественные исследования. Интервью.
— Юзабилити тестирование. PRO.
— Гипотезы.
— User Story / Jobs To Be Done
— Домашнее задание по UX-исследованиям
Адаптивный дизайн
— Что такое адаптивный дизайн
— Как работают разрешения
— Типы верстки
— Собираем адаптив (new)
Защита проекта
— Подготовка к защите
— Защита проекта перед заказчиком
— Составление сметы
— Защита проектов от Гриши Коченова
— ДЗ-5. Рисуем сайт
Личный бренд
— Фриланс и фултайм
— Основные форматы работы дизайнеров.
— Что хотят видеть работодатели?
— Где искать работу веб-дизайнеру
— Сопроводительные письма
— Как проходить собеседования
— Успешные кейсы
— ДЗ-6. Дипломная работа
Анимация
— Микро-анимация
— Макро-анимация
— Анимация первого экрана
— Анимация в ProtoPie
— Анимация в Principle
— Анимация в Adobe After Effects
— Spline 3D
— Интерфейсы будущего. Гриша Коченов
Оформление работ
— Оформление портфолио. Как создать кейс проекта. Из чего состоит кейс
— Разбор примеров кейсов студентов
— Как вставить свой макет в мокап. Часть 1
— Работа с мокап. Часть 2
— Оформление кейса на Behance в Figma
— Как выложить свой кейс на Behance
— Behance и метка MDA
Тильда
— Знакомство с Tilda
— Регистрация и интерфейс
— Настройки сайта и настройки страницы
— Стандартные блоки
— Zero-блок, интерфейс
— Zero-блок, работа с текстом
— Zero-блок, работа с изображениями
— Zero-блок, шейпы
— Zero-блок, работа с кнопками
— Zero-блок, дополнительные инструменты
— Безопасная верстка на Тильде, Grid контейнер
— Настройки главного экрана
— Автоскейл
— Отступы в Тильде
— Мобильная адаптация
— Шаблоны анимации от Varfolomeev
— Интернет-магазин
— Интернет-магазин.PRO
— Новости и потоки
— Личный кабинет
— Макет в Figma, Grid контейнер
— Макет в Figma, Window контейнер
— Макет в Figma, автоскейл
— Автоперенос макета из Figma
— Модификации
— ДЗ по Тильде
Фотошоп
Несколько уроков, которые помогут вам разобраться в базовых инструментах, которые понадобятся веб-дизайнерам
UX-копирайтинг
UX-копирайтинг, чем он отличается от обычного копирайтинга, рассмотрены примеры.
Брендинг
— Что такое бренд. Составляющие бренда.
— Брендбук
— Позиционирование, платформа бренда
— Рисуем логотип в Figma
Библиотека
Книги для веб-дизайнера
