Вільний простір у веб-дизайні. 9 сайтів для натхнення

4

Порожній простір – це не завжди погано.

Світовий досвід веб-дизайну показав: набагато краще, коли в дизайні багато повітря і незаповненого простору.

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

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

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

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

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

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

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

Нижче, в макетах сервісу Digital Ink представлений наочний приклад того, як ефективне використання вільного простору полегшує сприйняття інформації:

Вільний простір у веб-дизайні. 9 сайтів для натхнення

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

А на макеті праворуч відстань між колонами і абзацами значно більше. Прості зміни дизайну зробили текст більш читабельним і привабливим.

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

Погляньте на ці макети візиток від Printwand:

Вільний простір у веб-дизайні. 9 сайтів для натхнення

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

59 ресурсів для тих, кому потрібен безкоштовний дизайнерський контент: іконки, шрифти, шаблони, логотипи

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

Класичні дослідження компанії Human Factors International виявили, що використання вільного простору для виділення важливих елементів веб-сайту збільшило охоплення відвідувачів майже на 20 %.

Погляньте на ці два макета:

Вільний простір у веб-дизайні. 9 сайтів для натхнення

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

На макеті праворуч кнопка з закликом до дії оточена вільним простором. Вона відразу привертає увагу відвідувача.

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

9 сайтів, які ефективно використовували вільний простір

1) Shopify

Головною сторінка платформи для електронної комерції Shopify призначена для того, щоб запропонувати відвідувачам підписатися на безкоштовну демонстративну версію.

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

2) Everlane

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

Для демонстрації останньої колекції рітейлер одягу Everlane вибрав мінімалістичний дизайн. На тлі представлена фотографія блейзера «GoWeave». А в самому центрі екрану вміло розміщена кнопка з закликом до дії – «Купити зараз». Ідеальний приклад того, як запропонувати користувачеві зробити покупку та не виглядати агресивно.

Вільний простір у веб-дизайні. 9 сайтів для натхнення

3) Wistia

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

Відеоплатформа Wistia представляє користувачам закріплену головну сторінку з доброзичливим питанням і випадаючим списком. Дві центральні кнопки з закликом до дії – головна фокусная точка всієї сторінки. При цьому вони досить відокремлені від основної навігації та фонового зображення.

Вільний простір у веб-дизайні. 9 сайтів для натхнення

4) Welikesmall

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

Повноекранне відео в будь-якому іншому контексті може здаватися надто агресивним і перевантаженим. Але дизайнери подбали про достатню кількість вільного місця, тому таке рішення виглядає витончено. Основна увага спрямована на фонове відео, а текстова інформація мінімальна. В одному кутку сторінки розташувався логотип компанії, а в іншому – меню «гамбургер». Слоган «Belief in the Making» («Віра в процес створення») разом з кнопкою з закликом до дії, що веде до повної версії демонстраційного ролика, зафіксований по центру сторінки.

Вільний простір у веб-дизайні. 9 сайтів для натхнення

5) Simpla

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

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

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

6) Художні музеї Гарварду

Художні музеї Гарварду відомі тим, що демонструють старовинні картини. Однак їх домашня сторінка виглядає як яскравий приклад сучасного дизайну. Тут вільний простір стає ідеальним фоном для творів мистецтва: ніщо не відволікає користувача від споглядання прекрасного. Ідеальна цифрова художня виставка.

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

7) Burnkit

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

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

8) Medium

Сервіс Medium дуже спритно використовує вільний простір, змушуючи читачів прокручувати сторінку вниз, залучаючи їх до інтерактив статистикою: скільки людей оцінило цей пост, скільки прокоментувало і який схожий контент вони зможуть прочитати.

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

9) Ahrefs

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

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

Вільний простір у веб-дизайні. 9 сайтів для натхнення

Стаття перекладена Тетяною Мусихиной, інтернет-маркетологом агентства m2b.space.

Оригінал статті за посиланням.