Використання білого простору в дизайні

4 хв. читання

{full-post-img}

Перед тим як почати, подивіться відео вище.

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

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

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

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

google {full-post-img}

Є два типи білого простору

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

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

Роздивимось головну сторінку 500px, щоб побачити все на прикладі

500px {full-post-img}

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

Існує два розміри білого простору

Мікро / Micro: так називають невеличкі площі між буквами та словами та між графічнми елементами, розташованими поруч. Його регулювання змінює "тон" контенту, але не зачіпає його. Це можна порівняти зі швидкістю пісні — можна її прискорити, вона програє швидше, але це буде та ж сама пісня.

micro {full-post-img}

Макро / Macro: це великі площі, що розділяють колонки, параграфи та подібне. Оптимізація вашого макро простору змінює дизайн кардинально і навіть може його поліпшити.

macro {full-post-img}

А він насправді білий?

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

Де та як використовувати білий простір

Використання білого простору для CTA (Call To Actions)

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

Але коли сторінка "всипана" елементами, цю кнопку можна й не помітити.

Використання білого простору в дизайні {full-post-img}

Білий простір для емоцій

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

Використання білого простору в дизайні {full-post-img}

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

Боротьба з бажанням заповнити пробіли

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

Хто вміло використовує білий простір?

За весь час свого існування Volkswagen стали справжніми майстрами в цій справі. Їх прості та динамічні об'яви вигідно контрастують з іншими журнальними.

Використання білого простору в дизайні {full-post-img}

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

Використання білого простору в дизайні {full-post-img}

Всі головні компоненти лишилися на своїх місцях, але виглядає оголошення не так ефективно.

  • Машина виглядає не такою вражаючою

  • Наші очі не відчувають себе "вільно"

  • Лежачий чоловік тепер справляє зовсім інше враження

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

Як ви бачите, VW вміло оперує білим простором ще з шістдесятих:

Використання білого простору в дизайні

І до сьогодні

Використання білого простору в дизайні {full-post-img}

Також останнім часом дуже вміло використовує білий простір Apple. Починаючи від сайту про їх продукти і закінчуючи відомими Apple Store (оффлайн магазинами техніки Apple).

Використання білого простору в дизайні {full-post-img}

Використання білого простору в дизайні {full-post-img}

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація