Зміст статті
Чи знайоме вам це відчуття? Ви заходите на сайт і ніби потрапляєте на закинутий склад, куди роками зносили непотрібні речі — старі меблі, одяг, що вийшов з моди, дитячі іграшки, якісь інструменти та інший мотлох…
Увесь вільний простір зайнятий, проходи завалені, а важливі елементи нагромаджені один на одного. Немає жодного вільного куточка, щоб зітхнути. Коли на сайті забагато елементів, погляд губиться в цьому хаосі, і у вас виникає єдине бажання — скоріше вийти з цього курного складу на свіже повітря. Такий дизайн не просто непривабливий — він викликає у користувача підсвідомий стрес. У такій “кімнаті” неможливо ані зосередитись, ані щось знайти.
Але є добра новина: у кожного архітектора є секрет, як перетворити будь-який “склад” на світлу та затишну майстерню, де всі речі гармонійно розставлені по своїх місцях. Цей секрет — грамотне використання “повітря”, або негативного простору. І сьогодні я навчу вас цього мистецтва.
Давайте ж потихеньку перетворимо наш “закинутий склад” на затишну майстерню. Почнемо, як і під час будь-якого прибирання, із сортування — винесемо всі “меблі” на вулицю, щоб звільнити простір.
Секретне сортування: принцип близькості в дизайні
Але перш ніж рухати елементи, нам потрібно дізнатися головний секрет нашого мозку. Він працює за простим правилом, яке психологи називають Гештальт-принципом Близькості. Звучить складно, але суть елементарна:
Предмети, розташовані близько один до одного, наш мозок автоматично вважає однією групою.
Цей принцип близькості — один із найпотужніших інструментів в арсеналі дизайнера. Ми вже торкалися його, коли на минулому уроці вчилися прокладати стежки за допомогою візуальної ієрархії. А сьогодні ми застосуємо його, щоб навести лад у нашій майстерні.
Тепер, коли наша “майстерня” порожня, почнемо заносити придатні речі назад, розставляючи їх по своїх місцях. У ближньому кутку ми поставимо диван поруч із кавовим столиком — це буде наша “зона відпочинку”. Робочий стіл зі стільцем і тумбочку під інструменти поставимо в іншому кутку — це буде “робоча зона”. У третьому кутку ми поставимо шафу і складемо туди одяг — це буде “комора”. Між цими зонами ми залишимо порожній простір, саме він і говоритиме нашому мозку, що це різні групи.
“Повітря” — наш головний інструмент для наведення порядку на сайті. А сам “негативний простір” ділиться на два типи.
Макро-простір: створюємо “проходи” між головними блоками
Макро-повітря — це великі порожні простори, які відокремлюють головні смислові блоки один від одного.
У нашій майстерні це широкі, зручні проходи між “робочою зоною”, “зоною відпочинку” та “складом”. Саме вони створюють загальне планування і не дають нашій майстерні знову перетворитися на звалище. На сайті це відступи по краях сторінки та простір між шапкою, текстом та підвалом.
Мікро-простір: наводимо лад всередині елементів
Мікро-повітря — це невеликі акуратні проміжки між предметами всередині однієї групи.
Повернемося до нашої “робочої зони”. У нас є стіл, стілець та тумбочка. Ми ставимо їх поруч, але не впритул, а залишаючи невеликий простір між ними — “мікро-повітря”. Це робить зону не тільки акуратною, а й зручною.
Так само і на сайті: мікро-повітря — це відстань між рядками тексту або між іконкою та написом на кнопці, яка і створює відчуття порядку та читабельності.
Практика: як вільний простір допомагає перетворити “склад” на майстерню
Теорія — це наш кресленик. Але справжня майстерність архітектора перевіряється на практиці. Тому завданням уроку було спочатку навмисно створити той самий “закинутий склад”, щоб на власні очі побачити хаос, а потім, використовуючи наші нові інструменти, перетворити його на затишну майстерню.
Етап 1: Створюємо “хаос на сайті” на прикладі картки товару
Спочатку я “збудував стіни” — за допомогою інструмента Frame (F) створив порожню “кімнату” розміром 1440×1024. Потім я почав “заносити” туди перший мотлох.
Щоб картка товару виглядала максимально неохайно, я взяв всю інформацію про нашу умовну кавомолку і звалив її в один текстовий блок, не розділяючи на абзаци і не залишаючи ані найменшого “проміжку”.
Назва товару: Кавомолка "Ранкова свіжість". Ціна: 1200 грн. Опис: Наша нова кавомолка з керамічними жорнами забезпечує ідеально рівномірний помел для вашого еспресо чи френч-пресу. Має 15 ступенів помелу, тихий двигун та компактний дизайн. Ідеально підходить для будь-якої кухні. Матеріал: нержавіюча сталь, кераміка. Гарантія: 2 роки.
Фінальним штрихом, який перетворив текст на суцільну “стіну”, стало налаштування міжрядкового інтервалу — Line height. Я встановив його на 100%, буквально зліпивши рядки один з одним.
Я подивився на результат і посміхнувся. Переді мною був ідеальний приклад “поганого” дизайну — тісний, задушливий, нечитабельний “склад”, з якого хочеться негайно втекти. Тепер я був готовий до найцікавішої частини — прибирання.
Етап 2: Як структурувати контент, додавши “повітря”
Тепер, коли “склад” був готовий, я, як архітектор, приступив до найприємнішої частини — перетворення хаосу на гармонію.
Насамперед я почав сортування. Я взяв цей єдиний, зліплений клубок “мотлоху” і акуратно “розрізав” його на осмислені групи — “Назва” в один текстовий шар, “Ціна” — в інший, “Опис” — у третій. Потім я дав “дихати” речам усередині кожної групи, вручну розставивши елементи всередині картки товару. Текст миттєво став читабельним, ніби з нього струсили віковий пил.
Коли речі були відсортовані, я почав розставляти їх по місцях. Я створив простору “полицю” — елегантну картку-прямокутник — і розмістив на ній мої текстові групи, залишивши з усіх боків щедрі, великі відступи. Це було наше макро-повітря — широкі “проходи”, які створили відчуття порядку та легкості.
І сталося диво. Хаос зник. Переді мною був не просто набір слів, а елегантний, професійний і легкий для читання блок. Я відчув полегшення і гордість архітектора, який перетворив захаращене горище на стильний лофт, де у кожної речі є своє місце і своє призначення.
До речі, це відчуття порядку, створеного за допомогою “повітря”, — не просто теорія. Для тих, хто, як і я, любить копати глибше і працювати з кодом, я знайшов чудову англомовну статтю з ілюстраціями про те, як застосовувати правила мікро- та макро-повітря за допомогою CSS. Усім веб-майстрам, хто сам верстає дизайни, від душі рекомендую — “Простір у дизайн-системах”
Тепер і ви знаєте секрет грамотного використання вільного простору. На наступному уроці ми поговоримо про принципи близькості та повторення, порядок і ритм у веб-дизайні.
