1 - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

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

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

Принципы

1. Гравитация

Гравитация применяется к объектам и фигурам даже в визуальной коммуникации. Это может показаться странным – это не похоже на гравитацию – реальную сила, тянущая 2D объекты вниз, как в реальной жизни.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Теперь посмотрите на это изображение ниже – все наоборот.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Эта композиция не похожа на мяч, который вот-вот упадет – она ​​скорее похожа на объект, просто мирно покоящийся внизу страницы.

Вывод? Создавая дизайн помните, что, размещая визуально тяжелые объекты вверху станицы, вы можете вызвать чувство дискомфорта и тревоги (если, конечно, вы не пытаетесь его вызвать).

2. Направление чтения

Мы читаем слева направо, сверху вниз. Из-за этого объекты слева воспринимаются как входящие, а объекты справа – как уходящие.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Или, наоборот, хотите показать убегающий объект (или персонаж)?

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

3. Приоритет чтения

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

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

Рассмотрим пример ниже:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Скорее всего, если вы читаете книги от верхнего левого угла к нижнему правому, то вы сначала посмотрели на верхний левый кружок, а затем на нижний правый.

4. Визуальное напряжение

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Все еще чувствуете себя некомфортно? На изображении ниже выделены все точки напряжения.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

Вот та же композиция с напряжением, намеренно сфокусированным в определенном месте.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

5. Динамическая композиция vs статическая композиция

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Теперь наклоните горизонт, и внезапно городской пейзаж станет намного интереснее.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

6. Активация негативного пространства

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

Проблема в том, что ваше внимание, скорее всего, исчезнет к тому времени, когда вы дойдете до правого верхнего края страницы. Ваш взгляд движется от объекта, но там просто слишком много пространства и слишком мала направленная сила от объекта, который привлек ваше внимание. Пространство остается неактивным. Однако с небольшой обрезкой / масштабированием мы получим следующий результат:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 6 интересных принципов визуального дизайна, которые следует знать UX-дизайнерам

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

Не позволяйте ограничениям CSS, HTML или какой-либо другой технологии, которую вы используете, стать оправданием не улучшать свои дизайны. Эти визуальные принципы применимы к любым средствам информации – печатным, цифровым, сетевым и т. д. Это просто связано с тем, как наш мозг и глаза запрограммированы на восприятие визуальной информации, в какой бы форме она ни была!

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

10 золотых правил UI дизайна

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

47 важных советов для UI и UX дизайнеров

Эта статья – список важных советов для UI / UX дизайнеров, дизайнеров взаимодействия или продуктовых дизайнеров любого уровня

Как создавать темные темы. Руководство от Superhuman

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