Плюсы применения «воздуха» в дизайне
Ежедневно мы видим несчётное количество дизайнов сайтов, совершенно разных по стилю, сложности и другим параметрам. В из-за этого мы часто игнорируем один очень жизненно-важный компонент сайта, который сильно влияет на уровень воздействия на зрителя. Это — «воздух» (white space).
Воздух является одним из пяти важнейших элементов веб-дизайна, в которые помимо него входят типографика, цвет, фотографии, иллюстрации.
Пространство в целом — существенная часть любого сайта. Однако, оно пока остаётся недооценённым компонентом дизайна. Множество потенциальных заказчиков сайтов сомневаются в нужности воздуха. Касательно содержания сайта они верят во фразу «чем больше, тем лучше». Воздух или негативное пространство — тот объём пространства сайта, которое остаётся после расставления на нём элементов страницы. Таким образом, это пространство, окружающее заголовки, баннеры, между постами и так далее. Теперь вам должна быть понятна суть воздуха.
Поэтому воздух не нужно использовать для размещения неважно какого контента. Он применяется для оптимизации порядка между элементами страницы. Воздух создаёт баланс между позитивным и негативным пространством. Он не обязательно бывает именно белым (воздух — white space). Воздух можно разукрасить, но на нём должны отсутствовать элементы сайта. Есть различные способы определения и определения границ воздуха: макровоздух и микровоздух. Макровоздух — это пространство между крупными элементами страницы. Микровоздух — пространство между небольшими деталями страницы, например, промежутки между строками текста или между текстом и изображением.
Многие люди считают, что воздух не играет большую роль и он бесполезен, но этот подход неправилен. Специалисты подтверждают особое значение воздуха, как компонента веб-дизайна, которое нельзя игнорировать. Это не просто вопрос побочной важности. Воздух — это остаток от изначального пространства страницы. Многие пичкают сайты слишком большим количеством элементов и надеются завладеть вниманием посетителя страницы с помощью избытка информации. Но это не приносит вам никаких дивидендов.
Очень часто лучшие дизайны наиболее простые и элегантные. Они минималистичны, и воздействие на зрителя, которое они генерируют, возникает благодаря эффективному использованию воздуха. Продуктивное применение воздуха помогает сделать дизайн сайта более читаемым и понятным. Воздух служит нескольким целям. Он действительно может повысить эстетичность вашего сайта. Он также может улучшить и усилить его функциональность.
ЧИТАЕМОСТЬ
Самая важная цель вашего сайта — продемонстрировать контент целевой аудитории. Ваша графика, изображения, цвета могут быть хороши, но, если ваш контент не виден, неразборчив или не читаем, значит вы устроили из него мешанину. Многие специалисты говорят, что пользоваться воздухом необходимо, чтобы выравнивать текст. Тогда он не будет представлен в чрезмерном для зрителя количестве. Таким образом, воздух становится важным фактором улучшения читаемости. Показывая избыточное количество текста без каких-либо интервалов, вы оттолкнёте даже самого мотивированного читателя. Какой смысл тогда в качественном тексте?
Умное использование воздуха может помочь избежать этих проблем. Слипшийся текст и текст, распределённый по странице с достаточным пространством между элементами текста, будут радикально разными в своей читаемости. Поэтому в этом вопросе нам помогут макро- и микровоздух. Увеличивая количество микровоздуха между строчками текста и вокруг отдельных букв, вы создадите чувство лёгкости, соответственно делая текст более читаемым и разборчивым. Добавление больше макровоздуха крупным элементам тоже может привести к лучшему распределению текста.
Использование воздуха между абзацами и даже там, где необходимо между строками, может сделать текст более приятным для читателей, уменьшая стресс от кропотливого чтения сквозь плотные и тесные упакованные вместе строки. Некоторые исследования показывают, что применение воздуха в таком смысле повышает понимание текста почти на 20%.
ПРИОРИТЕТ КОНТЕНТА И ВОВЛЕЧЕНИЯ
Грамотное использование воздуха также меньше отвлекает зрителя от нужного контента. Воздух помогает им сфокусироваться на том, что вы представляете в тексте. И предотвращает их от отвлечения другими фичами, которые могут затормозить процесс восприятия текста. Так воздух способствует вовлечению и взаимодействию с аудиторией, что должно быть целью вашего сайта.
Использование паддинга вокруг текста помогает повысить видимость определённых частей контента, которые вы хотите выдвинуть на первый план. Классической техникой для этого будет увеличение размера шрифта текста или применение разных версий шрифта для выделения нужных частей текста. Но применяя воздух, вы избегаете названных выше действий. Воздух может очень эффективно сделать нужные части страницы видимыми.
Воздух можно также использовать, чтобы заставить пользователей обратить внимание на важные части страницы и совершить с ними действие. Например, кнопки CTA, кнопка загрузки, ссылка на покупку и так далее.
УЛУЧШЕНИЕ ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ И КАЧЕСТВА САЙТА
Воздух — это не пустое, не лишнее пространство, не мёртвая зона. У него есть ясная задача — выделить ваш сайт среди других по параметрам внешнего вида и презентации контента.
Воздух может быть выглядит непримечательным приёмом по сравнению со шрифтами, начертаниями и графикой. Но это не значит, что им не надо пользоваться. Добавление воздуха в интересном ключе помогло бы людям просматривать сайты проще и удобнее. Если ваш сайт должен эффективно привлекать посетителей, контент в дизайне должен быть построен так, чтобы можно было быстро его просматривать.
Чем больше тратится времени на просмотр и понимание контента, тем меньше получается вовлечённость посетителя в сайт. Креативное использование воздуха в подходящих местах страницы позволяет нашим глазам отдохнуть, и зрение воспринимает текст более расслабленно.
Применяйте воздух в тех, казалось бы, незначительных местах, которые раньше игнорировались. Это, например, края текста, границы, марджины, гаттеры и пространство вокруг букв и между строками.
МАКЕТ
Эффективное применение воздуха может быть лучше обеспечено использованием интересных и хорошо организованных макетов. Хороший макет даёт возможность управлять количеством воздуха на нём. Применение воздуха помогает повысить заметность бренда, заметность его изображений на сайте, которые тогда становятся важным элементом презентации бренда. Они могут увеличить ценность попыток позиционирования вашего бренда. Простое и изящное использование воздуха, делает ваш бренд или продукт отличительным при продвижении его на сайте. В качестве примера взгляните на главную страницу Apple.
80-90% страницы — воздух. Здесь используется белый шрифт на чёрном фоне меню у верхнего края страницы. Представляемый на странице гаджет, в данном случае iPad, расположен в центре, окружённый прозрачной белой пустотой. На экране есть только несколько строк текста, чтобы у зрителя возникло волнение по поводу выхода нового iPad. Есть разумный отступ между двумя строками заголовков, в изображении и даже между словами. Что же чувствует зритель, видя это? Он испытывает что-то вроде глотка свежего воздуха. Он вдыхает и погружается в пространство визуального восприятия страницы. Он вовлечён. Зрение посетителей полностью сосредоточено на продукте без каких-либо дополнительных отвлекающих факторов. Вот как это должно работать.
Макет и элементы в нём организованы очень просто. Пользователь может легко переходить из раздела в раздел с помощью меню вверху страницы. Каждый клик открывает похожую страницу. В связи с этим с точки зрения юзабилити это решение очень эффективно, и пользователи могут легко ориентироваться в сайте, не сталкиваясь с отвлекающими элементами и ненужным, избыточным текстом.
Короче говоря, это просто, минималистично, элегантно, изысканно. Это те определения, которые ассоциируются с любым продуктом Apple. Качество и класс. Дизайнер проделал отличную работу, великолепно применив воздух и создав узнаваемую «ауру» продукции Apple, которую можно почувствовать как онлайн, так и офлайн. И это помогает продвижению бренда и поддержанию его глобальной репутации. Дизайн и текст объединены таким образом, что создаётся гармония, частично благодаря обширному использованию воздуха. Если быть более точным, это превосходный пример использования макровоздуха. То же самое можно сказать и о главной странице Google.
В то время как макровоздух помогает поставить акцент на бренд и его имидж, использование микровоздуха улучшает читаемость текста. Это особенно важно сайтам, которые имеют дело с большим количеством контента и изображений. Например, онлайн-газеты. Как видно на примере ниже, слева текст просто свален в кучу. Нет пространства между заголовком и первой строкой абзаца. Последующие строки следуют одна за другой. Кажется, будто слова прижаты друг к другу. Читатель смотрит на текст и чувствует напряжение. И вероятно он не захочет даже начать чтение или не будет уделять должное внимание содержанию. По сути не было даже смысла создавать этот контент, поскольку слишком большой текст впихнули в такую маленькую площадь.
По отношению к тексту справа были приняты некоторые исправительные меры, и зритель может увидеть разницу в читаемости текстов. Был добавлен воздух между строками, между заголовком и первой строкой. Управляя пространством таким образом, мы кардинально усовершенствовали представление и внешний вид контента. Этот пост текстовый, он не про внешний имидж бренда, поэтому использование макровоздуха здесь менее важно.
Некоторые сомнения о ценности воздуха исходят из заблуждений, вращающихся вокруг предположений о поведении скролла. Считается, что пользователи не скроллят всю страницу до конца, и поэтому применение воздуха — это расточительство драгоценной площади экрана. Как результат, дизайнеры нагромождают страницу плотно сжатым текстом. Исследования опровергли этот подход. Пользователи часто полностью просматривают веб-страницы. Поэтому нет причин не использовать воздух. Главное — делать это эффективно.
ЖИВЫЕ ПРИМЕРЫ
Ниже мы привели некоторые примеры сайтов, извлекающих преимущества из использования воздуха. У них у всех интересные макеты, в которых дизайнеры могли легко управлять пространством между текстом, изображениями, марджинами, меню и другими элементами, добиваясь нужного эффекта.
MADE BY SOFA
NUDGE
PHILIP HOUSE
NV INTERACTIVE
BY ASSOCIATION ONLY
SQUARESPACE
HANDIEMAIL
Type/Code
DIEHL GROUP ARCHITECTS
JAC IN A BOX
