Хорошая структура веб-страницы — это та, которую вообще не замечают. Если дизайнер сделал свою работу правильно, то пользователь сможет найти характеристики продукта, корзину, рекламные предложения и кнопку покупки даже не задумываясь.
Пользователи в среднем покидают веб-страницы через 10-20 секунд после открытия. Чтобы задержать внимание юзера на более продолжительное время, нужно четко сообщить ценность своего предложения в первые 10 секунд. За годы существования интернета был выработан ряд принципов верстки веб-страниц, которые используют дизайнеры с этой целью.
Чтобы применять качественный дизайн на практике, мы учим веб-разработке с нуля. На бесплатном двухдневном марафоне мы отвечаем на вопросы и объясняем как освоить новую профессию!
Визуальная иерархия
Визуальная иерархия — это способ стилизации элементов дизайна с целью выделить отдельные части контента сильнее других.
Наиболее важными частями являются те, которые пользователь должен определить сразу — они выделяются в зависимости от цели страницы. Обычно это заголовки, предложения, призывы к действию и пользовательские инструменты (например, навигация).
Визуальная иерархия может проявляться разными способами. Например:
- выбор шрифта,
- размер информационного блока,
- расположение важных элементов выше на странице,
- использование дополнительных цветов для выделения элементов и т.д.
Обычно люди замечают сначала большие объекты на странице. Что интересно, этот эффект достаточно силен, чтобы отменить правило чтения «сверху вниз», согласно которому, внимание зрителя концентрируется наверху страницы и далее опускается ниже.
Примеры визуальной иерархии
На изображении ниже «Craking» имеет приоритет над «time to act», потому что эта надпись и больше, и смещена влево — здесь помогает правило «слева направо».
Выбор шрифта имеет важное значение для установления визуальной иерархии. Обратите внимание, как шрифт влияет на порядок восприятия слов на приведенной ниже странице. Какие элементы заметны в первую очередь?
Этот макет веб-сайта создает визуальную иерархию, используя простую черно-белую схему, масштаб и выбор шрифта, чтобы привлечь внимание к различным важным элементам на странице. Сначала мы замечаем «Breath Easy», потом черную кнопку, а после — продающие характеристики масок.
В некоторых случаях цель состоит в том, чтобы предоставить разнообразную информацию как одинаково срочную. Тогда размер и выделение будут перетягивать внимание. Придание всем элементам одинакового размера и вида обеспечило бы не только их равенство, но и придало бы им однообразие. Это то, что часто называют «текстурой» сайта.
На первом постере слово «Sports» стоит выше в иерархии, чем «badminton», благодаря расположению и жирности шрифта. На втором — два слова примерно эквивалентны благодаря черному прямоугольнику, который выделяет слово «badminton» и помещает его в отдельное пространство.
На третьем постере блики и сгибы перебивают слово «Sports», но не «badminton». В итоге получается перестановка, где «badminton» находится выше всего в иерархии.
Паттерны чтения
Паттерны чтения обозначают наиболее распространенные способы чтения страниц пользователями. Скорее всего вы тоже читаете, сверху вниз и слева направо. Во всех языках читают сверху вниз, а в большинстве — слева направо. Но хотя эти знания важны для дизайна страницы, задача верстки намного сложнее.
То, что делает паттерны чтения более сложными и интересными — это линии направления взгляда пользователя. Исследования показывают, что 79% посетителей сайта только бегло просматривают страницу. Значит нам важно максимально упростить сканирование.
Использование паттернов в макете включает в себя стратегическое размещение элементов вдоль линий взгляда зрителя. Наиболее распространенными шаблонами, которые следует учитывать, являются шаблон Z (зигзагообразный вектор; полезен для макетов с большим количеством изображений) и шаблон F или E (построчный вектор; полезен для макетов с большим количеством текста).
F-шаблоны применяются к традиционным страницам с большим количеством текста. Читатель просматривает левую сторону страницы, ища интересные ключевые слова в выровненных по левому краю заголовках или начальных тематических предложениях, затем останавливается и читает (справа), когда доходит до чего-то интересного. В результате траектория взгляда выглядит как буква F или E.
Правило «сгиба»
В веб-дизайне «сгиб» (fold) — это линия, по которой веб-страница обрезается из-за ограничений размера экрана.
Когда дело доходит до дизайна макета веб-сайта, самый важный и/или убедительный контент (предложение или призыв к действию) должен быть расположен в верхней части страницы, чтобы пользователям не приходилось искать его. Но иногда дизайнер хитрит и делает так:
Этот макет веб-сайта обрезает графику в нижней части экрана с помощьб «сгиба», чтобы побудить посетителей прокручивать страницу вниз и взглянуть на целую иллюстрацию. Но при этом важные информационные элементы не обрезаются!
Видимое пространство оценивается в 1000 x 600 пикселей для большинства размеров экрана.
Белое пространство
Белое пространство или негативное пространство — это область дизайна без какого-либо содержимого, то есть пустое пространство.
У новичка часто возникает соблазн заполнить его контентом. Не стоит этим злоупотреблять! Пустое пространство может быть самым важным инструментом в макете веб-сайта. Часто оно подчеркивает лучше любого выделения.
Достаточное пустое пространство создает акцент, делая всю композицию менее сложной для чтения. У веб-разработчика нет ограничений на длину страницы, что дает гораздо больше свободы для стратегического подхода и щедрого использования пустого пространства.
Белое пространство фокусирует взгляд пользователя на поисковой строке и логотипе компании. Таким образом, с помощью пробелов можно расставлять смысловые ударения на веб-странице и привлекать внимание к важной информации.
Напоследок
Хороший дизайн делает веб-страницы не только визуально привлекательной, но и интуитивно понятной. Это первый шаг к тому, чтобы произвести хорошее первое впечатление на пользователей, побуждая их остаться и увидеть весь контент, который может предложить страница.
Эти основы дизайна могут дать отправную точку, но надо стараться искать новое и анализировать конкурентов. Профессионалы никогда не перестают учиться!
