Від автора: у веб-дизайні до порожнього простору відносять області без тексту і зображень. Можна сказати, що це «візуальна тиша». Щоб наш дизайн функціонував, необхідно правильно поєднувати порожній простір з використовуваним.
Перш ніж почати, подивіться відео нижче. Роуен Аткінсон: ласкаво просимо в пекло:
Що ви помітили? Звичайно, неймовірне дотепність Роуена. Але чи помітили ви, як він використовує тишу, щоб змусити людей сміятися? Цей прийом називається комічний вибір часу, один з найважливіших навичок, яким повинен володіти успішний комік.
Уявіть виступ Роуена Аткінсона без цих пауз. Не дуже смішно, тому що саме тиша робить жарт смішний. У цій тиші дуже важливе завдання.
Те ж саме можна сказати і про музику. Хоча там це може бути лише затишшя перед різким наростанням ритму, а не повна тиша.
Помітили, як у прикладі вище «падає» біт на 0,45 і 1,29? Тиша додає драматизму майбутніх подій. Я взяв танцювальний трек, але з легкістю міг взяти п’яту симфонію Бетховена.
В обох прикладах тиша – критичний фактор залучення уваги. Точно так само працює порожній простір. У веб-дизайні до порожнього простору відносять області без тексту і зображень. Можна сказати, що це «візуальна тиша». Щоб наш дизайн функціонував, необхідно правильно поєднувати порожній простір з використовуваним.
Хоча Google не завжди славилися своїми дизайнерськими навичками, вони завжди були прихильниками порожнього простору, що помітно по їх домашній сторінці. Google запустили свій редизайн, коли сторінки їх конкурентів типу Yahoo! були щільно упаковані прогнозами погоди, новинами та поштою. Інтерфейс без надмірностей дозволив користувачам зосередити увагу на основній задачі – пошуку в інтернеті, не відволікаючись на те, що їм не потрібно.
Важко по-справжньому оцінити, наскільки радикальні були рішення в дизайні за останні 20 років, але ми знаємо на кого дивитися в цьому плані.
Два типи порожнього простору
Активне порожній простір: простір між елементами дизайну, часто використовується для постановки візуального наголосу і структурування. Це асиметричний тип простору, що робить дизайн більш динамічним і активним.
Пасивне порожній простір: простір між словами в рядку або простір навколо логотипу і інших графічних елементів.
Погляньте на домашню сторінку 500px, як на ній використовується активне і пасивне порожній простір.
При роботі з простором ми в основному дивимося на активну порожній простір, однак пасивного простору також потрібно приділяти достатньо багато уваги і того, як воно працює з дизайном.
Два розміру порожнього простору
Пусте микропространство: даний термін відноситься до невеликих площах порожнього простору між буквами і словами, а також між декількома графічними елементами. Правильна настройка порожнього мікропространства задає загальний тон для всього дизайну, не змінюючи його головного компонента. Щось схоже на ритм у танцювальних піснях. Пісня та ж, але якась сонна.
На скріншоті вище показано порожнє микропространство між кнопками Log In, Sign up, а також між заголовком і параграфом.
Пусте макропространство: цей термін описує великі обсяги порожнього простору. Наприклад, простір між колонками або параграфами. Оптимізація макропространства часто може кардинально змінити ваш дизайн, потенційно поліпшивши потік уваги і ритм на веб-сторінці.
У дизайні Tumblr порожнє макропространство чітко простежується в порожньому футері і боках.
Порожній простір білого кольору?
Термін порожній простір передбачає відсутність кольору або тону, що може збити з пантелику. Порожній простір, насправді, може бути будь-якого кольору, який відповідає вашому дизайні за порожнечу – жовтий, синій, зелений або навіть текстура (як у прикладі Todoist нижче).
Ваш вибір кольору не має ніякого значення, проте не варто забувати, що на кольори і текстури куди приємніше дивитися, ніж на суворий білий. Принцип зберігається, навіть якщо ви виберіть інший колір або текстуру.
Де і як використовувати порожній простір
Порожній простір і елементи заклику до дії (CTA)
Завжди уявляйте, що користувач не знає, куди рухатися далі, і правильно проектуйте порожній простір. Ідея проста – якщо поруч з кнопкою на сторінці нічого немає, значить, на неї необхідно натиснути. І навпаки, якщо сторінка забита елементами, що користувач навіть не помітить цю кнопку через безладдя.
Як видно на зображенні вище, другий CTA елемент набагато привабливіше, ніж перший, оскільки він не захаращений іншими елементами.
Використання порожнього простору для емоційного відгуку
Існує безліч способів викликати емоції в дизайні, серед яких шрифти, кольори і зображення. Всі ці способи допомагають додати драматизму, однак порожній простір є самим сильним компонентом і менш витратним. Деякі називають це хорошим вкладенням коштів.
На скріншоті вище видно, як Todoist використовує порожній простір навколо заголовка, змушуючи фонове зображення сяяти і передавати позитивні емоції. Також вони взяли зображення зі щасливим хлопцем, а не додатком, що теж великий плюс.
Як побороти бажання заповнити порожнечі
Як дизайнери і просто люди, у нас є природне бажання заповнити порожній простір. Коли ми купуємо великий шафа, гараж або будинок, заповнити це новий простір у нас не займає багато часу.
Ця звичка часто переходить і на дизайн. Варто нам лише помітити порожню область в нашому дизайні, ми починаємо думати «Чим би його заповнити?». Таке мислення може викликати проблеми у дизайнерів.
Не заповнюйте свій дизайн елементами, спробуйте розмістити одну CTA кнопку в центрі і створити навколо неї «безпечну зону» (пробіл). Пам’ятайте, що порожній простір не марне простір.
Хто добре використовує порожній простір?
За всю свою історію Volkswagen був майстром застосування порожнього простору в рекламі в журналах. З самого початку їх прості, але динамічні макети виділялися серед статичною журнальної реклами.
Макропространство чітко простежується над і під автомобілем, що ставить авто в центр уваги. Несиметричність порожнього простору змушує нас пройтися очима по автомобілю, вниз до тексту і назад наверх. Очі не стоять на місці. Якщо ми трохи обріжемо рекламу VW?
Основні компоненти на місці, але реклама вже не має такого ефекту, як раніше:
автомобіль здається менш вражаючим;
погляд вже не так легко пурхає над макетом;
складніше подати історію з падінням свідомість чоловіком.
Як видно на зображеннях внизу, з 1960-х до сьогоднішнього дня Volkswagen використовував порожній простір для досягнення більшого ефекту.
Порівняно з Volkswagen компанія Apple новачок, але вже показала себе затятим прихильником дизайну з порожнім простором – від їх сайту, виробів і до знаменитого дизайну та архітектури Apple store.
Висновок
Ми дізналися, що порожній простір, не біле, а також що це те місце в дизайні, де нічого не відбувається. Вкрай важливий принцип в дизайні, про який не можна забувати дизайнерам. Саме порожній простір вирішує, чи можна працювати зі сторінкою чи ні, а також чи потрібно надати якогось елементу додаткове уваги.
Ми дізналися, що порожній простір буває двох типів (активне і пасивне) і двох розмірів (мікро і макро). Ми розглянули приклад еквівалента порожнього простору в комедії (комічний вибір часу), як він змушує людей сміятися, а також вивчили приклад порожнього простору в музиці.
Нарешті, як дизайнер хочу додати «чим менше-тим більше». Від цього і відштовхуйтеся у своїй роботі. Порожній простір може зробити дизайн краще, а може зламати його. Сподіваюся, ці ідеї допоможуть вам у вашому наступному дизайні.
