Урок 10.3 · Интерфейсы и сайты с нуля · Модуль 10. Типографика и сетка: чтобы читалось везде · По подписке
Цель урока: Собрать короткую шкалу размеров текста и понять, почему «чуть больше» не работает.
Нужно знать заранее: Урок 10.1
Объяснение
Зачем это нужно:
Когда размер выбирают заново для каждого блока, на странице появляются 13, 15, 17, 19, 23 px. Глаз не может понять, что важнее: разница в один-два пикселя не читается. Страница выглядит «почти аккуратной», но иерархии в ней нет.
Как это работает:
Шкала — это короткий набор размеров на всю страницу. Обычно четыре-пять ступеней:
40 px — заголовок страницы;
24 px — заголовок раздела;
16 px — основной текст;
13 px — подпись и служебные строки.
Соседние ступени должны отличаться заметно: в 1,25–1,5 раза. Если разница меньше, ступени сливаются и работают как один размер.
То же правило действует для отступов: не 7, 13, 22 px, а шаг 8 — 8, 16, 24, 32, 48. Один шаг на всё приложение, и страница начинает выглядеть собранной.
Психология: почему глаз видит одно:
Глаз плохо сравнивает близкие величины: 16 и 17 px для него одно и то же, а 16 и 24 — разные уровни. Поэтому «сделать чуть больше» — самая бесполезная правка в типографике: она не видна.
Зато глаз хорошо видит повторяемость. Когда одни и те же размеры встречаются в разных местах, мозг перестаёт их замечать и начинает читать смысл: заголовок — это заголовок, подпись — подпись. Именно поэтому шкала экономит внимание: она убирает необходимость каждый раз решать, «какой тут размер».
Компьютер без страха — Файлы, браузер, пароли, мошенники, документы и деньги в интернете простыми словами. Бесплатно и без оплаты.
Если уже случилось — Деньги ушли с карты, пропала симка, взломали аккаунт, потерялись документы — порядок действий по шагам и куда звонить.
Какой компьютер нужен — Чек-лист по уровням: для учёбы ничего покупать не нужно, для своего проекта — 16 ГБ и SSD, для работы — 32 ГБ. Плюс нейросети и устаревание железа.
Без кода: ставить задачу — Как объяснить задачу программисту и принять работу. Кода нет ни строчки.
Профессии и языки — Кто такие программисты, зачем столько языков и что делать после курса.
Потренироваться
Практикум: задачи из жизни — Та же команда урока — на работе, дома и в документах. 63 задачи с проверкой вывода и без регистрации.
Игры-тренажёры — Найти ошибку в чужом коде, прочитать, что делает программа, и увидеть, что случится, если нажать клавишу.
Симулятор: от задания до сдачи — Пройти путь целиком: папка, терминал, файл, сохранение, запуск, проверка по критерию приёмки. Два сценария и две системы.
Мастерская экрана — Проверить цвета и раскладку страницы: контраст, шаблоны, конструктор.
Колесо фортуны — Одна прокрутка в день: скидка на подписку или дни доступа.
Словари и юмор
Словарь программиста — Слова из уроков и кода: парсинг, функция, хеш, компиляция.
Словарь руководителя — Слова из работы простыми словами: скоуп, дедлайн, MVP, бэклог.
Корявые задачи — Юмор: как ставят задачи и что из этого получается. С моралью.
Сайт, оплата и помощь
Родителям — Возраст, время на уроки, безопасность в сообществе, деньги и результат — что важно знать до оплаты.