10 основных правил графического дизайна
В хорошем дизайне есть два важных аспекта: он должен быть привлекательным и служить для передачи сообщения. Когда вы только начинаете заниматься дизайном, придется столкнуться с многими нюансами, которые способны его испортить.
В статье рассказываем об основных правилах, которые помогут избежать тех самых нюансов и сделают ваш дизайн лучше.
Правило третей
Понимание этого базового правила поможет сделать макет симметричным и упорядоченно расположить объекты. Как работает правило третей?
В макете разделите сетку на три вертикальных и три горизонтальных секции, одинаковых по размеру. У вас должно получиться 9 полей. В местах, где пересекаются линии, располагаются фокусные точки дизайна. На примере ниже они обозначены желтыми точками.
Правило третей придаст вашему дизайну симметричный вид. Симметричные элементы воспринимаются как взаимосвязанные и создают ощущение целостности и порядка.
Симметрия не всегда означает хороший дизайн. Иногда нужно разместить элементы асимметрично и сохранить при этом баланс.
Сетка с правилом третей — один из инструментов, который поможет понять, как использовать баланс и ассиметрию в своих интересах.
Якорные объекты
Следующее правило сформулировал арт-директор и автор учебных программ Артем Горбунов.
Оно гласит: «Любой якорный объект должен тяготеть или располагаться в одном из углов или в визуальном центре своего прямоугольника».
Это значит, что в этих точках нужно размещать наиболее важную информацию и элементы.
В первую очередь человек обращает внимание на иллюстрации, затем на крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный.
Визитки — наглядный пример использования якорных объектов. В них отражают самую суть и органично вписывают в небольшой макет картинки и текст. Вне якорных объектов оставляют свободное пространство, потому что желаемого эффекта не добиться, если дизайн перегрузить. Человеку придется напрячься, чтобы вычленить из множества элементов самые важные.
Иерархия
Визуальная иерархия — это грамотная организация дизайна, которая позволяет пользователю постепенно знакомиться с информацией в порядке ее важности.
UX-компания Nielsen Norman Group» провела ряд исследований по отслеживанию перемещения взгляда пользователя. Из них выяснилось, что существует два шаблона движения глаз читателей — F и Z. Ключевые элементы должны располагаться именно по этим маршрутам.
F-паттерн
Дизайнеры чаще всего используют такой шаблон при составлении сайтов и других проектов, которые в основном содержат текстовую информацию. Чтение в любом другом направлении будет неудобным, потому что мы к нему не привыкли.
Взгляд пользователя сканирует верхнюю часть страницы слева направо, затем скользит по левому краю вниз, ищет визуальные подсказки о нужной ему информации. После взгляд возвращается в правую часть страницы и останавливается в фокусной точке справа, в середине или внизу.
Первые два фрагмента, которые человек считывает, являются основными, поэтому они должны быть более заметными. Обычно в этом поле расположен заголовок, конверсионные кнопки или контакты.
Z-паттерн
Дизайнеры, которые чаще работают с изображениями, пользуются шаблоном Z. Все потому, что мозг обрабатывает изображение быстрее текста.
Вся важная информация в таком паттерне размещена в верхней части экрана — от левого угла к правому, затем взгляд сканирует страницу по диагонали и переходит к нижней части экрана.
Обычно шаблон Z используется с призывом к действию в конце страницы.
Можно использовать визуальную иерархию многими способами: создать акцент негативного пространства, нужный интервал и перспективу, настроить выравнивание или оформить вложенные углы макета. Практически все из них строятся на контрасте.
Контраст
Он позволяет зрителю легко определить, какой элемент наиболее важен в вашем дизайне, а что идет вторым и третьим по счету. Прежде чем увеличить размер текста или изображения, убедитесь, что элемент действительно важен и дополняет визуальное сообщение.
Цвет
Цвет — один из способов создания контраста.
Он несет дополнительную информационную нагрузку и может сделать так, чтоб конкретные объекты выделялись на фоне остальных.
Яркие цвета, такие как желтый и красный привлекают внимание больше, чем белый или кремовый, которые кажутся размытыми и далекими. В нижней части иерархии находятся пастельные тона и все оттенки серого.
Цвета с резким контрастом лучше подчеркивают определенные элементы. Например, размещение красного объекта на зеленом или черном фоне привлечет больше внимания, чем тот же красный объект на оранжевом или фиолетовом фоне.
Если нужно подтолкнуть пользователя к действию, элемент стоит выделить ярким цветом. Например, кнопки «Скачать файл», «Подписаться», «Оставить заявку» — такие элементы должны отличаться цветом и контрастом на фоне других.
Запомните: применяя один цвет для нескольких элементов, вы показываете их взаимосвязь друг с другом.
В телеграм-канале графического редактора Flyvi каждую неделю выходят новые советы по работе в редакторе, шаблоны под разные задачи и розыгрыши платных подписок. Подписывайтесь на канал и оставайтесь в курсе последних новостей сервиса.
Размер
Еще один эффективный способ подчеркнуть визуальные элементы. Крупные элементы привлекают больше внимания, чем мелкие. Это могут быть как слова, так и изображения. Они будут не только самыми заметными, но и несут наибольший смысл.
Возьмем, к примеру, газеты. В них всегда огромные заголовки, которые сразу привлекают внимание. Но это применимо не только к обложкам, если полистать страницы дальше, мы увидим, что наиболее важные новости и колонки выделены большим размером шрифта и изображениями.
Теория близости
Суть правила заключается в том, что расположенные рядом друг с другом элементы воспринимаются как обособленная группа. Это правило сформулировал Артемий Лебедев в своём «Ководстве». Рассмотрим, как работает теория близости на примере котов.
Если расставить их на одинаковом расстоянии, связи между ними не будет:
Если одного противопоставить, два других будут восприниматься связано:
Автор приводит в пример верстку текстовой страницы. В таком формате заголовок всегда находится ближе к тексту, к которому относится.
Если пренебречь этим правилом, можно оказаться в похожей ситуации: два совсем не связанных объекта воспринимаются едино из-за близкого расположения.
Почти черный и почти белый
Чистый черный и чистый белый цвета плохо смотрятся в любом графическом дизайне. Черный (#000000) выглядит слишком неестественно, а чистый белый (#FFFFFF) светится, как ювелирный магазин.
Вместо них лучше выбрать близкие к абсолютным цвета, которые не дадут чрезмерного контраста.
Пустое место в дизайне
В дизайне одинаково важны две области: та, которую вы наполняете цветом и информацией, и та, что остается пустой.
Негативное пространство, также известное как белое пространство, создает формы и помогает выделить самые важные элементы вашего дизайна. Никогда не недооценивайте силу простоты.
Например, транспортная компания FedEx используют негативное пространство для демонстрации своей специфики. Между буквами E и X спряталась белая стрелка, которой компания отражает свою скорость и точность доставки.
FedEx Corporation — американская компания, предоставляющая почтовые, курьерские и другие услуги логистики по всему миру
А вот как Tesla решили продемонстрировать преимущество своего электрокара через минимализм. Текст на баннере гласит: «Чтение объявления занимает 3,1 сек, ровно столько времени нужно Model S, чтобы разогнаться с 0 до 60 миль в час.»
Шрифтовые пары
Хорошее шрифтовое сочетание определяет, насколько профессиональным будет дизайн.
Шрифтовая пара — такой прием в дизайне, когда несколько шрифтов комбинируются в тексте и дополняют друг друга. Выбор шрифтов зависит от информационного и эмоционального посыла.
Обычно используют два шрифта разной гарнитуры, потому как большее количество может создать визуальную путаницу. Подробнее про шрифтовые пары рассказали в статье.
Заключение
Строго следовать общим правилам дизайна совершенно необязательно, но важно соблюдать основные из них:
- Самые важные элементы должны располагаться по углам или в центре макета
- Размещайте элементы симметрично и выравнивайте их относительно друг друга
- Фон должен быть контрастным
- Объекты, которые расположены рядом, воспринимаются связано
После того как правила будут в совершенстве освоены вами на практике, вы захотите дополнить дизайн чем-то новым. Только тогда можно попробовать грамотно их нарушить!
Дизайн — не точная наука. В нем нет жестких рамок и правил, но очень важно соблюдать общие рекомендации. Они построены на хороших откликах пользователей и демонстрируют качество работы.
