Переклад чергової статті «ТОП 50 SEO-постів 2009 року». На цей раз мова піде про дизайн, а точніше про те, як правильно розпорядитися вільним простором на вашому сайті. Поради з юзабіліті, оформлення та дизайну чекають вас!

«Менше означає більше»
— Людвіг Міс ван дер Рое

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

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

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

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

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

Що таке вільний простір?

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

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

Навіщо потрібно використовувати вільний простір?

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

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

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

Вільний простір також додає вашому сайту елегантність і вишуканість. Порожній простір може розглядатися як даремно витрачений простір. Але хто може дозволити собі витрачати простір даремно? У цьому випадку простір є розкішшю, і чим менше ви його використовуєте, тим більше коштів ви повинні мати. Більше вільного простору – це ознака заможності; це може позиціонувати ваш бренд як більш високоякісний. Щільно заповнене простір виглядає, як спроба заощадити гроші. А вільне місце фактично може додати вашому бренду додаткову вартість.

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

Погляньте на фотографії торгових залів магазинів Banana Republic і Old Navy. Обидва магазину знаходяться у власності однієї і тієї ж материнської компанії, але якщо перший чітко позиціонується як дорогий магазин, то другий – як недорогий. Кожен з цих торгових залів створює зовсім різне враження і чітко націлена на різні категорії покупців.

Як ефективно використовувати вільний простір?

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

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

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

Порівняйте два зображення пов’язаним з текстом, наведені нижче. Який з них легше читати? Той, де є простір між зображенням і текстом або той, де текст йде впритул до зображення?

Висота рядків – ще один параметр CSS (каскадні таблиці стилів), з якими варто ознайомитися. Більшість людей встановлює його за замовчуванням. Але, встановлюючи правильну висоту рядка, ви дозволяєте всьому тексту на сторінці «дихати».

Це не безумовне правило, але я віддаю перевагу висоту рядка в 1,5 рази більше розміру шрифту. Якщо у вас шрифт 12 пікселів, краще встановити висоту рядка 18 пікселів.

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

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

Висновок

«Менше означає більше» — це ідея про те, що простота і чіткість – запорука гарного дизайну. Будь-який дизайн – це спроба вирішити проблему. Графіка та веб-дизайн націлені на вирішення проблеми чіткого взаємодії.

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

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

Джерело: Стівен Бредлі спеціалізується на побудові сайтів зручних як для користувача, так і для пошукових роботів. Слідкуйте за його блогом, щоб отримувати найсвіжішу інформацію про те, як цього домогтися.
Джерело: Whitespace: Less Is More In Web Design.

З повагою, Олександр Алаєв