16 уроков

Основы дизайна — курс для начинающих

Почему одно читается легко, а другое — нет

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

Задание ниже на этой же странице. Ничего заполнять не нужно.

16уроков с домашней работой к каждому
208заданий с проверкой в браузере
0 ₽курс с погружением — бесплатно
11 часовстолько уходит на уровень
Первый урок · без регистрации Урок 1 · «Три вопроса к любому макету» — с него начинается курс 3 минуты

Что делает оформление

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

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

Первые два шага человек делает не читая. Он смотрит на страницу целиком и за мгновение решает: это про меня? это долго? отсюда начинать? Если на этих шагах непонятно, до третьего дело не доходит — он уходит, и текст, каким бы хорошим он ни был, остаётся непрочитанным.

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

Различие это не философское, а очень практическое. Мерку «красиво» проверить нечем: она у каждого своя, спор о ней не заканчивается, и работа не имеет признака готовности. Мерку «понятно с первого взгляда» проверить можно, и проверяется она не на себе, а на другом человеке — тот, кто макет собирал, уже знает, где что лежит, и видит не страницу, а свою память о ней. Поэтому автор — худший проверяющий собственной работы, и это верно и для дизайнера, и для того, кто делает объявление в подъезд.

Весь урок целиком →

Задание из урока 1

Оформление делает текст лучше.

  • Карту не спрашиваем ни на каком шаге
  • Прогресс хранится в аккаунте — с телефона и с компьютера одинаково
  • Через 2, 7 и 30 дней курс сам вернёт задания, чтобы выученное не забылось
  • Письма — только о ваших занятиях, отписка одной кнопкой
Программа курса 1 уровень · 16 уроков · контрольная уровня с сертификатом

Программа

Как устроено читаемое оформление 16 уроков · контрольная на 24 задания
01
Три вопроса к любому макету

Понимать, что делает оформление, проверять макет тремя вопросами и называть сломанное средством, а не ощущением.

около 22 минут · домашняя работа
02
Порядок важности

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

около 23 минут · домашняя работа
03
Выравнивание

Ставить блоки на общие линии, выбирать выключку по делу и находить мнимое выравнивание.

около 23 минут · домашняя работа
04
Близость и группировка

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

около 23 минут · домашняя работа
05
Контраст

Отличать контраст от разнобоя, выбирать надёжные пары и проверять любую разницу вопросом «что этим сказано».

около 23 минут · домашняя работа
06
Повторение и система

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

около 23 минут · домашняя работа
07
Воздух и плотность

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

около 23 минут · домашняя работа
08
Как устроен шрифт

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

около 23 минут · домашняя работа
09
Пара шрифтов и размерная шкала

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

около 23 минут · домашняя работа
10
Набор текста

Держать меру строки, подбирать межстрочный под её длину и не оставлять в тексте мелочей черновика.

около 23 минут · домашняя работа
11
Откуда берут цвет

Различать три свойства цвета, собирать короткий набор и не кодировать цветом единственный признак.

около 23 минут · домашняя работа
12
Контраст цвета и читаемость

Считать контраст числом, знать пороги и чинить читаемость светлотой, а не подбором оттенка.

около 23 минут · домашняя работа
13
Сетка и модуль

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

около 22 минут · домашняя работа
14
Состояния интерфейса

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

около 23 минут · домашняя работа
15
Формы и кнопки

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

около 23 минут · домашняя работа
16
Приёмка работы и три правила

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

около 22 минут · домашняя работа
Кому как объяснять тема одна, различаются примеры и язык

Начало урока «Три вопроса к любому макету» — нажмите подачу и посмотрите, как это написано для вас

Базовая подача Так урок написан для всех, пока подача не выбрана.

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

Как устроен урок. Урок — одна страница: главы подряд, внутри них встроенная практика, в конце итог и домашняя работа. Порог 70%, пересдача через сутки новым набором.

Сертификат. За сданную контрольную уровня — именной, с кодом проверки подлинности; от 95% с отличием.

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

Практика и материалы по теме курса

Частые вопросы
Сколько занимает курс «Основы дизайна»?

Уровень 1 — это 16 уроков примерно на 11 часов вместе с домашними работами и контрольной. Заниматься можно в любом темпе: прогресс сохраняется.

Нужно ли платить?

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

С чего начать, если я ничего не знаю о теме?

С первого уровня: он написан с нуля и не требует подготовки. Уровни — это глубина, а не точка входа: второй продолжает первый без повторов.

Что такое подача и какую выбрать?

Подача меняет примеры и язык объяснения, а не тему урока: Я с нуля, Я делаю сам, Я принимаю работу. Выбрать можно при первом заходе и сменить в любой момент.

Как проверяются задания?

Каждое задание проверяет сервер: ответы не хранятся в браузере, а разбор приходит после ответа. Домашняя работа — 7 заданий из банка, порог 70%, пересдача через сутки новым набором.

Есть ли сертификат?

Да. За сданную контрольную уровня выдаётся именной сертификат с кодом проверки подлинности; от 95% — с отличием. Проверить код может любой на странице /check.

Дальше — весь курс с сохранением прогресса

Регистрацию можно отложить: первые уроки открыты целиком, а прогресс появится, как только заведёте аккаунт.

Зарегистрироваться