Використання білого (або негативного) простору у своїх проектах

32

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

Коротенько, біле простір – це проміжки між різними елементами, будь то розділи сторінки або пробіли між літерами. У більшості випадків ми вживаємо біле простір (також зване негативним) для розділення вмісту з метою більш легкого і набагато більш швидкого перегляду сторінки без необхідності застосування спеціальних поділяють елементів.

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

Що таке біле простір?

Як я тільки що пояснив, біле (або негативний) простір – це проміжок між різними елементами, в якому нічого не міститься. Для порівняння заповнений простір ми називаємо позитивним. Насправді негативний простір допомагає формувати і розділяти те, що є позитивним простором. Це можна розглянути на оптичній ілюзії внизу.

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

ваза

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

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

google

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

tutsplus

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

starbucks

Негативний простір не зобов’язана, на самій-то справі, бути цілісним колірним блоком. На фотографії будь-область, що не знаходиться у фокусі, може бути визначена як негативний простір. У цьому прикладі недолік фокусу на тлі привертає ваш погляд до гуртку. (І, крім того, хіба Starbucks не змінив свій логотип?)

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

Аналогія

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

Це одна з властивостей, з-за яких так добре працюють магазини Apple. Вони дуже мінімалістичні і величезний простір магазину віддано саме продукції. Однак якщо ви забредете в інший магазин PC, то поглине нескінченними полицями пристроїв, які виглядають і функціонують по-різному. На своєму досвіді я переконався, що враження від мінімалістичних покупок зазвичай набагато приємніше.

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

applestore

Негативний простір покращує читабельність

Ви може поцікавитися, навіщо вам турбуватися про те, щоб негативний простір було правильним?

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

Коротенько, біле простір все розділяє, дає елементів їх власний особистий простір, самостійність, розрізнення, легкість для читання і взаємодії.

Негативний простір у веб-дизайні

Негативний простір застосовується в багатьох областях творчості, особливо у фотографії. У неї негативний простір – це будь-який простір, що не використовується для утримання об’єкта, що недалеко від тієї ролі, яку вона відіграє у веб-дизайні. Якщо розглянути веб-дизайн Apple’а, то там, природно, застосовується як макро -, так і мікро-біле простір для створення відступів елементів і визначення нею свого місця на сторінці.

apple

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

Звичайно, простір не обов’язково має бути білим. Будь-який вид порожнього простору, не клану, який знаходиться у фокусі вмістом, може класифікуватися як «біле простір», як у проекті внизу.

toy

Витонченість і розкіш

У друкованому дизайні можна помітити, що вашому клієнту потрібен кожен клаптик «нерухомості» для використання при просуванні свого продукту. Проте зовсім інша справа, коли проект виконується для віртуальних майданчиків. Білий простір додає на загальну веб-сторінку відчуття витонченості і розкоші, створивши відчуття того, що продукт більш важливий, ніж «нерухомість», де він знаходиться. Так, застосувавши принцип «менше – це більше», можна дати продукту можливість виглядати розкішно. Коли дивишся на сайт Apple – торгової марки, яку ми вважаємо, що стоїть на вищому рівні в комп’ютерній області – потрібно дуже небагато, так як продукт говорить сам за себе, хоча і в межах декількох мінімалістичних направляючих. Це феномен, також популярний на вебсайтах з відмінним станом і процвітанням, де для донесення загальної ідеї рекламованого продукту або сервісу потрібно мало контенту.

Часто дешевші торгові бренди намагаються впихнути в простір як можна більше інформації; різні ринки, різні кінцеві користувачі. Сайти HP і Apple, наприклад, виділяють цей момент. Apple – загальновідомо впевнений в собі і дає свого продукту говорити самому за себе. Якщо товар вам потрібний, озирніться або пройдіться. З іншого боку, сайт HP застосовує ділові продажу більш дорогого продукту і перехресні продажі, пропозиції і просування низьких цін у своїх користувачів, а також намагаються виставити асортимент своїх альтернативних продуктів, якими ви можете зацікавитися.

Покращуємо негативний простір

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

Поля і однакові проміжки

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

balance

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

Микроуровневые проміжки

Як уже пояснювалося, микроуровневые проміжки – це негативний простір, який існує між самими маленьким елементами сторінки, такими як букви в параграфі.

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

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

linespacing

Точно так само проміжки між можуть внести свій внесок у добру використання негативного простору. Скупчені букви зовсім нецікаво читати, але й такі, які можна взяти за окремі слова, теж. І знову це питання знаходження ідеального балансу.

По-різному аналізуйте кожен проект

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

Останні міркування

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

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

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

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