Асимметрия в дизайне
Симметрия и асимметрия в интерьере
Баланс важен для любой сферы нашего бытия. Равновесие — это гармония и комфорт. Сбалансированные элементы воспринимаются как естественные и правильные. Поэтому баланс — один из основных принципов искусства, включая искусство дизайна. Создавая интерьер, нужно стремиться к равновесию. Однако баланс вовсе не требует полного соответствия и зеркальности. Главное — сбалансированность, то есть более-менее равное соотношение между частями целого.
Нужно визуально разбить интерьер на две части и уравновесить их между собой. В создании баланса принимают участие мебель, цвета, фактуры, декор. Например, если с одной стороны помещения установить тяжелую мебель, а с другой — легкую и прозрачную, может возникнуть дисбаланс. Чтобы уравновесить части, стену возле легкой мебели можно выделить «тяжелым» цветом или «мощной» фактурой. Это будет асимметричный баланс. Да, в асимметрии тоже есть равновесие.
Таким образом, баланс в интерьере бывает как симметричным, так и асимметричным. Рассмотрим их подробнее.
Симметрия в интерьере
Симметрия в интерьере достигается фактическим повторением элементов по обе стороны от оси. Для создания симметричного баланса нужно определить центральную точку ровно посередине одной из стен или в центре комнаты. В этой точке будет находиться композиционный центр. Воображаемая линия, идущая от композиционного центра к точке, расположенной ровно напротив, — это ось, по обе стороны от которой элементы «отзеркаливают» друг друга.
Что может являться композиционным центром? В гостиной это обычно камин или ТВ-стена. Чуть реже — витрина, большая картина, два кресла со столиком или диван. В спальне центром является кровать. В холле — например, консоль. В кухне — плита с вытяжкой, обеденный стол или остров. В любом помещении центром могут быть окно, ниша или выступ.
Симметрия в интерьере создается с помощью парных кресел, мини-диванов, витрин, тумб, шкафов, зеркал, полочек, стеллажей, картин, торшеров, настольных ламп и др. Кроме того, можно задействовать цвет и отделку — например, повторить одинаковые акцентные фрагменты на обеих противоположных стенах, параллельных центральной оси. Одиночные предметы, такие, например, как диван или обеденный стол, могут стоять на оси — так, чтобы она делила их пополам.
Симметричное построение интерьера называют также формальным. Это классическое решение, идеальное для консервативных стилей. В симметрично сбалансированном помещении возникает чувство стабильности, порядка, спокойствия и безопасности. Симметричные интерьеры по духу тем людям, которые склонны к перфекционизму и консерватизму.
Есть у симметрии в интерьере некоторые недостатки. Для маленьких помещений этот план зачастую мало подходит. Дело в том, что симметричное расположение элементов вдоль центральной оси — это рамки и «скобки», делающие акцент на форме и размере помещения. Например, если комната узкая и длинная, симметричный порядок подчеркнет эту ее особенность, сделав комнату похожей на вагончик. Асимметрия, напротив, устраняет рамки и лишает форму жесткости.
Совет. Не стоит стремиться к абсолютной симметрии — это противоестественно. Наши лица кажутся симметричными, но при детальном рассмотрении у любого человека найдется асимметрия. Она и делает нас привлекательными. Родинка с одной стороны, ямочка на одной из щек, зачесанная набок челка — все это придает лицу индивидуальность. Так же и с интерьером: создавая симметричный баланс, добавьте каплю несоответствия.
Асимметрия в интерьере
Асимметричный баланс предпочтительнее, если форма или размер помещения оставляют желать лучшего. Асимметрия больше подходит для современных стилей. Есть еще один плюс у такой планировки: асимметричные интерьеры редко бывают скучными. Они более живые и динамичные. Не зря их называют «неформальными».
При создании асимметричного интерьера можно выбрать композиционный центр, смещенный от срединной точки. За основу может быть взят принцип золотого сечения: нужно сместить центр в пропорции примерно 60% на 40%.
Возможен и полный отказ от единого композиционного центра, хотя это не так легко.
Отделка, обстановка и декор осуществляются с сохранением баланса, то есть принцип равновесия остается в силе. Однако устраняется эффект зеркальности. Так, если в симметричных интерьерах напротив дивана ставят такой же диван или два аналогичных кресла, то в асимметричных все иначе: напротив дивана может находиться одно кресло или стеллаж.
На асимметрию работают угловые диваны и диагональное расположение предметов мебели. Например, кресла можно расположить в углах, поставив их по диагонали. Так же и кровать, установленная под углом, лишит спальню традиционной симметричности.
Достичь цели помогает и разноуровневость предметов. Напротив друг друга располагают мебель или декор разной высоты. Например, у одной стены — высокая витрина, а ровно напротив — низкая консоль. По одну сторону от дивана — высокий торшер, а по другую — низкий столик с небольшой настольной лампой. На кухне справа от плиты — высокий глухой пенал, а слева — тумба и пара открытых полок над ней.
Штору тоже можно откинуть набок и закрепить держателем. Асимметричным может быть и расположение стенного декора: например, на одной стене три картины в ряд, а на противоположной — три декоративные тарелки, размещенные лесенкой.
Важно помнить, что асимметрия должна быть сбалансированной, то есть по «весу» обе половины комнаты должны быть примерно одинаковыми. Зрительно «взвешивать» нужно не только мебель, но и фактуры, цвета, декор.
Асимметрия в дизайне сайта
Асимметрия в дизайне сайта и косые линии — довольно распространенный прием, используемый современными мастерами оформления веб-страниц. Излюбленным приемом многих веб-дизайнеров стало создание неотцентрированного (асимметричного) баланса на целевых страницах сайта. Это позволяет:
- «оживить» целевую, продающую страницу, изначально сконцентрировав внимание пользователей на наиболее важных вещах, сделав визуальный акцент на различных элементах сайта
- облегчить восприятие графической информации
- более эффективно и выгодно использовать свободное пространство
Отсутствие линии симметрии помогает более естественным образом отделить навигацонное меню или сайдбар от остального контента, оставляя больше места для размещения полезной информации. Сама обстановка асимметричности хорошо подходит для эмоционального дизайна, использования персонажей, изображений рекламного характера (брендовых товаров) создающих позитив и усиливающие эмоциональные мотивы. В целом ассиметричный баланс положительно влияет на способность выражать с помощью дизайна различные эмоции, создавая ощущение динамичности.
Несмотря на то, что асимметрия, по своей природе, связана с диссонансом (отсутствие гармонии, несходство) и такие веб-сайты отличаются отсутствием двух идентичных половинок, эффекта зеркалирования — это не мешает получать больше выигрыша от асимметрии в дизайне, чем недостатков.
Ниже демонстрируются свежие примеры сайтов, дизайнеры которых, умело применяя современные технологии и стиль, воздержались от использования равенства обоих частей веб-страниц.
Примеры асимметрии в дизайне веб-страниц
Дизайнер умело использовал фоновое изображение для создания асимметрии на главной странице. Бэкграунд в хедере является функциональным элементом, роль которого — производить впечатление. Уместность его эффектного визуального контента, нужно рассматривать в паре с дизайном логотипа.
The Enterprise Foundation
На сайте также используется нестандартная геометрия, да просто отсутствуют сглаживания или плавные формы. Много криволинейных поверхностей, угловатых линий, элементов зубчатой формы и объектов с резкими очертаниями. Используются приемлемые контрасты с изображениями и надписями. Дизайн основан на чистых, очень ярких цветах, поддерживающих асимметричный баланс этого сайта. Благодаря комплементарным цветам (дополнительные, вторичные цвета цветового круга) и довольно однородным поверхностям дизайн выглядит хорошо сбалансированным, чистым и четким.
DesignBlvd
Еще один сайт с плоским дизайном, на главной странице которого достаточно много контента. Однако текст и заголовки отлично гармонируют с окружающим визуальным контентом. Разметка сайта выглядит асимметричной, но неожиданно удивляет его хороший баланс, и это несмотря на очевидную разницу в размерах миниатюр постов. Светлая цветовая гамма вместе с мягкими приглушёнными цветами изображений создают сдержанный стиль, характерный для сферы бизнеса.
Artegence
В дизайне сайта создается ощущение асимметричности, главным образом благодаря сетке макета. Дизайнер разумно использовал простые прямоугольные формы блоков для устранения путаницы и хаоса, столь свойственных перегруженным контентом сайтам.
Timberline Tours
Создать впечатление от движения на статичной картинке, можно только сфотографировав это движение. Бодрящий вид сайта потребовал смелого дизайнерского решения. Уникальное меню из тематичных изображений буквально разрывает красочное слайд-шоу на главной странице. Треугольными формами создан совершенный баланс сайта — без какой-либо симметрии.
Блог о дизайне и веб-мастеринге
Полезные ресурсы для разработчиков и дизайнеров
Статьи о движке WordPress и сервисе Twitter
Лучшие статьи категории «Веб-сайты»
Подписка
- Статьи (500+)
- Twitter (2350+)
- Google Plus (150+)
- E-mail подписка
- Реклама
- О блоге и команде
16 декабря 2012
Создание неотцентрированого баланса или асимметрия в дизайне
Асимметричные методы в дизайне могут быть визуально интригующими и создавать различные центры координации. Вот несколько вдохновляющих примеров и советов о том, как использовать асимметрию в вашем следующем веб-проекте.
Асимметрия — отсутствие симметрии, но это не означает отсутствие гармонии и баланса.
Асимметричный дизайн может создать ощущение энергии или напряженности, но чувство композиционной гармонии зависит от ее использования. В то время как большинство людей думают в первую очередь о симметрии, как о нормальном природном явлении, вспомните о Витрувианском человеке Леонардо да Винчи или морде животного — асимметрия точно такое же естественное явление. Люди, к примеру, пишут правой рукой, но бывает и левой.
Использование асимметричного дизайна бывает разным. Чаще всего подобная техника используется для создания ощущения хаоса и путаницы. Асимметрия может подчеркнуть движение или действие. Она также используется для создания точки доминирования, координационного центра на экране.
Создавать дизайн, опираясь только на симметрию или асимметрию неправильно. Лучше всего смешивать эти элементы для создания целостной картины.
Использование асимметричного дизайна
Какой вид веб-проекта может выиграть от использования асимметрии? Практически каждый.
Если техника использована верно, она добавляет контрастность и величественность проекту. Главное, структурировать элементы так, чтобы создать определенный баланс. Вы, конечно же, не хотите, чтобы ваша страница имела однобокий вид. Поэтому, нужно размещать элементы на странице так, чтобы они подходили под цели вашего проекта, с балансом либо без него.
Большинство разговоров о симметрии в дизайне заканчиваются на горизонтальной симметрии или асимметрии в части сайта, которая появляется над прокруткой. Асимметрия может создать и баланс, и динамику.
Чаще всего асимметричные методы проектирования используются в сочетании с элементами, которые имеют симметрию. Подумайте о сайте с 350-пикселевой боковой панелью, например. Вы сразу же создаете асимметричную схему, потому что тело сайта и сайдбар имеют разную ширину. Фотография также чаще всего размещается не в самом центре, создавая элемент асимметрии.
Изображения и текст
Единственный путь создать ощущение баланса — это соединить непохожие элементы, такие как текст и изображения. Это распространенная техника, которую используют многие дизайнеры.
Фокус в том, как именно вы сочетаете эти объекты. Это больше, чем просто картинка и пара слов. Настроение фотографии и текста (даже шрифта) должны дополнять друг друга.
Одним из ключевых моментов в реализации этой техники является создание связи между текстом и изображением. Содержат ли изображение и текст одно и то же информационное сообщение? Оформлены ли они в одном стиле? Отражает ли картинка написанный текст?
Изображения и пространство
Пустое пространство на странице всегда соединено с тяжелыми элементами, то есть изображениями и текстом. Пустота в пространстве выделяется на фоне наполненности всей страницы. Яркие тому примеры — сайты в стиле минимализма, с которыми вы можете познакомиться в рубрике «Минимализм».
Посмотрите на направление элементов на картинке, они указывают на текстовое сообщение? На странице есть лицо, повернутое влево? Тогда это создает ощущение движения, которое перемещает пользователя слева направо по странице. Если есть горные вершины, то глаза посетителя будут двигаться снизу вверх.
Еще один способ создания асимметрии: блокировка части видимой области. Блокировка сайдбара и цвета является простым способом этого достичь. (Обычно, при использовании этой концепции, общий вид дизайна асимметричный, хотя дизайн имеет отчетливое чувство симметрии в пределах каждого раздела).
Асимметрия также может быть создана с помощью цветов. Четкие контрасты — белый и черный, к примеру, или противоположные оттенки цветового спектра, могут создать дисбаланс или даже хаос.
Подробнее обо всех цветах в дизайне вы можете узнать из цикла «Анатомия дизайна».
Асимметричные цветовые палитры также естественны, в них есть чувство баланса. Многие виды животных мужского пола имеют почти идеально симметричный окрас, в то время как у женского пола все наоборот. (Это природное явление, чтобы помочь «более привлекательным» самцам увести добычу — самку и дать потомство).
Сбалансированные цветовые гаммы основаны на принципах цветового круга. Комбинируйте и создавайте цветовые подборки, которые отличаются от классических комбинаций для меньшей симметрии и гармонии цветов.
Экспериментируйте с фонами, которые контрастны с изображениями и текстом. Вы создадите асимметрию сразу же, если соедините бледный бежевый фон с неоновым пурпурным цветом, хотя это редко используемое сочетание. Другой распространенный метод заключается в создании элемента с большим количеством цветов и его сопряжение с объектом, содержащим мало цветов или бесцветным.
Заключение
Асимметричный дизайн может быть сложным и красивым. Правильная асимметрия создает почти такой же эффект, как запланированный баланс. Некоторые из лучших сайтов сочетают в себе сильные изображения и текст для равновесия, создавая пространство между изображением и текстом.
Об авторе
Иван Алексеев — один из авторов МотоДизайнБлога, в котором вы найдете материалы по основам дизайна, интересные уроки по фотошопу, интервью с талантливыми дизайнерами, а так же вдохновляющие подборки. Следить за автором можно так же в твиттере.
Асимметрия в дизайне
Асимметричные методы в дизайне могут быть визуально интригующими и создавать различные центры координации.
Сегодня мы публикуем гостевую статью, одного из авторов МотоДизайнБлога. Этот блог — малая энциклопедия дизайна, в которой вы найдете материалы по основам веб-дизайна, интересные уроки по фотошопу, интервью с талантливыми дизайнерами, вдохновляющие подборки и полезные обзоры шаблонов сайтов.
Асимметричные методы в дизайне могут быть визуально интригующими и создавать различные центры координации. Вот несколько вдохновляющих примеров и советов о том, как использовать асимметрию в вашем следующем веб-проекте.
Асимметрия — отсутствие симметрии, но это не означает отсутствие гармонии и баланса.
Асимметричный дизайн может создать ощущение энергии или напряженности, но чувство композиционной гармонии зависит от ее использования. В то время как большинство людей думают в первую очередь о симметрии, как о нормальном природном явлении, вспомните о Витрувианском человеке Леонардо да Винчи или морде животного — асимметрия точно такое же естественное явление. Люди, к примеру, пишут правой рукой, но бывает и левой.
Использование асимметричного дизайна бывает разным. Чаще всего подобная техника используется для создания ощущения хаоса и путаницы. Асимметрия может подчеркнуть движение или действие. Она также используется для создания точки доминирования, координационного центра на экране.
Создавать дизайн, опираясь только на симметрию или асимметрию неправильно. Лучше всего смешивать эти элементы для создания целостной картины.
Использование асимметричного дизайна
Какой вид веб-проекта может выиграть от использования асимметрии? Практически каждый.
Если техника использована верно, она добавляет контрастность и величественность проекту. Главное, структурировать элементы так, чтобы создать определенный баланс. Вы, конечно же, не хотите, чтобы ваша страница имела однобокий вид. Поэтому, нужно размещать элементы на странице так, чтобы они подходили под цели вашего проекта, с балансом либо без него.
Большинство разговоров о симметрии в дизайне заканчиваются на горизонтальной симметрии или асимметрии в части сайта, которая появляется над прокруткой. Асимметрия может создать и баланс, и динамику.
Чаще всего асимметричные методы проектирования используются в сочетании с элементами, которые имеют симметрию. Подумайте о сайте с 350-пикселевой боковой панелью, например. Вы сразу же создаете асимметричную схему, потому что тело сайта и сайдбар имеют разную ширину. Фотография также чаще всего размещается не в самом центре, создавая элемент асимметрии.
Изображения и текст
Единственный путь создать ощущение баланса — это соединить непохожие элементы, такие как текст и изображения. Это распространенная техника, которую используют многие дизайнеры.
Фокус в том, как именно вы сочетаете эти объекты. Это больше, чем просто картинка и пара слов. Настроение фотографии и текста (даже шрифта) должны дополнять друг друга.
Одним из ключевых моментов в реализации этой техники является создание связи между текстом и изображением. Содержат ли изображение и текст одно и то же информационное сообщение? Оформлены ли они в одном стиле? Отражает ли картинка написанный текст?
Изображения и пространство
Пустое пространство на странице всегда соединено с тяжелыми элементами, то есть изображениями и текстом. Пустота в пространстве выделяется на фоне наполненности всей страницы. Яркие тому примеры — сайты в стиле минимализма.
Посмотрите на направление элементов на картинке, они указывают на текстовое сообщение? На странице есть лицо, повернутое влево? Тогда это создает ощущение движения, которое перемещает пользователя слева направо по странице. Если есть горные вершины, то глаза посетителя будут двигаться снизу вверх.
Еще один способ создания асимметрии: блокировка части видимой области. Блокировка сайдбара и цвета является простым способом этого достичь. (Обычно, при использовании этой концепции, общий вид дизайна асимметричный, хотя дизайн имеет отчетливое чувство симметрии в пределах каждого раздела).
Асимметрия также может быть создана с помощью цветов. Четкие контрасты — белый и черный, к примеру, или противоположные оттенки цветового спектра, могут создать дисбаланс или даже хаос.
Асимметричные цветовые палитры также естественны, в них есть чувство баланса. Многие виды животных мужского пола имеют почти идеально симметричный окрас, в то время как у женского пола все наоборот. (Это природное явление, чтобы помочь «более привлекательным» самцам увести добычу — самку и дать потомство).
Сбалансированные цветовые гаммы основаны на принципах цветового круга. Комбинируйте и создавайте цветовые подборки, которые отличаются от классических комбинаций для меньшей симметрии и гармонии цветов.
Экспериментируйте с фонами, которые контрастны с изображениями и текстом. Вы создадите асимметрию сразу же, если соедините бледный бежевый фон с неоновым пурпурным цветом, хотя это редко используемое сочетание. Другой распространенный метод заключается в создании элемента с большим количеством цветов и его сопряжение с объектом, содержащим мало цветов или бесцветным.
Заключение
Асимметричный дизайн может быть сложным и красивым. Правильная асимметрия создает почти такой же эффект, как запланированный баланс. Некоторые из лучших сайтов сочетают в себе сильные изображения и текст для равновесия, создавая пространство между изображением и текстом.
