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

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

Цей термін прийшов з фотомистецтва і позначає усi то простір, яке не попало в фокус. Графічні дизайнери часто використовують термін “пробел”, маючи з огляду на будь порожнє простір, частіше всього білого кольори. Тут ж ці поняття будуть використовуватися як синоніми, незалежно від кольори і однорідності.

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

Мікро- і макроуровни негативного простору

Підсвідомо наше сприйняття налаштоване на роботу з позитивним простором, а прогалини допомагають зосередити увага на його складових. Усi простір між великими блоками дизайну – це макропробелы, усi відступи між дрібними об'єктами дизайну, а також інтервали — це микропробелы. Перші дозволяють структурировать частини дизайну, а другі, в свою чергу, забезпечують нормальне сприйняття інформації, дозволяючи дизайну “дышать”. Давайте розберемо на прикладах:

Для кращого розуміння, як було використано макропространство, слід спростити дизайн.

Отже, рівне відстань між тематичними блоками задає структуру дизайну і чіткість сприйняття. По законам композиції прогалини між маленькими блоками повинні складати 1/3 відстані між великими блоками.

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

Це варіант з нарушенными пропорціями:

Неправильне використання порожнього простору може зруйнувати структуру макета.

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

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

 

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

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

Однотипність отступов — важливий момент в використанні прогалин.

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

Интерлиньяж

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

Негативний простір і мінімалізм

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

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

Мінімум графіки і максимум пространства — хороший вибір для “серьезного” дизайну сайтів.

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

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

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

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

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

Зовсім не порожнє простір

Ми вже говорили про тому, що негативний простір не обов'язково має бути однотонним білим фоном. За останні два року в області веб-дизайну з'явилася мода на Photo background style. Цей досить новий підхід в використанні негативного простору, котрий вже встиг завоювати популярність. Він цікавий тим, що увага відвідувача переноситися з позитивного на негативний простір. То, що раніше було не в фокусі, тепер несе основний естетичний посил, висловлюючи головну стилістичну ідею сайту.

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

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

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

Негативний простір і логотипи

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

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

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

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

Маніпулюючи увагою відвідувача при допомоги грамотно створеного негативного простору, простіше підвести його до потрібної інформації.