Как менеджеру научиться различать качество дизайна — базовые принципы. Часть 2

Привет, друзья! Я Иван Ребиков, основатель и управляющий партнер Landau Interactive. В первой части статьи мы разобрали, как природа повлияла на представление человечества о дизайне, и почему веб-дизайн — история в первую очередь про инженера, а не про творца.

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

Закон пришел из гештальтпсихологии и помогает правильно выстраивать визуальную коммуникацию.

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

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

С законом близости тесно связано правило внутреннего и внешнего. Усвоив его, можно уже завтра бросать работу и устраиваться джуниор дизайнером в любую компанию мира: вас примут с распростертыми объятиями просто потому, что мало кто из джунов его знает.

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

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

Теперь взглянем на сайт, оформление которого не помогает, а мешает пользователю:

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

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

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

А здесь отступ между буквами больше, чем отступ между строками. Такая надпись также воспринимается некомфортно.

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

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

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

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

Вот пример хорошего текста на Дзене, где соблюдается и закон близости, и правило внутреннего и внешнего.

Разберем на конкретном примере, как правильно организовать отступы внутри текста и за пару минут получить +100 к читабельности.

Поехали:

Готово! На базе рассмотренных нами законов мы быстро собрали текстовый блок, основываясь на размере отступов.

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

На этом завершим сегодняшний разговор.

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

Подписывайтесь на наш Телеграм, чтобы не пропустить анонс третьей части.

#дизайн #принципы_дизайна #веб_дизайн