{"id":13654,"url":"\/distributions\/13654\/click?bit=1&hash=7a7aa21667aefd656b6233efba962ecbef616dfd5ac100a493b4b5899b23ff1f","title":"\u041c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043a\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u00ab\u043a\u0440\u0435\u0430\u0442\u043e\u0440\u00bb \u0438 \u00ab\u043f\u0440\u043e\u0434\u0430\u043a\u0442\u00bb","buttonText":"\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c","imageUuid":"32086418-934b-5de5-a4ef-6425a84c490a","isPaidAndBannersEnabled":false}
Дизайн
Landau Interactive

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

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

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

Закон близости, или как разложить все камушки по кучкам

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

Закон близости
Расположенные близко друг
к другу объекты мозг
воспринимает как группы.

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

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

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

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

Правило внутреннего и внешнего, или как не потерять смысл

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

Правило внутреннего и внешнего: внутренний отступ всегда явно меньше внешнего.

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

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

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

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

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

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

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

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

Еще два примера: найдите хороший

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

На странице сайта «Кнопки» отступы расставлены не системно. Пользователю сложнее группировать блоки в смысловые единицы. На странице «Горящей избы» с этим все хорошо.

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

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

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

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

Как правильно сгруппировать текст: секреты блоков и отступов

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

Поехали:

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

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

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

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

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

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

0
16 комментариев
Написать комментарий...
Mitchell

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

Ответить
Развернуть ветку
Yana

Ещё хочу)))

Ответить
Развернуть ветку
G. Ivan

Читайте книги: "Веб-дизайн для недизайнеров." и "Дизайн. Книга для недизайнеров". Там это всё по полочкам разложено.

Ответить
Развернуть ветку
Yana

Спасибо)

Ответить
Развернуть ветку
Vasek Romanov

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

Ответить
Развернуть ветку
Илитный Иксперт

Менеджер без профильного бекграунда - это хуйня, а не менеджер

Ответить
Развернуть ветку
Landau Interactive
Автор

Мы еще еще и исследованиям учим наших бедняг.

Ответить
Развернуть ветку
Артём Степнов

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

Ответить
Развернуть ветку
Lимон

Эммммм, мне одному было понятнее и приятнее читать сайт кнопка ру , чем горящая изба?....

Ответить
Развернуть ветку
Никита Гусь

Просто горящая изба тоже не идеальна)
У "кнопки" достаточно убрать такие огромные отступы во втором блоке текста, а в "горящей избе" слишком малые отступы текста от края. Из за скруглённых углов изображений, кажется что текст как бы вылезает за край (хотя это не так). + не самые правильные акценты. Из за того что заголовок более блёклый, следующее что замечает пользователь - это кнопка (которая тоже неидеальна, честно говоря), а только потом уже заголовок. Из за чего взгляд скачет вверх-вниз, и кажется некомфортно читать это чудо.
У "кнопки" же такой проблемы нет, но такие огромные отступы в блоке текста доставляют дискомфорт как раз из за причин сказанных в статье. В общем, мне кажется что просто горящая изба может и хороший пример в качестве правильности отступов между блоками, но в остальном она довольно сложно воспринимается.

Ответить
Развернуть ветку
Lимон

Ага , ещё и шрифт не очень приятный

Ответить
Развернуть ветку
Landau Interactive
Автор

Получился рафинированный пример одного экрана.

А ваш скрин натолкнул на вопрос: у самой статьи на vc как с отступами на ваш взгляд?

Ответить
Развернуть ветку
Lимон

Все прекрасно ,а главное приятно читать

Ответить
Развернуть ветку
Protein Wars

Десигн )))

Ответить
Развернуть ветку
Александр Карабатов

Спасибо, подписываюсь на Вас!

Ответить
Развернуть ветку
Landau Interactive
Автор

Спасибо вам! Скоро продолжим

Ответить
Развернуть ветку
Читать все 16 комментариев
null