Психология веб-дизайна. Как цвета, шрифты и разметка влияют на ваше настроение

Психология веб-дизайна. Как цвета, шрифты и разметка влияют на ваше настроение
psihologiya-web-desayna

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

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

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

Контент

Контент диктует дизайн сайта. Посетители заходят на сайт за необходимой им информацией, дизайн помогает им найти эту информацию легко и быстро.

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

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

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

work-desk-computer-laptop

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

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

Пространство

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

Минимализм – это использование наименьшего количества визуального контента, которое должно передавать вашу идею. В настоящее время он очень популярен в Сети. Как пример можно привести сайт Squarespace.

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

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

Цвет

chalk-colors-730x414

Часто цвета диктуют новую или уже существующую визуальную идентичность организации (или бренда). Но как эти цвета влияют на чувства посетителя вашего сайта?

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

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

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

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

example-color-design

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

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

Оформление текста

type-we-can-make

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

Больше не нужно, как раньше, выбирать из 15-ти шрифтов, которые можно использовать в Сети. Но с этим большим выбором приходит и большая ответственность.

Типы шрифтов созданы для использования в различных ситуациях. Шрифты Serif (один из них Times New Roman) часто связывают с профессионализмом, академичностью и серьезностью, в то время как шрифты San-Serif (как Helvetica) являются немного более современными и менее официальными.

nytimes-font-front-page

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

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

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

Промежуток между абзацами, края текста и других элементов, размер шрифта – всему этому тоже необходимо уделить внимание.

kerning

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

Нужны идеи того как грамотно построить текст в своем дизайн-проекте? Загляните на Abobe’s TypeKit илл на Google Fonts.

Заключение

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

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