Advertisement
  1. Web Design
  2. Design Theory

Невидимые силы: Интервал и форма

Scroll to top
Read Time: 3 min
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В предыдущей статье мы узнали, how sizing and scaling can be used to make your designs harmonious and clear. В заключительной статье о тайных силах дизайна мы узнаем о том, как пользоваться пробелами - так называемым «белым пространством» или «отрицательным пространством» .

Соотношение “Data/Ink”  

Чем более осторожно вы пользуетесь белым пространством, тем выше соотношение “data/ink”. Это концепция предложена гуру дизайна  Edward Tufte. Оно зависит от того, сколько информации передается каждой каплей чернил, или, в случае мобильного и веб-дизайна, каждым пикселем.

Левый график имеет более высокое соотношение data/ink, чем правый. Нужно ли заполнять график «чернилами»? Нет, он прекрасно выглядит с точками и линиями.

Что, если убрать линии, оставив только точки?

Теперь связь развалилась. Да, все данные на месте, но вы потеряли «историю» того, как они изменялись с течением времени. Кроме того, по разбросанным точкам стало трудно найти переменную “time” и определить линию развития.

Более плотные предметы выглядят связно

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

Вот просто сетка из квадратов, например, плитка на полу.

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

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

Белое пространство в чистом макете

Эти принципы относятся не только к линейным графикам. Они касаются всего дизайна. Крайне нежелательно, чтобы пиксели пропадали на маленьких экранах, здесь соотношение data/ink особенно важно.

Дизайнеры обычно используют сетки для организации макета. Сетки помогают выравнивать строки текста, которые затем создают области информации, которые связаны друг с другом.

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

Это хороший макет, но обратите внимание, что пробел между навигацией и текстом, и пробел между столбцами текста основной области одинаковый.

Имеет смысл немного расширить желобок между навигацией и областью основного содержимого.

Теперь навигация и основной контент отделены лучше, стоило добавить немного пробела.

Белое пространство в типографике

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

Например, посмотрите на этот header, данные и body.

Они гармонично соотносятся по размерам, но выглядят довольно неряшливо!

Проблема в отрицательных пробелах.

Строка метаданных хорошо отделена от заголовка: это другой размер и даже немного отличается.

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

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

Как насчет этого макета?

Имеет смысл поднять метаданные ближе к заголовку, но заголовок не должен быть так близко к основному тексту. Заголовок и метаданные должны быть отдельными единицами.

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

Заключение

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

Это в порядке вещей - если вы ещё этого не сделали, обязательно ознакомьтесь с первой и второй статьями серии!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.