Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

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

by
Length:ShortLanguages:
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
Advertisement
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.