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