Как реализовать белое пространство сайта

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

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

Что такое белое пространство

Белое пространство – это любая часть дизайна, не тронутая элементами. Оно включает в себя пространство, между графикой или изображениями, между строками текста и полями. Белое пространство сайта важно, поскольку оно обеспечивает общую удобочитаемость и организацию дизайна. Также оно:

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

Пространство не обязательно должно быть «белым»

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

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

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

Пример 1: U+Design

белое пространство сайта

U+Design в буквальном смысле переворачивает концепцию белого пространства с ног на голову, оставляя на черном холсте много пространства для текстовых элементов. Изображения расположены на более светлом участке, создавая эффект Инь и Янь.

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

Пример 2: Emark

белое пространство сайта

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

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

Пример 3: Joke de Winter

белое пространство сайта

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

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

Все поля имеют асимметричный стиль с большим количеством пространства. Такой разбалансированный «баланс» гармоничен и визуально интересен.

Пример 4: Astronauts Wanted

белое пространство сайта

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

Та же концепция используется и ниже линии скролла, располагая текстовые элементы на уже неподвижном фоне.

Пример 5: Le Farfalle

белое пространство сайта

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

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

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

Источник: uxgu.ru

 

Возможно, Вам также будут интересны другие статьи из нашего блога: