Использование наклонных элементов или линий в дизайне – не новый тренд. Он возник, когда инструменты CSS стали достаточно мощными, чтобы создавать абстрактные конструкции.
Диагональные фоны и наклонные линии придают индивидуальность любому макету.
Давайте рассмотрим несколько примеров такой тенденции.
Содержание
Наклонные элементы в шапке сайта
Наиболее популярной частью страницы, где используются наклонные элементы, является шапка сайта.
Этот способ добавляет ощущение глубины и перспективы странице. Кажется, как будто заголовок удаляется от зрителя, что делает страницу еще более привлекательной.
Большинство сайтов, использующих наклонные элементы в шапке, притягивают внимание пользователей асимметрией в дизайне.
Диагональные акценты в дизайне
Многие сайты используют диагональные акценты или элементы на фоне.
Например, сайт агентства KRYPTIS (kryptis.com) использует диагональные области страниц для навигации и внутренних элементов страницы. При скроллинге вы обнаружите десятки углов, которые, кажется, совпадают.
Даже логотип в верхнем левом углу заключен в наклонный контейнер, отбрасывающий тень. Но при этом страница в общем выглядит структурированной и правильной.
Рассмотрим другой пример. Сайт-портфолио Mokhtar Saghafi (mrsaghafi.com). Весь сайт загружается как одна колонка, но фон делится на отдельные наклонные элементы.
Сайт не делит содержимое используя только один угол. Вместо этого, он использует множество наклонных элементов на фоне, чтобы создать геометрический эффект. Данный веб-сайт – яркий пример, как диагональные элементы могут вписаться в жесткую сетку.
Наклонные формы
Сайт Paseo Itaigara (paseoitaigara.com.br) использует геометрические наклонные элементы, расположенные в виде паззла.
Этот сайт принадлежит бразильской компании и соответственно весь контент на нем на португальском языке. Но самое интересное в дизайне, что он с помощью множества своих инструментов может визуально «переводить» сайт на другой язык, делая его понятным.
Еще одним примеров данного тренда является сайт Timberline Tours (timberlinetours.com).
В нем представлены сетка фотографий геометрических форм со ссылками на внутренние страницы.
Примеры диагонального дизайна
Mellanie (https://goo.gl/dFsurJ)
Kunstnerisk (https://goo.gl/Elv3mo)
Stellar (https://goo.gl/w7EcYh)
Vertigo (https://goo.gl/nSwusf)
