Невидимая сила: размер, контраст и баланс

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

Делайте важные элементы большими

Очевидно, что когда вы делаете элемент больше, он стремится выглядеть более важным, чем мелкие элементы.

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

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

Однако, не только размер может изменить визуальный вес. Цвет, начертание шрифта может отменить эффект большего размера.

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

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

Уменьшайте размер осмысленно

Нет смысла делать шрифт крупнее–и, тем самым, занимая ценное место на экране — если в этом нет необходимости.

Whenever possible, you can use the factors mentioned above to change your visual hierarchy, but sooner or later, you need to make one thing bigger than another. Just don’t do it haphazardly.

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

А теперь взгляните на картинку ниже, какой из вариантов более чист и понятен?

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

Такие пропорции помогают разные элементы объединить в единую коммуникацию.

Вы можете посмотреть как работают пропорции, на примере логотипа MailChamp

Не заморачивайтесь на золотом сечении

Многие из вас, наверное, подумали о знаменитом золотом сечении. Многие знают что пропорции золотого сечения 1 к 1,618. Да, если бы отношение кругов у обезьяны было бы основано на золотом сечении, скорее всего она бы продолжала выглядеть привлекательно. Несмотря на ажиотаж, нет доказательств того, что Золотое сечение является более привлекательным, чем другие популярные показатели, такие как .75, или .67.

Чтобы проиллюстрировать это, я однажды написал некоторым друзьям, какой из прямоугольников на изображении они считают наиболее привлекательными

Среди них: квадрат, другой прямоугольник с соотношениями сторон .75, другой .67 , и прямоугольник по золотому сечению.

Какой прямоугольник выглядит наиболее привлекательным для вас?

от результаты опроса:

  • квадрат: 8%
  • 3:4 прямоугольник: 29%
  • 2:3 прямоугольник: 37%
  • золтое сечение 25%

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

Эти знания можно применять к типографике. Вот размер шрифтов, которые я часто использую:

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

Show your support

Clapping shows how much you appreciated Anastasia Purdes’s story.