Код
Разметка и CSS-раскладки: flex, grid, поведение потока и типовые причины горизонтального скролла.
Вёрстка · Дизайн · Интерфейсы
Сетка, ритм и порядок
Здесь разбираем, как страница держит форму: из чего складывается сетка, почему один и тот же макет по-разному ведёт себя в браузерах и какие мелочи в типографике решают судьбу текста.
Материалы построены на примерах: короткая задача, разбор решения и пояснение, что именно на что влияет. Без рекламного давления и модных лозунгов.
Подойдёт тем, кто верстает первые макеты, и тем, кто хочет привести существующий интерфейс к внятной системе.
Четыре опоры страницы
Любой макет держится на нескольких слоях сразу. Разделили материалы так, чтобы каждый слой можно было изучать отдельно и потом собрать вместе.
Дизайн
Композиция экрана: модульная сетка, отступы, иерархия блоков и работа с пустым пространством.
Типографика
Размеры, межстрочный интервал, длина строки и контраст — всё, что определяет читаемость текста.
UX
Сценарии пользователя: навигация, состояния элементов, формы и понятная обратная связь интерфейса.
Свежие материалы
Как принципы веб-дизайна помогают выбрать недорогой дом
Если вы хотите купить недорогой дом в Подмосковье, объявление стоит разбирать по структуре: отделять факты от рекламной подачи, замечать пропуски и сопоставлять сведения из разных блоков.
Как организовать работу с HTML и CSS в дизайне
Для удобной работы с HTML и CSS нужны редактор кода, инструменты разработчика в браузере, валидатор и понятная система компонентов. Однако набор программ вторичен: качество макета прежде всего зависит от семантической разметки, предсказуемых
…
Как выбрать способ компоновки страницы сайта
Для большинства современных сайтов подходит отзывчивая компоновка: она изменяет размеры элементов и перестраивает блоки в зависимости от доступного пространства. Однако выбор нельзя сводить только к ширине экрана. Нужно учитывать содержание
…
Как создать устойчивую сетку для веб-интерфейса
Хорошая сетка удерживает контент, сохраняет визуальную иерархию и предсказуемо перестраивается на разных экранах. Начинать следует не с количества колонок, а с ширины контента, боковых полей и поведения блоков при сужении окна. Если
…
Путь одной страницы
Порядок этапов, при котором макет доживает до продакшена без переделок «сверху вниз».
-
01
Структура и содержание
Сначала текст и блоки: что говорим, в каком порядке и какой у страницы главный смысл. Дизайн начинается с этого списка, а не с цвета.
-
02
Каркас и сетка
Определяем ширину контейнера, число колонок и вертикальный ритм. На этом шаге видно, какие блоки лишние и где не хватает воздуха.
-
03
Типографика
Подбираем шкалу размеров, интерлиньяж и длину строки. Заголовки и текст должны различаться уровнем, а не только начертанием.
-
04
Вёрстка и состояния
Собираем разметку, задаём поведение при наведении, фокусе и ошибке. Проверяем, что контент не распирает контейнеры при длинных словах.
-
05
Проверка в браузерах
Смотрим страницу на узком и широком экране, ищем расхождения между движками и убираем случайный горизонтальный скролл.
«Хорошая вёрстка незаметна: читатель видит текст, а не героические усилия разработчика».