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

В этой статье мы узнаем о том, как работать с изменением размера, и как создавать контраст и баланс.

_____

БОЛЬШИЕ ВЕЩИ КАЖУТСЯ БОЛЕЕ ВАЖНЫМИ

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

1_invisible_forces

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

2_invisible_forces

Но в любом случае сначала вы увидите верхний элемент, и уж затем нижний.

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

3_invisible_forces

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

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

4_invisible_forces

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

5_invisible_forces

_____

РАЗУМНО ВЫБИРАЙТЕ РАЗМЕР ШРИФТА

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

6_invisible_forces

Теперь, какой вариант читается проще: этот, или предыдущий?

7_invisible_forces

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

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

Посмотрите на логотип MailChimp — это буквально пропорции в работе.

8_invisible_forces

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

9_invisible_forces

_____

НЕ ВСЕ ТО ЗОЛОТО, ЧТО БЛЕСТИТ

Многие из вас, наверняка, подумали о так называемом «золотом сечении», которое наделало много шума. Грубо говоря, золотое сечение — это пропорция 1:1.618. Да, логотип все равно хорошо выглядел бы, если бы был основан на золотом сечении, но объективно, он не был бы более привлекательным. Несмотря на всю шумиху, золотое сечение не намного лучше других популярных пропорций, таких как 0.75 или 0.67.

10_invisible_forces

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

 

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

•  наверху слева (квадрат): 8%

•  наверху справа (3:4 прямоугольник): 29%

•  внизу слева (2:3 прямоугольник): 37%

•  внизу справа (золотое сечение): 25%

 

Как вы видите, так называемое золотое сечение оказалось не самым привлекательным.

Прямоугольник с соотношениям сторон 2:3 выиграл, но не стоит воспринимать это слишком серьезно. Смысл в том, что любой прямоугольник, а не только по золотому сечению, будет привлекательней, чем квадрат.

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

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

11_invisible_forces

Побочное преимущество работы с пропорцией 0.75 вместо золотого сечения в том, что пропорцию легко посчитать в голове. Сколько будет 75% от 16? Легко! А вот как посчитать 61.8% от 16?

_____

ЗАКЛЮЧЕНИЕ

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

 

Источник — webdesign.tutsplus.com

Add a comment

*