клики есть
Клики есть, продаж нет: что делать?
19.06.2018
кластеризация1
Как увеличить посещаемость сайта при помощи кластеризации?
03.07.2018

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

гармония обложка
Оформить интернет-магазин профессионально
Вышлем индивидуальное предложение на редизайн за 8 секунд


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

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

Сергей Рогов, веб-дизайнер Cart-Power


Мозги…

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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


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

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

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

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

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

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

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


Остались вопросы?
Ответим на любой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>