Гармония и композиция в веб-дизайне, или чего не найти в учебниках по Photoshop

Дизайнер Cart-Pоwer Сергей Рогов рассказывает, что же такое композиция в веб-дизайне. О ней очень любят говорить художники, фотографы и веб-дизайнеры. Начинающим в этой сфере людям может показаться, что это какое-то секретное знание, доступное лишь избранным. Сегодня мы раскроем этот секрет, после чего вы сможете влиять не только на настроение посетителей сайта, но и на их решение о покупке.

Закон композиции

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

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

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

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

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

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

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

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

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

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

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

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

Цветовой круг и сочетания цветов:

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

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

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

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

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

Правило третей относится к основам композиции в веб-дизайне. Оно возникло в результате интерпретации правила золотого сечения. Для примера, полюбуйтесь на Мадонну:

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

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

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

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

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

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

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

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

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

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

Теперь теория композиции в дизайне web-сайта не является секретным знанием, доступным единицам, и каждый может создать красивый и функциональный сайт.