Основа визуального дизайна
Дизайн — это наука, которая изучает привычки человека и его мышление. Он всегда тесно переплетен с психологией.У каждого дизайнера в запасе есть множество приемов и принципов оформления своего макета.
Кода дизайнер только в начале своего пути развития, ему сложно понять глядя на чужие работы, почему одни выглядят хорошо, а другие плохо. Садясь за разработку макета, в голове начинается хаос из мыслей потому, что нет понимания процесса. Дизайнер открывает просторы интернета, для поиска вдохновения и идей, но без четкого понимания того, как это работает, получается неудовлетворительный результат.
Я постаралась собрать самые важные и частые приемы в дизайне. Надеюсь, прочитав о них, ты научишься их замечать и различать, чтобы дальше использовать их в своей работе.
Четкая иерархия
Весь дизайн, будь то сайт, листовка или меню, всегда начинается с продумывания структуры. Для того, чтобы дизайн был понятный, необходимо выдерживать четкую иерархию, вложенность блоков и объектов. Вот основные инструменты для этого:
- Размер. Его роль одна из самых важных. Именно благодаря размеру, мы определяем степень важности объектов. Для того чтобы выделить что-то главное или важное, необходимо сделать его больше, относительно всего остального.
- Заглавия. Каждый заголовок, находящийся внутри другого, должен быть меньше, чем заголовок внутри которого он находится. При этом важно наследовать размеры и стили шрифтов во всех заголовках одинакового уровня. Самый большой заголовок (h1), может быть у блока только один.
- Цвет. При помощи цвета так же можно показать степень важности объектов. Можно использовать яркие плашки под словами, заглавиями или объектами, тогда они будут привлекать внимание в первую очередь, а значит будут важней.
Группирование
Для лучшего восприятия, каждый блок и информация должны группироваться по смыслу и отделяться друг от друга.
Дизайн будет выглядеть аккуратней и логичней. Нашему мозгу свойственно группировать увиденное потому, что так легче воспринимать и запоминать полученную информацию. Для того, чтобы отделить блоки для визуального группирования можно воспользоваться :
- Воздушным пространством и близостью объектов по отношению друг к другу. Объекты относящиеся к одному блоку, должны стоять близко друг к другу и иметь больший отступ по отношению к другим блокам. Если соблюдается воздушное поле вокруг групп объектов, дизайн всегда будет выглядеть хорошо и чисто. Такой прием хорошо служит при оформлении небольшого количества контента. Если же необходимо группировать много контента, воздушного поля может быть недостаточно и тогда можно воспользоваться плашками.
- Плашки – это прямоугольники на фоне залитые цветом, которые стоят под всеми объектами или частично. Объекты, которые объединены плашкой, сразу же буду выглядят одним целым. Если плашек становится слишком много, дизайн может стать перегруженным. Поэтому все способы необходимо чередовать между собой.
- Можно еще воспользоваться линиями и разделителями между или вдоль блоков. Их используют чаще всего для легкого разделения или объединения.
Работа с сеткой и пятнами
Мы часто слышим о работе с модульной сеткой. Всего 10 лет назад, она не была такой популярной. Сейчас о работе с ней написано много статей, потому что не представляют существование дизайна без сетки. Для чего она нужна? Если кратко, то ее роль — структурировать дизайн по невидимым линиям. Модульная сетка — это набор прямоугольников или квадратов, по которым мы расставляем объекты. Каждый такой прямоугольник или квадрат можно рассматривать как пятно в композиции потому, что она тесно связана с композицией.
Композиция всегда важней модульной сетки. Для построения хорошей композиции, художники часто прищуривают глаз так, чтобы изображение выглядело размытым. Таким образом они смотрят какое пятно самое темное, большое, важное. Расставив свои объекты, мы так же можем прищурить взгляд или отдалить изображение настолько, чтобы объекты в нем воспринимались пятнами.
На картинке справа мы видим, что самыми важными являются красные пятна, затем фото, затем заглавие. Правильно ли расставлены акценты? Хотел ли автор привлечь настолько внимание к красному прямоугольнику, который не является кнопкой и не несет никакой смысловой нагрузки, кроме визуальной?
Такой способ помогает нам увидеть правильно ли акцентирован контент и построена композиция. Или например, если при отдалении два блока слились в одно пятно, между ними должно быть больше пространства. Если важный блок теряется на фоне других пятен — его надо увеличить или сделать ярче. Если композиция завалена — ее на надо уравнять.
Модульная сетка, служит завершающим этапом. Сначала мы создаем композицию, соблюдаем иерархию, группируем, расставляем объекты по степени важности и только в конце выравниваем макет по модульной сетке, но не наоборот. Иногда объекты визуально стоят на своих местах, а когда мы их ставим по сетке это выглядит плохо. Визуальное всегда в приоритете, поэтому если идти в обратной последовательности, гармоничный и структурированный дизайн может не получиться.
Воздух. Бояться?
Особое внимание хочу уделить белому пространству. Благодаря достаточному количеству воздуха вокруг объектов, дизайн выглядит чистым. Все начинающие дизайнеры его боятся.
Белое пространство это не его отсутствие, это инь и ян, они должны находиться в гармонии. Дизайнер находит баланс между занятым и свободным пространством, тем самым создает композицию и улучшает восприятие информации.
Важно понять и научиться объяснять заказчику, что белое пространство — это не пустота. Это инструмент, благодаря которому, можно выделять и обращать внимание.
Направление взгляда
Задача всех инструментов и приемов в дизайне — подать информацию таким образом, чтобы человек воспринял ее поэтапно и в нужный момент.
Для этого можно использовать разные приемы графического оформления, чтобы направлять взгляд и соединять информацию в единую схему. Можно делать следующим образом:
- Ставить объекты соединяющие два блока. Например объект может стоять на ⅔ на одном блоке и налазить на ⅓ на второй, тем самым показывая взаимосвязь между ними.
- Линии вместо стрелок. Стрелки всегда использовали для привлечения взгляда, но в мире лаконичного дизайна они могут выглядеть довольно грязно, поэтому можно использовать просто линии.
- Расположением объектов также можно направлять взгляд человека.
Ритм. Ритм. Ритм.
В нашем мире все циклично. Мы привыкли к тому, что какие-то вещи чередуются и повторяются: времена года, наше настроение, мода и т д. Все это имеет природу цикличного повторения,что в свою очередь образует ритм.
Ритм очень важен для целостного восприятия дизайна, так как мы к нему привыкли.
Но где же его применять и как? Везде! Мы должны ограничиться несколькими шрифтами, их размерами, цветами, формами блоков или объектами, а потом просто чередовать их, не добавляя ничего нового.
Диагонали
Диагонали служат отличным приемом для создания динамики. Еще издавна художники использовали их в своих картинах для передачи движения.
Если твой дизайн связан с чем то динамичным, например спортом, детьми, вечеринками и т. д., то этот прием именно для тебя. И наоборот, если тебе необходимо проассоциировать то, что ты делаешь с чем-то надежным и статичным, диагонали лучше не использовать. Самый простой способ — это диагональные плашки, более сложный — типографикой или размещением блоков.
Мозг додумывает сам
Возвращаясь к теме нашего мышления, хочу рассказать про то, как мы все додумываем. Как часто в вашей жизни случались ситуации, в которых ты додумываешь конец? Или видишь в формах простых предметов другие объекты, которых на самом деле нет?
Мы привыкли фантазировать и додумывать то, чего нет.
Как же это можно использовать в дизайне? Очень просто! можно скрыть часть слова или буквы, заменить силуэт объекта чем то другим, показать только часть изображения. Еще очень популярным приемом в данной теме, является работа с негативным пространством.
Негативное пространство — это пространство, которое не занято содержимым.
Его чаще всего используют при создании логотипов.
Вектор настроения
Проведем эксперимент. Посмотри на изображение ниже и скажи, куда едет авто? Вперед или назад?
Большая часть людей отвечает — назад. Все потому, что многие жизненные процессы связаны с движением слева направо: движение земли, часовой стрелки, таймлайн на видеоплеере, письмо у западного народа. Направление слева направо интуитивно воспринимается как положительное, как движение вперед. Ниже изображение с негативными и положительными направлениями.
Не забывай про них при работе с дизайном и правильно используй при создании определенного восприятия. Ниже я подобрала примеры логотипов с положительным и отрицательным направлением. Попробуй на них посмотреть и проанализировать собственное восприятие.
Эффект заслонения или перекрытия
Мы живем в трехмерном пространстве и привыкли видеть, как предметы перекрывают друг друга. В графическом оформлении это так же можно интересно использовать. Достаточно просто сделать эффект заслонения, перекрыв один предмет другим.
Элементы на вынос
Еще одним прием, основанный на додумывании — выносить что-то за пределы рабочего пространства. Принцип почти такой же, как и с додумыванием элементов. Мы все привыкли видеть границы пространства: комната, лист бумаги, окно, монитор и т.д. Если создать ощущения отсутствия этих самых границ — это будет хорошо восприниматься подсознательно. Человек будет как бы воображать, что пространство выходит за привычные рамки.
Инверсия
Четким определением инверсии — есть изменение цвета на противоположный. В дизайне, я вкладываю в это более широкий смысл. Это могут быть не только цвета. Это могут быть инверсии картинок, текста и любых других объектов, которые мы не привыкли видеть наоборот.
Какой же дизайн без типографики?
За последние несколько лет шрифты сильно увеличили свою популярность. Все больше появляется сайтов, дизайн которых держится почти на одной типографике. Сайты пестрят большими красивыми буквами и экстравагантными цветовыми парами. Для того, чтобы классно использовать шрифты, необходимо разобраться хотя бы в базовых фишках, которые могут существенно освежить ваш дизайн. На эту тему можно почитать много углубленных статей о типографике и ее использовании. Я расскажу о самых популярных и базовых.
Размер определяет
В заглавиях должен быть большой кегль, как минимум по двум причинам. Первая — буквы красивые, вторая — заглавия важны. Если между текстом в абзацах и текстом в заглавиях маленький контраст (разница в размере шрифта)- это ухудшает визуальное восприятие дизайна.
Вертикальная типографика
Однозначно, вертикальная типографика добавляет интерес, но с ней надо быть аккуратным. Она имеет значительно худшую читабельность, и важную информацию лучше не располагать по вертикали. Вертикальные надписи прекрасно подойдут для вторичной роли, например: подписи, нумерация, категории и т.д.
Интерлиньяж
Это пространство между строками, его еще называют междустрочным расстоянием. Стандартный 120 % от размера кегля шрифта. То есть, если размер шрифта 10 pt, то интерлиньяж 12 pt. Для красивых, воздушных абзацев с текстом, такая пропорция мала. Лучше брать 150%. Есть некая закономерность:
Чем больше длина строк и количество слов — тем больше нужен интерлиньяж.
Например, в заглавиях можно вовсе убрать интерлиньяж и получить интересный прием. Как правило, заглавия короткие и имеют несколько слов, следовательно, читабельность от этого не упадет.
Кернинг и трекинг
Кернинг — это визуальное выравнивание расстояния между буквенными парами.
Трекинг — это равномерное изменение расстояния между всеми буквами.
Кернинг нельзя отнести к параметру визуальных приемов, а вот с трекингом частенько играют. Чаще всего увеличивают трекинг в заглавиях или коротких надписях. Опять же, потому, что в большом количестве текста, слова и буквы сольются в одну кашу и нарушится читабельность. Важно то, что трекинг увеличивают исключительно в словах написанных прописными буквами. В строчных, его не используют, это выглядит плохо. Так происходит из-за того, что в строчных буквах больше округлых форм и выносных элементов, которые нарушают общую форму слова. В прописных же, все четко под линеечку и слово выглядит более целостно, несмотря на разреженность букв.
Заглавия и шрифтовые пары
Шрифтовыми парами называют сочетание двух очень разных шрифтов, которые считаются между собой.
Они нужны для того,чтобы дизайн выглядел интересней, чтобы разделать первостепенное от второстепенного. Чаще всего берут необычный красивый шрифт для больших заглавий и более простой и читабельный для основного текста. Если сложно подбирать самим, можно легко найти в гугле готовые пары.
Желаю красивого дизайна и вдохновения. На самом деле, можно найти и категоризировать гораздо больше приемов. Мой совет — просматривая работу, которая тебе понравилась, анализировать все что в ней есть. Таким образом ты научишься замечать за счет чего дизайн выглядит хорошо и применять это в своих работах.
