ДизайнУха
13
Sep

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

источникwebdesign.tutsplus.com
авторDavid Kadavy

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

Большие вещи кажутся более важными

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

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

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

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

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

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

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

Разумно выбирайте размер шрифта

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

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

Посмотрите на этот пример, каждый элемент меньше, чем тот, что выше.

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

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

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

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

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

Не все то золото, что блестит

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

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

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

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

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

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

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


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

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

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

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

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

Заключение

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

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