Оглавление
Полное руководство по изучению основ визуального дизайна.
Вопрос на миллион долларов: в чем секрет хорошего дизайна?
Мы можем философствовать на эту тему, но в целом, пресловутый "секрет" хорошего дизайна заключается в том, как вы организуете визуальные элементы по отношению к холсту и друг к другу. По сути, мы только что описали дизайн макета, который, если подумать, находится везде, куда бы вы ни посмотрели.
Возьмем, к примеру, макет журнала. Их дизайн соответствует классической системе сетки (о сетках мы узнаем через минуту). Все обычно выравнивается слева, справа и внизу. Колонки особенно имеют четкое выравнивание по центру, что делает страницу не только визуально привлекательной, но и легко читаемой и авторитетной. Крупные заголовки привлекают внимание зрителя.внимание, в то время как подзаголовок контрастирует по размеру, создавая визуальную иерархию информации.
Линда Гаом, Behance
Все эти качества делают дизайн страницы чистым, структурированным и легким для чтения, и они соответствуют советам, о которых мы поговорим далее. Но сначала давайте подробнее разберемся с самим дизайном макета.
Что такое дизайн макета?
Дизайн макета - это расположение графических элементов с целью привлечения внимания читателя и передачи определенного сообщения в визуально привлекательной форме.Мы говорим не о дизайне логотипов, а о дизайне печатных материалов, таких как газеты, журналы, плакаты, и их цифровых аналогов, а также о дизайне веб-сайтов, приложений или UX/UI.
Слово "макет" дает нам много подсказок. Оно означает расположение заранее определенных элементов на странице.
Когда макет эффективен, он хорошо выглядит и помогает зрителю понять смысл, который пытается донести дизайн. Поэтому понимание макета - это ключ к созданию привлекательных, эффективных, удобных и приятных композиций.
Если макет плохо доносит свою мысль до аудитории, или, другими словами, плохо "читается", дизайн будет неэффективным, независимо от того, насколько модно он выглядит. В сфере дизайна макета содержание превосходит тенденции и уловки.
Назначение дизайна макета
Быстро передать сообщение
Дизайн макета устанавливает взаимосвязь между графическими активами для достижения плавного движения глаз для максимальной эффективности и воздействия.
Для создания баланса
Использование принципов дизайна макета - самый простой способ создать ощущение баланса и симметрии в ваших дизайнерских проектах, не становясь при этом скучным.
Для создания сплоченности
Макет помогает вам расположить множество элементов дизайна в легко усваиваемом, целостном и логичном виде.
Создавать красоту
Баланс и структура естественным образом создают красоту. Если ваш дизайн макета выполнен правильно, он автоматически станет визуально привлекательным для зрителя. Чем меньше усилий нужно приложить зрителю, чтобы понять сообщение, тем более привлекательным будет казаться ваш дизайн.
Дизайнер Фрэнк Филиппин для своей книги "Я был студентом-дизайнером: тогда и сейчас". Источник: DesignBoom
Элементы дизайна макета
Текст
Сюда входит не только основной текст или абзацы, но и заголовки, подзаголовки, верхние и нижние колонтитулы. Выбор типографики, цвета и размера будет по-разному влиять на то, как ваш макет будет восприниматься аудиторией.
Изображение
Наиболее распространенными типами изображений являются фотографии, иллюстрации или инфографика.
Формы
Формы могут быть геометрическими, то есть очень угловатыми, или органическими, имитирующими мир природы. Они также могут быть абстрактными. Абстрактные формы были очень модными в прошлом году, поскольку мы видели, как веб-дизайнеры включали их в сложные и разветвленные композиции.
Смотрите также: Цвета радуги для дизайнеровФигуры могут заменить изображение, а также использоваться для добавления графических элементов на страницу, выделения текста или очерчивания пространства между другими визуальными элементами.
Белое пространство
В любом макете должно быть определенное количество белого пространства, которое позволит вашим элементам дышать и выделяться самостоятельно.
Золотые принципы дизайна макета
Вы заметите, что принципы дизайна макета соответствуют многим фундаментальным принципам дизайна, таким как использование цвета определенным образом, типографика, повторение, контраст, иерархия и баланс.
Принцип №1. Используйте сетки
Сетки помогают дизайнерам расположить различные элементы дизайна, такие как текст и изображения, таким образом, чтобы они выглядели согласованно и легко отслеживались.
Они создают ощущение порядка, не дают элементам перегружать друг друга, и, что самое важное, сетки также корректируют выравнивание, делая вашу работу более чистой и профессиональной.
Источник: hgmlegal.com
Анатомия решеток
Вы можете подумать, что это просто вертикальные и горизонтальные линии, но сетка состоит из нескольких частей. На самом деле их много. Вот самая важная терминология, которую вам нужно знать в базовой сетке:
- Формат это полная площадь вашего окончательного дизайна. Так, если вы разрабатываете что-то для печати, формат - это страница, а если вы веб-дизайнер, формат - это веб-страница или окно браузера.
- Маржи это намеренно пустые пространства между форматом и дизайном.
- Проточные линии это горизонтальные линии, которые разделяют ваш макет на параллельные секции. Линии потока помогают читаемости вашего дизайна и направляют читателя правильно следовать содержанию.
- Модули это блоки, которые образуются горизонтальными линиями и вертикальными линиями потока любой сетки. Если подумать, то это строительные блоки любой сетки. Все ваши вертикальные модули создают ваши столбцы, а все ваши горизонтальные сетки создают ваши строки.
- Регионы это группы соединенных модулей, вертикальных или горизонтальных. Нет никаких правил относительно того, как вы решите их организовать.
Источник: Radversity
Типы решеток
Макетные сетки впервые были использованы для организации рукописного текста на бумаге.
Они появились еще в 13 веке, когда французский художник Виллар Де объединил систему сетки с золотым сечением для создания макетов печатных страниц с полями. Эту систему сетки можно увидеть и по сей день, о чем свидетельствует большинство макетов печатных книг и журналов. Издатели, редакторы и дизайнеры предпочитают использовать стандартные сетки не только потому, что они хорошо выглядят, но и потому, что читатели привыкли к ним.ожидать, что определенные элементы дизайна будут находиться в определенном месте.
Сетки могут быть спроектированы двумя способами: симметричным или асимметричным. Симметричные сетки следуют центральной линии, где вертикальные и горизонтальные области равны друг другу, а колонки имеют одинаковую ширину.
В асимметричная решетка Как следует из названия, поля и столбцы не все одинаковые.
На основе этой классификации существует пять основных типов макетных сеток, используемых во всем мире, на которые вы можете положиться:
Сетки для рукописей являются наиболее распространенным видом сетки для документов. Они разделяют верхний и нижний колонтитулы и поля, и в основном создают прямоугольник внутри формата (или страницы), который обеспечивает границы для вашего текста. Они являются основой для журналов, газет и книг. Так что, вероятно, это макет, с которым вы знакомы больше всего.
Источник: UXplanet
Источник: Radversity
Решетки с колоннами еще один фаворит в журнальной верстке. Типичный журнальный макет использует колоночные сетки для разделения текста на удобные для чтения разделы. Но они очень популярны и для веб-сайтов. Вы можете использовать от двух до шести сеток. Больше - возможно, но не часто. Очень важной особенностью колоночных сеток является то, что расстояние между колонками, или желоба, находятся на одинаковом расстоянии друг от друга.другое.
Симметричные колоночные сетки используются, например, в газетах, в то время как в веб-дизайне предпочтение отдается асимметричным колоночным сеткам.
Источник: UX Planet
Источник: Radversity
Модульные сетки Этот тип сетки необходим, когда нужно организовать различные элементы в макете, а сетки столбцов просто недостаточно.
Модульные сетки имеют модули одинакового размера, что позволяет легко визуализировать пространственные зоны различными способами.
Источник: UX Planet
Источник: Radversity
Базовые решетки базовая линия - это линия, на которую опирается текст при наборе, а лидирование - это расстояние между двумя базовыми линиями. Интересно, какого размера должны быть ваши заголовки или подзаголовки?
Базовые сетки помогут придать вашему тексту плавный ритм.
Источник: UX Planet
Источник: Fragaria
Иерархические решетки меньше похожи на сетку, чем все их аналоги. Тем не менее, они очень полезны при организации элементов дизайна в порядке их важности. Иерархические сетки могут быть основаны на модульных сетках, или вы даже можете создать свою собственную. Веб-сайты часто используют эту сетку, особенно цифровые журналы и газеты, как правило, больше полагаются на иерархические сетки, чем на колоночные сетки при переходе к становлениюцифровой.
Источник: UX Plane
Принцип №2. Используйте негативное пространство
Мы часто думаем, что пустота, тишина или отсутствие цвета - это плохо. Но мы не задумываемся о том, что они являются прочной основой контраста.
Негативное пространство, также называемое белым пространством, - это та область дизайна, в которой нет никаких элементов. Это область, остающаяся пустой. Она не просто окружает ваши активы, но и создает необходимые связи между ними. Поэтому негативное пространство является законным элементом дизайна и оказывает огромное влияние на то, насколько эффективным будет ваш дизайн макета.
Хорошее и плохое негативное пространство
Негативное пространство поможет отделить различные области в вашем дизайне, одновременно позволяя макету дышать. Оно помогает визуальной иерархии и визуальному балансу, фокусирует внимание пользователя на основных элементах, снижает уровень отвлекающих факторов, и, наконец, добавляет стиль и элегантность вашему дизайну.
У неопытных дизайнеров может возникнуть тенденция заполнять как можно большую часть холста, увеличивая масштаб текста, раздувая логотип или изображение. Но если дать вашим элементам пространство, зритель сможет быстрее и удобнее уловить определенные информационные сигналы.
Если все кричит, требуя внимания зрителя, ничего не будет услышано.- Аарон Уолтер, "Дизайн для эмоций".
Простой способ определения негативного пространства - использование модульной сетки. Разместив ее поверх вашего дизайна, вы сможете легко представить, какие модули могут оставаться пустыми, а какие следует заполнить.
Дизайнер Brunswicker, Источник: Codesignmag.com
Принцип №3. Выберите одну точку фокусировки
Просил ли вас когда-нибудь клиент сделать логотип больше? А потом сделать заголовок еще больше?
Смотрите также: Советы и примеры резюме графического дизайнераНельзя акцентировать внимание на всем. Это лишает хороший дизайн смысла. Как и время, фокус относителен. Чтобы один элемент выделялся, другой должен служить фоном. Одни элементы должны доминировать над другими, чтобы дизайн отображал визуальную иерархию.
Фокусная точка в дизайне - это элемент, имеющий наибольший визуальный вес. Это элемент, который привлекает взгляд в первую очередь, больше, чем что-либо другое в вашем макете.Фокусная точка объявит вашей аудитории, с чего начинается их путешествие по вашему дизайну. Таким образом, это начало истории, которую вы рассказываете.
Обычно этого можно добиться, используя крупное изображение или крупный шрифт. Обратите внимание, насколько эффективна приведенная ниже фокусная точка
Разработано Браулио Амадо для Bloomberg Businessweek, Источник: Хорошо, что
Но хотя фокусная точка привлечет внимание вашей аудитории, следующее правило поможет направить его.
Принцип №4. Думайте о близости и потоке
Принцип близости прост: убедитесь, что элементы, которые связаны друг с другом, расположены вместе.
Близкое расположение указывает на то, что визуальные активы связаны и становятся единой визуальной единицей, которая помогает организовать ваш макет.Поэтому группируйте только те активы дизайна, которые связаны друг с другом, и используйте информационные карманы в дизайне, чтобы направить аудиторию к тому фрагменту релевантного контента, который она должна потреблять. Это также называется принципом потока.
Источник: Satori Graphics
Дизайн с хорошим потоком будет вести взгляд зрителя по всему макету, от элемента к элементу, с легкостью. Ваши фокусные точки будут притягивать взгляд и становиться местом отдыха, в то время как другие элементы будут задавать направление.
Понять это можно на примере нашего сайта. Графика четко отделена от текста, как и призывы к действию, поэтому внимание зрителя перемещается от одного блока информации к другому.
Принцип №5. Используйте контраст
Убедитесь, что в вашем дизайне достаточно контраста.
Контраст помогает организовать ваш дизайн и установить столь необходимую иерархию и сделать акцент на главном.Более того, хорошее использование контраста также добавляет визуальный интерес ко всему дизайну. Давайте признаем, что макет, в котором все одинакового размера, формы или цвета, будет выглядеть скучно. Контраст привносит разнообразие.
Но хотя цвет является важнейшим принципом контраста, существуют также контрасты типа, выравнивания и размера. И помните, что контраст также относителен. Он имеет значение только в сопоставлении с другими элементами.
Обратите внимание на контраст типографики, цвета и даже на контраст размеров между элементами.
Источник: План действий по примирению МАГ
Принцип №6. Повторение, шаблон, ритм
Когда мы думаем о повторении, мы думаем об одном и том же элементе снова и снова.
Но в дизайне все по-другому. Это определенно не так скучно. При правильном использовании повторение может придать дизайну новые возможности.
Попробуйте определить и повторить мотив во всем вашем макете, чтобы различные области чувствовали себя связанными и частью одной композиции. Это поможет вашему дизайну иметь тему. Повторяя элементы, вы не только обеспечите соответствие ожиданиям вашей аудитории, но и улучшите пользовательский опыт. Последовательность помогает пользователям чувствовать себя более комфортно.
Вы можете сделать это, повторяя фигуры или символы. Или даже цветовую схему, шрифт и один и тот же стиль в целом.
Хорошая привычка - использовать шрифт с большим семейством. Ограничьте количество различных рисунков, весов/стилей линий, цветов и повторяйте их повсюду. Также постарайтесь сохранить единый стиль изображений и графики. Например, используйте иллюстрации одного и того же художника.
Источник: Thepentool.co
Вот и все. Это шесть принципов, которые помогут вам организовать дизайн и добиться более чистого, профессионального и сбалансированного макета.
Но на этом ваше путешествие не заканчивается. Графический дизайн - это не точная наука, и он не должен ограничиваться советами и принципами. Как и во всех других областях творчества, здесь нет жестких правил. Выходя за рамки этих советов в тонких манерах, вы добавите глубину и разнообразие вашему дизайну.
Тем не менее, они являются отличной отправной точкой, и мы призываем вас попробовать их. И дайте нам знать, как они сработали!
Скачать Vectornator для начала работы
Поднимите свои проекты на новый уровень.
Скачать файл
