— Зона ответственности дизайнера.
Cайты, приложения: процесс работы и задачи дизайнера.

— Как развивать в себе дизайнера.
Что делать для развития дизайнерских навыков.

— Как и где вдохновляться?
Сайты для вдохновения.

— Процесс создания дизайна.
Показываем как создается дизайн.

— Знакомство с Figma.
Как и где скачать, как установить, как пользоваться.

— Фреймы, шрифты и картинки.
Работаем с основными инструментами.

— Группы и Маски.
Как использовать маски и правильно работать с группами.

— Делаем первый экран сайта.
Осваиваем инструменты. Повторяем за преподавателем, используя заготовленные материалы.

— Делаем всю страницу сайта.
Какие стадии разработки проходит сайт до публикации его в сети.

— Переносим в планшетные устройства.
Два разрешения, показываем механику, повторяете за преподавателем.

— Модульная сетка 1. Что такое модульная сетка?
Как работает, как делать в Фигме.

— Модульная сетка 2. На мобильных устройствах.
Как создавать сетку на мобильных устройствах.

— Модульная сетка 3. Как располагать элементы, опираясь на сетку.
Расположение элементов, не подходящих по размеченной сетке.

— Композиция 1. Что такое композиция, как устроена.
Систематизация красоты.

— Композиция 2 (практический). Доминанта.
Что есть доминанта, как выстроить ее самостоятельно.

— Композиция 3. Цвет, подбор цвета, теория цвета.
Работа с колористикой.

— Композиция 4. Фотографии, картинки, влияние их на дизайн.
Как найти и выбрать изображения, хорошо вписывающиеся в дизайн.

— Композиция 5. Подбор контента, лицензирование и использование.
Правовые аспекты использования и подбора контента.

— Настроение, классификация шрифта.
Как шрифт передает настроение, на какие виды делятся шрифты.

— Анатомия шрифта.
Кёрнинг, трекинг, интерлиньяж.

— Редактура.
Дефис, тире, кавычки, висящие союзы.

— Сервисы, коммерческие шрифты и некоммерческие, тарификация шрифтов, цены.
FontFaceninja, Google Fonts, Typetoday. Где посмотреть трендовые шрифты.

— Верстка текста.
Нюансы абзацев, переносов и прочего в вебе.

— Шрифтовые пары.
Как подобрать шрифты, которые пользователь посчитает красивыми.

— Какие шрифты использовать.
Трендовые шрифты, поиск и использование.

— Ошибки в типографике.
Как не стоит делать. Какие ошибки совершает большинство дизайнеров.

— Практический урок. Рисуем страницу Рубенса.
Повторяя за преподавателем, освойте работу с типографикой в Figma.

— Что такое бренд. Составляющие бренда.
На какие составляющие дизайнер может влиять, а на какие нет.

— Как бренд влияет на голову человека.
Как бренд заставляет человека верить в легенду, используя готовые стереотипы.

— Какую роль в этом играет выкладка товаров, дизайн витрин и дизайн сайтов/баннеров/приложений.
Цвета, настроение и конгруэнтность потребителю.

— Что такое фирменный стиль бренда. Из чего состоит?
Что содержится в расширенных guidline бренда и как применяется.

— Логотип. Что это, его цель. Как отличить хороший логотип от плохого.
Как создаются хорошие логотипы, как сделать узнаваемый логотип.

— Учимся делать простые шрифтовые логотипы.
Создаем логотипы для собственных проектов.

— Этапы разработки сайта 1. Исследование.
И работа с заказчиком.

— Этапы разработки сайта 2 Структура, прототип и макет.
Этап, до которого сайт был только в мыслях, а после — на руках макет для производства.

— Этапы разработки сайта 3 Техническое производство.
Превращение дизайн макета в код.

— Технические особенности 1. Как сайт попадает в интернет.
Этапы от замысла до конечной реализации проекта и публикации в интернете.

— Технические особенности 2. Что такое фронтенд. Как работает код?
Фронтенд — то, что вы видите в своем браузере. HTML, CSS, Javascript.

— Технические особенности 3. Что такое бекенд? Какие функции он умеет?
CMS, самописные движки. Что делает backend в веб-сайте.

— Технические особенности 4. Домен и хостинг.
Как пользователь найдет ваш сайт в интернете.

— Технические особенности 5. Как сдавать макет в разработку? Что нужно приложить, в каком формате и зачем?
Как дизайнеру подготовить свой макет так, чтобы программист реализовал его быстрее.

— Технические особенности 6. Как можно реализовывать фронтенд и бекенд. Программисты vs Тильда.
Методы разработки. Какой в каких ситуация более эффективен.

— Что такое UX. Из чего состоит?
Введение в UX, на какие составные части делится.

— Информационная архитектура. Иерархия.
Создание архитектуры для логичного перехода между разделами на сайте.

— Пользовательские сценарии.
Проведение исследования: как разные группы пользователей используют сайт, куда нажимают и как улучшить их пользовательский опыт.

— Метод персоны.
Разделение пользователей на персонифицированные группы и исследование каждой отдельно.

— Проектирование взаимодействия.
Определение того, куда и как нажимает пользователь и подготовка прототипа согласно этим данным.

— Формы и интерфейсы с полями. Часть 1.
Как упрощать, конкретные примеры.

— Формы и интерфейсы с полями. Часть 2.
Кнопки, выпадающие меню и прочие элементы интерфейса.

— Визуальный дизайн и UI-кит.
Создание стиля и сбор элементов интерфейса в разных состояниях.

— Разбор ошибок в визуальном дизайне.
Какие ошибки чаще всего совершают дизайнеры при отрисовке интерфейса.

— Готовые диджитал-гайдлайны. Примеры, объяснение, когда их применять надо и когда не надо.
Что такое guideline. Как создать свой и как использовать готовый. В каких ситуациях применять.

— UX-аналитика 1. Юзабилити тестирование.
Проверка интерфейса на удобство для пользователя через тестирование самих пользователей.

— UX-аналитика 2. Как работают карты кликов и карты ссылок в Яндекс.Метрике.
Какую информацию можно получить с помощью простых инструментов и как ее использовать для улучшения интерфейса.

— UX-аналитика 3. Сегменты в Яндекс.Метрике и объяснение поведения пользователей в каждом сегменте.
Аналитика того, как разные пользователи с разными устройствами ведут себя на сайте.

— Уровни по Джеймсу Гаррету.
Пирамида Гаррета в UX.

— Создание mind-map.
Что это, зачем и как применять.

— Прототипирование.
Создание логической блок схемы сайты, в которой показаны смысловые блоки и их расположение.

— Что такое адаптивный дизайн.
Изменение поведения элементов и разрешений.

— Исследования для адаптивного дизайна.
Исследуем цели пользователя, самого пользователя, ситуации и устройства. Определяем какие элементы оставить, а какие убрать.

— Под какие разрешения надо рисовать.
И под какие делать сетку.

— Как устроены экраны. Логическое и физическое разрешения.
Как определить разрешения, под которые нужно рисовать, чтобы был правильный масштаб.

— Типы верстки.
Резиновая, фиксированная, адаптивная фиксирована и адаптивная резиновая (responsive).

— Адаптируем интернет магазин. Практический урок 1.
Каждую страницу. Объясняем как изменились элементы и почему именно так.

— Адаптируем интернет-магазин. Практический урок 2.
Адаптируем остальные страницы.

— Как защищать проект перед клиентом на фрилансе.
На фрилансе и в компании защиты разные, как и мотивация принимающей стороны. Изучим в этом уроке.

— Как проходит защита в компании перед заказчиком.
Особенности корпоративных презентаций.

— Составление сметы

— Трудоустройство. Какие компании нанимают дизайнеров и какие зарплаты и задачи.
В разных компаниях дизайнеры рисуют разные проекты. А еще им по-разному за это платят и предъявляют разные требования. Этот урок ответит на щекотливые вопросы.

— Основные форматы работы дизайнеров.
Фриланс, постоянка в офисе, постоянка удаленная.

— Как составить резюме
Что в резюме писать не стоит, а что нужно вынести на первый план.

— Как составить сопроводительное письмо.
Оставьте описание вашей "стрессоустойчивости" и "коммуникабельности" при себе. Лучше расскажите, чем вы увлекаетесь.

— Как и где искать работу постоянную.
HH.ru — не единственный ресурс. Есть еще множество путей, не всегда очевидных.

— Как искать заказы для Фриланса.
Найти высокооплачиваемые заказы, схватить их и при этом найти их у адекватного заказчика.

— Как искать субподрядчиков для фриланса.
Часто заказывают проекты под ключ (дизайн+разработка). Как найти партнера для таких проектов.

— Что такое анимация в вебе.
Микро и макро анимация.

— Анимация взаимодействия.
Ховеры, активы, переходы, как это работает.

— Макро анимация, разбор примера.
Когда анимация — неотъемлима от стиля и смысла проекта.

— Разбор софта для анимации.
Protopie, Principle, Figma, After Effects.

— Как передавать анимацию в разработку.
Как показать разработчику, какую анимацию, с какими переходами и временными задержками вы хотите.

— Анимируем элементы на главной странице интернет-магазина.
Анимация при загрузке и после нее.

— Анимируем кнопки, поля. Прилёт элементов.
Анимация микровзаимодействий.

— Анимируем элементы при скролле.
Учимся делать анимацию при скролле в достаточном количестве. Не так, чтобы заполонить ей все внимание пользователя.

— Анимируем прелоадер.
Иногда сайту нужно время для загрузки. Делаем анимацию загрузки, чтобы скрасить ожидание пользователя.

— Анимируем переход от страницы к странице.
Страницы могут меняться не со стандартной загрузкой элементов, а с приятной анимацией.

— Анимируем форму регистрации.
Форма сбора контактов пользователя и регистрации.

— Делаем макроанимацию. Часть 1.
Создаем анимацию с сюжетом. Планируем ее, создаем ключевые кадры.

— Делаем макроанимацию. Часть 2.
Отрисовываем и анимируем элементы для макроанимации, согласно собственному плану.

— Что такое портфолио дизайнера и как оно может быть представлено.
Порталы, собственные сайты, новые методы.

— Как создать кейс проекта.
Из чего состоит кейс. Что надо показать и как объяснить пользователю.

— Разбор примеров кейсов хороших и плохих.
Как не нужно оформлять свое портфолио — разбор примеров.

— Создаём кейс.
Оформляем свою домашнюю работу для портфолио.

— Выкладываем свой кейс, видеоинструкция.
Публикация собственной работы.

Уроки по работе на платформе Тильда

1. Что такое графический дизайн;

2. Где и как вдохновляться;

3. Moodboard.

1. Основные понятия и инструменты графического дизайнера;

2. Где и как скачивать программы;

3. Adobe Illustrator:
- обзор основных инструментов для работы
- создание плаката
- создание шрифтового логотипа
- создание визитки эффекты

4. Adobe Photoshop:
- ретушь фотографий обзор основных инструментов для работы работа с Mockup
- создание буклета
- обзор основных инструментов для работы создание коллажа

1. Что такое композиция и для чего она нужна;

2. Принципы и ритм композиции;

3. Пример композиции из графических форм;

4. Понятие цвета в композиции;

ДЗ. Собрать свою композицию из графических форм.

1. Для чего нужны модульные сетки;

2. Виды модульных сеток;

3. Конструируем модульную сетку для буклета в Adobe InDesign;

ДЗ. Обмер сетки периодического издания.

1. Где брать шрифты;

2. Установка шрифтов;

3. Что такое шрифт;

4. Анатомия шрифта;

5. Классификация шрифтов;

6. Выбор и сочетание шрифтов;

7. Типографика;

8. Выразительные средства шрифта и типографики;

9. Урок по типографике;

ДЗ. Верстка буклета на свободную тему от 10 полос.

1. Атрибуты бренда: визуальные и вербальные;

2. Что такое позиционирование и легенда бренда;

3. Виды позиционирования бренда;

4. Что такое Брендбук, из чего он состоит и как с ним работать;

5. Принципы позиционирования;

6. Функциональные и эмоциональные выгоды;

ДЗ. Придумать легенду бренда и сделать Moodboard.

1. Фирменный стиль и айдентика;

2. Создание логотипа;

3. Фирменная графика

4. Презентация проекта;

5. Визуализация проекта (работа с Mockup);

ДЗ. Создаем фирменный стиль компании;

ДЗ. Оформление и подача презентации продукта.

1. Веб-дизайн;

2. Дизайн в SMM;

ДЗ: Оформляем Instagram бренда.

1. Подход в оформлении портфолио;

2. Как оформлять кейсы на Behance;

ДЗ: Оформляем кейс на Behance.

1. Личное позиционирование;

2. Сопроводительные письма и резюме;

3. Биржи поиска вакансий;

4. Особенности работы на фрилансе: документы, коммуникация, смета и т.д

ДЗ: Создаем фирменный стиль ресторана;

ДЗ: Создаем фирменный стиль строительной компании.

— Знакомство с After Effect.
Установка программы After Affect, Media Encoder.

— Знакомство с интерфейсом программы After Affect.
Создание композиции, рабочее пространство, рабочие пресеты программы After Affect.

— 12 принципов Уолта Дисней.
Создание ключей анимации, работа с изингами, основные инструменты, для создания анимации шейпов.

— Adobe Illustrator. Где скачать/как установить.
Установка программы.

— Подготовка иллюстрации к импорту в After Affect.
Цветовое пространство, сбор иллюстрации по слоям, предварительный визуальный анализ анимации.

— Установка скриптов.
Бесплатные скрипты, установка скриптов, сайты для поиска.

— Анимируем Иллюстрацию. Часть 1.
Создание ключей для файлов Ai, использование масок.

— Анимируем Иллюстрацию. Часть 2.
Органичная анимация, управление вниманием зрителя.

— Рендер в Adobe Media Encoder.
Рендер в: Mp4, Gif, Media Encoder, collect project.

— Puppet tool. Знакомство с инструментом.
Что такое puppet tool и какой вид puppet tool выбирать для разных задач.

— Анимация персонажа с помощью инструмента Puppet tool.
Анимируем персонажа.

— Стандартные маски.
Маска как трафарет, какую маску и когда нужно использовать, различные эффекты.

— Маска пером.
Встраивание анимации в фото, использование пера, работа с кривыми безье, эффект Corner pin.

— Adobe Photoshop. Часть 1.
Установка/скачивание Photoshop.

— Adobe Photoshop. Часть 2.
Знакомство с интерфейсом Photoshop.

— Adobe Photoshop. Часть 3.
Настройка mock up в Photoshop.

— Маска в Mock Up.
Встраивание анимации в мокап.

— Google Material Motion Guides. Часть 1.
Разбор Google motion guides.

— Google Material Motion Guides. Часть 2.
Продолжение разбора Google motion guides.

— Поиск готовых интерфейсов или референсов.
Скачиваем готовый интерфейс, импортируем файл в Figma.

— Импорт в Figma готовых интерфейсов.
Импортируем необходимые файлы, создание проекта из нескольких прекопозиции, случаи потери файлов, чистка кэша, группировка необходимых элементов, распределение компонентов по папкам.

— Анимируем интерфейс.
Анимация подготовленного скелета проекта.

— Создание титров.
Поиск стоковых видео, создание титров для презентационных
видео.

— Анимация линией.
Что за инструмент и как им пользоваться.

— Создаем исходник текста в Adobe Illustrator.
-Создание композиции с текстовыми элементами в Adobe Illustrator, импорт композиции в After Affect.

— Анимация TrimPath.
Делаем аутро шоурила.

— Работа с кинематикой текста.
Создание камеры, работа в 3D пространстве, создание приветствия.

— Анимация текста. Часть1.
Базовые эффекты и способы анимации текста.

— Анимация текста. Часть2.
3D моделирование и анимация текста, эффекты категории Distort и Perspective.

— Что такое Expressions и где применяется.
Знакомство с программированием в After Affect.

— Делаем счетчик времени.
Создаем анимацию счетчика времени.

— Что такое кеинг и в каких областях motion применяется.
Обтравка и встраивание footage видео отснятого на зеленом фоне.

— Знакомство с трэкингом.
Знакомство с инструментом, практика работы с 3D трэкингом.

— Трэкинг к точке.
Знакомство с инструментом, практика работы с трекингом к одной точке.

— Что такое Transitions и где применяется.
Что такое Transition, базовые виды монтажных склеек.

— Кастомные переходы.
Создаем кастомные переходы с применением базовых эффектов программы.

— График скоростей.
Как настраивать скорости влета/вылета в сцену/из сцены.

— График значений.
Как правильно анимировать сжатие ил растяжение.

— Черновой монтаж. Метроном.
Создание чернового монтажа, метроном, нарезка готовой анимации под метроном.

— Черновой монтаж. Озвучка.
Поиск стоковой музыки, наложение музыки на черновой монтаж.

— Черновой монтаж. Склейки.
Цвета, настроение и конгруэнтность потребителю.

— Video Copilot. Введение.
Знакомство с компанией, Andrew Kramer, element 3D.

— Video Copilot. Element 3D. Анимация Интерфейса.
Знакомство с интерфейсом плагина, работа с 3D моделью и материалами.

— Element 3D. Кинетическая типографика.
Кинетическая типографика, анимированная текстура.

— Adobe Auditon. Введение.
Установка ПО, знакомство с интерфейсом программы Adobe Audition.

— Поиск и подбор звуков для шоурилла.
Поиск качественных звуков со стоковых сайтов, импорт скаченных файлов в созданный проект"

— Наложение звуков под видео.
Создание отдельных дорожек для звуков и для фоновой музыки.

— Сведение музыки и звуков. Рендер аудио дорожки.
Сведение звуков и основной аудио дорожки.

— Рендер и финальный просмотр шоурилла.
Наложение готовой звуковой дорожки на шоурилл, сведение звука и видео.

— Фриланс. Особенности работы. Работа в команде.

— Сопроводительные письма и резюме.

После регистрации и оплаты ты попадаешь в личный кабинет, где смотришь лекции, сдаешь домашние задания и получаешь по ним обратную связь. Также в личном кабинете можно получить консультацию преподавателя.

Итоговое портфолио — одна из ключевых задач курса. К концу курса под руководством личного ментора ты разработаешь и упакуешь кейсы с работами, которые станут твоим билетом для дальнейшего трудоустройства и поиска заказчиков.

Обучение проходит онлайн и начинается сразу после регистрации на курс и оплаты. Курс длится 18 месяцев с момента оплаты. Всё взаимодействие осуществляется через личный кабинет. Также ты сможешь посетить очные воркшопы в Москве и Петербурге, о которых мы сообщим тебе дополнительно через личный кабинет.

В личном кабинете ты найдешь теоретические лекции и практические уроки, в которых нужно повторить действия за преподавателем, а также домашние задания.

После изучения лекций и тренировки по практическим урокам ты выполняешь домашние задания и сдаешь их на проверку через личный кабинет. После сдачи ты получаешь рецензию на домашнюю работу от ментора, проводишь работу над ошибками и снова получаешь обратную связь. Этот процесс продолжается до тех пор, пока работа не будет выполнена на надлежащем уровне.

Затем ты оформляешь работу в кейс для портфолио, соблюдая рекомендации преподавателей и советы из лекций, после чего получаешь обратную связь от ментора. В конце курса ты создаешь собственное резюме, портфолио и сопроводительное письмо и отправляешь их на проверку преподавателю.

Теоретические лекции ты сможешь смотреть с любого устройства — с ноутбука, домашнего компьютера, планшета или смартфона. Для выполнения практических уроков тебе понадобится нотубук или компьютер на Windows или MacOS.

Домашние работы — самая важная часть курса. Мы уделяем работам огромное внимание — пожалуйста, удели им должное внимание и ты.
После того, как ты сдал домашнюю работу на проверку, преподаватель внимательно изучает её и записывает видеорецензию с рекомендациями.

Важно! Каждая работа каждого студента проверяется индивидуально в течение всего курса.

Затем ты смотришь видеорецензию от преподавателя, вносишь правки в работу и снова сдаешь на проверку. Этот процесс продолжается до тех пор, пока работа не будет выполнена на надлежащем уровне или не наступит окончание курса.

Уроки будут проходить в заранее записанном формате. Они разделены на теоретические и практические. Плюсы уроков в записи — отсутствие ошибок преподавателя, высокое качество картинки и звука, легкое усвоение материала за счет более эффективной подачи.

Также ты всегда сможешь пересмотреть урок, если вдруг что-то забыл.

Итоговое портфолио — одна из ключевых задач курса и условие для получения сертификата. К концу курса под руководством личного ментора ты разработаешь и упакуешь кейсы с работами, которые станут твоим билетом для дальнейшего трудоустройства и поиска заказчиков.

По любым вопросам пиши нам в чат на этой странице или в личном кабинете, в VK, на почту hello@m-d-a.ru или звони по телефону.

Мы отвечаем максимально быстро:)

Внимание! Если ты оплачивал в рассрочку через банк, то при возврате позже 14 дней после подписания договора с банком, с тебя может быть удержана комиссия банка (от 6% от суммы договора).