Внутреннее < Внешнее: дизайн-правило, которое нельзя нарушать

Как отступы в макете влияют на его понятность и эстетику? Разбирает Катя Григорьева, дизайнер интерфейсов и наставница на курсе «Графический дизайнер».

В дизайне я около 10 лет: занималась вёрсткой журналов и книг, брендингом, вебом и иллюстрацией. Моя основная специализация — дизайн интерфейсов. Разрабатываю дизайн онлайн-сервисов, приложений и промосайтов для российских и зарубежных клиентов с Behance. Люблю наблюдать, как дизайн помогает решать бизнес-задачи и делает жизнь людей проще и приятнее. А ещё наша профессия настолько многогранная, что, развиваясь в ней, развиваешься не только как профессионал, но и как личность, это тоже классно.

Уже 3 года работаю в Практикуме: начинала как ревьюер на курсе «Дизайнер интерфейсов», а теперь я — старший ментор на курсе «Графический дизайнер». Меня очень вдохновляет наблюдать, как наши студенты развиваются в рамках обучения, как они начинают делать проекты, которые восхищают. Практикум — это тёплое комьюнити экспертов, и я верю, что каждый день мы делаем мир чуточку лучше, делясь своими знаниями и поддерживая мотивацию друг друга и наших студентов.

Любой макет, над которым работает дизайнер, будет выглядеть понятно и эстетично только тогда, когда внутри него грамотно настроены отступы. Изучение и использование правила внутреннего и внешнего на практике позволяет структурировать макет, сделать его более аккуратным и понятным, а ещё принимать точные решения, а не надеяться на интуицию.

Согласно правилу внутреннего и внешнего, внутренние отступы всегда должны быть меньше, чем внешние. Внутреннее < внешнее. Элементы, связанные по смыслу, всегда должны быть ближе друг к другу и выглядеть как группы, а вокруг таких групп должно быть достаточно воздуха, чтобы визуально отделить их от других подобных групп.

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

В типографике самый маленький внутренний отступ, от которого начинается построение всех прочих отступов, — отступ между буквами в слове. Внешний отступ в данном случае — пробел между словами. Соответственно, опираясь на правило внутреннего и внешнего, межбуквенное расстояние (внутреннее) нужно сделать меньше, чем расстояние между словами в предложении (внешнее).

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

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

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

Кнопка должна быть ещё дальше от текста, чем подпись, так как части текста всегда связаны по смыслу друг с другом, а значит, и отступы между ними должны быть меньше, чтобы показать эту связь. В данном случае внутренний отступ — расстояние от подписи до текста, а внешний — от текста до кнопки.

Сложнее всего разбираться с отступами, когда к тексту и кнопке добавляется ещё и иллюстрация. Каждый раз, когда возникают такие трудности, можно подумать, что все элементы связаны по смыслу между собой и, соответственно, чем теснее связь между элементами, тем меньше отступ. Идти лучше всегда от самого малого отступа и далее наращивать расстояния между элементами по мере уменьшения их связанности между собой.

В нашем примере самая тесная связь между абзацами текста. Затем примерно на одинаковом отдалении от текста стихотворения находятся заголовок и подпись. Картинка больше связана с текстом, а кнопка — меньше, она относится уже ко всей группе «текст+картинка». Соответственно, расстояние до кнопки будет самым большим отступом внутри группы, больше него только отступы от контента до краёв фрейма.

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

Здесь та же история: отступ от заголовка до краёв листа меньше, чем между пунктами списка. Из-за этого строки распадаются на части, а не воспринимаются как единый текст.

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

Карта выглядит легко и аккуратно, однако в её легенде допущена ошибка: внешний отступ от правого края фрейма до текста должен быть больше, чем расстояние между вертикальными столбцами, чтобы показать, что они связаны по смыслу. В итоге человек не сможет сразу сориентироваться: пояснения к пункту A и А1, А2, например, выглядят обособленно и затрудняют работу с картой.

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

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

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

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

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

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

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

Неочевидный, но частый пример нарушения правила внутреннего и внешнего: дизайнер относится к цветовым пятнам как к фону, однако они тоже вступают в отношения с текстом. Из-за того, что «velvet» располагается ближе к цветовому пятну слева, чем к «taste», связь между словами нарушилась.

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

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

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

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

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

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

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

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

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