Как менеджеру научиться различать качество дизайна — базовые принципы. Часть 2
Привет, друзья! Я Иван Ребиков, основатель и управляющий партнер Landau Interactive. В первой части статьи мы разобрали, как природа повлияла на представление человечества о дизайне, и почему веб-дизайн — история в первую очередь про инженера, а не про творца.
Сегодня поговорим о законе близости, правиле внутреннего и внешнего, сформулируем принципы группировки текста и выясним, почему так трудно читать Википедию.
Закон близости, или как разложить все камушки по кучкам
Закон пришел из гештальтпсихологии и помогает правильно выстраивать визуальную коммуникацию.
Иными словами, разделение объектов на группы с помощью пустых мест или с помощью разделителей является нашим основным средством упорядочивания мира. За кажущейся простотой закона скрывается гигантская философская глубина.
Рассмотрим пример, где мы последовательно видим сначала три группы объектов, затем две, а потом пять групп.
Правило внутреннего и внешнего, или как не потерять смысл
С законом близости тесно связано правило внутреннего и внешнего. Усвоив его, можно уже завтра бросать работу и устраиваться джуниор дизайнером в любую компанию мира: вас примут с распростертыми объятиями просто потому, что мало кто из джунов его знает.
Иными словами, эффект группировки получается за счет уменьшения внутреннего отступа. Рассмотрим довольно понятный пример.
В надписи нарушено правило внутреннего и внешнего, поэтому мозг разбивает части слова «выезд» в разные группы. Это вызывает когнитивный диссонанс, нам становится некомфортно, ситуация комична и глупа.
Теперь взглянем на сайт, оформление которого не помогает, а мешает пользователю:
Здесь внешний отступ текстового блока такой же, как и отступ внутри блока, и такой же, как отступ до следующего блока. Что к чему относится, непонятно, в целом текст кажется «простыней», на которую жаль тратить время. Система заголовков тоже вводит в заблуждение.
Таких примеров на самом деле масса не только в отдельных текстах, но и внутри сервисов, сайтов и приложений.
Например, такая кнопка выглядит непривлекательно и отталкивает нас, потому что внутренний отступ больше, чем отступ от слова до краев кнопки. Даже в самой минимальной дискретизации закон тоже работает.
А здесь отступ между буквами больше, чем отступ между строками. Такая надпись также воспринимается некомфортно.
Кажется, что закон близости и правило внутреннего и внешнего довольно очевидны и просты. Но если мы посмотрим на мир вокруг, на приложения и сайты мы заметим гигантское количество несоответствий и ошибок, подобных тем, что мы сейчас разобрали. Чаще всего наблюдать такие вещи просто неприятно на подсознательном уровне, а в худшем случае ошибки мешают понять смысл сообщения.
Еще два примера: найдите хороший
Вот еще пара примеров применения законов дизайна, которые мы обсудили. Попробуйте сначала сами оценить картинки с точки зрения соблюдения или нарушения законов близости и внешнего и внутреннего.
Конечно, мы все равно «цепляемся» за заголовки и картинки, как утопающий за спасательный круг, но читать такой текст неудобно и некомфортно, потому что он не разбит на явные, сразу воспринимаемые группы.
Безусловно, неправильные отступы и нарушение группировки не превращают страницу в сайт-катастрофу, но делают его неудобным для нашего восприятия. Все то, что мы называем плохим дизайном при верстке блоков, от чего испытываем дискомфорт, объясняется незнанием дизайнером простейших законов и правил.
Вот пример хорошего текста на Дзене, где соблюдается и закон близости, и правило внутреннего и внешнего.
Как правильно сгруппировать текст: секреты блоков и отступов
Разберем на конкретном примере, как правильно организовать отступы внутри текста и за пару минут получить +100 к читабельности.
Поехали:
- Разделяем блоки: выделяем заголовок, подпись к заголовку и блок основной статьи.
- Выделяем сущности заголовков второго и третьего уровней и определяем отступ между ними.
- Определяем отступ между заголовками и текстом.
- Повторяем процесс на следующих блоках.
Готово! На базе рассмотренных нами законов мы быстро собрали текстовый блок, основываясь на размере отступов.
Теперь сравним наш блок, например, с Википедией, и поймем, почему ее так неудобно читать и почему, начав изучение статьи о крестовых походах, мы быстро отвлекаемся и через полчаса обнаруживаем себя совершенно в другом месте. Если бы создатели энциклопедии задумались о принципах группировки, скорость изучения статей была бы гораздо выше.
На этом завершим сегодняшний разговор.
В следующей статье разберем, что и почему вызывает отвращение в дизайне, как играть со шрифтами и плести модульные сети. Не переключайтесь!
Подписывайтесь на наш Телеграм, чтобы не пропустить анонс третьей части.
Ещё хочу)))
Читайте книги: "Веб-дизайн для недизайнеров." и "Дизайн. Книга для недизайнеров". Там это всё по полочкам разложено.
Спасибо)
Комментарий недоступен
Ну получается надо учиться менеджера дизайну, фронту, бэкенду и аналитике с тайменеджментом. иначе как он будет проект вести хз.
Менеджер без профильного бекграунда - это хуйня, а не менеджер
Мы еще еще и исследованиям учим наших бедняг.
получается надо) ведь чем больше человек знает и умеет, тем выше его ценность, ну и общаться тоже вполне интересно
Эммммм, мне одному было понятнее и приятнее читать сайт кнопка ру , чем горящая изба?....
Просто горящая изба тоже не идеальна)
У "кнопки" достаточно убрать такие огромные отступы во втором блоке текста, а в "горящей избе" слишком малые отступы текста от края. Из за скруглённых углов изображений, кажется что текст как бы вылезает за край (хотя это не так). + не самые правильные акценты. Из за того что заголовок более блёклый, следующее что замечает пользователь - это кнопка (которая тоже неидеальна, честно говоря), а только потом уже заголовок. Из за чего взгляд скачет вверх-вниз, и кажется некомфортно читать это чудо.
У "кнопки" же такой проблемы нет, но такие огромные отступы в блоке текста доставляют дискомфорт как раз из за причин сказанных в статье. В общем, мне кажется что просто горящая изба может и хороший пример в качестве правильности отступов между блоками, но в остальном она довольно сложно воспринимается.
Ага , ещё и шрифт не очень приятный
Получился рафинированный пример одного экрана.
А ваш скрин натолкнул на вопрос: у самой статьи на vc как с отступами на ваш взгляд?
Все прекрасно ,а главное приятно читать
Десигн )))
Спасибо, подписываюсь на Вас!
Спасибо вам! Скоро продолжим