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