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

Тайные силы: выравнивание, направление и фокус

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)

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

Темой первой из трёх статей о невидимых силах будут выравнивание, направления и фокус.

Представляем «Элементы»

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

Каждый заголовок - «элемент», каждый абзац основного текста является одним большим «элементом» и каждое изображение тоже «элемент».

Внутри каждого из них есть ещё элементы - можно называть их «под-элементами». У вашего логотипа может быть элемент «symbol» и элемент «text». Каждую букву текста можно рассматривать, как отдельный элемент.

Все эти разговоры об элементах напоминают о классе химии (в котором я не бывал) и это так и есть. Правильно смешивая элементы, вы получаете взрывчатое вещество, которое рвётся со страницы. Когда бросаете в беспорядке, получается свалка.

Выравнивание

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

Поэтому здесь так важно выравнивание. Точной расстановкой вы скажете больше.

Например, эти квадраты выровнены.

Изменив их положение, мы полностью изменим композицию.

Сломанный строй выглядит беспорядочно.

Если вместо квадратов будут иконки, вы увидите непосредственную пользу выравнивания. Со значками социальных сетей:

Или вот так:

Направление

Когда вы выравниваете элементы, вы расставляете их вдоль воображаемой линии. Дизайнеры называют эту воображаемую линию «осью». Относитесь к ней, как к оси колеса: весь вес колеса вращается вокруг неё. Ей нужен баланс. Точно так же ось помогает контролировать баланс композиции.

Все элементы выстроены в линию? Назовём их осью композиции.

Если вы выровняете другие элементы по этой оси, она будет управлять композицией.

Говорил вам дед: не балуйся с топором. Например, избегайте смешивания выровненного по центру текста с «асимметричной» композицией.

Как ни расставляй текст: по центру, по левому краю или по правому (avoid justifying type on the web), он должен быть расположен по оси.

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

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

Исключением является, когда элемент, выровненный по центру, охватывает ширину композиции, а элементы со сдвигом влево или вправо находятся внутри неё. Тогда топоры не рубятся.

Обратите внимание, что оба столбца содержимого выровнены слева.

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

Или можно сделать один столбец заподлицо справа, а другой столбец сбросить влево.

Фокус

До сих пор я говорил о вертикальных осях. Они могут быть горизонтальными (или по диагонали, но это редкость в веб-дизайне и мобильном дизайне).

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

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

Левый текст создаёт одну ось, а выравнивание кнопки «купить сейчас» с изображением - другую. Место их пересечения создаёт фокус.

Заключение

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

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

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.