Студия Турум-бурум

Принципы дизайна

Принципы дизайна
2123

Соединение и разделение элементов с помощью контраста и сходства

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

Примитивные черты


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


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

Характеристики, которые чаще всего используют для изображения сходства и контраста:

- размер;

- форма;

- цвет;

- значение;

- текстура;

- положение;

- ориентация.


Контраст

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


Контраст и принципы гештальта

Хотя все принцы гештальта — о контрасте и сходстве, мы рассмотрим только два принципа.
- Фигура — фон. Мы легко можем отличить фигуру от фона, рассматривая ту или иную композицию. Это обусловлено тем, что они являются контрастными по отношению друг к другу.
- Акценты. Это элементы привлечения внимания. Они должны выделяться на фоне других. Элементы, которые имеют существенные отличия, являются доминирующими. 


Контраст и сходство на примере: зеленые круги похожи на другие зеленые круги и контрастны по отношению оранжевым полосам.


Сходство

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


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


Отношения между сходством и контрастом

Контраст и сходство показывают отношения между элементами и по отдельности не имеют значения. Элемент должен быть показан в контексте с другими элементами. Контраст и сходство взаимосвязаны, наличие одного невозможно без другого. Контрастность — отсутствие сходства, и сходство — это отсутствие контраста. Их сочетание позволяет достичь впечатляющих результатов.
Можно использовать одну функцию (например, цвет), чтобы показать связь элементов друг с другом, а затем использовать другой цвет, чтобы показать, что другие элементы связаны, но отличаются от первой группы. С помощью всего двух цветов мы можем создать две различные группы связанных элементов.
Результатом хорошего дизайна является качественное сочетание сходства и контраста.



Источник: smashingmagazine.com



Об авторе

Стивен Брэдли (Steven Bradley) — автор книг Design Fundamentals: Elements, Attributes, & Principles и CSS Animations and Transitions for the Modern Web. Его можно найти в блоге на сайте Vanseo Design или на форуме для малого бизнеса



Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.