design

Учебник Веб-дизайн для начинающих

19 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Практический курс по веб-дизайну — проектированию сайтов на стыке визуального дизайна и фронтенда. Вы научитесь не просто «рисовать макеты», а строить адаптивные, доступные и быстрые интерфейсы, которые работают на любом экране и легко превращаются в код.

Внутри: визуальная иерархия и сетки, mobile-first и современный CSS (Grid, container queries, clamp), веб-типографика и доступный цвет по WCAG, UI-паттерны (навигация, формы, карточки, состояния) и грамотный handoff через дизайн-токены и Figma Dev Mode. Каждый урок разбирает, как делают ПЛОХО и ХОРОШО, и заканчивается чек-листом.

Курс «Веб-дизайн» состоит из 6 разделов и 19 уроков: Основы веб-дизайна, Лейаут и сетки, Адаптивность и mobile-first, Типографика и цвет в вебе, UI-паттерны и компоненты и От макета к коду / handoff. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Основы веб-дизайна

    1. Что такое веб-дизайн и чем он отличается от графического

      Веб-дизайн как проектирование интерфейсов: отличия от графического дизайна, ограничения среды браузера, роль на стыке дизайна и фронтенда.

    2. Визуальная иерархия и композиция

      Как управлять вниманием через размер, контраст, цвет и пространство. Принципы иерархии, F- и Z-паттерны чтения, закон близости.

    3. Сетка, отступы и ритм: система 8 пунктов

      Зачем нужна 8-пунктовая сетка отступов, как строить шкалу spacing, правило «внутреннее ≤ внешнее» и согласованный вертикальный ритм.

    4. Дизайн-токены: единый язык дизайна и кода

      Что такое дизайн-токены, три уровня (primitive, semantic, component), как они связывают Figma и CSS-переменные и почему упрощают тёмную тему.

  2. 2 Лейаут и сетки

    1. Анатомия лейаута: контейнер, секции, поток

      Из чего состоит лейаут страницы: контейнер с max-width, секции, header/main/footer, нормальный поток документа и зачем ограничивать ширину контента.

    2. 12-колоночная сетка и почему именно 12

      Как устроена 12-колоночная модульная сетка, колонки, гаттеры и поля, почему 12 делится удобно и как раскладывать блоки на половины, трети и четверти.

    3. Flexbox или Grid: когда что выбрать

      Разница между Flexbox (одномерный) и CSS Grid (двумерный), как выбрать инструмент под задачу, типичные кейсы навигации, карточек и сложных лейаутов.

  3. 3 Адаптивность и mobile-first

    1. Mobile-first: почему начинают с маленького экрана

      Подход mobile-first: проектирование от мобильного к десктопу, приоритизация контента, min-width медиазапросы и прогрессивное усложнение макета.

    2. Брейкпоинты, медиазапросы и контейнерные запросы

      Как выбирать брейкпоинты по контенту, а не по моделям устройств, разница между media-запросами и container queries и когда компонент должен реагировать на родителя.

    3. Гибкие изображения, медиа и тач-цели

      Адаптивные картинки (max-width, srcset, WebP, lazy loading, aspect-ratio), удобные размеры тач-целей по 44px и адаптация навигации под палец.

  4. 4 Типографика и цвет в вебе

    1. Шрифты в вебе и типографический масштаб

      Веб-шрифты, безопасные стеки и font-display, модульный типографический масштаб, иерархия размеров и почему ограничивают число гарнитур и начертаний.

    2. Читаемость: длина строки, межстрочный интервал, fluid type

      Параметры читаемости текста в вебе: оптимальная длина строки 45-75 знаков, line-height, межбуквенное расстояние и плавная типографика через clamp без брейкпоинтов.

    3. Цвет в вебе: палитра, контраст и доступность

      Построение веб-палитры: акцент и нейтрали, контраст по WCAG (4.5:1 для текста), почему нельзя кодировать смысл только цветом и проверка доступности.

  5. 5 UI-паттерны и компоненты

    1. Навигация: хедер, меню и бургер

      Паттерны навигации в вебе: десктопный хедер, мобильное бургер-меню, sticky-шапка, состояния ссылок и доступная клавиатурная навигация.

    2. Кнопки, формы и поля ввода

      Дизайн кнопок (иерархия primary/secondary, состояния), доступные формы с label, понятные ошибки рядом с полем и размеры тач-целей для удобного ввода.

    3. Карточки, списки и состояния интерфейса

      Паттерн карточки и его анатомия, выравнивание через subgrid, обязательные состояния интерфейса (загрузка, пусто, ошибка) и скелетоны вместо спиннеров.

  6. 6 От макета к коду / handoff

    1. Вайрфрейм и прототип: от идеи к структуре

      Зачем нужны вайрфреймы низкой детализации перед визуалом, как они экономят правки, чем прототип отличается от макета и как проверять структуру до отрисовки.

    2. Handoff: дизайн-токены, спеки и Dev Mode

      Передача макета в разработку: общий язык токенов вместо hex-кодов, что должно быть в спецификации, Figma Dev Mode и почему handoff — это процесс, а не момент.

    3. Качество и финальная проверка перед сдачей

      Финальный чек-лист веб-дизайна перед сдачей: адаптивность на трёх ширинах, доступность и контраст, производительность, состояния и согласованность с системой.