Урок 8.8 · Интерфейсы и сайты с нуля · Модуль 8. Интерфейс, который понятно · По подписке
Цель урока: Научиться находить причину, почему экран не читается: проверить иерархию, воздух, цвет, контраст и действие по порядку.
Нужно знать заранее: Уроки 8.1–8.7
Объяснение
Зачем это нужно:
Экран может быть аккуратным, без единой ошибки в коде, — и всё равно не читаться. Человек открывает страницу, за две секунды не понимает, что здесь главное, и уходит. Причина почти всегда одна: на экране нет разницы между важным и второстепенным. Это не «вкус» и не «талант»: разницу можно проверить и починить по шагам.
Как это работает:
Проверяем экран по порядку, как в проекте модуля: иерархия → воздух → цвет → контраст → действие. Порядок важен: если начать с цвета, придётся переделывать дважды.
Иерархия. Один главный объект. Обычно это заголовок. Он заметно крупнее и тяжелее остального, а не на 2 px.
Воздух. Внутри группы расстояние меньше, между группами — больше. Заголовок и его текст стоят близко, следующий блок — далеко.
Цвет. Один акцент на главное действие. Состояния — зелёный, янтарный, красный — и всегда со словом.
Контраст. Основной текст тёмный, второстепенный приглушён, но читаем. Цифры: 4,5:1 для обычного текста, 3:1 для крупного.
Действие. Одна главная кнопка. Вторая — без заливки. У кнопки есть hover и видимый фокус.
Компьютер без страха — Файлы, браузер, пароли, мошенники, документы и деньги в интернете простыми словами. Бесплатно и без оплаты.
Если уже случилось — Деньги ушли с карты, пропала симка, взломали аккаунт, потерялись документы — порядок действий по шагам и куда звонить.
Какой компьютер нужен — Чек-лист по уровням: для учёбы ничего покупать не нужно, для своего проекта — 16 ГБ и SSD, для работы — 32 ГБ. Плюс нейросети и устаревание железа.
Без кода: ставить задачу — Как объяснить задачу программисту и принять работу. Кода нет ни строчки.
Профессии и языки — Кто такие программисты, зачем столько языков и что делать после курса.
Потренироваться
Практикум: задачи из жизни — Та же команда урока — на работе, дома и в документах. 63 задачи с проверкой вывода и без регистрации.
Игры-тренажёры — Найти ошибку в чужом коде, прочитать, что делает программа, и увидеть, что случится, если нажать клавишу.
Симулятор: от задания до сдачи — Пройти путь целиком: папка, терминал, файл, сохранение, запуск, проверка по критерию приёмки. Два сценария и две системы.
Мастерская экрана — Проверить цвета и раскладку страницы: контраст, шаблоны, конструктор.
Колесо фортуны — Одна прокрутка в день: скидка на подписку или дни доступа.
Словари и юмор
Словарь программиста — Слова из уроков и кода: парсинг, функция, хеш, компиляция.
Словарь руководителя — Слова из работы простыми словами: скоуп, дедлайн, MVP, бэклог.
Корявые задачи — Юмор: как ставят задачи и что из этого получается. С моралью.
Сайт, оплата и помощь
Родителям — Возраст, время на уроки, безопасность в сообществе, деньги и результат — что важно знать до оплаты.