Привет, друзья! Я Иван Ребиков, основатель и управляющий партнер Landau Interactive. Мы продолжаем разговор о базовых правилах дизайна. Напоминаю, что в первой части обсуждали истоки представлений о дизайне, во второй — основные законы и правила.
Сегодня разберем принципы игры в шрифты, посмотрим на модульную сетку и выясним, что в дизайне вызывает дискомфорт.
Как играть и выигрывать в шрифты: строим грамотную структуру
Игрой в шрифты называют грамотное построение шрифтовой структуры. По большому счету, на шрифтовых композициях основана вся деятельность дизайнеров, да и не только их. В этой увлекательной игре есть несколько принципов.
Первый принцип: чем проще, тем лучше
Иными словами, чтобы сделать грамотную шрифтовую композицию, нужно использовать минимальное количество шрифтов. Под шрифтами имеем в виду сами гарнитуры, например, Arial или Verdana, размеры, цвета шрифтов и варианты начертания, например, курсив или полужирный. Чем меньше их использовать, тем лучше. В идеале шрифтов должно быть не более трех в том месте, которое вы «парсите» взглядом, тогда читателю будет комфортно.
Второй принцип: не стоит использовать близкие начертания
Например, если мы берем вариант «Medium», то должны использовать не следующее по жирности начертание «Semi Bold», а более жирное. Тогда не будет ощущения, что это однородные элементы, выполненные чуть-чуть по-разному. Будет видно, что это совершенно другой элемент, и зрительно читатель не попытается их состыковать, как в примере со скруглениями.
Точно так же не нужно использовать рядом близкие размеры шрифтов: 12 и 14, 14 и 16. Если мы хотим выделить текст, нужно сделать шрифт либо значительно больше, либо значительно меньше.
Третий принцип: нельзя использовать близкие цвета, похожие на основной
Едва отличимые от основного цвета оттенки шрифта не помогают выделить часть текста, а только усложняют его восприятие. Вспомните школьные или студенческие конспекты: мы инстинктивно выбираем для выделения главной мысли контрастные цвета, а не оттенки синего.
Эти три принципа помогают нам избавляться от мусора в шрифтах.
Как модульная сетка помогает структурировать информацию
Модульная сетка — один из важнейших инструментов качественного дизайна. Это разделение холста на модули для последующей работы с этими элементами.
Макеты книг, журналов, сайтов, которые сверстаны по модульной сетке, воспринимаются нами гораздо комфортнее, чем созданные без нее. Работа по модульной сетке помогает структурировать информацию, потому что в ее основе лежит принцип группировки. Упорядоченные вещи всегда работают хорошо — вспомните, насколько проще найти вилку в ящике, где все столовые приборы разложены по местам, чем пытаться вытащить ее из переполненной сушилки.
При этом важно отметить, что сетка — не самоцель. Иногда она действительно не нужна, например, при разработке сложного логотипа. Кроме этого, сеткой может служить и сам текстовый блок внутри себя.
Ад перфекциониста: какой дизайн и почему вызывает дискомфорт
В первой статье о принципах дизайна мы выяснили, что наш перфекционизм — это врожденная история. У кого-то он развит в большей степени, у кого-то в меньшей, но в любом случае его корни уходят в историю эволюции.
Иными словами, нам кажется странным, когда что-то выбивается из привычного порядка вещей, например, черная овца среди белых овечек в стаде. Мы воспринимаем это как некий знак. Отсюда же и отношение к солнечному затмению как к посланию языческих богов или каре небесной. Событие было столь редким и так непохоже на обычный заход солнца, что повергало древних людей в панику и ужас.
Нас тревожит все, что выбивается из привычного порядка вещей.
Вспомним все эти гифки с надписями «ад перфекциониста» и «рай перфекциониста». Необычное расположение кнопки или меню выбивает нас из колеи, а привычное, напротив, воспринимается как приятное и удобное. Восприятие непривычных нам вещей как опасных заложено в нас природой.
Этот инстинкт напрямую влияет на дизайн. Именно поэтому незначительные отклонения в каких-либо аспектах дизайна, например, в сетке, цвете, размере или форме, заставляют нас чувствовать дискомфорт.
Верстальщики знают, что немного «поехавшее» выравнивание в сетке приводит к «адскому зрелищу», как и незначительное изменение оттенков или размеров объектов. Например, когда один и тот же цвет в одном месте светлее, в другом темнее, или когда объекты стоят рядом, выполняют одну и ту же функцию, но при этом незначительно отличаются друг от друга. Такой дизайн воспринимается дискомфортно.
Что не так с Facebook* с точки зрения дизайна
В качестве примера взглянем на новый интерфейс Facebook* с точки зрения рассмотренных правил и принципов.
Здесь используются очень близкие размеры шрифтов и элементов, фактически получается хаос из сущностей. Сетка «поехала» и не совпадает практически нигде. Наш мозг не может выстроить из страницы общую картину, а внутренний перфекционист воспринимает интерфейс как хаотичную груду элементов, от которой не стоит ждать ничего хорошего. Единственное, что нам помогает — накопленный опыт работы с такого рода системами.
Ряд ошибок подобного рода допустил и наш молодой дизайнер. Хорошо, что опытные коллеги помогли ему поправить работу.
Дизайнер выбрал очень близкие, но разные, цвета, размеры шрифтов тоже почти одинаковы.
Мы рассмотрели основные законы и правила дизайна. Теперь вы знаете, как общаться с дизайнерами, если у них что-то «поплыло» или «поехало», и владеете безотказной базой с безупречной логикой.
Напоследок я поделюсь инструментами, которые позволят вам лучше ориентироваться в дизайне.
Что посмотреть и почитать про дизайн
Если вы работаете с дизайном, нужно обязательно изучать современные тенденции, то есть развивать насмотренность. Вот несколько агрегаторов, которыми я сам пользуюсь: ищу референсы и изучаю тренды.
Ниже я выделил студии, задающие тренды в мировом дизайне. Их работы для меня — что-то вроде идеала.
Дельные статьи про принципы и правила дизайна, а также про колористику, которую мы не успели затронуть.
Ресурсы, с которыми я работаю по шрифтам и шрифтовой схеме.
Сервис для поиска бесплатных иконок:
Спасибо, что проявили интерес к моим рассуждениям. Надеюсь, они были вам полезны, и вы сможете применить эти знания в жизни.
Подписывайтесь на наш Телеграм, чтобы не пропустить анонс новых статей и кейсов.
*Meta, владеющая Facebook, Instagram и Messenger, признана экстремистской в России.
Спасибо за ссылки в конце статьи :)