Основы композиции в веб дизайне. Гармоничная композиция в веб-дизайне. Расположение и взаимосвязь

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

Данное явление принято обозначать термином «визуальный вес» (visual weight), а направление, которое задает эта сила, — «визуальное направление» (visual direction). Понимание данных концепций очень важно в том случае, если вы хотите, чтобы в дизайне вашего лендинга присутствовала иерархия, плавность, ритм, баланс и конено конверсия.

Визуальный вес

Ранее мы писали о базовых характеристиках элементов веб-страницы, таких как размер, цвет и форма, и о том, как с их помощью можно показать схожесть (подобие) или различие (контраст) элементов.

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

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

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

Как измерить визуальный вес?

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

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

В первую очередь стоит рассмотреть упомянутые ранее базовые характеристики: размер, цвет, оттенок, текстуру, ориентацию в пространстве и т. д.

Размер
Крупные элементы обладают большим визуальным весом, чем мелкие.

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

Оттенок
Темные элементы обладают большим визуальным весом, чем светлые.

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

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

Форма
Объекты правильной формы кажутся «тяжелее» элементов неправильной формы, т. к. последние подсознательно воспринимаются как правильные, но лишенные части своей массы.

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

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

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

Белые участки
Пустое пространство не несет в себе визуального веса, поэтому любой объект, помещенный в это пространство, будет казаться на его фоне «тяжелее».

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

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

Насыщенность
Насыщенные цвета кажутся «тяжелее».

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

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

Визуальный вес и целостность восприятия

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

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

Сходство и различие
Управление визуальным весом позволяет достигать и того и другого: разница визуального веса объектов создает контраст, а объекты с близким весом будут зрительно казаться схожими.

Фокус
Объекты, находящиеся в фокусе, имеют больше «веса», чем остальные элементы композиции.

Прошлый опыт
Опыт наблюдателя также будет влиять на силу его интереса к тем или иным объектам.

Визуальное направление

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

Оно выполняет такие же функции, как и визуальный вес, направляя ваше внимание на определенные элементы композиции. Однако в то время как «вес» говорит пользователю: «Посмотри на меня!», визуальное направление командует: «Смотри вон туда!»

Так же как и в случае с «весом», вы можете менять визуальное направление, изменяя параметры элементов, характеристик которых здесь, к сожалению, на порядок меньше.

Форма элемента
Форма элемента может задавать ось, которая будет определять направление элемента. Главная ось объекта, как правило, параллельна его визуальному направлению.

Положение элемента
Визуальный вес создает иллюзию притяжения либо отторжения находящихся рядом объектов. Линия притяжения двух объектов может задавать визуальное направление.

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

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

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

Рассмотрим эту характеристику чуть подробнее.

В своей книге «Искусство и визуальное восприятие» Рудольф Арнхейм (Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim) высказал идею о том, что каждая композиция имеет свою структурную основу, так что, даже если холст пуст, наш взгляд под воздействием комплекса сил, как это представлено на изображении ниже, будет притягиваться к определенным его частям.

«Структурная сеть» Рудольфа Арнхейма

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

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

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

Визуальное направление и целостность восприятия

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

Равномерная связанность
Линии, объединяющие элементы, имеют направление. Взгляд создает воображаемую линию между глазом наблюдателя и объектом наблюдения.

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

Единое предназначение
Элементы, которые движутся в одном направлении, воспринимаются как имеющие единое предназначение.

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

Общая ориентация композиции

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

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

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

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

Примеры

В качестве примеров возьмем несколько реально существующих веб-страниц и проанализируем распределения «веса» на них.

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

В качестве основного инструмента оценки будет использоваться так называемый squint test — для этого надо прищурить глаза таким образом, чтобы некоторые из элементов композиции исчезли из зоны внимания. Те, которые останутся, можно назвать наиболее «тяжелыми».

Текст в центре внимания

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

Страница статьи на сайте bureau.tsailly.net

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

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

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

Если применить squint test, вся правая колонка исчезает, и перед вами остается лишь заголовок и текст статьи.

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

Яркая домашняя страница

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

Примечание. К моменту публикации этого материала компания Create Digital Media прекратила свою работу.

Домашняя страница компании Create Digital Media

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

Основной заголовок выполнен крупным, темным шрифтом и отлично выделяется на фоне остального текста. Другие элементы страницы, имеющие «вес», — это имя компании в хедере и ее логотип в футере.

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

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

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

На лендинге, посвященном свадьбе веб-дизайнеров Хавьера и Марты, в «весе» соревнуются три элемента: изображения, зеленые разделительные линии и элементы меню — все они требуют к себе первостепенного внимания.

Сайт Хавьера и Марты

Графика
Крупные изображения темного оттенка, окруженные пустым пространством. Каждое изображение наделено смыслом и вызывает интерес.

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

Элементы меню
Темные, крупные и тоже окружены пустым пространством.

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

Если провести squint test и снова прищуриться, элементы меню и логотип сливаются в один объект. Графика и разделительные линии остаются видны, а текст представляется крупными блоками. То есть все элементы остаются видимы, пусть вы и не можете разобрать текст.

Что касается ориентации, то когда на экране виден лишь верхний раздел — El evento — разделительная линия придает странице горизонтальный вид. Однако всего представлено 4 раздела, и если смотреть на всю страницу целиком, то, уже выстроенные в колонку, эти горизонтальные линии придают композиции вертикальное направление.

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

Искусство в Стэнфорде

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

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

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

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

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

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

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

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

Заключение

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

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

Теперь вы знаете, как просто можно управлять вниманием пользователя и двигать его взгляд по вашему лендингу в выгодном вам направлении.

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

Найти баланс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Единственный зрительный образ

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

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

Золотое сечение , также известное, как Божественная пропорция , золотая спираль и т.п., равна примерно 1:1.618 . Это соотношение есть во всех аспектах жизни, от строения костей человека до спирального расположения семян подсолнуха и завитков раковин моллюсков, она лежит в основе всех биологических структур и кажется геометрической схемой самой жизни.

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

Правило третей иногда путают с золотой спиралью, но это не одно и то же. Соотношение в тут 1:1.667 , и, в целом, это просто упрощённый вариант золотого сечения, используемый фотографами.
При определении зрительных центров кадр делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2. На пересечении этих линий и должны располагаться объекты композиции.

Фокальная точка

Фокальная точка даёт зрителям что-то, на что можно смотреть. Грубо говоря, это направляющая сила в дизайне, хотя может выполнять и роль громоотвода. Каждый дизайн должен содержать в себе такой объект(ы) – это может быть типографика, кнопки, картинки или что-то другое. Эта точка должна заодно выполнять цели дизайна. Например, у интернет-магазина фокальной точкой может быть кнопка “купить”.

Сетка

Сетка – один из самых известных приёмов дизайнеров, который позволяет создавать ровные и пропорциональные макеты. Существует множество видов сеток, и ресурсов, посвященных им.

Принципы гештальта

Под принципами гештальта кроется изучение поведенческих и психологических процессов, а так же восприятия людьми окружающего мира. Другими словами – это набор принципов психологического воздействия визуального дизайна на человека.
Чтобы представить, что это такое — самый простой пример: возьмём любое слово, и в каждой его букве закрасим “дырки” – человек всё равно поймёт, что это за слово
Рассмотрим основные принципы гештальта:

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

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

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

Близость
Расстояние между пунктами – ещё один признак, по которым мы способны объединять объекты в группы.

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

Выравнивание
Выравнивание – ещё один принцип композиции, который порой забывается.
Выравнивание по краю наиболее часто используется среди простых фигур.
Выравнивание по центру используется для неправильных форм, хотя вполне подходит и для правильных
Ещё есть так называемое наложение.
http://www.sagainc.co.jp/ — отличный пример выравнивания по краю

http://veronikagoldberg.com/ — пример выравнивания по центру

http://giraffe.net/ — ну а здесь мы видим наложение

Z-макет

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

Вот 2 примера Z-макета

А вот F-макет

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

PS: Оптимизируйте и продвигайте свои страницы с помощью блога о сео и смо.

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

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

Баланс

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

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

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

Контраст

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

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

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

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

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

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

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

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

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

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

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

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

Пропорции

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

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

Масштаб

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

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

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

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