Композиция - это выкладывание всех ваших идей и элементов дизайна в единое целое.
Создание хорошей композиции повысит удобство работы пользователей при навигации по сайту и поможет улучшить дизайн в целом. Мы стремимся к выравниванию, последовательности и крепкому единству. Композиция также помогает нам добавить визуальную релевантность нашим макетам, чтобы мы могли помочь нашим пользователям лучше понять их путешествие по веб-сайту, куда они должны идти дальше.
Основные композиции и макеты
В традиционном полиграфическом дизайне существует множество печатных композиций и макетов, которые хорошо зарекомендовали себя с течением времени. Многие из них теперь находят свой путь в Интернет - и на то есть веские причины. Хотя может быть трудно перевести эти макеты в абсолютные термины для проектирования в Интернете, это может, по крайней мере, дать нам небольшую идею и сосредоточиться на макетах, которые мы могли бы попробовать при создании.
Существует множество типов композиций или популярных макетов, мы рассмотрим некоторые из них здесь. В Интернете много ресурсов, чтобы посмотреть на них дальше, и хотя эти традиционные макеты важны, на данный момент не будем углубляться сильно, достаточно познакомиться с наиболее известными для начала.
Single Visual (Одномерная схема)
Первая схема, которую мы рассмотрим - Single Vsual Layout.
Суть достаточно проста - в схеме только один главный аспект дизайна, который притягивает взгляд, вы фокусируетесь на одном главном объекте. Например, вы можете создать дизайн с большой фотографией на фоне, обширным пространством и простой типографикой на переднем плане.
Z-схема
Z-раскладка вполне понятна и относится в значительной степени к раскладке , которую вы выбираете для элементов дизайна.
Проще говоря, макет Z соответствует естественному шаблону, который обычно могут использовать наши глаза при сканировании веб-сайта. При чтении глазные яблоки привыкли совершать движения слева направо, поэтому бегло пробегаясь по сайту, выходят движения в виде буквы «Z» - сверху слева направо, вниз по диагонали, а затем снова поперек вправо.
Это может быть очень полезно, когда вы думаете о том, где разместить ваши элементы так, чтобы они были актуальны для пользователя. Это поможет придать "вес" важным элементам.
Правило третей
Принцип, широко используемый в фотографии, кинопроизводстве и многих других других областях, правило третей - хорошая композиционная схема и для веб-дизайна.
Правило третей - это руководство, которое предлагает разделить изображение на девять равных частей (три по горизонтали, три по середине и три внизу), при этом элементы этого изображения или дизайна должны быть выровнены по краям каждой из этих частей. Это особенно полезно в веб-дизайне, поскольку может помочь нам создать лучшие пропорции и макеты в проектах.
Правило третей отличный инструмент для создания композиций и схем. В то же время совсем не обязательно всегда четко следовать ему, с его помощью можно просто привнести больше гармонии. Оно может быть использовано при применении других схем, даже одномерной, или при создании вашей индивидуальной сетки.
Золотое сечение
«Золотое сечение», тесно связанное с математикой, является одним из наиболее узнаваемых (по крайней мере, по названию) композиционных макетов или инструментов в любой форме дизайна.
Часто считалось, что они были созданы древними греками, однако золотое сечение описывает отношение между двумя пропорциями. Золотое сечение составляет 1,618 (03398875 ...), и множество объектов, созданных природой, подчиняются ему. Поэтому это всегда что-то более обнадеживающее и приятное для наших человеческих глаз.
Поскольку это такой знакомый нам шаблон, имеет смысл попытаться использовать золотое сечение в проектах - создать гармоничный баланс, который кажется правильным и осмысленным.
Простой способ, которым мы можем реализовать этот тип композиции, состоит в том, чтобы взять число золотого сечения (1.618) и использовать немного математики. В нашем дизайне у нас может быть область, в которую мы, например, хотим поместить некоторый контент и небольшую боковую панель. Простое разделение в наших проектах, не думая об этом, может быть легким - особенно если у вас есть простая система сетки на месте - но когда мы думаем о построении элементов с точки зрения золотого сечения, мы можем получить лучший результат в конце.
Таким образом, у нас есть эта область, которую мы хотим разделить на две части, используя нашу золотую пропорцию. Чтобы сделать это, измерьте ширину доступной области (давайте возьмем 950px для этой статьи) и разделим ее на 1.618.
Если доступная ширина равна 950px, это означает, что наш первый расчет (для основного контента) должен быть: 950 / 1.618 = 587.144622991 (который мы округлим до 587px).
Далее мы просто вычтем эту цифру из нашей первоначальной доступной ширины, чтобы получить вторую ширину для боковой панели или в стороне: 950 - 587 = 363 пикселей.
Поскольку наш основной контент более актуален, и мы хотим, чтобы он был в центре внимания в этой части дизайна, мы можем использовать большую из двух последних цифр для ширины этого контента. Затем мы можем использовать меньшую фигуру для нашей боковой панели. Таким образом можно получить эдакий "золотой" дизайн!
Пространство
Композиция также учитывает пространство. Это не означает, что нужно оставлять обширные, пустые области в ваших проектах - нужно с предусмотрительностью использовать пространство, которое у вас есть. Использование пустых пространств необходимо для грамотного сосредоточения внимания на контенте.
Тем не менее, применяйте отступы и пробелы в ваших интересах - достаточно трудно перемещаться по загруженному веб-сайту с небольшой иерархией, в которой элементы тесны и не имеют передышки. Вместо этого, добавьте пространство в места, где вы сможете улучшить общее впечатление для ваших пользователей. Важно грамотно распределять"воздух" в дизайне сайта, чтобы посетители чувствовали себя свободно и комфортно)