Основы веб-дизайна для разработчика
Пользователь работает с интерфейсом — шрифтами, отступами, кнопками, порядком блоков. Разработчик верстает макет, согласует его с дизайнером или рисует сам для pet-проекта. Дальше в статье — термины и приёмы для осмысленной HTML и CSS вёрстки и обсуждения макета с командой.
Роли в команде — 1.23 Фронтенд и бэкенд.
UI и UX
| Термин | Расшифровка | Суть |
|---|---|---|
| UI | User Interface, пользовательский интерфейс | Внешний вид — цвета, иконки, кнопки, расположение блоков |
| UX | User Experience, пользовательский опыт | Насколько удобно пройти путь — найти товар, оформить заказ, прочитать статью |
UI и UX связаны: красивая, но запутанная страница раздражает так же, как удобная, но нечитаемая. В маленькой команде один человек часто закрывает оба аспекта.
Рабочий порядок:
- Описать сценарий — "гость находит товар и оплачивает заказ".
- Набросать экраны под шаги сценария.
- Перейти к деталям оформления и вёрстке.
Этапы проекта — глава 6.
От идеи к макету
Wireframe
Wireframe (каркас, "вайрфрейм") — чёрно-белая схема страницы без финальных цветов и фотографий. Показывает:
- расположение шапки, меню, основного блока, боковой колонки, подвала;
- что главное на экране, что второстепенное;
- какие элементы кликабельны.
Инструменты — бумага, Figma, Penpot, Balsamiq. Wireframe согласуют до вёрстки: переделать схему дешевле, чем переписывать CSS.
Mockup и прототип
Mockup (макет) — картинка, близкая к итогу: шрифты, цвета, реальные или близкие тексты.
Прототип — кликабельный макет: можно перейти с главной на каталог без написанного бэкенда. Проверяют навигацию до начала программирования.
Цепочка в проекте: wireframe → mockup → HTML и CSS.
Композиция и сетка
Страница держится на нескольких приёмах.
Выравнивание — элементы стоят по общим вертикалям и горизонталям; глаз цепляется за линии сетки.
Воздух (whitespace) — отступы между блоками группируют смысл. Плотная вёрстка без пауз утомляет при чтении.
Иерархия — один главный заголовок на экран; подзаголовки меньше; вторичный текст приглушённее по цвету или размеру.
Сетка — колонки выравнивают шапку, контент и сайдбар. В CSS — Flexbox и Grid.
┌──────────────────────────────────────┐
│ logo nav nav nav │
├──────────────────────────────────────┤
│ H1 заголовок │
│ подзаголовок │
├──────────────────┬───────────────────┤
│ основной │ боковая │
│ контент │ колонка │
└──────────────────┴───────────────────┘
Готовые блоки — Lab / 110, Tailwind.
Типографика
Большинство сайтов в основном текст. Параметры, которые стоит зафиксировать в макете:
- Число шрифтов — обычно один для текста и один для заголовков (редко три);
- Размер основного текста — 16–18px на десктопе для комфортного чтения;
- Длина строки — ориентир 60–75 символов; слишком длинная строка утомляет;
- Межстрочный интервал (
line-height) — 1.4–1.6; - Контраст текста и фона — стандарт WCAG рекомендует коэффициент минимум 4.5:1 для обычного текста.
Заголовки размечайте тегами <h1>–<h6> — так сохраняется структура документа для скринридера и поиска. Крупный шрифт в <p> заголовком не заменяет — семантика в главе 5.
Системные шрифты (system-ui, sans-serif) не требуют загрузки файлов. Google Fonts подключают, когда нужен характер бренда.
Цвет
Типичная палитра сайта:
- primary — главные действия (кнопка "Купить", "Отправить");
- secondary — менее важные кнопки и ссылки;
- neutral — фон, границы, вторичный текст;
- semantic — успех (зелёный), ошибка (красный), предупреждение (жёлтый).
Смысл ошибки показывайте текстом рядом с полем и дублируйте цветом рамки. При дальтонизме оттенки различаются слабее.
Тёмная тема — отдельные CSS-переменные (--bg, --text); переключение классом на <html> или медиаправилом prefers-color-scheme. Подробнее — CSS / тёмная тема.
Адаптивность
Сайт открывают на телефоне, планшете и широком мониторе. Адаптивный дизайн (responsive) — одна разметка, стили меняются по ширине экрана через медиазапросы.
Mobile-first — сначала стили для узкого экрана, затем @media (min-width: …) для планшета и десктопа.
Практические приёмы:
- картинки не шире контейнера —
max-width: 100%; - на узком экране длинное меню сворачивают в иконку "бургер";
- зона нажатия кнопок и ссылок — ориентир от 44×44 пикселей;
- проверка в DevTools, режим эмуляции устройства.
Отдельный мобильный домен m.example.com сегодня почти не используют — достаточно одного HTML с медиазапросами.
Доступность (a11y)
Доступность — интерфейс работает с клавиатуры, со скринридера и при плохом зрении. Цифра 11 в a11y — сокращение от accessibility (между "a" и "y" одиннадцать букв).
| Задача | Как сделать |
|---|---|
| Понятная кнопка | Тег <button>, не <div> с обработчиком клика |
| Описание картинки | Атрибут alt у <img> |
| Навигация с клавиатуры | Видимый стиль :focus, логичный порядок Tab |
| Подпись к полю ввода | <label for="id-поля"> |
| Структура заголовков | От h1 к h2, без прыжка с первого уровня на четвёртый |
Доступная вёрстка помогает и SEO, и всем пользователям. Углубление — 2.08 ИБ.
Привычные паттерны интерфейса
Пользователи уже знакомы с распространёнными схемами. Их проще узнать, чем изобретать заново:
- логотип слева, пункты меню справа в шапке;
- иконка корзины в углу в интернет-магазине;
- форма входа — поле логина или email, пароль, кнопка "Войти";
- "хлебные крошки" — цепочка ссылок вглубь каталога.
Библиотеки готовых блоков — Lab / 110, Uiverse / 1155, React / 1146.
Передача макета в вёрстку
Дизайнер (или вы в Figma) передаёт разработчику:
- сетку и отступы в пикселях или rem;
- цвета в HEX или CSS-переменных;
- названия шрифтов и начертания (regular, bold);
- состояния кнопок — обычное, наведение, неактивное, загрузка;
- отдельные макеты мобильной и десктопной ширины.
На ключевых экранах сверяют совпадение с макетом; остальное — по договорённости "достаточно близко". Спорные места фиксируют в ТЗ — глава 6.
Частые ошибки
| Симптом | Что сделать |
|---|---|
| Много оттенков одного цвета | Оставить один primary и нейтральную шкалу серого |
| Текст на фото не читается | Полупрозрачная подложка или затемнение фона |
| Мелкие ссылки и кнопки | Увеличить padding, зону клика |
| Несколько каруселей на главной | Один ясный призыв к действию |
| Нет проверки на телефоне | Mobile-first и медиазапросы — CSS / адаптив |
Практика
- Нарисуйте wireframe главной страницы pet-проекта на бумаге.
- Выберите два цвета и один шрифт — оформите статическую страницу.
- Сожмите окно браузера до 375px и исправьте поломки вёрстки.
- Пройдите страницу только клавишей Tab — доходите ли до всех интерактивных элементов?
Дальше — этапы проекта, стек и архитектура.