Веб-дизайн

УДК 004.738.1

Новожилова Поліна Едуардівна

студентка

Київського національного університету технологій та дизайну

БІЛИЙ ПРОСТІР У ПРОЕКТУВАННІ РЕКЛАМНИХ ВЕБ-САЙТІВ

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

Ключові слова: дизайн-проектування, веб-дизайн, білий простір, контрформа, активний простір, пасивний простір.

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

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

Постановка проблеми. Для виявлення загальних і специ­фічних рис веб-дизайну використо­вував­ся порівняльний аналіз. Вивчена література була розглянута з критичних позицій. Класифікація бібліогра­­ф­іч­них джерел нами була проведена за принципом відбору першоджерел від вторинних цитувань і систематизована з урахуванням прямого та посеред­нього відно­шення до предмета дослідження. При цьому використовувався текстологічний аналіз. Приклади рекламних веб-сайтів класифікувалися в контексті основних напрямків веб-дизайну. Їх мистецтвознавчий аналіз проводився з урахуванням особли­востей інформа­цій­них та візуальних форматів комунікацій і синтаксичної структури.

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

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

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

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

Існує зв’язок фігури і фону, так і простір існує лише, коли щось укладено всередині нього. До тих пір поки немає елементів, простір не визначено. Відношення фігура-фон має бути встановлено до створення простору і початку взаємодії з ним. Одна з найбільш важливих функцій простору – поліпшення читабельності і розбірливості. Макро-простір робить текст більш привабливим. Мікро-простір робить його більш розбірливим [1].

Білий простір (або контрформа) – це область між елементами дизайну. Це також простір всередині самих елементів, включаючи проміжки між друкарськими знаками.

Всупереч своїй назві, білий простір не обов’язково має бути білим. Це може бути який завгодно колір, текстура, патерн і навіть фонове зображення. Головне, щоб на цьому тлі добре зчитувалася інформація. Одне з головних правил якісного дизайну говорить: всім об’єктам, логотипам, кнопкам, тексту потрібно «дихати». Це стосується всіх елементів сторінки, від початку і до кінця.

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

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

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

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

Макро-простір (макро-контрформа) – великий простір між основними елементами і простором, що оточує всі елементи. Макро-простір служить «контейнером» для всього дизайну [3-4].

Один з найкращих прикладів сайту, який ефективно використовує макро-білий простір – google.com., – першй сайт, який почав використовувати великий негативний простір (контрформу). Їх сторінка надзвичайно проста. Коли google.com. тільки починали, швидкість Інтернету була набагато повільнішою, ніж зараз, тому мінімум елементів дозволив прискорити завантаження сторінки та підвисити відвідуваність. Також на сторінці немає безладу, внаслідок чого,- менше роботи для очей і розуму, тому користувач може цілком сконцентруватися на поставленому завданні.

Схожий метод використовують багато односторінкових сайтів для своїх кнопок із закликом до дії. Наприклад, можна відчути, як увага одразу приковується до блакитного символу «Sign Up Free» на сайті MailChimp [5].

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

Щоб визначити, який білий простір потрібно використовувати, слід зазначити декілька факторів, від яких залежить використання мікро- і макро- простору:

• контент. Чим більше в макеті інформації, тим менше макро-білого простору. Але мікро-білого, відповідно, стає більше. Цей компроміс має величезне значення, інакше сторінки будуть просто «шматками» інформації, яку буде вкрай важко прочитати.

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

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

Приклад композиції та особливості використання білого простору представлений на Рис. 1. Психологічно людиною сприймаються дві групи по 6 точок, а не набір з 12-ти.

Рис. 1. Приклад використання білого простору [9]

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

• міжрядковий інтервал може кардинально поміняти читабельність тексту. Більша відстань між рядками покращує процес читання. Однак важливо не перебільшити, тому що занадто великі відстані можуть розірвати цілісність тексту;
• інтервали між абзацами так само важливі, тому що користувачеві простіше розуміти, що він в даний момент читає, і простіше переходити від однієї інформації до іншої. Дослідним шляхом давно доведено, що розбивка тексту на абзаци покращує розуміння прочитаного на 20% [6-7].

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

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

Інший підхід: ділити контрформу на активну і пасивну.

Рис. 2. Приклад використання активного та пасивного білого простору в тексті [4]

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

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

На Рис. 2 наведений приклад різниці між текстом без використання білого простору, текстом з пасивним його використанням і текстом з активним використанням негативного простору.

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

У другому тексті є невеликий пасивний (і мікро-) простір. Цей текст читається легше, в порівнянні з першим.

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

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

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

Тональність дизайну і брендинг. Негативний простір задає тон всьому дизайну. Веб-сайти з великою кількістю макро-білого простору відображають мінімалізм і витонченість. Сайти з меншою кількістю макро-білого простору найчастіше бувають інформативними, як у випадку новинних сайтів. Ці ознаки не «висічені на камені». Завжди краще протестувати використану контрформу на ваших користувачах. Тільки вони зможуть сказати, як сприймають ваш дизайн.

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

Отже, контрформа – область серед та навколо всіх елементів дизайну. Це інструмент дизайнера в проектуванні користувальницького досвіду. Білий простір не обов’язково має бути білим. Це просто найменування для визначення місць, де немає ніяких елементів контенту. Можна міняти пропорції контрформи в залежності від чотирьох факторів: контент, стилістика, користувач і бренд, використовувати макро-білий простір для організації контенту на макеті і напрямки користувача через блоки контенту, використовувати мікро-білий простір між елементами контенту: текстом, зображеннями та іншим. Також можна підходити до контрформи з точки зору її активності і пасивності. Пасивний білий простір покращує користувальницький досвід, воно потрібно для зручності сприйняття контенту. Активний білий простір управляє фокусом уваги користувача. Він допомагає контенту виділитися і створити його «образ» [10].

Висновки. Головним інструментом регулювання взаємин дизайнера та користувача у питаннях візуального сприйняття веб-сайтів, можна вважати “модель дизайну”, орієнтовану на користувача (User-Centered Design, UCD Design). У вказаній моделі основним інструментом її коригування виступають евристичні дослідження визначень помилок, пов’язаних з особливостями застосування та використання (usability) графічного інтерфейсу користувача або з недоліками відповідного прототипу.

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

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

Література

1. Принципы дизайна: пространство и отношение фигура-фон // Вебтолк. URL: http://blog.wtolk.ru/post/principy-dizayna-prostranstvo-i-otnoshenie-figura-fon.
2. Черныш В. 5 приемов, как сделать дизайн вашего сайта и приложения эффективным. Учимся использовать белое пространство / Вера Черныш // MC Today. 2017. URL: https://mc.today/5-priemov-kak-sdelat-dizajn-vashego-sajta-i-prilozheniya-effektivnym-uchimsya-ispolzovat-beloe-prostranstvo/.
3. Duggan D. Benefits of white space on websites / Danielle Duggan // Blue Corona. 2017. URL: https://www.bluecorona.com/blog/benefits-white-space-websites/.
4. Soegaard M. The power of white space / Mads Soegaard // Interaction Design Foundation. 2019. URL: https://www.interaction-design.org/literature/article/the-power-of-white-space.
5. Shastry K. 15 Inspiring Websites with Great White Space Examples / Krishna Shastry // Lander. 2018. URL: https://landerapp.com/blog/inspiring-white-space-examples/.
6. Guta D. White Space In Graphic Design: Guidelines & Examples / Diana Guta // Blog bannersnack. 2019. URL: https://blog.bannersnack.com/white-space-in-graphic-design/.
7. The Segue Creative Team. Why Whitespace is so Important in Web Design / The Segue Creative Team // Segue technologies. 2015. URL: https://www.seguetech.com/whitespace-web-design/.
8. Voss D. How White Space Can Create Awesome Websites / Dean S. Voss // Wildstylezstudio. 2018 URL: https://wildstylezstudio.com/how-white-space-can-create-awesome-websites/.
9. Babich N. 4 things every designer should know about whitespace / Nick Babich // Web Design Blog. 2017. URL: https://www.webdesignerdepot.com/2017/10/4-things-every-designer-should-know-about-whitespace/.
10. Hegde P. Importance of White Space in Design / Pratik Hegde // Prototypr.io. 2017. URL: https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd.