Всем привет! Сейчас мы с вами разберем не менее важную тему в веб-дизайне, которая дается многим с большим трудом, да и вообще далеко не каждому. Эта тема называетсякомпозиция в дизайневашего сайта. На самом деле намного сложнее, чем, кажется на первый взгляд. Овладеть этим можно, если много практиковаться, просматривать или анализировать работы лучших веб-дизайнеров. Однако прежде чем идти практиковаться, вам нужно получить проверенные, правильные знания. Именно этим мы сейчас с вами и займемся.
Прежде чем мы приступим к изучению основных принципов композиции, надо также знать, что каждый элемент сайта не должен быть сам по себе. Он должен взаимодействовать с окружающими его элементами и гармонично вписываться в общую картину. Это, пожалуй, основное правило, которое вы должны запомнить и всегда им руководствоваться. Ну а теперь приступаем к первому принципу гармоничной композиции в дизайне.
Баланс
Ваша композиция в дизайне может быть сбалансированной. Баланс — это как бы равновесие между элементами сайта в композиции. Такая композиция не придает ощущения того, что какая-то ее часть доминирует над всеми остальными. можно с помощью правильного размещения, раскрашивания и задания правильных размеров различных объектов.
Баланс может быть симметричным, то есть объекты (два серых круга ) в этом случае расположены на одинаковом расстоянии по отношению к какому-то третьему объекту (черный круг ). Проще говоря, симметричный баланс — это синоним «одинаковый «. В нашем случае два серых круга расположены на одинаковом расстоянии по отношению к большому черному кругу (рисунок ниже) .
Также баланс может быть асимметричным. Асимметрия — это полная противоположность симметрии. Это означает, что объекты расположены не на одинаковом расстоянии по отношению к какому-то третьему объекту. Еще баланс бывает радиальным. В этом случае объекты расположены по кругу и расходятся из какой-то одной точки.
Контраст
Контраст — это определенные элементы веб-дизайна, которые подчеркивают значимость друг друга, когда расположены рядом. Например, это может быть белый и черный, большой и маленький, толстый и тонкий. На рисунке в крайнем левом верху мы видим черный, а в крайнем правом верху — белый.
Если они будут стоять рядом, то контраст будет заметен. В следствие этого будет наибольшее внимание. Также если взять, что-то большое и толстое (форма квадрата в крайнем, нижнем левом углу) , и взять маленькое, худое (форма полоски в крайнем правом углу ), и поставить их рядом — также будет контраст.
Значимость и подчиненность
Это значит, что в любом дизайне сайта есть определенная область, на которой сосредоточено внимание посетителя. Это место, на которое сразу падает взгляд человека, как только он заходит на сайт. Все объекты на сайте должны иметь иерархию значимости и подчиненности.
Другими словами, более важные объекты обычно имеют наибольший размер, они ярче по цвету и контрасту. В общем, они привлекают наибольшее внимание.
Делается это очень просто благодаря изменению размеров, формы, цвета, текстуры, подсветки теней и прочих элементов, способных выделить объект и привлечь внимание.
Направление внимания
По сути, в веб-дизайне вы должны как бы сделать тропинку из , по которым должен пройтись человек туда, куда вам нужно. К примеру, вам нужно, чтобы человек заказал на сайте утюг:
- Сначала вам нужно привлечь его внимание. Вы делаете большой и яркий заголовок.
- Далее в подзаголовке подводите человека к теме.
- В тексте с помощью фото и описания выгод, подводите его к совершению покупки.
- В конце вы уже показываете человеку цену и предлагаете ему нажать на кнопку «Заказать товар «.
Весь процесс должен пройти так, как описано выше. Не должно происходить такого, что человек зайдет на ваш сайт и ему сначала бросится кнопка «Заказать » или сама цена, а только потом заголовок. Человек может увидеть большую цену и, не узнав обо всех выгодах, которые вы ему предлагаете, скорее всего, уйдет.
Этого допускать нельзя.
Вы должны управлять вниманием посетителя. Делается все это, как в прошлых примерах (с помощью размера, формы, текстуры и так далее ).
Пропорции
Пропорции — это соотношение размеров фигур, по отношению друг к другу. То есть две фигуры могут быть абсолютно одинаковыми по виду (например, как на рисунке, самая нижняя черная и самая верхняя белая ), но только одна будет больше, а другая меньше.
Все стороны, углы, диаметры и прочие характеристики, всего лишь увеличиваются или уменьшаются на определенное какое-то число.
Масштаб
Масштаб — это реальный размер какого-либо объекта, рассматриваемый по отношению к чему-то (например, по отношению к другим предметам, людям, земли и так далее ).
Кстати, в любых графических редакторах (например, в ), когда надо увеличивать или уменьшать размер с помощью лупы, вам будет показан масштаб картинки в %. Надеюсь, вам стало понятнее, что такое масштаб.
Повторение и ритм
Довольно часто нам нужно будет как-то привлекать внимание пользователя, но одного объекта для этого будет не достаточно. Необходимо будет этот объект повторить или, проще говоря, продублировать. Также это можно использовать для удержания внимания посетителя.
Друзья, приветствую! На связи Ирина. У каждого из нас есть несколько страниц в социальных сетях, а у некоторых – и собственный сайт. Многие из нас научились создавать макеты простых визиток, флаеров, листовок, логотипов, баннеров, а кто-то освоил программы для создания презентаций. Чтобы всё это радовало глаз, было читабельным и смотрибельным, мы поразмышляем сегодня о несложных правилах дизайна: основах композиции.
Композиция - это...
Для тех, кто слышит это словосочетание впервые, поясню: композиция – это предмет (или наука) о правильной компоновке разных элементов в пределах одного пространства (на одной странице буклета, на одной стороне визитки, на одном слайде презентации, на одном баннере, на одной странице сайта и т.д.). И, каким бы ни было это пространство (вертикальным или горизонтальным, маленьким или большим), правила композиции будут одинаковыми. Итак…
Основные правила композиции
- Правило равновесия элементов
Элементы в пределах одного пространства нужно располагать таким образом, чтобы зрительно всё смотрелось уравновешенно, сбалансированно, гармонично. Различают симметричное и асимметричное равновесие. При симметричном равновесии:
При асимметричном равновесии:
- Правило контрастности элементов
Элементы в пределах одного пространства бывают совершенно противоположными по цвету, размеру, форме, текстуре. Располагать их нужно согласно правилу контрастности.
- Правило значимости элементов
Элементы в пределах одного пространства нужно располагать согласно правилу значимости: более значимые элементы нужно выделять цветом, размером, формой, текстурой. Более значимый элемент маленького размера располагают на переднем плане поверх всех остальных.
- Правило единства
Элементы в пределах одного пространства можно располагать таким образом, чтобы они образовывали нечто целостное и единое.
- Правило движения
Элементы в пределах одного пространства можно располагать таким образом, чтобы они создавали ощущение движения. Этого можно достичь и самим расположением элементов, и разными дополнительными фишками: линиями, стрелками, нумерацией.
- Правило пространства
Элементы в пределах одного пространства можно располагать таким образом, чтобы они создавали ощущение пространства. Иногда полезно приблизить элемент к зрителю (например, сделать макро снимок), но иногда тот же элемент можно приблизить к зрителю совершенно противоположным способом – отдалив его, создав вокруг него пространство.
- Правило открытости
Элементы в пределах одного пространства нужно располагать таким образом, чтобы они создавали ощущение открытости. Сравните:
Заключение
Друзья! Используя эти несложные секретные фишки, Ваш дизайн усовершенствуется в разы! Он оживёт, станет визуально привлекательным, в нём будто заработает невидимый магнит. Конечно, это далеко не все секретные фишки. Если тема эта окажется полезной и актуальной для Вас, если Вы хотели бы её продолжения, напишите об этом в комментариях.
Замечали, что художники, веб-дизайнеры и фотографы очень любят поговорить про композицию? Со стороны может показаться, что это секретное знание, доступное единицам, но на самом деле каждый из нас может разобраться в этом вопросе и сделать красивый и правильный , не обращаясь за помощью к профессионалам.
Не совсем понимаете, что такое композиция? Ничего страшного, Если по-простому, то это умение организовывать элементы и объединять их в единое целое - хоть на картине, хоть на фотографии, хоть на сайте. В этой статье мы рассказываем про основы композиции и объясняем, как они работают в веб-дизайне. Цель? Сделать ваш сайт еще более неотразимым, конечно.
Цвет
Ваша задача: выбрать правильные цвета
Цвет считается полноценным элементом композиции. От него во многом будет зависеть то, как люди воспримут ваш сайт, а вместе с ним и продукт. Яркие, контрастные цвета кажутся нам энергичными и бодрыми, приглушенные и комплиментарные - спокойными, расслабленными. Подумайте, какую эмоцию вы хотите вызвать, и подберите подходящую цветовую схему.
Цветовые акценты можно использовать и для привлечения внимания. Контрастные цветовые сочетания, например, черный с белым, бросаются в глаза в первую очередь, поэтому вы можете оформить таким образом важные кнопки - «Заказать» или «Связаться с нами».
Если же вы слабо представляете, какая цветовая гамма вам нужна, возьмите за основу . Или зайдите на сайт Adobe Color CC и поэкспериментируйте с цветами и правилами построения палитры.
Правило третей
Ваша задача: понять, куда что ставить
Правило третей - один из принципов построения композиции. Мысленно поделите страницу на девять равных частей, проведя две горизонтальные и две вертикальные линии. Считается, что люди фокусируются именно на точках пересечения этих линий, поэтому эти места - самые выигрышные. Вспоминайте об этом, когда будете думать, куда лучше поместить фотографию или , например, с предложением подписаться на рассылку или перейти в раздел с покупками.
«Воздух»
Ваша задача: расчистить пространство
Помните времена, когда родители просили вас навести в комнате порядок, «потому что места свободного нет»? Золотые слова. Пространство, или, как говорят веб-дизайнеры, «воздух» - очень важный композиционный элемент. Если его мало - займитесь «уборкой» и не поддавайтесь желанию оставить как можно больше текста, картинок и иконок. Потому что «воздух» иногда гораздо важнее, чем контент.
Людям нравятся «просторные», не перегруженные сайты - от них не рябит в глазах, они доносят четко сформулированную мысль и не дают шанса запутаться. Подумайте, что вы хотите сказать миру, и ограничьтесь парой-тройкой картинок и коротким текстом строго по делу.
Визуальная иерархия
Ваша задача: направить взгляд пользователя на самое важное
Очень много исследований посвящено тому, как люди просматривают веб-страницы. Оказывается, они сканируют экран сверху вниз и слева направо, а траектория движения их глаз в этот момент напоминает букву F или букву Z.
Конечно, для усвоения основ композиции в веб-дизайне необходима практика. И все-таки, глядя на наиболее удачные примеры, можно узнать много полезного. Мы расскажем о наиболее важных составляющих веб-композиции на примере нескольких удачных сайтов.
Найти баланс
Веб-дизайн следует тем же композиционным принципам, что и полиграфический. Один из таких принципов – баланс в размещении контента.
Проектируя текстовый контент, необходимо найти естественный ритм. Это, как правило, соотношение белого пространства и размера шрифта, что дает посетителям определенный баланс в восприятии содержания. После прочтения нескольких абзацев, они начинают усваивать прочитанное и ожидают от сайта демонстрации как то, о чем они прочли можно реализовать, увидеть и т.д.
Но это не означает, что вы должны следовать только этому приему при разработке дизайна сайта.
Домашняя страница Munchery естественно ритмичная, и в то же время не скучная. Контент помещен в столбцах с плавающими иконками и различными фотографиями. Заметьте, что для его организации в качестве основной структуры используется модульная сетка.
Обычно, баланс создается на маленьком масштабе. Разделите свой контент на отдельные части, и выясните, как лучше представить эти области. С практикой, вам будет легче находить правильное решение, которое будет естественным, а конечные результаты будут намного лучше.
Для примера, разберем сайт Polygon. Это игровой он-лайн журнал, содержащий объемный контент, который должен легко восприниматься пользователем. Популярные посты с крупными иконками помещаются в верхней части, чем обеспечивают достаточный уровень популярности.
При прокрутке, вы заметите, что различные сообщения организованы по темам и датам публикации. Некоторые сообщения размещаются бок о бок, а другие организованы в вертикальный информационный поток. Этот прием используется на всей странице и образует последовательный порядок в хаотичном, на первый взгляд, содержании сайта.
Начинающих дизайнеров такой подход может смутить и удивить, но со временем на основе этого шаблона можно научиться создавать весьма удачные дизайнерские решения.
Расположение и взаимосвязь
Создавая композицию, вы решаете проблемы взаимосвязи различных элементов. Соотношение цвета, пространства, симметрии и асимметрии – всему этому невозможно научиться без конкретных примеров. Каждый большой сайт разработан с учетом этих моментов.
Разрабатывая собственные макеты с нуля, вы должны учитывать, как контент связан с каждой пространственной областью дизайна. Сразу же полезно думать о таких элементах как заголовки, абзацы, маркировки списков, изображения или даже о таких больших элементах, как навигация.
Сайт Januar – интересный пример дизайна, организованный вокруг идеи белого пространства и большой типографики. Здесь вы найдете множество больших изображений, а отдельные связи помогают их выделить в общей канве.
Нужно иметь определенный уровень мастерства, чтобы чувствовать себя комфортно в столь детализированных композициях. Такого уровня можно достичь на практике, но, к сожалению, практика будет включать в себя большое количество неудач.
Исследуйте этот сайт – это поможет избежать ошибок и позволит работать продуктивнее. Можно даже скопировать некоторые макеты страниц, чтобы лучше понять, как дизайнеры работают с белым пространством.
Еще один сайт с чередующимися кусками содержания и изображений — Learning Labs. Его шапка особенно интересна тем, что контент, расположенный вверху достаточно компактный. Здесь гораздо больше свободного белого пространства, чем содержания. Как следствие — элементы навигации лучше выделяются на белом фоне.
Прокручивая страницу вниз, вы будете удивлены, увидев, что другие части сайта куда более насыщенные. Фактическое содержание страницы призвано привлечь внимание, поэтому ему уделено больше внимания. Обратите внимание на шрифт — его размер не велик, но все-таки он достаточен для того, чтобы быть центральным элементом дизайна.
Взаимосвязи не организовываются в вакууме. Сначала вам необходимо определить некоторые элементы и порядок построения связи между ними.
Значение контраста
Один из способов создания композиции – контраст. Различия в цветах, текстурах, белом пространстве и типографике – все это отражает идею разных содержательных областей.
В дизайне можно применять контраст, если это необходимо. Изучайте, как использовать определенные цвета, чтобы выделить их на фоне других. Обратите внимание, где текст можно сделать больше, для того, чтобы он быстрее бросался в глаза.
Замечательный пример использования контраста в дизайне можно наблюдать на домашней странице сайта CreateJS.
Она полна различных элементов с разными фоновыми цветами и несколькими уровнями белого пространства. Особенно здорово смотрится навигация, стиль которой сочетает в себе обычный и жирный шрифт в одних и тех же текстовых блоках.
Контраст наблюдается и в цветовой гамме текста, который появляется на странице перед фоновым изображением. В целом, дизайн простой с точки зрения юзабилити, а контент легко воспринимается. Реализация именно этих двух целей – лучший способ создания классной композиции.
Модульные сетки
Полиграфический дизайн вырос на идее композиционных сеток. Естественно, эта идея нашла применение в веб-дизайне и в настоящее время используется для структурирования сайтов.
Веб-сетки немного отличаются от полиграфических, потому что сайты могут быть динамичными. Отзывчивый дизайн позволяет сеткам изменяться в зависимости от размера экрана. Поэтому, необходимо с самого начала думать о том, как содержание будет вписываться в макет будущего сайта.
Возьмем, к примеру, сайт цифрового агентства Huge Inc. Он имеет достаточно хаотичную схему дизайна, с различными разделами, базирующимися на изменяющихся сетках. А их страница с контактами выглядит совсем интригующе.
Домашняя страница Duotones тоже использует различные методы построения сетки. Некоторые области пространства имеют большие визуальные фоны, другие же – просто всплошную залиты цветом. Все вместе взятое, реально очерчивает сетку, которая и положена в основу дизайна.
Модульные сетки предназначены для устаканивания содержания. Они должны передавать общую идею дизайна и взаимосвязи элементов, основанных на пространственной иерархии и позиционировании. Не существует одной единственной мастер-сетки, но есть общие принципы, которым необходимо следовать.
Учитесь видеть
Говоря о композиции, легко увязнуть в деталях, методах, техниках и тенденциях. Это приводит к тому, что общая картина, которая есть значимой частью дизайна, ускользает от внимания.
Чем больше вы создаете сайтов, тем больше понимаете, что выбор той или иной конструкции дизайна взаимодействуете со многими другими вещами. Умение увидеть все в комплексе выходит за пределы простого составления схемы будущего сайта. Вы должны натренировать свой глаз видеть хорошие и плохие конструкции, одновременно понимая и анализируя, почему они хорошие или плохие.
Чем больше различных сайтов вы пересмотрите, тем легче будет понять, как выбор определенной схемы дизайна в целом влияет на композицию будущего сайта.
Дизайнеру полезно собрать своеобразную библиотеку идей, которые в нужное время могут быть вынуты и реализованы. Возможно поначалу, это будут просто заимствованные идеи, но со временем вы научитесь управлять ними и создавать свои собственные стили дизайна. Всякий раз, наталкиваясь на необычную конструкцию, просто сделайте закладку или скриншот. Библиотека визуальных решений имеет огромное значение для понимания того, как создавать что-то действительно стоящее.
Научиться смотреть на вещи глазами дизайнера занимает много времени. Будьте терпеливы. И даже если поначалу это не удается – пробуйте снова и снова.
Таким образом, очевидно, что композиция имеет большое значение. Но что такое композиция? Грубо говоря, это пространство, где отдельные элементы должны превратиться в одно целое, и где изображения, текст, графика и цвета формируются в единый дизайн, в котором все сочетается между собой.
Удачная композиция предполагает, что вы упорядочили элементы и правильно их распределили, и это не только выглядит красиво внешне, но также эффективно с функциональной точки зрения. Поэтому давайте пробежимся по основным советам, уловкам и техникам, которые в считанные минуты сделают из вас гуру композиции.
1. Акцентируйте внимание на главном
Как нам когда-то говорили в школе, распределение акцента — это очень важно. Ключевым элементом любой хорошей композиции является фокус, так как он помогает зрителю в первую очередь сконцентрироваться на самых важных деталях дизайна.
Среди методов привлечения внимания можно отметить масштаб, контраст и указатели, и более подробно о них мы поговорим позже. А сейчас давайте проанализируем приведенный пример.
2. Направляйте взгляд читателя с помощью указателей
Так же, как вы указываете человеку на что-то, что хотели бы ему показать, направляйте взгляд зрителей с помощью определенного расположения линий и различных фигур. Так вы сможете добиться правильного восприятия вашего дизайна.
Скорее всего, вы уже знакомы с одним из самых распространенных видов указателей — схематичных. В схемах используются линии, которые направляют взгляд с одного пункта на другой в достаточно очевидном порядке. Взгляните на эту открытку с приглашением на свидание, выпущенную Paper and Parcel . Дизайнер решил использовать схематичные указатели для передачи информации в интерактивном и необычном виде.
Кроме того, они могут указывать на какие-то связующие элементы текста или небольшие кусочки информации. Как уже говорилось, сначала вы должны сфокусироваться на главном объекте; но куда вы будете смотреть после? Правильно разместив указатели, вы не только сможете контролировать внимание на основных элементах, но и направлять взгляд вашего зрителя по всему дизайну.
Давайте, к примеру, посмотрим на постер от Design By Day , где используются четкие указательные линии, которые сначала направляют вас к основному элементу (названию), а затем к разным сегментам текста.
Разумеется, нет смысла использовать такие очевидные указатели в каждом дизайне, но это не значит, что нет другого выхода. Найдите какие-то фигуры и линии в используемых изображениях и графических элементах и применяйте их для того, чтобы задавать направление взгляду зрителя.
Подобное можно наблюдать на постере 1 Trick Pony , где правая рука мужчины используется для «переадресации» взгляда от изображения к логотипу, и затем к нижней части изображения. Таким образом, формы изображения могут послужить указателями.
3. Масштаб и иерархия
Масштаб и визуальная иерархия — это одни из тех креативных основ, которые могут либо испортить ваш дизайн, либо сделать из него конфетку. Поэтому так важно уметь правильно их применять для создания удачной композиции.
Если говорить вкратце, иерархия — это структурирование элементов в порядке важности. Так, более важный объект вашего дизайна вы можете сделать крупнее и ярче, а вторичные элементы — меньше и бледнее.
Особенно важно учитывать иерархию при написании текста. Для более подробной информации по вопросу иерархии в типографике вы можете обратиться к статье «Почему в каждом дизайне необходимо иметь три уровня типографической иерархии».
Масштаб часто используется для связности элементов иерархии. Крупный масштаб привлекает внимание к определенным объектам, подчеркивая их значимость для правильной коммуникации.
Например, в дизайне этого постера Джессики Свендсен в качестве самого крупного элемента используется увеличенное изображение, что позволяет привлечь максимальное внимание к данному объекту. Заголовок представляет собой самый крупный текстовый элемент, являясь важнейшим элементом информации в данном контексте, в то время как остальная часть текста написана в гораздо меньшем масштабе. Таким образом, масштаб идентифицирует главные объекты дизайна и сохраняет типографическую иерархию.
Масштаб также является невероятно полезным инструментом, когда речь заходит о создании пропорций и чувства размера. Вы можете сделать так, что некоторые вещи будут казаться максимально детализированными, замысловатыми и маленькими, а можете сделать их большими и даже громоздкими.
Создавая контраст между маленьким и крупным элементом в композиции, вы можете добиться самых разнообразных эффектов.
4. Соблюдайте баланс между элементами
Баланс — это довольно важная вещь с точки зрения многих аспектов. И, разумеется, ваш дизайн не является исключением.
Но как же соблюсти этот самый баланс в рамках собственного дизайна? Давайте быстренько пробежимся по двум основным типам баланса и приемам его соблюдения.
Во-первых, существует симметричный баланс. Суть его очевидна — баланс дизайна достигается за счет симметрии. Отражая определенные элементы по обеим сторонам (право-лево, верх-низ), вы добиваетесь абсолютной сбалансированности.
Вот пример симметричного баланса. В приглашении на свадьбу Дженнифер Уик использует симметричную композицию, где текст и графика размещены зеркально. Благодаря симметрии приглашение смотрится элегантным, аккуратным и сбалансированным.
Дженнифер Уик
Второй тип, который, вероятно, встречается гораздо чаще — это асимметричный баланс. Его название также говорит само за себя — баланс достигается путем асимметричного расположения элементов.
Вот пример удачного использования асимметричного баланса. В своем постере Munchy Potato целенаправленно распределил окружности разного размера по разным областям пространства, добившись таким образом асимметрии.
В приведенном выше примере три центральных окружности являются самыми крупными элементами дизайна, но, тем не менее, они сбалансированы благодаря правильно подобранному шрифту, графике и использованию небольшой текстурной окружности в нижнем углу постера.
Для развития навыков создания асимметричного баланса необходимо думать о каждом элементе как о единице, имеющей свой «вес». Объекты поменьше, соответственно, должны «весить» меньше, а насыщенные текстурами элементы должны «весить» больше, чем однородные. Какой бы ни была цель вашего дизайна, необходимо всегда достигать равновесия среди используемых объектов.
5. Используйте элементы, которые дополняют друг друга
Вы, должно быть, слышали о взаимодополняющих цветах, но слышали ли вы о взаимодополняющих элементах дизайна? Один из ключевых элементов удачной и эффективной композиции — это тщательный, целенаправленный подбор каждого объекта дизайна, в котором все должно превращаться в единое целое.
Типичная ошибка при создании композиции — это использование изображений, которые не дополняют друг друга. Поэтому, когда вы решаете использовать несколько изображений, всегда проверяйте, оказывают ли они должное воздействие на зрителя, и существует ли между ними необходимая связь. Вот несколько способов достижения этого эффекта.
Используйте снимки из одной фотосессии. Это невероятно легкий способ удостовериться, что изображения будут связными, учитывая, что они сделаны в одном стиле и принадлежат к одному направлению. Например, дизайнеры Jekyll & Hyde и Елена Бонаноми используют данный прием в одном из разворотов журнала Must.
Изображения должны быть в одной цветовой гамме. В настоящее время существует широкий выбор разнообразных фильтров и инструментов для редактирования фотографий, которые помогут вам сделать так, что выбранные изображения будут принадлежать к одной цветовой гамме, и, следовательно, будут взаимосвязанными. A is a Name сделал свой постер полностью черно-белым, чтобы добиться цветовой связи между объектами.
A is a Name
Выбирайте похожие снимки. Старайтесь комбинировать изображения со сходными параметрами и стилем. Например, если одна из фотографий сделана в минималистическом стиле, необходимо использовать подобные снимки. Ниже приведено дизайнерское решение Feint, где во всех подобранных изображениях можно наблюдать определенные «неровности» — разнообразные текстуры, древесные мотивы и холодные оттенки.
Создание хорошего макета также предполагает правильное сочетание текста и графики, где эти элементы взаимодополняют друг друга. Каждый шрифт в различном окружении имеет определенные оттенки и ассоциации — к примеру, четкий, курсивный шрифт с множеством завитков может ассоциироваться с элегантностью и утонченностью. Поэтому старайтесь подбирать шрифт в зависимости от собственных целей и замысла.
6. Увеличьте (или уменьшите) контраст
Контраст — это невероятно полезный помощник, как для выделения каких-то элементов вашего дизайна, так и для их скрытия. Усиливая контраст, или используя высококонтрастную палитру, вы можете привлечь внимание к определенному объекту. В то же время, уменьшив контраст, вы можете добиться эффекта прозрачности для каких-то элементов, сделав их менее заметными.
В то время как в предыдущем дизайне резонирующий цвет используется для привлечения внимания, в следующем примере он служит для скрытия определенного элемента.
Здесь повторяются некоторые стили шрифтов, графика и линейность, что помогает связать между собой элементы и добиться желаемого эффекта. Если бы автор дизайна вдруг решила использовать где-нибудь в середине какие-нибудь чертежные розовые элементы с полужирными линиями, ни о какой связности не могло бы быть и речи. Но она решила использовать для текста маленький размер, минимизировала цветовую гамму и сохранила графические элементы в изящной простоте, поэтому дизайн вышел удачным.
При разработке дизайна записывайте всю информацию об используемых шрифтах, линиях, цветах и т.д., и старайтесь использовать их повторно для объединения вашего макета в единое целое.
8. Не забывайте о белом пространстве
Чтобы обидеть белое пространство, достаточно назвать его «пустым местом». Пустота предполагает, что она должна быть чем-то заполнена, и поэтому она не «выполняет свою работу» должным образом. Но это не одно и то же.
Когда белое пространство используется целенаправленно, оно помогает повысить четкость и ясность вашего дизайна: когда более нагруженные и замысловатые части композиции сбалансированы белым пространством, ваш дизайн начинает дышать.
Например, взгляните на дизайн, выполненный Cocorrina . Белое пространство помогает достигнуть баланса между картинкой, текстурой и текстом, что придает дизайну изысканность и чистоту.
Итак, как же лучше использовать белое пространство?
Уменьшите масштаб графических элементов. Благодаря этому, вы сможете создать больше белого пространства вокруг центральных элементов, и при этом не выйдете за рамки изначального дизайна. Для наглядности взгляните на дизайн открытки с кулинарным рецептом от Serafini Creative , где основные элементы целенаправленно уменьшены для создания прекрасного обрамления из белого пространства.
Не пытайтесь заполнить все белое пространство. Как уже было сказано, белое пространство — это не пустое место, оно служит определенным целям, поэтому не пытайтесь заполнить каждый его кусочек.
В качестве примера можно привести дизайн веб-сайта от Creative Web Themes , где для презентации товара используется одно изображение, заголовок с полужирным начертанием, две небольшие линии текста и ссылка на дальнейшую информацию. Благодаря такому простому плану и большому количеству белого пространства каждый элемент имеет собственную территорию и может «дышать», что позволяет дизайну выглядеть опрятно и оказывать должный эффект на зрителя.
При создании дизайна всегда спрашивайте себя, все ли элементы на 100% необходимы. Нужен ли весь этот текст, обязателен ли ярко-голубой заголовок, нужны ли все 3 изображения? Удаляя лишние частички из макета, вы можете создать более точный дизайн, который будет только выигрывать за счет белого пространства.
9. Выстраивайте элементы дизайна
При создании композиции, включающей множество объектов, не стоит хаотично размещать их на странице, ведь выстраивание элементов — это быстрый и легкий способ превратить ваш дизайн в конфетку.
Не получается выстраивать объекты? Canva поможет избавиться от этой проблемы буквально за секунду с помощью специального автоматического и очень удобного инструмента. Просто перетаскивайте тот или иной элемент по странице, а Canva выровняет его с другими объектами дизайна и автоматически поставит его на нужное место. Волшебство!
Взгляните на этот идеально выстроенный дизайн из журнала, созданный Huck . Благодаря четкому построению элементов дизайн выглядит отчетливо и точно, он очень удобен при чтении и приятен с эстетической точки зрения.
Последовательное и четкое выравнивание элементов поможет вам также выстроить определенный порядок среди многих объектов. Так, если вы используете большое количество изображений, текста и/или графических элементов, выравнивание должно стать вашим лучшим другом.
Особенно важно умение применять выравнивание при работе с текстом. Существует множество способов это сделать, но одним из лучших остается выравнивание по левому краю, так как для большинства зрителей этот вариант наиболее удобен для чтения и понимания прочитанного.
10. Разделите дизайн на трети
Правило третей — это простой метод, с помощью которого дизайнеры могут разделить макет на 9 равных частей. Там, где пересекаются вертикальные и горизонтальные линии, находятся точки фокусировки.
Дизайнер Уилльям Бичи решил поиграть с этим правилом в своих работах (пример ниже). Его дизайн выглядит эффектно и привлекает внимание за счет того, что на каждом пересечении находится определенная точка фокусировки. Бичи также отмечает, что «Когда вы помещаете объекты не в центр дизайна, а на его периферию, картинка становится живой и интересной».
Использование правила третей поможет усовершенствовать композицию вашего дизайна, так как это один из наиболее быстрых и простых способов размещения и структурирования элементов.
Если вы хотите использовать правило третей в своем дизайне, желательно начать с сетки. Сетка позволит выстроить элементы более последовательно и видеть, как должны располагаться точки фокусировки на макете. Вы можете посмотреть обучение, где рассказывается, как использовать инструмент разметки в Canva, что поможет структурировать и упорядочить ваш дизайн.
Если после долгих часов работы над дизайном он вам наконец покажется эффективным, постарайтесь разделить его мысленно на части и увидеть глубинную структуру. Есть ли там деление на трети? Или он строится на основе другой разметки? Так или иначе, вы можете просматривать различные примеры разметки и черпать вдохновение из них.
Обращение к читателю
При создании композиции следует обращать внимание на многие вещи. Если вы еще начинающий дизайнер, вам скорее всего придется приложить немало усилий и потратить много времени на попытки систематизирования и перемасштабирования объектов, затем снова на их переразметку и т.д., но это нормально.
А у вас есть какие-нибудь хитрости для работы с композицией? Или, возможно, вы знаете примеры каких-нибудь дизайнов с высокоэффективной композицией? В любом случае, не стесняйтесь делиться своими мыслями и идеями по этому поводу в комментариях!