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

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

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

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

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

Имейте ввиду, что большинство пользователей проведут на сайте 15-30 секунд и закроют страницу. По сути, у вас есть, в лучшем случае, полминуты чтобы зацепить внимание пользователя. Отсюда вывод: если у вас на сайте нет мультимедиа-контента, то нужно привлечь внимание пользователей к тексту, который должен выделяться и хорошо читаться.

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

1. Что такое «воздух»?

Что такое «воздух»?Согласно восточной философии, именно пространство первично по отношению к форме. Без внутренней ёмкости кувшин — это просто ком глины, и только наличие пустоты внутри делает его сосудом, о чем гласит одиннадцатый афоризм Лао-Цзы:

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

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

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

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

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

Хорошо сделанный проект

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

Рассмотрим еще один проект.

Еще один проект

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

2. Что помогает сайту «жить» и «дышать»?

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

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

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

Пример. Я захожу на сайт, у меня есть проблемы:

  • меня не понимают на работе;
  • я хочу в Испанию;
  • у меня болит голова;
  • я хочу заняться скалолазанием;
  • я не знаю, как солить сало.

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

Нужно привлекать человека к его проблемам.

Предположим, у вас есть страшная проблема. Она убьет вас, если вы ее не решите, а на этом сайте вы можете найти что-то, что вам поможет.

И, соответственно, должно быть много белого пространства между блоками, хороший контраст:

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

3. Еще раз о воздухе и структуре

Остерегайтесь излишней «богатости» — она склеивает сайт в одно большое пятно.

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

Помните о структуре и смысле — оформление должно их подчеркивать.

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

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

Рецепт проверки, как работает воздух и структура: покажите своему клиенту сайт на 5 секунд, после чего спросите, о чем он и что там интересного.

4. Что больше всего мешает пользователям на сайте?

  • Незаметные маленькие заголовки или их отсутствие
  • Маленький междустрочный интервал
  • Однородный текст, отсутствие списков
  • Маленькие отступы перед абзацами

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

Работайте над заголовками! Делайте их достаточно большого размера. Делайте отступы перед ними и после них. Не пытайтесь спрятать заголовки за картинками.

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

Когда хороший копирайтер пишет продающий текст, он, как правило, 15 % времени тратит на основной заголовок.

Посмотрите, как может выглядеть один и тот же текст с разным междустрочным интервалом:

Делать мир лучше

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

Делать мир лучше

Однородный текст также читать сложно. Можно добавить списки, графики, фотографии, подзаголовки, сделать более короткие абзацы.

Делать мир лучше

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

Вывод: красота начинается, прежде всего, из простоты. Чем проще, тем лучше — тем понятнее.

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

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