Три признака порядка в дизайне

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

Теория близости связывает элементы 

Один из универсальных принципов дизайна: если объекты расположены рядом — то воспринимаются вместе. Это и есть теория близости. Из нее следует, что связь между объектами подкрепляется их близостью в пространстве. Заголовок стоит рядом со своим абзацем, картинка — с подписью, диаграмма с легендой. Расстояние упорядочивает макет и направляет внимание без дополнительных ухищрений. 

Теория близости помогает увидеть и убрать лишнее. Так проходная работа превращается в аккуратную и понятную форму регистрации.

Источник: habrahabr.ru, статья «Теория близости: главное правило дизайна, которое помогает перейти от субъективных ощущений к конкретике», автор Роман Горбачев.

Когда дизайнер забывает о роли расстояния — случаются нелепости.

Пример взят из «Ководства» Артемия Лебедева. Он писал о теории близости в 2006 году.

Модульная верстка определяет макет 

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

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

Источник: eyelearn.org, статья Grids in web design, автор Irina Sideleva.

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

Прямоугольные модули могут содержать пустое пространство, которое разгружает макет и полноправно участвует в вёрстке. Страница упорядочена ровными линиями, прямыми углами и участками с «воздухом». Модульная вёрстка в действии.

Источник: dribble.com, дизайн: Zhenya & Artem

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

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

Контрастность направляет внимание 

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

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

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

Главная страница сайта arngren.net

Итого три объективных признака порядка в дизайне сайтов, презентаций или буклетов: