Skip to content

Введение в композицию

Сегодня у нас будет экскурс, введение в композицию. Композиция объединяет все ваши идеи и элементы дизайна в единое целое. Мы вспомним все, о чем говорили в предыдущих уроках. Ведь из всего того и получается композиция — одно из действительно трудных аспектов дизайна.

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

В самом начале этой серии мы определили дизайн как «предпринятие действий по изменению внешнего вида и функционала проекта, обычно, через создание подробного чертежа». Композиция означает «писать или создавать». Поэтому, когда мы соединяем эти два элемента вместе, на этапе создания композиции мы сочетаем (создаем) внешний вид и функционал нашего дизайна — по сути, теперь мы все соединяем воедино.

Общие композиции и макеты

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

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

Один визуальный объект (Single Visual)

Прекрасный пример макета "Один вид"
Прекрасный пример данного макета — сайт Creative People

Этот макет довольно прост на самом деле. Здесь есть один важный аспект дизайна, который выступает в качестве одного визуального фокуса. Например, можно создать дизайн с большой фотографией на фоне, с большим количеством пробелов и простым наложением типографики.

Z-макет

Z-макет в действии на BBC News
Z-макет в действии на BBC News

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

Правило третей

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

Правило третей прослеживается на сайте Shopify
Правило третей прослеживается на сайте Shopify

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

Правило третей является прекрасным композиционным инструментом и макетом. Его также можно использовать вместе с другими композиционными схемами, или даже при создании системы сетки.

Золотое сечение

Золотое сечение является одним из самых узнаваемых (по названию, по крайней мере) композиционных макетов или инструментов в любом дизайне.

Золотое сечение на Twitter
Золотое сечение на Twitter

Часто считается, что изобретенное древними греками золотое сечение описывает отношения между двумя пропорциями. В природе оно довольно часто встречается. Следовательно, данные пропорции является более приятными для наших человеческих глаз. Из-за того, что это шаблон знаком многим, имеет смысл использовать золотое сечение и в наших дизайнах, чтобы создать гармоничный баланс.

Наипростейший способ реализации в наших дизайнах —  это взять число золотого сечения (1,618) и прибегнуть к математическим действиям. В нашем дизайне есть основная область под содержимое и небольшая область в стороне для боковой панели. И эти области нам надо разделить в нашем дизайне. Для этого измерим ширину доступной области (для примера возьмем 950px) и разделим ее на 1,618.

Значит ширина области содержимого будет рассчитываться, как 950 / 1.618 = 587.144622991 (округлим до 587px). Тогда оставшаяся ширина будет равна ширине боковой колонки: 950 – 587 = 363px

Основной контент является более актуальным, и мы хотим, чтобы он был в центре внимания в дизайне. Затем мы можем уменьшать значение ширины контента или боковой панели. Это и есть наше золотое сечение нашего дизайна!

Пространство

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

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

Далее

Теперь у вас есть понятие о структуре, в следующем уроке мы дополнительно изучим как работать со свободным пространством в дизайне. Увидимся там!

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Выравнивание улучшит ваш дизайн

Добавляем пространство в ваши дизайны