Тренажёр «Основы дизайна»: задания с проверкой
Не про программу и не про вкус: про то, почему одно читается с первого взгляда, а другое приходится разбирать. Порядок важности, выравнивание, группировка, контраст, повторение и воздух; шрифт, размерная шкала и набор текста; цвет и его контраст; сетка, состояния интерфейса и формы. Половина заданий — живые макеты: их настраивают ползунками и ищут в них поломку глазами.
Как тренироваться
Полный тренажёр повторяет темы после сданной домашней работы: выбирает задания по результатам, показывает ошибки и помогает закрепить материал. Для сохранения результатов нужен аккаунт.
Начните с открытого урока
В открытом уроке есть теория и задания. Практику с редактором или схемой удобнее проходить на странице урока.
Первый урок: Три вопроса к любому макетуЧто можно повторить
- Три вопроса к любому макету
Понимать, что делает оформление, проверять макет тремя вопросами и называть сломанное средством, а не ощущением.
- Порядок важности
Строить три уровня важности, показывать их размером и весом, а не цветом, и находить типовые поломки.
- Выравнивание
Ставить блоки на общие линии, выбирать выключку по делу и находить мнимое выравнивание.
- Близость и группировка
Создавать группы разницей расстояний, не путать отбивку сверху и снизу и разбивать длинные списки.
- Контраст
Отличать контраст от разнобоя, выбирать надёжные пары и проверять любую разницу вопросом «что этим сказано».
- Повторение и система
Понимать, зачем нужно однообразие, считать число решений в макете и отличать систему от набора совпадений.
- Воздух и плотность
Понимать четыре работы пустоты, различать крупный и мелкий воздух и выбирать плотность под задачу.
- Как устроен шрифт
Понимать, из чего состоит буква, почему кегль не равен размеру и какой вид шрифта для какой работы.
- Пара шрифтов и размерная шкала
Выбирать шрифты по делу, строить шкалу умножением от основного текста и не давать ей разрастаться.
- Набор текста
Держать меру строки, подбирать межстрочный под её длину и не оставлять в тексте мелочей черновика.
- Откуда берут цвет
Различать три свойства цвета, собирать короткий набор и не кодировать цветом единственный признак.
- Контраст цвета и читаемость
Считать контраст числом, знать пороги и чинить читаемость светлотой, а не подбором оттенка.
- Сетка и модуль
Ставить блоки на колонки, брать отступы из модуля и проверять раскладку на краях, а не в середине.
- Состояния интерфейса
Рисовать все состояния экрана, отвечать на каждое действие и делать последствия предсказуемыми.
- Формы и кнопки
Собирать поля с подписью, подсказкой и понятной ошибкой, убирать лишнее и называть кнопки глаголом.
- Приёмка работы и три правила
Разбирать макет сверху вниз, формулировать выполнимые замечания и выводить приёмы из трёх правил.