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

Рассказываем о том, как «недизайнеру» быстро и объективно оценить сайт, презентацию или буклет.


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

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

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

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

teoria-blizosti

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


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

teoria-blizosti-lebedev

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


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

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

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

modul-verstka

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


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

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

prjamougol-modul

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


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

setka

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


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

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

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

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

kontrast

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



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


  • Связанные объекты расположены рядом по теории близости. 
  • Все элементы подчинены модульной вёрстке. 
  • Контрастность направляет внимание и поддерживает структуру.
  • ashmanov

    Главная страница сайта компании «Ашманов и партнеры»

    02.10.2017

    Следите за нашими новостями

    Подпишитесь на рассылку, и мы будем приглашать вас на наши мероприятия и делиться советами экспертов компании. Рассылка «Практика интернет-маркетинга» выходит дважды в месяц, в ней мы публикуем статьи о продвижении брендов в Интернете, делимся репортажами с крупных отраслевых событий и отвечаем на вопросы читателей.
    Спасибо

    Для завершения подписки вам необходимо перейти по ссылке,
    присланной по указанному адресу email.

    Произошла ошибка

    Пожалуйста, попробуйте еще раз