Все элементы дизайна — от типографики до иконографии — относятся к общей композиции. Каждая веб-страница вызывает у посетителей внутренние эмоции еще до того, как он успевает заметить мелкие детали. Именно поэтому, разрабатывая веб-дизайн, необходимо уделять особенное внимание композиционным методам проектирования.
Конечно, для усвоения основ композиции в веб-дизайне необходима практика. И все-таки, глядя на наиболее удачные примеры, можно узнать много полезного. Мы расскажем о наиболее важных составляющих веб-композиции на примере нескольких удачных сайтов.
Найти баланс
Веб-дизайн следует тем же композиционным принципам, что и полиграфический. Один из таких принципов – баланс в размещении контента.
Проектируя текстовый контент, необходимо найти естественный ритм. Это, как правило, соотношение белого пространства и размера шрифта, что дает посетителям определенный баланс в восприятии содержания. После прочтения нескольких абзацев, они начинают усваивать прочитанное и ожидают от сайта демонстрации как то, о чем они прочли можно реализовать, увидеть и т.д.
Но это не означает, что вы должны следовать только этому приему при разработке дизайна сайта.
Домашняя страница Munchery естественно ритмичная, и в то же время не скучная. Контент помещен в столбцах с плавающими иконками и различными фотографиями. Заметьте, что для его организации в качестве основной структуры используется модульная сетка.
Обычно, баланс создается на маленьком масштабе. Разделите свой контент на отдельные части, и выясните, как лучше представить эти области. С практикой, вам будет легче находить правильное решение, которое будет естественным, а конечные результаты будут намного лучше.
Для примера, разберем сайт Polygon. Это игровой он-лайн журнал, содержащий объемный контент, который должен легко восприниматься пользователем. Популярные посты с крупными иконками помещаются в верхней части, чем обеспечивают достаточный уровень популярности.
При прокрутке, вы заметите, что различные сообщения организованы по темам и датам публикации. Некоторые сообщения размещаются бок о бок, а другие организованы в вертикальный информационный поток. Этот прием используется на всей странице и образует последовательный порядок в хаотичном, на первый взгляд, содержании сайта.
Начинающих дизайнеров такой подход может смутить и удивить, но со временем на основе этого шаблона можно научиться создавать весьма удачные дизайнерские решения.
Расположение и взаимосвязь
Создавая композицию, вы решаете проблемы взаимосвязи различных элементов. Соотношение цвета, пространства, симметрии и асимметрии – всему этому невозможно научиться без конкретных примеров. Каждый большой сайт разработан с учетом этих моментов.
Разрабатывая собственные макеты с нуля, вы должны учитывать, как контент связан с каждой пространственной областью дизайна. Сразу же полезно думать о таких элементах как заголовки, абзацы, маркировки списков, изображения или даже о таких больших элементах, как навигация.
Сайт Januar – интересный пример дизайна, организованный вокруг идеи белого пространства и большой типографики. Здесь вы найдете множество больших изображений, а отдельные связи помогают их выделить в общей канве.
Нужно иметь определенный уровень мастерства, чтобы чувствовать себя комфортно в столь детализированных композициях. Такого уровня можно достичь на практике, но, к сожалению, практика будет включать в себя большое количество неудач.
Исследуйте этот сайт – это поможет избежать ошибок и позволит работать продуктивнее. Можно даже скопировать некоторые макеты страниц, чтобы лучше понять, как дизайнеры работают с белым пространством.
Еще один сайт с чередующимися кусками содержания и изображений — Learning Labs. Его шапка особенно интересна тем, что контент, расположенный вверху достаточно компактный. Здесь гораздо больше свободного белого пространства, чем содержания. Как следствие — элементы навигации лучше выделяются на белом фоне.
Прокручивая страницу вниз, вы будете удивлены, увидев, что другие части сайта куда более насыщенные. Фактическое содержание страницы призвано привлечь внимание, поэтому ему уделено больше внимания. Обратите внимание на шрифт — его размер не велик, но все-таки он достаточен для того, чтобы быть центральным элементом дизайна.
Взаимосвязи не организовываются в вакууме. Сначала вам необходимо определить некоторые элементы и порядок построения связи между ними.
Значение контраста
Один из способов создания композиции – контраст. Различия в цветах, текстурах, белом пространстве и типографике – все это отражает идею разных содержательных областей.
В дизайне можно применять контраст, если это необходимо. Изучайте, как использовать определенные цвета, чтобы выделить их на фоне других. Обратите внимание, где текст можно сделать больше, для того, чтобы он быстрее бросался в глаза.
Замечательный пример использования контраста в дизайне можно наблюдать на домашней странице сайта CreateJS.
Она полна различных элементов с разными фоновыми цветами и несколькими уровнями белого пространства. Особенно здорово смотрится навигация, стиль которой сочетает в себе обычный и жирный шрифт в одних и тех же текстовых блоках.
Контраст наблюдается и в цветовой гамме текста, который появляется на странице перед фоновым изображением. В целом, дизайн простой с точки зрения юзабилити, а контент легко воспринимается. Реализация именно этих двух целей – лучший способ создания классной композиции.
Модульные сетки
Полиграфический дизайн вырос на идее композиционных сеток. Естественно, эта идея нашла применение в веб-дизайне и в настоящее время используется для структурирования сайтов.
Веб-сетки немного отличаются от полиграфических, потому что сайты могут быть динамичными. Отзывчивый дизайн позволяет сеткам изменяться в зависимости от размера экрана. Поэтому, необходимо с самого начала думать о том, как содержание будет вписываться в макет будущего сайта.
Возьмем, к примеру, сайт цифрового агентства Huge Inc. Он имеет достаточно хаотичную схему дизайна, с различными разделами, базирующимися на изменяющихся сетках. А их страница с контактами выглядит совсем интригующе.
Домашняя страница Duotones тоже использует различные методы построения сетки. Некоторые области пространства имеют большие визуальные фоны, другие же – просто всплошную залиты цветом. Все вместе взятое, реально очерчивает сетку, которая и положена в основу дизайна.
Модульные сетки предназначены для устаканивания содержания. Они должны передавать общую идею дизайна и взаимосвязи элементов, основанных на пространственной иерархии и позиционировании. Не существует одной единственной мастер-сетки, но есть общие принципы, которым необходимо следовать.
Учитесь видеть
Говоря о композиции, легко увязнуть в деталях, методах, техниках и тенденциях. Это приводит к тому, что общая картина, которая есть значимой частью дизайна, ускользает от внимания.
Чем больше вы создаете сайтов, тем больше понимаете, что выбор той или иной конструкции дизайна взаимодействуете со многими другими вещами. Умение увидеть все в комплексе выходит за пределы простого составления схемы будущего сайта. Вы должны натренировать свой глаз видеть хорошие и плохие конструкции, одновременно понимая и анализируя, почему они хорошие или плохие.
Чем больше различных сайтов вы пересмотрите, тем легче будет понять, как выбор определенной схемы дизайна в целом влияет на композицию будущего сайта.
Дизайнеру полезно собрать своеобразную библиотеку идей, которые в нужное время могут быть вынуты и реализованы. Возможно поначалу, это будут просто заимствованные идеи, но со временем вы научитесь управлять ними и создавать свои собственные стили дизайна. Всякий раз, наталкиваясь на необычную конструкцию, просто сделайте закладку или скриншот. Библиотека визуальных решений имеет огромное значение для понимания того, как создавать что-то действительно стоящее.
Научиться смотреть на вещи глазами дизайнера занимает много времени. Будьте терпеливы. И даже если поначалу это не удается – пробуйте снова и снова.
