Учебный кабинет

Видеть. Называть. Исправлять.

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

Продолжить с урока 1 → Посмотреть всю программу

Модули и уроки

Откройте нужный модуль и начните с любого урока. Для последовательного обучения двигайтесь сверху вниз.

1Научиться видеть задачу4 урока · модуль готов
01Визуальная иерархия: кто здесь главный?Определить три уровня внимания за 5 секундПройти урок → 02Задача страницыНазвать цель, адресата и главное действиеПройти урок → 03Близость и группыПонять, что связать, а что разделитьПройти урок → 04Выравнивание и сеткаУвидеть, почему макет «плывет»Пройти урок →
2Освоить визуальный язык4 урока · модуль готов
05Отступы и ритмСоздать систему вместо случайных расстоянийПройти урок → 06Типографика для экранаРаботать с ролями, размером и строкамиПройти урок → 07Цвет и контрастОтделить функцию цвета от украшенияПройти урок → 08Графика и эффектыУбрать визуальный шум и сохранить смыслПройти урок →
3Понять специфику веба5 уроков · модуль готов
09Сценарий страницыПостроить логичный порядок блоковПройти урок → 10Элементы и состоянияПонять, что нажать и что произошлоПройти урок → 11Мобильная версияСохранить смысл и приоритеты на узком экранеПройти урок → 12ДоступностьПроверить контраст, подписи, фокус и смыслПройти урок → 13Мини-дизайн-системаЗадать единые правила и компонентыПройти урок →
4Управлять ИИ-агентом4 урока · модуль готов
14Рабочий брифНе заставлять агента гадатьПройти урок → 15Референсы без копированияБрать принцип, а не чужой дизайнПройти урок → 16Формула точной правкиСимптом -> последствие -> изменение -> проверкаПройти урок → 17Итерации без хаосаСначала исправить крупное, затем деталиПройти урок →
5От брифа до принятой страницыИтоговая работа · готово
18Итоговая работаБриф, первая версия, аудит, две серии правок и защитаПройти урок →

Как проходить урок

Каждый урок дает один навык и сразу проверяет его. Не нужно сначала изучать большой теоретический блок.

01Понять принцип

Короткое объяснение простыми словами.

02Сравнить

Два макета и причина, почему один работает лучше.

03Проверить себя

Интерактивное задание с мгновенной обратной связью.

04Дать правку ИИ

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

Справочники

Короткие материалы, к которым можно возвращаться во время любого урока или реальной работы с агентом.

Язык веб-дизайна

Иерархия, ритм, сетка, компоненты, состояния и другие рабочие термины.

Открыть словарь →
Первый урок

Интерактивная практика по визуальной иерархии и управлению вниманием.

Начать урок →

Результат курса

Выпускник не становится профессиональным дизайнером. Он становится грамотным арт-директором собственной задачи.

Что сможет ученик

  • поставить агенту задачу на веб-страницу;
  • увидеть главные проблемы макета;
  • назвать их дизайнерским языком;
  • дать локальные и проверяемые правки;
  • остановить итерации в нужный момент.

Итоговая аттестация

  • бриф для ИИ;
  • первая версия страницы;
  • аудит с пятью проблемами;
  • две серии правок;
  • десктопная и мобильная версии;
  • зачет от 75 баллов из 100.