Робота з порожнім простором чому порожнеча так сильно впливає на дизайн

Що ви помітили? Звичайно, неймовірне дотепність Роуена. Але чи помітили ви, як він використовує тишу, щоб змусити людей сміятися? Цей прийом називається комічний вибір часу, один з найважливіших навичок, яким повинен володіти успішний комік.

Уявіть виступ Роуена Аткінсона без цих пауз. Не дуже смішно, тому що саме тиша робить жарт смішний. У цій тиші дуже важливе завдання.

Те ж саме можна сказати і про музику. Хоча там це може бути лише затишшя перед різким наростанням ритму, а не повна тиша.

Помітили, як в прикладі вище «падає» біт на 0,45 і 1,29? Тиша надає драматизму майбутніх подій. Я взяв танцювальний трек, але з легкістю міг взяти п'яту симфонію Бетховена.

В обох прикладах тиша - критичний фактор залучення уваги. Точно так же працює порожній простір. У веб-дизайні до порожнього простору відносять області без тексту і зображень. Можна сказати, що це «візуальна тиша». Щоб наш дизайн функціонував, необхідно правильно поєднувати порожній простір з використовуваним.

Хоча Google не завжди славилися своїми дизайнерськими навичками, вони завжди були прихильниками порожнього простору, що помітно по їх домашній сторінці. Google запустили свій редизайн, коли сторінки їх конкурентів типу Yahoo! були щільно упаковані прогнозами погоди, новинами і поштою. Інтерфейс без надмірностей дозволив користувачам зосередити увагу на основному завданню - пошуку в інтернеті, не відволікаючись на те, що їм не потрібно.

Важко по-справжньому оцінити, наскільки радикальні були рішення в дизайні за останні 20 років, але ми знаємо на кого дивитися в цьому плані.

Два типу порожнього простору

Активне порожній простір: простір між елементами дизайну, часто використовується для постановки візуального наголоси і структурування. Це асиметричний тип простору, робить дизайн більш динамічним і активним.

Пасивне порожній простір: простір між словами в рядку або простір навколо логотипу та інших графічних елементів.

Погляньте на домашню сторінку 500px, як на ній використовується активне і пасивне порожній простір.

При роботі з простором ми в основному дивимося на активну порожній простір, однак пасивному простору також потрібно приділяти достатньо багато уваги і тому, як воно працює з дизайном.

Два розміру порожнього простору

Пусте мікропросторі: цей термін відноситься до невеликих площах порожнього простору між буквами і словами, а також між декількома графічними елементами. Правильна настройка порожнього мікропростори задає загальний тон для всього дизайну, не змінюючи його головного компонента. Щось схоже на ритм в танцювальних піснях. Пісня та ж, але якась сонна.

На скріншоті вище показано порожнє мікропросторі між кнопками Log In і Sign up, а також між заголовком і параграфом.

Пусте макропространство: цей термін описує великі обсяги порожнього простору. Наприклад, простір між колонками або параграфами. Оптимізація макропространства часто може кардинально змінити ваш дизайн, потенційно поліпшивши потік уваги і ритм на веб-сторінці.

У дизайні Tumblr пусте макропространство чітко простежується в порожньому футере і боках.

Порожній простір білого кольору?

Термін порожній простір має на увазі відсутність кольору або тону, що може збити з пантелику. Порожній простір, насправді, може бути будь-якого кольору, який відповідає в вашому дизайні за порожнечу - жовтий, синій, зелений або навіть текстура (як в прикладі Todoist нижче).

Ваш вибір кольору не має ніякого значення, однак не варто забувати, що на кольори і текстури куди приємніше дивитися, ніж на суворий білий. Принцип зберігається, навіть якщо ви оберете інший колір або текстуру.

Де і як використовувати порожній простір

Порожній простір і елементи призову до дії (CTA)

Завжди представляйте, що користувач не знає, куди рухатися далі, і правильно проектують порожній простір. Ідея проста - якщо поруч з кнопкою на сторінці нічого немає, значить, на неї необхідно натиснути. І навпаки, якщо сторінка забита елементами, користувач навіть не помітить цю кнопку через безлад.

Як видно по зображенню вище, другий CTA елемент набагато привабливіше, ніж перший, так як він не захаращений іншими елементами.

Використання пустого простору для емоційного відгуку

Існує безліч способів викликати емоції в дизайні, серед яких шрифти, колір і зображення. Всі ці способи допомагають додати драматизму, однак порожній простір є найсильнішим компонентом і менш витратним. Дехто називає це хорошим вкладенням коштів.

На скріншоті вище видно, як Todoist використовує порожній простір навколо заголовка, змушуючи фонове зображення сяяти і передавати позитивні емоції. Також вони взяли зображення зі щасливим хлопцем, а не додатком, що теж великий плюс.

Як побороти бажання заповнити пустоти

Як дизайнери і просто люди, у нас є природне бажання заповнити порожній простір. Коли ми купуємо велика шафа, гараж або будинок, заповнити це новий простір у нас не займає багато часу.

Ця звичка часто переходить і на дизайн. Варто нам лише зауважити порожню область в нашому дизайні, ми починаємо думати «Чим би його заповнити?». Таке мислення може викликати проблеми у дизайнерів.

Не заповнюйте свій дизайн елементами, спробуйте розмістити одну CTA кнопку в центрі і створити навколо неї «безпечну зону» (порожній простір). Пам'ятайте, що пусте простір не марна простір.

Хто добре використовує порожній простір?

автомобіль здається менш вражаючим;

погляд вже не так легко пурхає над макетом;

складніше піднести історію з падінням в обморок чоловіком.

Як видно на зображеннях внизу, з 1960-х до сьогоднішнього дня Volkswagen використовував порожній простір для досягнення більшого ефекту.

У порівнянні з Volkswagen компанія Apple новачок, але вже показала себе затятим прихильником дизайну з порожнім простором - від їх сайту, виробів і до знаменитого дизайну та архітектури Apple store.

висновок

Ми дізналися, що порожній простір не біла, а також що це те місце в дизайні, де нічого не відбувається. Вкрай важливий принцип в дизайні, про який не можна забувати дизайнерам. Саме порожній простір вирішує, чи можна працювати зі сторінкою чи ні, а також чи потрібно надати якомусь елементу додаткове уваги.

Ми дізналися, що порожній простір буває двох типів (активне і пасивне) і двох розмірів (мікро і макро). Ми розглянули приклад еквівалента порожнього простору в комедії (комічний вибір часу), як він змушує людей сміятися, а також вивчили приклад порожнього простору в музиці.

Нарешті, як дизайнер хочу додати «чим менше, тим більше». Від цього і відштовхуйтеся в своїй роботі. Порожній простір може зробити дизайн краще, а може зламати його. Сподіваюся, ці ідеї допоможуть вам у вашому наступному дизайні.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі