Ср, 3/05/17 – 1:15 | One Comment

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь впечатляющее портфолио. Создатели сайта-портфолио сталкиваются с задачами более сложными чем …

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Дизайн

Асимметрия в дизайне сайта

22 сентября 2013 Нет комментариев

Асимметрия в дизайне сайта и косые линии — довольно распространенный прием, используемый современными мастерами оформления веб-страниц. Излюбленным приемом многих веб-дизайнеров стало создание неотцентрированного (асимметричного) баланса на целевых страницах сайта. Что это дает? Это делается с целью:

  • «оживить» целевую, продающую страницу, изначально сконцентрировав внимание пользователей на наиболее важных вещах, сделав визуальный акцент на различных элементах сайта
  • облегчить восприятие графической информации
  • более эффективно и выгодно использовать свободное пространство

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

Несмотря на то, что асимметрия, по своей природе, связана с диссонансом (отсутствие гармонии, несходство) и такие веб-сайты отличаются отсутствием двух идентичных половинок, эффекта зеркалирования — это не мешает получать больше выигрыша от асимметрии в дизайне, чем недостатков.

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

Примеры асимметрии в дизайне веб-страниц

Дизайнер умело использовал фоновое изображение для  создания асимметрии на главной странице. Бэкграунд в хедере является функциональным элементом, роль которого — производить впечатление. Уместность его эффектного визуального контента, нужно рассматривать в паре с дизайном логотипа.

асимметрия в веб-дизайне

The Enterprise Foundation

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

Асимметрия в дизайне сайта

DesignBlvd

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

Асимметрия в дизайне

Artegence

В дизайне сайта создается ощущение асимметричности, главным образом благодаря сетке макета. Дизайнер разумно использовал простые прямоугольные формы блоков для устранения путаницы и хаоса, столь свойственных перегруженным контентом сайтам.

Асимметрия в веб-дизайне

Timberline Tours

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

асимметрия в веб-дизайне

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример