Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 151 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Дизайн

Введение в использование асимметрии

  • 17.11.2011

Автор — Патрик МакНейл, писатель-фрилансер, разработчик и дизайнер. Он любит писать статьи о веб-дизайне, а также рассказывать о специфике веб-девелопмента и строении веб-сайтов. Его книги вы можете найти на сайте TheWebDesignersIdeaBook.com

Перевод – ресурс готового дизайна МногоЛого

BullyEntertainment

Этот яркий дизайн может служить хорошей стартовой точкой длявведение в понятие асимметричного дизайна. Хотя в действительности нет никакой причины, по которой этот дизайн не мог бы быть изменён в сторону идеальной симметрии, он в таком случае просто не будет работать так же хорошо. Большие, хорошо иллюстрированные образы создают замечательный контраст с текстом домашней страницы. Размер этих образов позволяет обеспечивать их отличную видимость. Они являются главной движущей силой дизайна. Этот естественный баланс между единственным крупным элементом и остальным, более плотно скомпанованным содержимым сайта является довольно распространённым в веб-дизайне.

Bully Entertainment

JorgeRigabert

На этом примере представлена довольно стандартная веб-страница. Небольшая боковая колонка, в которой содержится вся ключевая навигация, сочетается с большей по размеру колонкой для размещения контента сайта. Это, пожалуй, один из самых проблематичных среди стандартных макетов, которые дизайнеры используют каждый день. Я считаю, что большая часть процесса создания такого дизайна происходит полуавтоматически. Обратите внимание на боковую колонку, которая асимметрично сбалансирована с колонкой контента. Боковая колонка имеет более тёмный цвет, который создаёт контраст с более светлым разделом контента. Без такого контраста боковая колонка, вероятно, потеряется и не будет видна так хорошо.

JorgeRigabert

Изображения для создания баланса с текстом

Ещё один, довольно стандартный, подход к веб-дизайну, который относится к асимметричному дизайну – это соединение картинки и текста. В примерах ниже вы увидите, что в каждой странице имеется большая картинка. Эта картинка тем или иным образом соединяется с текстовым блоком. Такая комбинация является чрезвычайно распространённой.

Приём такого дизайна общеизвестен: необходимо обеспечить сочетаемость и взаимодополняемость обоих элементов (текст и изображение). Принимая во внимание тот факт, что оба этих элемента всегда будут привлекать взгляд, важно, чтобы они работали вместе. Самое очевидное решение в таком случае – использовать изображение для буквальной иллюстрации того, о чём говорится в тексте. Другой подход – использовать изображение для развития, расширения идеи, представленной в тексте.

Вот несколько примеров в качестве иллюстрации.

Cake Sweet Cake

Дизайн этого сайта, несомненно, очень хорошо сбалансирован, но для достижения этой цели в нём используется несколько асимметричных элементов. Обратите внимание на большое изображение торта в комбинации с текстом. Изображение довольно стандартно, но оно чрезвычайно важно. Здесь изображение торта не только информирует нас о том, что это кондитерская, но и показывает, какой именно стиль торта они могут предложить. Добавьте к этому изображению чистый, светлый текст, который ассоциируется с ним, и вы получите замечательную рекламу. И это не говоря уже о невероятно привлекательном дизайне, в который «завёрнут» этот сайт.

Cake Sweet Cake

More Soda

В этом сайте также используются элементы асимметричного дизайна, основанного на соединении крупного изображения с текстовым блоком. Но здесь связь этих двух элементов совсем не очевидна. В дизайне отсутствует явный элемент продаж. Вместо этого изображение имеет больше декоративный характер и создаёт общее ощущение стиля сайта. На мой взгляд, это не очень функционально, хотя трудно сказать наверняка, не зная точно, насколько эффективно работает этот сайт. Может показаться, что дизайн, подобный этому, имеет единственную цель – заставить вас пройти немного дальше стартовой страницы, чтобы понять, что предлагает этот сайт. Что-то вроде рекламного тизера, если хотите.

More Soda

Адаптивный веб-дизайн

Как вы уже поняли, пример этого сайта довольно стандартен. Позволю себе предположить, что почти каждый сайт использует подобный визуальный инструмент для разных целей. Я думаю, что столь стандартный характер этого образца делает его хорошим предметом для обсуждения. Я часто нахожу вдохновение и свежие идеи, просматривая и заново осознавая то, что я делаю каждый день, даже не задумываясь об этом.

Этот простой сайт рекламирует книгу. И, конечно, главный элемент, который вы видите, попадая на сайт – это большое изображение книги. Дополнив его большим текстовым блоком, вы получите хорошо сбалансированное пространство, которое содержит все необходимые составляющие. Но, что более важно, взгляд легко выхватывает призыв к действию (Download chapter) в конце страницы. Связи элементов внутри сайта построены просто и предсказуемо. Взгляд легко скользит по странице, выхватывая нужную информацию. Этот сайт не сбивает с толку, он не сложен, не изобилует интересными фишками. Такой подход к дизайну прост и ясен для пользователя.

Элементы переднего плана и фоновые элементы

Один из новых подходов к асимметричному дизайну состоит в использовании фоновых элементов, которые асимметрично уравновешивают элементы переднего плана. Такой подход создаёт интересную динамику там, где фон в большей степени играет роль контента сайта, но при этом остаётся частью бэкграунда. В основном, это достигается за счёт частичного перекрытия одного фона другим, что создаёт иллюзию глубины. Вот несколько примеров такого дизайна.

Peter McLeavey Gallery

Сайт этой галереи является прекрасной демонстрацией данной идеи. Здесь фоновые элементы играют несколько ролей. Первая состоит в том, что для данного раздела сайта они создают ассиметричный баланс с большим серым кругом переднего плана. Эта визуальная комбинация делит сайт на две зоны, которые заставляют взгляд перемещаться назад и вперёд. На мой взгляд, это хорошее решение.

Круг слева содержит основную информацию о бренде и ссылки на контент сайта. В то же время, фоновые элементы дают вам информацию о контексте (специфике) сайта. Вы находитесь на сайте галереи – и это становится очевидно в течение нескольких секунд после того, как вы зашли на сайт.  Мне нравится, что такой информационно насыщенный элемент, как фон может также играть основную роль в дизайне и общем стиле сайта. Особенно, когда он так замечательно сочетается со спецификой продукта, который предлагается сайтом. Очень простой подход, но чрезвычайно эффективный.

Peter McLeavey Gallery

Aleksandar Grkinic

В этой простой странице about.me также используется простая идея, согласно которой фоновые элементы должны асимметрично уравновешивать элементы переднего плана. Однако в этом случае фон не столь отчётливо виден. И это то, что мне действительно нравится в этом сайте. Иллюзия глубины здесь абсолютна  – даже без частичного перекрытия фонов. Здесь на самом деле трудно понять, где в действительности находится фон. Думаю, мы могли бы возразить, что прыгающий человек – это вообще не фон. Тем не менее, наличие асимметричного баланса здесь абсолютно очевидно. И без замечательной комбинации различных элементов эта страница просто не существовала бы. Во многих отношениях, дизайн почти полностью базируется на концепции асимметричного баланса. Очень часто кажется, что даже самый простой дизайн может выглядеть необычно с такими замечательными контрастными элементами.

Aleksandar Grkinic

Robert Dabi

Здесь фон играет интересную роль в дизайне сайта, но мы не видим те асимметричные элементы, которые рассматривались нами ранее. На мой взгляд, большое изображение всецело является элементом переднего плана. Но мне нравится, как он тонко размывает эту линию между передним и задним планом за счёт простой тени под изображением. Это позволяет ему сливаться с задним фоном и создавать отличную динамику. Очевидно, что на этом сайте большое изображение асимметрично сбалансировано с соседними элементами. Проходя по страницам сайта, вам приятно будет обнаружить, что фон страниц меняется и каждый раз по-новому интересно соединяется с визуальными образами. Мне кажется, что это просто замечательная презентация для сайта-портфолио.

Robert Dabi

10 других примеров дизайна

Ниже я разместил 10 дополнительных примеров дизайна, в которых используются элементы асимметрии. Я мог бы представить огромное количество сайтов в этой категории. Поэтому для данной статьи я тщательно отобрал сайты, которые, на мой взгляд, используют нетипичный, креативный подход к асимметричному дизайну. Просматривая представленные в этом топике примеры дизайна вы, надеюсь, сможете извлечь пару новых идей, которые могут вас вдохновить на создание вашей следующей работы.

Greenluv

Greenluv

Andersson Wise

Andersson Wise

Forecast

Forecast

13 Wives

13 Wives

Raffles Institution

Raffles Institution

Urban Svensson

Urban Svensson

Carousel

Carousel

Purlize

Purlize

Buses at the Brewery

Buses at the Brewery

Humaan

humaan

Заключение

Баланс является фундаментальной основой дизайна. Так же и использование элементов асимметрии является в равной степени базовым. Мне всегда нравится обращаться к основам дизайна и обнаруживать, что я начинаю понимать их по-новому. Это оказывает влияние на ту работу, которую я делаю. Есть бесчисленное множество подходов к дизайну, которые можно использовать, и разрушение стереотипов часто может приводить к новым, свежим идеям, которые возвращают нам страсть к нашей работе.

Патрик МакНейл, писатель-фрилансер, разработчик и дизайнер. Он любит писать статьи о веб-дизайне, а также рассказывать о специфике веб-девелопмента и строении веб-сайтов. Его книги вы можете найти на сайте TheWebDesignersIdeaBook.com

Оригинал статьи — webdesignerdepot.com

Метки материала
  • асимметричный дизайн сайтов
Алексей Волков

Предыдущий материал
  • Дизайн логотипов

Интервью с Томом Гейсмаром

  • 31.10.2011
  • Алекса
Read More
Следующий материал
  • Фирменный стиль

Дизайн упаковки для Backyard

  • 27.11.2011
  • Алексей Волков
Read More
Вас также может заинтересовать
Read More
  • Дизайн
  • Интернет дизайн-студии

Эмоциональное восприятие цвета

  • jokar
  • 21.06.2010
Read More
  • Ваш интернет-сайт
  • Дизайн

30 впечатляющих страниц форм регистрации

  • jokar
  • 19.06.2010
Read More
  • Дизайн

Дизайн печатных изданий в стиле Web 2.0

  • Алексей Волков
  • 28.11.2009

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter