В вашем дизайне могут быть использованы самые красивые графические элементы в мире, но если в нем нет правильно композиции, все напрасно.
Таким образом, можно с уверенностью сказать, что композиция в веб-дизайне крайне важна. Что собой представляет композиция? Говоря простыми словами, это то, как отдельные элементы веб-дизайна формируют общую картину проекта.
Правильная композиция означает, что вы расположили, распределили, согласовали и скомпилировали ваш проект таким образом, чтобы он не только хорошо выглядел, но и являлся функциональным и эффективным. Итак, давайте рассмотрим несколько приемов для создания гармоничной композиции в вашем веб-дизайне.
Определите фокус
Ключевой элемент любой хорошей композиции – правильно направить (сфокусировать) взгляд пользователя на самые важные элементы дизайна.
При выборе точки фокуса помните, что главная цель вашего дизайна – «общение» пользователя с сайтом. Правильный выбор фокуса определяет эффективность такого общения.
Существуют некоторые методы для определения фокуса в дизайне, например, масштаб, контраст и т.д. Эти методы мы разберем позже. Сейчас проанализируем пример.
Это работа Мэтью Метца (Matthew Metz) для ретейлера модной одежды Nordstrom, поэтому фокус находится на модели и ее одежде. Поэтому она была помещена в центр, а оранжевая окружность размещена так, что выдвигает на первый план и привлекает внимание к ее лицу, а потом к ее наряду. Кроме этого, на изображении присутствуют белый ведущие линии, которые направляют взгляд пользователя к текстовой информации внизу.
Также и в следующем примере дизайна. Фокус направлен на человека в центре. Это достигается не только расположением персонажа в центр, но и с помощью «обрамления» его графикой, состоящей из нарисованных от руки изображений.
Ведите взгляд с помощью направляющих линий
Когда вы хотите, чтобы человек посмотрел куда-либо, вы показываете рукой или пальцем. В случае дизайна, для этого используются направляющие линии и формы. Взгляните, как это используется в примере ниже.
Ведущие (направляющие) линии также могут вести вас к разным уровням информации. Позиционирую и изменяя вид и форму направляющих линий, вы можете создавать иерархию целей для взгляда пользователя. Пример такого приема ниже.
Конечно, не каждый дизайн, который вы создаете имеет такие очевидные направляющие линии. Их использование достигается соединением или совмещением разных элементов. Примером этого способа является следующий постер, который использует линию левой руки человека, чтобы направить взгляд от логотипа к человеку и дальше на нижнюю часть постера.
Масштаб и иерархия в композиции
Масштаб и иерархия – это фундаментальные элементы, которые действительно могут «создать» или «похоронить» весь ваш дизайн. Поэтому очень важно их контролировать, чтобы получить хорошую композицию.
Иерархия – это расположение элементов в дизайне, визуально характеризующее их значимость. К примеру, более важные элементы делаются больше и иногда ярче, чем второстепенные. Иерархия имеет огромное значение особенно, когда речь идет о типографике.
Масштаб часто используют, показать иерархию, направляя внимание на важные элементы, таким образом обозначая их важность в передаче информации. Масштаб также используется для передачи вашему дизайну пропорции и чувства размера. Вы можете создавать элементы невероятно подробными, запутанными и крошечными или же большими и общими.
Например, постер ниже использует уменьшенные в масштабе силуэты двух людей, чтобы передать грандиозность вида напротив них.
Используя контраст масштабов элементов, вы можете создавать разные эффекты.
Баланс элементов
Баланс – это важная вещь во многих отношениях. И ваши проекты – не исключение.
Но как же найти этот совершенный баланс в наших проектах? Для этого рассмотрим два общих типа баланса.
Симметричный баланс. Создает симметрию в проекте. Располагая важные элементы с права налево, с верху вниз, вы создаете правильное чувство баланса у пользователя.
Асимметричный баланс достигается пропорциональным рассеиванием и масштабированием элементов.
В примере сверху, три центральные окружности являются самыми крупными в дизайне. Но они сбалансированы по средствам использования правильной типографики, направляющих линий и небольшой, но четко прорисованной окружности в левом нижнем углу.
Хорошим способом создания асимметричного баланса является представление, что каждый элемент имеет реальный вес. Маленькие объекты весят меньше, большие наоборот. Также можно представлять, что на вес влияет четкость текстуры объекта (более четкие весят больше). Таким образом, располагая элементы, чтобы они не перевешивали друг друга.
Используйте элементы, которые дополняют друг друга.
Вы слышали о дополнительных цветах в веб-дизайне? Как на счет дополнительных элементов?
Хорошая и эффективная композиция достигается, когда каждый элемент дополняет какой-либо другой, создавая общую картину. Распространенной ошибкой в композиции является выбор не подходящих друг другу изображений. Поэтому используя несколько изображений в композиции, стремитесь к тому, чтобы они сочетались. Для этого необходимо следовать нескольким советам
- Используйте фото из одной фотосессии;
- Окрашивайте ваши фотографии в один тон;
- Используйте фотографии, сделанные одним способом.
Увеличьте (уменьшите) контрастность
Контраст невероятно полезный инструмент обозначения важности элементов вашего веб-дизайна. Увеличивая контрастность или используя контрастный цвет, вы можете поставить элемент на передний план или же «спрятать» его.
Оставляйте пустое пространство в проекте
Пустое пространство в дизайне, если оно используется правильно, может помочь повысить «четкость» дизайна и улучшить общий вид, уравновешивая более сложные и оживленные элементы дизайна.
Вот пара способов, как использовать пустое пространство в проекте:
- Уменьшите масштаб графических элементов;
- Не заполняйте все пространство контентом.
Выравнивание элементов
Когда создаете композицию элементов в дизайне, никогда нельзя просто бросать все их сразу на страницу, потому что выравнивание элементов – это быстрый и простой способ превратить дизайн из посредственного в шикарный.
Выравнивание элементов позволяет создать логический порядок в веб-дизайне, который распределит множество элементов.
Основы композиции в графическом дизайне включают в себя множество аспектов, учитывая которые можно добиться прекрасных результатов.
Каждое визуальное решение обладает своим эмоциональным и ассоциативным воздействием, которое определяется особенностями композиционной организации. Все выделяемые приемы и средства художественной выразительности направлены на достижение гармонии. Гармония в графическом дизайне (от греч. harmon?a) — стройная согласованность частей объекта дизайн- графики. Она предполагает создание благоприятных для зрительного восприятия визуальных решений.
Композиционный прием представляет собой синтез различных средств композиции. Как отмечает А.А. Барташевич:
Композиционный прием воплощает в себе единство использованных средств композиции. В силу этого он является важнейшим средством, которое выступает организующим началом в работе над формой и определяет стратегию творческого поиска [1] .
Проектирование дизайн-графики зависит от ее концепции, которая будет определять диапазон и степень используемых композиционных средств, но роль композиционного приема от этого менее значительной не становится.
Ритм, метр. Различные проявления природы способствовали возникновению у человека чувства ритма (восход и заход солнца, строение растений и деревьев и т.д.). Ритм всегда подразумевает движение, он может быть строгим и свободным, явным и приглушенным, скрытым, активным и спокойным, порывистым и плавным и т.д. Активность ритма зависит от того, насколько выражено чередование в композиции (илл. 2.84). Ритм представляет собой определенный порядок чередования чувственно воспринимаемых элементов. Ритм может строиться на чередовании линий, пятен света, тени, цвета, одинаковых элементов композиции, на изменении величины элементов, а также интервалов между ними.
Илл. 2.84. Журнальная реклама крема
Значение ритма в организации композиции велико. Ритм способствует управлению движением взгляда зрителя, а также помогает создать целостное восприятие дизайн-объекта. Он определяет не только размерность, но и направление композиции. Если ритм слишком короткий, то он не в состоянии взять на себя организующую роль. Ритмический ряд предполагает не менее трех элементов (илл. 2.85). Два элемента еще не создают впечатления закономерного повтора, так как воспринимаются скорее как начало или фрагмент ряда.
Метр представляет собой простейший порядок [2] , частный случай ритма, когда происходит чередование элемента через одинаковые интервалы. Метрический строй создает впечатление равновесия, инертности. При слишком близком расположении повторяющихся элементов в метрическом ряду он может восприниматься перенасыщенным, при большой протяженности — монотонным. Метрический ряд может сочетаться с ритмическим, который добавляет в композиционную организацию большую выразительность и эмоциональность. К примеру, в основе композиции рекламы, задача которой показать функциональные свойства рекламируемого товара, может эффективно использоваться метрический ряд (илл. 2.86), так как позволяет визуально сравнить товары одной категории. Наглядность, выразительность данной рекламы усилена ритмом форм сопоставляемых объектов. Другой пример (илл. 2.87) демонстрирует диапазон возможных цветовых оттенков лака для ногтей, за счет чего достаточно продолжительный метрический ряд не воспринимается однообразно.
Илл. 2.85. Журнальная реклама кухонь
Илл. 2.86. Журнальная реклама мыла
Илл. 2.87. Журнальная реклама косметики
Стоит отметить, что ритм может развиваться в различных направлениях: по вертикали, по горизонтали, в глубину. Рекламная композиция, как правило, строится на сочетании разных ритмических рядов, что наделяет ее определенным характером, эмоциональным звучанием.
Через активное композиционное движение путем нарастания или убывания чередований ритмического ряда создается образное впечатление движения, его эмоционально-чувственное переживание (илл. 2.88, 2.89).
Илл. 2.88. Журнальная реклама ювелирных изделий
И вот мы успешно объединили предметы по группам, создали области интереса, но интерьер почему-то выглядит чересчур однородным или разрозненным. Чего же не хватает? Тут помогут различные приемы, которые также используются и в живописи, в рекламе, в кино и при создании различных печатных материалов, да и в других видах деятельности, связанных с визуальным восприятием.
1. Ритм
Ритм облегчает восприятие. Он может быть основан как на простом повторении некоего предмета или формы (то есть вы ставите несколько одинаковых ваз или столиков), так и на некоей закономерности изменения их свойств.
Повторение
Растягиваем линию из одинаковых элементов. Такой прием хорошо подойдет, если есть большая незанятая стена, которую необходимо как-то декорировать, а также когда надо отделить одну зону от другой (например, ряд одинаковых растений в кадках, ряд колонн и так далее). Если места не хватает, то задумайтесь о ряде светильников, ряде одинаковых статуэток на длинной полке.
Ритм также достигается, когда последовательность из позиции, размера или цвета прерывается, а потом повторяется снова.
Ритмичность сохраняется и при последовательном изменении свойств предметов. Правда, для этого надо большее их количество, чтобы зрителю было понятно, какую идею вы продвигаете. Меняться может количество, расстояние между элементами, их цвет, размер или форма. Важно, чтобы это происходило постепенно.
2. Баланс
Идея баланса в том, чтобы не было сильного перекоса в сторону одной из групп, это создает дисгармонию. Если обобщать, то баланс означает, что каждый предмет должен находиться в равновесии с другими. Это обширное понятие, которое включает в себя распределение масс, симметрию и асимметрию, и масштаб.
Баланс основывается на визуальных массах предметом. Элементы одного «веса» входят в один класс и стоят на одной иерархической позиции.
Симметрия
Элементы с одной стороны симметричны элементам с другой. Симметрия широко применяется в классических интерьерах, и не только. Особенно я рекомендую симметрию в случаях, когда в интерьере много сложных негеометрических форм, которые с трудом составляются в группы. В таких случаях симметрия – палочка-выручалочка любого дизайнера.
Радиальность
Частный случай осевой симметрии. Элементы располагаются вокруг центра на равном расстоянии от него.
Асимметрия
Элементы с одной стороны отличаются от элементов с другой. Асимметрию построить сложнее, но она выглядит интересной и динамичной. Это любимый прием стиля либерти, но она применяется также и в тех стилях, которые работают с упрощенными геометрическими формами, прибавляя интереса и игры.
3. Масштаб и пропорции
Масштаб
В основе масштаба лежит соотношение размеров. Размеры не должны спорить между собой, большая часть проблем возникает, когда слишком крупную мебель пытаются запихнуть в тесное пространство.
Пропорции
Соотношение – элементы подбираются в зависимости от визуальной гармонии. Например, по принципу «Золотого сечения».
Золотое сечение – очень распространённый принцип в архитектуре и дизайне. Он очень гармоничен из-за своей природности. Именно по этому принципу «построен» лист дерева, панцирь улитки или человеческое тело. Когда создавался новый дизайн Twitter, был взят именно этот принцип для шаблона страницы.
Чтобы получить пропорции золотого сечения в интерьере, нужно применять коэффициенты 0,618 и 1,618. Например, если вы хотите сделать многоуровневый потолок или часть стены отделать деревянными панелями, а на остальную часть поклеить обои. Возьмите размер и умножьте его на 0,618. Результат вычтите из исходного размера. У вас получится два числа с данной пропорцией.
4. Иерархичность
Хороший интерьер построен на игре ассоциаций, все предметы в нем рассказывают одну и ту же историю. Иерархия вносит в нашу историю рациональные нотки, и одновременно помогает “считать” историю в определенной последовательности.
Древовидная
Древовидная иерархия – элементы вытекают друг из друга, как ветки у дерева. Крупные переходят в средние, средние в мелкие.
Сетевая
Сетевая иерархия – элементы логически вытекают друг из друга, образуя разветвленную сеть.
Zaha Hadid’s boutique for Stuart Weitzman. Hong Kong
Как вы видите, дизайн интерьеров – это очень просто! Это как играть на фортепьяно: достаточно в нужной последовательности нажимать на клавиши и получится музыка. И есть довольно большое количество людей, которые справляются с этой задачей весьма неплохо. Конечно, в реальности все несколько сложнее, но продолжая аналогию с фортепьяно, когда человек хочет научится играть, он приглашает репетитора. Репетитор не играет, он подсказывает, как это нужно правильно делать самому.
Если вы решили сделать дизайн интерьера сами, то можете пригласить меня для разовых консультаций. Учитывая, какое количество всякой информации вы уже прочитали (я, конечно, рассчитываю на то, что вы прочитали все три статьи из этого цикла), мы будем на одной волне. При помощи консультаций вы избежите распространенных ошибок, сэкономите бюджет и получите профессиональный качественный дизайн, сделанный вами по собственному вкусу.
Далее Часть первая: Группировка
Далее Часть вторая: Выделение центра
Понравилась статья? — Поделитесь в соцсетях или оставьте комментарий