Макроверстка, блоки и отступы - какие правила здесь важно соблюдать

Как организовать пространство в сетке мы уже писали, теперь рассмотрим макроверстку, блочную модель и какие у них есть правила.

Самое основное правило - внешние отступы от объекта всегда должны быть больше отступов внутри этого объекта.

Например, на картинке ниже расстояние от границ равно не сумме margin'ов каждого блока, а наибольшему из них. Первый блок на иллюстрации имеет внешний отступ 20 пикселей, второй — 10.

Расстояние между границами этих блоков получается не 30 (как можно было ожидать), а только 20 пикселей.

Это обусловлено элементарной логикой восприятия - когда 2 объекта стоят рядом, они объединяются в некую логическую единицу.

Для примера, рассмотрим всем известный сайт Яндекс.

Как мы видим, здесь есть общий блок, в который встраивается весь контент (кроме логотипа, он стоит в стороне от всего инфополя).

Как мы видим, все отступы между основными блоками равны.

На аналогичном скриншоте можно увидеть что происходит с отступами уже внутри каждого блока.

Опять же, все отступы равны. И если говорить о цифрах, то напрашивается вывод, что базовый модуль этой системы 5px.

Поскольку страница состоит из блоков, подробнее рассмотрим блочную модель и макроблоки. Когда Вы проектируете страницу, Ваша первоначальная задача расположить основные блоки (разумеется, применяя правило внешних и внутренних отступов).

Что вообще делает блок блоком? Четкие границы.

На картинке выше мы видим, что прямоугольники обладают этими границами и они организуют пространство на странице. Но здесь же есть опасный момент - не стоит слишком сильно обнажать структуру макета (к примеру, за счет обводки или темного фона и светлых блоков), в противном случае макет становится очень тяжелым и перегруженным структурой.

Прежде, чем начинать работать со структурой и создавать блоки, следует определить, какого размера они будут. В большей степени за это отвечает сетка и модульный подход к организации пространства (см. предыдущий пост).

Не менее важно знать о том, как расставлять объекты внутри этих блоков. Здесь поможет правило якорных объектов (или силовых точек), которое отвечает на вопрос как располагать объект внутри блока.

Силовые точки есть у каждого блока, они расположены по углам, по центру.

Пример хорошего расположения объектов и блоков - сайт https://journal.tinkoff.ru/.

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

Помните про основной принцип композиции - 3 объема (большой, средний, маленький).

Выводы:

  • Прежде всего, разделите страницу на макроблоки с учетом правила внешних и внутренних отступов.
  • Избавляйтесь от лишних блоков, достаточно самого объекта.
  • Объект размещается внутри блока по углам или по центру.

Пустота - такой же элемент выразительности как и объект, то есть важно, чтобы пустота в макете не висела вяло, а чтобы она тоже была осознана и ее объем сочетался с другими объемами макета и все это было подчинено общей системе.

0
7 комментариев
Написать комментарий...
Sergey Mikhalev

"Самое основное правило - внешние отступы от объекта всегда должны быть отступов внутри этого объекта"

Не всегда и не должны.
Также как и контент на весь дисплей.

Ответить
Развернуть ветку
Net Lab
Автор

Разумеется, у любого правила есть исключения)

Ответить
Развернуть ветку
onepositive

"Самое основное правило - внешние отступы от объекта всегда должны быть отступов внутри этого объекта"
слово что ли пропущено какое?

Ответить
Развернуть ветку
Net Lab
Автор

Да, спасибо большое))
"внешние отступы от объекта всегда должны быть БОЛЬШЕ отступов внутри этого объекта"

Ответить
Развернуть ветку
Konstantin Kononenko

А где ссылка на предыдущий пост?

Ответить
Развернуть ветку
Net Lab
Автор

https://vc.ru/design/55385-krasivaya-i-praktichnaya-setka-v-interfeyse-v-chem-sekret

сейчас в тело поста вставим, чтоб сразу можно было перескочить)

Ответить
Развернуть ветку
Konstantin Kononenko

Спасибо

Ответить
Развернуть ветку
4 комментария
Раскрывать всегда