Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити
Юзабилити

3 способа удачно использовать пустое пространство в меню сайта

Автор: Ия Пфанштиль18.04.2016

Дизайн – это не только то, что вы в него вкладываете, это еще и то, что вы не используете.

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

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

1. Использование группировки для лучшего восприятия

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

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

Наиболее интересный момент здесь – вертикальное и горизонтальное пустое пространство. При этом горизонтальные пробелы смотрятся намного выигрышнее вертикальных.

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

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

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

2. Комбинирование пустого пространства и контраста

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

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

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

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

3. Разнообразие пустого пространства в меню навигации

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

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

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

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

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

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

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

Ux, веб дизайн, дизай, минимализм, меню, навигация, юзабилити

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

Вот несколько советов по созданию навигационного меню:

  1. Адаптируйте размер шрифта и пробелы под число ссылок.
  2. Небольшие ссылки могут привлечь внимание пользователей за счет использования контраста.
  3. Дополнительное пространство делает ссылки более заметными. Обратите внимание на горизонтальные и вертикальные пробелы, чтобы создать блоки ссылок.
  4. Разным разделам страницы нужно разно количество белого пространства. В основном меню можно использовать куда больше пробелов, чем в футере.

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Главный редактор, контент-маркетолог, автор. Пять лет пишу о digital. Делюсь открытиями.
Комментарии
Оставить отзыв

You must log in to post a comment