Веб-дизайнер: расширенный

Научитесь создавать вёрстку под любой тип устройств — компьютер, планшет, смартфон. 18 часов теории, 27 часов практики.

• Вёрстка резинового макета
• Резиновые изображения
• Введение в медиазапросы
• Медиафункции
• Особенности верстки для мобильных устройств
• Верстка адаптивного макета
• Адаптивная типографика
• Breakpoints
• Адаптивные изображения
• CSS Grid
• Кроссбраузерность и доступность

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

• Разработка веб-сайтов
• Составление брифа и технического задания
• Создание прототипа. Основы прототипирования
• Проект в портфолио. Разбор работ и ответы на вопросы
• Разработка мобильного приложения
• Разработка информационной архитектуры
• Прототипирование и тестирование интерфейсов мобильных приложений
• Адаптация дизайна мобильного приложения под платформу
• Тестирование прототипа
• Проект в портфолио. Разбор работ и ответы на вопросы
• Подготовка макетов в разработку и авторский надзор

Научитесь работать в Cinema 4D, создавать 3D графику и анимацию, настраивать материалы, свет, камеру и рендеринг, а также собирать анимационный ролик для digital-проекта. Проект в портфолио — анимационный ролик для продукта 19 часов теории, 12 часов практики.

• Интерфейс и базовые инструменты Cinema 4D
• Введение. Анимация по ключам: первые шаги
• Настройка материалов в Redshift: обзор нодовой системы
• Свет, камера, Redshift!
• Альтернативные способы рендеринга
• Анимация с помощью эффекторов MoGraph
• Физика твёрдых тел: основы динамики
• Анимация ткани
• Pyro: базовая симуляция дыма и огня

Научитесь верстать сайты на HTML и CSS. Сможете вносить изменения в существующую вёрстку. Курсовой проект — вёрстка макета сайта. 21 час теории, 31 час практики.

• Введение в вёрстку
• Контентные теги
• Теги для вёрстки структуры контента
• Позиционирование блочных элементов
• Вёрстка форм
• Нестандартные элементы форм
• Всплывающие элементы
• Позиционирование flex-элементов
• Теги для разметки текста и атрибуты
• Списки и таблицы
• Селекторы и свойства
• Оформление текстовых блоков с помощью CSS
• Основы клиент-серверного взаимодействия

Изучите основные принципы анимации и поймёте, как превратить статичный дизайн в динамичный креативный интерфейс. Разберёте основы веб- и мобильной анимации. Изучите основной функционал After Effects и ProtoPie. Проект в портфолио — анимация интерфейса

• Анимация в интерфейсах: функции, виды, принципы создания
• Инструменты создания анимации
• Анимация веб-интерфейсов: теория
• Adobe After Effects: обзор возможностей программы
• Создание анимации в Adobe After Effects: виды, принципы
• Анимация веб-интерфейсов: практика

С нуля создадите цифровой веб-продукт для портфолио. Пройдёте все этапы разработки дизайн-макетов — от поиска идей и анализа целевой аудитории до передачи готового проекта в разработку и вёрстку. 3 часа теории, 40 часов практики.

• Итоговая аттестация
• Онлайн-защита с приглашенными экспертами рынка
• Создание портфолио на Behance
• Резюме и портфолио: на что смотрит рекрутер
• Вебинары «Разбор портфолио: взгляд тимлида и критерии найма»

115 часов теории, 228 часов практики.

• Первые шаги в профессию
• Введение в дизайн интерфейсов и работа в Figma
• Визуальный дизайн интерфейсов и системный UI
• Создание сайтов на Tilda
• Проектирование веб- и мобильных интерфейсов
• Проектирование интерфейсов с использованием ИИ
• Вёрстка на HTML и CSS
• Адаптивная и мобильная вёрстка
• Симулятор: вайбкодинг для веб-дизайнера
• Cinema 4D для диджитал-дизайна
• UX-копирайтинг
• Как сделать карьеру в дизайне. Опыт МТС
• Знакомство с Adobe Photoshop
• Мягкие навыки
• Дипломный модуль

Научитесь работать с визуальным брифом: интерпретировать задачу, выстраивать пайплайн генерации изображений с помощью нейросетей и доводить результат до финальной серии с учётом технических и стилистических требований. Проект в портфолио — серия иллюстраций 24 часа теории, 17 часов практики.

• Как работать с ИИ над креативными задачами
• Инструкции по работе с нейросетями
• Авторское право и контент, созданный с помощью ИИ
• ИИ-сторителлинг: как изображение рассказывает историю
• Знакомство с Midjourney
• Мастер-класс: «Креатив с нуля с помощью комбинации нейросетей и подходов»
• Мастер-класс «Как превращать образы в идею через референсы и стилизацию»
• ИИ-постобработка и контроль качества: от первой генерации до финальной серии
• Генерация изображений под задачу

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

• ИИ как часть цифрового дизайн-процесса: роли, границы, эффект
• Ресёрч и постановка дизайн-задачи с ИИ
• Генерация и оценка дизайн-концепций с ИИ
• Проектирование и детализация дизайн-решений с ИИ
• Коммуникация и обоснование дизайн-решений с ИИ
• Прикладные кейсы и рабочие мини-воркфлоу
• ИИ для создания видео и аудио: обзор возможностей и комбинирование инструментов
• Написание сценария для видео с помощью ИИ

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

• Основы композиции
• Композиционные приёмы и работа с сеткой
• Колористика: свойства цвета, цветовые модели, палитры и контрасты
• Цвет как средство композиции
• Основы типографики: шрифт и текст в композиции
• Продуктовый подход в дизайне
• Насмотренность как навык

Освоите Figma — от базовых инструментов и Auto Layout до компонентов, а также научитесь проектировать интерфейсы: работать с дизайн-концепцией, композицией, сеткой и типографикой. Проект в портфолио — UI-кит 13 часов теории, 40 часов практики.

• Подготовка к изучению Figma
• Базовые инструменты Figma и принципы их работы
• Знакомство с Figma (тренажёр)
• Auto Layout в Figma (тренажёр)
• Компоненты в Figma (тренажёр)
• Работа с дизайн-концепцией
• Композиционное проектирование
• Создание сетки в дизайне интрефейсов
• Типографика

Научитесь создавать визуально цельные и доступные интерфейсы, работать с визуальными эффектами, анимацией и интерактивными прототипами, а также изучите принципы адаптации макетов для веба и мобильных устройств. Проект в портфолио — макет главной страницы сервиса в десктопе 15 часов теории, 28 часов практики.

• Вдохновение и актуальный дизайн
• Accessibility: что должен знать дизайнер о доступности
• Работа с тенями и визуальными эффектами
• Анимация и создание интерактивного прототипа
• Веб-анимация в Figma
• Мастер-класс «Адаптируем онлайн-макет маркетплейса»
• Мастер-класс «Проектируем мобильные макеты»
• Создание дизайна сайта-одностраничника (лендинга)
• ИИ-компоненты внутри Figma

Начнёте работать со стандартными блоками и во встроенном графическом редакторе Zero Block, создавая дизайн любой сложности. Разберётесь в возможностях кастомизации блоков и гибкости их использования. Научитесь создавать разные виды сайтов «под ключ», подключать платёжные системы и работать с заявками. Проект в портфолио — сайт на Tilda (можно свой проект) 32 часа теории, 22 часа практики.

• Конструкторы сайта — что это и какие есть. Tilda: первое касание
• Дизайн сайта в Figma и особенности проектов для Tilda
• Дизайн и текст. Как дизайнеру и редактору работать вместе над макетами
• Знакомство с интерфейсом. Стандартные и Zero-блоки в Tilda
• Детальный разбор стандартных блоков
• Создание лендинга на Tilda
• Глубокие настройки сайта и страниц. Публикация проекта
• Что умеет Zero-блок
• Собираем свой первый лейаут в Zero
• Сетки и адаптивы в Zero
• Анимация в Zero
• Улучшения для Tilda. Модификации и код
• Вопросы и ответы с экспертом
• Каталог товаров. E-commerce и платежи
• Tilda-CRM. Рассылки и подключение аналитики
• Потоки и новости. Личный кабинет
• Как успешно использовать Tilda в своих маркетинговых целях и быстро тестировать гипотезы

Научитесь проектировать веб- и мобильные интерфейсы, составлять бриф и техническое задание, разрабатывать информационную архитектуру, создавать и тестировать прототипы, а также подготавливать макеты к передаче в разработку. Итоговые проекты — макеты веб-сайта и мобильного приложения (можно свой проект) 23 часа теории, 56 часов практики.

• Разработка веб-сайтов
• Составление брифа и технического задания
• Методы проектирования: JTBD и сбор артефактов
• Тестирование мобильной версии сайта
• Юзабилити в веб-дизайне
• Создание прототипа. Основы прототипирования
• Разработка мобильного приложения
• Разработка информационной архитектуры
• Прототипирование и тестирование интерфейсов мобильных приложений
• Адаптация дизайна мобильного приложения под платформу
• Тестирование прототипа

Научитесь использовать ИИ как мощный инструмент для быстрого перехода от идеи к работающему интерфейсу. Освоите промптинг для проработки задач и сценариев, создание UI и интерактивных прототипов, а также научитесь тестировать и дорабатывать решения, сохраняя полный контроль над качеством. Проект в портфолио — MVP сайта с ИИ-функцией 8 часов теории, 7 часов практики.

• От концепции к проектному решению
• Проработка пользовательского сценария и логики экранов
• UI-дизайн с ИИ: от структуры экранов к работающему интерфейсу в Figma и Tilda
• Прототипирование и проверка интерфейса с ИИ
• MVP-лендинг с ИИ: от идеи до интеграции AI-IDE с no-code платформы

Научитесь создавать продукты с ИИ, не становясь разработчиком. Освоите Cursor, LLM, API и no-code (Tilda, AppMaster) для проработки JTBD, настройки ИИ-логики в интерфейсе и публикации собственного MVP без сложной инфраструктуры. Проект в портфолио — MVP с рабочим ИИ-сценарием 21 час теории, 35 часов практики.

• Вайбкодинг для начинающих
• Вайбкодинг: цифровая самостоятельность, а не профессия разработчика
• Роль LLM-чатов в вайб-кодинге
• Знакомство с Cursor
• JTBD и критерии успешного сценария MVP
• UX-прототип и потоки
• Пользовательская логика в AppMaster/Tilda
• API и webhooks: подключаем сервисы
• API российских LLM: ключи, квоты, логирование
• Как управлять ИИ внутри интерфейса и сценария продукта
• Диалоги и воркфлоу в ИИ
• Как проверить, помогает ли ИИ пользователю
• Как дать ИИ контекст продукта
• Проверка и подготовка ИИ-функции внутри MVP
• Как опубликовать ИИ-MVP без сложной инфраструктуры

С нуля создадите цифровой веб-продукт для портфолио. Пройдёте все этапы разработки дизайн-макетов — от поиска идей и анализа целевой аудитории до передачи готового проекта в разработку и вёрстку. 3 часа теории, 40 часов практики.

• Онлайн-защита дипломного проекта
• Портфолио на Behance
• Резюме и портфолио: на что смотрит рекрутер. Разбор от тимлида
• Разбор порфолио от тимлида

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

• Специфика текстов для интерфейсов
• Принципы и синтаксис продуктовых текстов
• Cложные интерфейсные тексты
• Tone of Voice для цифровых продуктов

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

• Такой разный дизайн: выбираем направление
• Резюме и портфолио: на что смотрит рекрутер
• Сопроводительное письмо — путь к успеху
• Собеседование: как подготовиться и как пройти
• Тестовое задание: зачем и как его делать
• Что делать после собеседования: выход на работу и разбор сложных кейсов
• Успешный фриланс

Освоите интерфейс и ключевые инструменты программы: научитесь работать со слоями, палитрами и фильтрами, разберётесь с цветокоррекцией и ретушью. На практике создадите коллаж и поймёте, за что дизайнеры ценят эту программу.

• За что дизайнеры любят Adobe Photoshop?
• Дополнительные занятия по Adobe Photoshop
• Интерфейс программы Adobe Photoshop
• Инструменты и работа с файлами
• Работа с палитрами, слоями и фильтрами
• Цвет, кисти и ретушь
• Коррекция тона и цвета изображений
• Коллаж в Adobe Photoshop

Научитесь составлять резюме, проходить собеседования, вести деловую переписку, готовить презентации на английском. Узнаете, с чего начать фриланс-карьеру, и сможете уверенно вести проекты от первого контакта с клиентом до сдачи работы, защищая свои интересы на всех этапах. Разберётесь с базовыми визуальными инструментами — композицией, цветом и типографикой — и на практике создадите собственную библиотеку референсов с опорой на опыт экспертов из разных направлений дизайна.

• Английский для дизайнера
• Насмотренность
• Фриланс для дизайнера

Диплом о профессиональной переподготовке