Дизайн учебной статьи
Проектируем удобную страницу урока: иерархию, ширину текста, типографику, код, таблицы, изображения и навигацию. Собираем общую систему компонентов для большой библиотеки.
В серии 24 урока. Начнём с задач читателя и построим цельную страницу статьи. Затем улучшим шрифты, печать, изображения и темы оформления, подготовим оглавление курса и правила совместимости со старыми материалами.
Перед началом
Базовые знания HTML и CSS. Для примеров используется отдельный макет учебного сайта.
Уроки по порядку
- Задачи читателя и устройство длинного урока
- Визуальная иерархия учебной страницы
- Ширина статьи и боковые области
- Типографика русского текста и кода
- Дизайн учебной статьи: вертикальный ритм и списки
- Цветовая палитра сайта: роли цветов на примере ProfessorWeb
- Блоки кода в статье: оформление и читаемость
- Широкие таблицы в учебной статье
- Скриншоты и схемы в статье: оформление и подписи
- Оглавление длинной статьи: навигация читателя
- Метаданные и служебные элементы урока
- Хлебные крошки и переходы между уроками
- Дизайн учебной статьи: источники и связанные материалы
- Компоненты оформления статьи: настройка шаблонов
- Адаптивная вёрстка длинной статьи
- Законченная страница нового урока
- Веб-шрифты: загрузка без сдвигов страницы
- Версия учебной статьи для печати
- Изображения и скорость длинной статьи
- Светлая и тёмная темы статьи
- Дизайн учебной статьи: видео и встроенные демонстрации
- Дизайн страницы учебного курса
- Обновление дизайна статьи: совместимость со старым HTML
- Дизайн учебной статьи: читательские сценарии и дизайн-регламент
Уроки развивают общий пример. Переходите к следующему после разбора результата предыдущего; к нужной теме можно вернуться по этому оглавлению.