Как правильно использовать визуальную иерархию и разметку веб-сайта
При создании веб-сайта, вы можете использовать разметку и дизайн, чтобы убедиться, что ваше сообщение доходит до пользователей и ведёт их к исполнению задач сайта.
Чтобы эффективно использовать дизайн для передачи вашего сообщения, вам нужно для начала понимать влияющие на это факторы, например, как человеческий глаз двигается по экрану и как человеческий мозг обрабатывает информацию.
В этой статье описана важность цветов, изображений, оформления, контраста, а также размеров объектов и текста.
Манипуляция этими элементами поможет вам контролировать восприятие вашего сайта посетителями и поможет вам убедиться, что вы воздействуете на них так, как того желаете.
Как использовать дизайн, чтобы высказать вашу точку зрения
1. Наши глаза сканируют страницу одинаково
Будь то слова или изображения, посетители обычно читают контент слева направо и сверху вниз. Мы просматриваем изображения так же, как читаем текст.
Это означает, что левый верхний угол любого блока контента выступает в качестве точки отсчёта для ваших посетителей – с большой долей вероятности это первое, что они видят, когда их глаза сканируют ваш сайт или отдельный элемент на вашем сайте.
Разместите там изображение или текст, который привлечёт ваших посетителей и заставит их остаться на вашем сайте и продолжить чтение.
Это изображение иллюстрирует домашнюю страницу сайта Wix.com. Фотографии (1) в левом верхнем углу привлекательные и захватывающие. Справа от них Wix расположил главное сообщение (2) и главное желаемое действие (3). Ниже посетитель может посмотреть примеры сайтов (4).
По мере движения вниз по странице, контент и изображения становятся меньше и более детализированными. Контент, расположенный выше на экране был аккуратно отобран, чтобы привести посетителей на сайт, привлечь их внимание и сохранить их заинтересованность.
2. Цвета задают тон
Цвета играют одну из главных ролей в создании общего впечатления от вашего веб-сайта и являются фундаментальным инструментом для передачи вашего сообщения. Они постоянно посылают посетителю сигналы о типе вашего бизнеса. Они также являются неотъемлемой частью для создания настроения вашего веб-сайта – рабочего, весёлого, расслабляющего, и т.д.
Тёмно-красный цвет может говорить о влиятельном или сексуальном, чёрно-белый, серый и оттенки синего – нейтральные, рабочие цвета, которые часто используются на деловых и технических веб-сайтах.
Романтические и свадебные сайты часто ассоциируются с белым, розовым и бирюзовым, а тёплые коричневые тона могут быть использованы для создания чувства успокоения и хорошо подходят для сайтов спа-салонов, сайтов по рукоделию или разработке домашних интерьеров.
Зелёные оттенки наиболее подходят веб-сайтам, посвященным природе, экологически чистым продуктам или окружающей среде.
Дерзкий красный и насыщенный розовый – эти яркие, сексуальные цвета подходят для создания тона веб-сайта, посвящённого танцам сальса.
Игривый розовый и невинный белый говорят о свадьбе, а также создают весёлое настроение. Кто захочет пропустить это событие?
Естественные оттенки зелёного на сайте Speckled Wood соединяют в себе успокаивающее влияние и чувство единения с природой. Прекрасно подходит для деревянных продуктов ручной работы.
Синий и серый цвета придают корпоративный, рабочий стиль сайту Freeline. Они подают сигнал, что вы можете доверять этой компании в технических вопросах.
3. Изображения также задают тон
В дополнение к созданию настроения, изображения также дают посетителям представление о том, насколько профессионален ваш бизнес. Хороший веб-сайт основан на хороших изображениях.
Качество изображений и фотографий даёт посетителю понять, насколько серьёзен ваш бизнес и какой вид работ вы выполняете. Сделанные наспех снимки выглядят небрежно и создают впечатление о вашей лени и несерьёзности.
Несмотря на то, что многие мелкие компании полагаются на покупку стоковых фотографий из сети интернет, такие фотографии зачастую могут отпугивать посетителей. Если фотографии выглядят и производят впечатление слишком «стоковых», читатели могут заподозрить, что они не аутентичны, и почувствовать, что их водят за нос.
Потратьте время на подготовку качественных фотографий вашего бизнеса. Они полностью изменят внешний вид и восприятие вашего сайта.
Чувствуете неуверенность в своих способностях фотографа? Вот несколько советов от Etsy, как делать отличные фотографии продукции:
При выборе изображений имейте ввиду, что мы все – люди. Лица привлекают внимание.
Лица работают как магнит для посетителей. Лица естественным образом привлекательны для наших глаз. Вы можете, тщательно подобрав соответствующие фотографии людей, разместить их на странице, чтобы передать определённое настроение или привлечь внимание посетителей к определённым частям экрана.
Например, про этот веб-сайт по кулинарии Шелли Шульц можно сказать, что фотографии аутентичны и создают ощущение, что Шелли профессионал. Более того, большая фотография человека немедленно привлекает внимание посетителя.
4. Оформление: выбирайте шрифты, подходящие вашему сообщению
Так же, как и изображения, шрифты имеют большое влияние на восприятие вашего веб-сайта. По аналогии с голосом собеседника, они могут быть нежными, громкими, элегантными или игривыми.
Наши глаза перепрыгивают на жирные, большие по размеру шрифты, поэтому вы можете использовать их, чтобы быстро донести ключевую мысль. Зачастую размер и стиль шрифта могут быть так же привлекательны, как сам текст или шрифт. Также для привлечения внимания посетителей вы можете использовать контрастирующие шрифты.
Существует огромное количество интересных шрифтов, но используйте их с умом. «Декоративные» или экранные шрифты, идеальные для заголовков или названий, являются похитителями внимания. Для больших блоков текста лучше придерживаться шрифтов, которые легко читаются – «шрифтов основного текста». В этом сборнике советов более детальная информация по типам шрифтов.
Тип шрифта также посылает определённое сообщение – от дополнительной информации в скобках, выделенной курсивом, до мощи жирных или выделенных строчными буквами названий. Используйте шрифты, чтобы точно отобразить вашу ключевую мысль, но не забывайте о простоте.
Использование слишком большого количества шрифтов перегрузит страницу и введёт посетителя в заблуждение, оттолкнув его от главной мысли, поэтому постарайтесь использовать не более двух или трёх шрифтов на вашем веб-сайте.
На обоих этих веб-сайтах, шрифты помогают создать представление о сайте. Первый веб-сайт использует художественный рукописный шрифт для названия (Sylvie Bondy), который контрастирует с легко читаемым жирным шрифтом sans-serif, ясно сообщающим нам о направлении деятельности компании (Studio Art and Design).
Аналогично, веб-сайт JTown Tech использует легко читаемый шрифт sans-serif. Здесь использование строчных букв и жирного шрифта в простых заголовках создаёт ощущение, что компания хорошо организованная и профессиональная.
5. Контраст привлекает внимание
Наши глаза естественным образом перепрыгивают на высококонтрастные области. Когда элемент на вашей странице контрастирует с фоном вашего сайта, он привлечёт внимание посетителей. Чем больше контраст, тем больше он привлекает внимание.
Контрастный текст также повышает читаемость. Например, если вы размещаете белые буквы на чёрной кнопке, они будут более читаемы, нежели белые буквы на сером фоне.
Заметьте, как на веб-сайте Ute Hiltl выделяются и лицо женщины, и текст «Haute Couture». Это происходит из-за значительного контраста между белым цветом в изображении и тексте и чёрным фоном.
6. Размер имеет значение
Это может показаться очевидным, но это важно иметь в виду. Чем больше текст или изображение, тем больше он привлекает внимание. После того, как вы заполучили внимание пользователя, текст может прогрессивно уменьшаться от заголовка к подзаголовкам и обычному тексту, чтобы передать более детальную информацию. То же самое касается изображений.
На сайт Frunatic дизайнер затягивает пользователя с помощью мелкого текста. Всё начинается с завлекающего вопроса «Почему имеет смысл есть сырую пищу?», который даёт посетителю первоначальное понятие, о чём этот веб-сайт.
Затем глаз перемещается на немного меньшего размера текст «Узнайте сейчас!» и названия категорий: «О нас, Магазин, Меню…» Наконец мы читаем самый маленький текст внизу, чтобы узнать подробнее, что предлагает нам сайт.
7. KISS (Keep it simple, stupid – «не усложняй, тупица»)
Чем проще и яснее ваше сообщение и дизайн, тем лучших результатов вы достигнете. Apple – короли принципа «не усложняй», и мудрым решением будет позаимствовать у них пару приёмов. Выразите то, что вам надо сказать в минимальном количестве слов и изображений. Сделайте это кратким и ясным.
Домашняя страничка Эммы Берлинер содержит очень простое, ясное и крайне убедительное сообщение. Оно заставляет посетителя захотеть зайти и провести больше времени на этом сайте.
Теперь вы знаете правила… Что с ними делать?
Используя расположение, цвета, изображения, текст и контраст, вы можете создать план просмотра вашего веб-сайта, которым будут пользоваться посетители. Начиная с большого, жирного текста или изображения, передающего ваш основной посыл, затем вы сможете шаг за шагом представлять посетителям более детальную информацию о вашем продукте.
Ведите посетителей вниз по экрану, постепенно уменьшая размер текста (от названия, к подзаголовкам и текстовым блокам) и располагая контент с подробностями внизу экрана.
Теперь веб-сайт следует всем перечисленным выше правилам.
- Логотип расположен в верхнем левом углу, а стул – чуть ниже. Это привлекает посетителя до представления ему главного сообщения в виде текста. Оттуда глаза посетителя двигаются вниз по тексту до того, как натыкаются на призыв к действию справа внизу («Pull up a chair») Жёлтые круги служат направлением, в котором наши глаза сканируют страницу;
- Цвета, тёплые, чистые и элегантные, задают тон для магазина, продающего товары с похожими свойствами;
- Единственное изображение стула, расположенное отдельно, немедленно привлекает наше внимание и рождает любопытство. Почему здесь картинка со стулом? Читай дальше!;
- Оформление простое и современное, соответствует цветовой гамме и продаваемым продуктам;
- Чёрный текст на белом фоне выделяется из страницы и легко читаем;
- Крупный размер шрифта также способствует лёгкости чтения;
- Здесь царит простота. Сайт не перегружен текстом, графикой или разнообразием шрифтов.
Заключение
Сверху слева – направо вниз: композиция вашего веб-сайта должна быть разработана таким образом, чтобы сначала захватить внимание читателя, и затем вести его за руку, пока вы рассказываете ему о своём бизнесе. Как только вы донесёте до него своё сообщение, нужно оставить ему один ясный следующий шаг – кнопку призыва к действию.
Так какой у вас призыв к действию? Время начать планировать собственный сайт.