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: Alignment, Direction, and Focus
Invisible Forces: Spacing and Shape

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

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

Чем Больше Материал, Тем Важнее Он Выглядит

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

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

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

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

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

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

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

Делайте Значимые Изменения Размеров

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

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

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

Ну и, какой читается лучше для вас: тот макет, или этот?

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

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

Пропорции в деле, можно увидеть в логотипе MailChimp.

Каждый из кругов, составляющих особенности шимпанзе, относится друг к другу с коэффициентом .75. Например, круг , который составляет область живота составляет .75 от размер круга , который составляет тело. Фирма Hicks Design, которые создавали этот логотип сделали это специально!

Не Будьте Обманутыми Золотом Обмана

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

Чтобы проиллюстрировать это, однажды я провел опрос среди моего списка имейл контактов, на тему того, какую из фигур они считают более привлекательной. Одна из фигур - квадрат, другая фигура .75 , следующая фигура .67, и последняя фигура - "Золотая". Какая фигура выглядит для вас наиболее привлекательной?

Ниже привожу результаты опроса:

  • сверху слева (Квадрат): 8%
  • сверху справа (фигура 3:4): 29%
  • снизу слева (фигура 2:3): 37%
  • снизу справа ("Золотое" Сечение): 25%

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

В этом случае, фигура 2:3 выигрывает, но не обращайте на это слишком много внимания. Дело в том , что, что угодно из золотого сечения до 3: 4 будет более привлекательным, чем простой квадрат.

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

Вот размеры шрифтов, которые я всегда использую. Каждый размер составляет примерно +0,75 размера предыдущего( с небольшим округлением ) .

Побочным преимуществом работы со шкалой .75 вместо золотого сечения , является тот факт, что расчеты гораздо проще сделать в своей голове : Что 75 % от 16 ? Легко! Что 61,8 % от 16 ? Эммм..

Заключение

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

Ждите последнюю статью в этой серии, где мы узнаем как формирование страницы с помощью выравнивания и каллибровки, и "white space" подарят вашему дизайну еще больше ясности.

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.