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

Найти баланс

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

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

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

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

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

Для примера, разберем сайт Polygon. Это игровой он-лайн журнал, содержащий объемный контент, который должен легко восприниматься пользователем. Популярные посты с крупными иконками помещаются в верхней части, чем обеспечивают достаточный уровень популярности.

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

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

Расположение и взаимосвязь

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

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

Сайт Januar – интересный пример дизайна, организованный вокруг идеи белого пространства и большой типографики. Здесь вы найдете множество больших изображений, а отдельные связи помогают их выделить в общей канве.

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

Исследуйте этот сайт – это поможет избежать ошибок и позволит работать продуктивнее. Можно даже скопировать некоторые макеты страниц, чтобы лучше понять, как дизайнеры работают с белым пространством.

Еще один сайт с чередующимися кусками содержания и изображений — Learning Labs. Его шапка особенно интересна тем, что контент, расположенный вверху достаточно компактный. Здесь гораздо больше свободного белого пространства, чем содержания. Как следствие — элементы навигации лучше выделяются на белом фоне.

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

Взаимосвязи не организовываются в вакууме. Сначала вам необходимо определить некоторые элементы и порядок построения связи между ними.

Значение контраста

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

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

Замечательный пример использования контраста в дизайне можно наблюдать на домашней странице сайта CreateJS.

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

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

Модульные сетки

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

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

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

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

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

Учитесь видеть

Говоря о композиции, легко увязнуть в деталях, методах, техниках и тенденциях. Это приводит к тому, что общая картина, которая есть значимой частью дизайна, ускользает от внимания.

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

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

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

Научиться смотреть на вещи глазами дизайнера занимает много времени. Будьте терпеливы. И даже если поначалу это не удается – пробуйте снова и снова.

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

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

Ох уж этот мозг…

Наш мозг имеет способность мгновенно воспринимать информацию и создавать визуальные связи. Объясню на примерах. Ниже вы видите два круга.

Вы сразу же нашли способ различить их, не правда ли? А вот вам задачка посложнее.

Несмотря на такое разнообразие объектов, вы точно сможете описать любой из них.
При чем здесь веб-дизайн, баланс, основы композиции? - спросите вы. Все дело в том, что наш мозг имеет уникальную способность к мгновенной классификации информации. Он может группировать визуально похожие объекты в группы. Используя простейшие визуальные инструменты, вы можете передавать пользователям большой объем информации и управлять их вниманием.

Композиция - это определенное сочетание элементов сайта

Гармония в соотношениях частей целого, красота и логика построения присуща не только творениям человека. Признаки композиции можно обнаружить в строении вселенной, животных организмов и растений, природных формах. Поэтому термин «композиция» можно одинаково применить к строению веб-сайта, описанию цветка и характеристике ораторской речи.
Проще всего говорить о композиции в веб-дизайне, когда она не соблюдена. Каждый из нас интуитивно чувствует ее присутствие/отсутствие: находятся ли элементы в гармоничном взаимодействии, подчинены ли они главной идее сайта, картины, фотографии.

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

Выбираем правильные цвета

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

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

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

1. Дополнительные цвета. Все противоположности на цветовом круге создают сильный контраст, поэтому их использовать можно, но только осторожно.

2. Аналоговые цвета. Такие «соседи» на цветовом круге не имеют сильного контраста.

3. Триада. Практически беспроигрышная комбинация - это равнобедренный треугольник.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

4. Тетрада. Две пары дополнительных цветов следует применять очень осторожно, чтобы не добиться хаоса в теплохолодности.

Правило третей - что куда ставить?

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

Вначале хотел для примера показать вам картину «Витрувианский человек», но по причине его чересчур откровенного наряда, точнее, его отсутствия, решил, что не буду. Вдруг, здесь дети статью читают Поэтому полюбуйтесь на Мадонну:

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

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

Расчищаем пространство

Наверняка в детстве родители просили вас навести порядок в своей комнате, потому что (цитирую) «места свободного нет». Эх, золотые слова… Пустое пространство, или, как говорят дизайнеры, «воздух» - эта основа основ композиции веб-дизайна. Иногда он даже важнее, чем контент. Поэтому, если свободного пространства мало, сделайте генеральную «уборку» и не поддавайтесь искушению добавить как можно больше текста, иконок, картинок и т. д.

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

Управляйте взглядом пользователя

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

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

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

Хотите, чтобы посетители не прошли мимо конкретной кнопки? Выделите ее контрастным цветом и разместите туда, куда сразу стремится взгляд. Желаете показать, какие обалденные у вас товары? Выделите их на общем фоне и разместите по правилу F-Z или правилу третей, рассмотренному выше.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

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

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

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

5. Пропорции
Пропорция — это отношение отдельной части ко всему объекту, а также соотношение отдельных частей друг с другом. В данном примере показано «Золотое сечение». Подробнее о «Золотом сечении» можно прочитать в статье».

6. Масштаб
Масштаб — это реальный, видимый размер объекта, рассматриваемый в отношении других предметов, людей, окружающей среды.

7. Повторение и ритм
Предполагает повторение элементов дизайна для достижения определенной цели, например, чтобы задать направление взгляда или для непрерывности внимания.

8. Единство в разнообразии
Предполагает сочетание разнообразных элементов композиции в единую целостную структуру, подчиненную единой концепции.

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

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

Баланс

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

Баланс может быть симметричным, то есть объекты (два серых круга ) в этом случае расположены на одинаковом расстоянии по отношению к какому-то третьему объекту (черный круг ). Проще говоря, симметричный баланс — это синоним «одинаковый «. В нашем случае два серых круга расположены на одинаковом расстоянии по отношению к большому черному кругу (рисунок ниже) .

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

Контраст

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

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

Значимость и подчиненность

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

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

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

Направление внимания

По сути, в веб-дизайне вы должны как бы сделать тропинку из , по которым должен пройтись человек туда, куда вам нужно. К примеру, вам нужно, чтобы человек заказал на сайте утюг:

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

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

Этого допускать нельзя.

Вы должны управлять вниманием посетителя. Делается все это, как в прошлых примерах (с помощью размера, формы, текстуры и так далее ).

Пропорции

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

Все стороны, углы, диаметры и прочие характеристики, всего лишь увеличиваются или уменьшаются на определенное какое-то число.

Масштаб

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

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

Повторение и ритм

Довольно часто нам нужно будет как-то привлекать внимание пользователя, но одного объекта для этого будет не достаточно. Необходимо будет этот объект повторить или, проще говоря, продублировать. Также это можно использовать для удержания внимания посетителя.

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

Не совсем понимаете, что такое композиция? Ничего страшного, Если по-простому, то это умение организовывать элементы и объединять их в единое целое - хоть на картине, хоть на фотографии, хоть на сайте. В этой статье мы рассказываем про основы композиции и объясняем, как они работают в веб-дизайне. Цель? Сделать ваш сайт еще более неотразимым, конечно.

Цвет

Ваша задача: выбрать правильные цвета

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

Цветовые акценты можно использовать и для привлечения внимания. Контрастные цветовые сочетания, например, черный с белым, бросаются в глаза в первую очередь, поэтому вы можете оформить таким образом важные кнопки - «Заказать» или «Связаться с нами».

Если же вы слабо представляете, какая цветовая гамма вам нужна, возьмите за основу . Или зайдите на сайт Adobe Color CC и поэкспериментируйте с цветами и правилами построения палитры.

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

Ваша задача: понять, куда что ставить

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

«Воздух»

Ваша задача: расчистить пространство

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

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

Визуальная иерархия

Ваша задача: направить взгляд пользователя на самое важное

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