Виражальні засоби у композиційній структурі освітнього Інтернет-ресурсу

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

Такий дизайн-функціонал (т.зв. breadcrumb trail: навігаційний елемент, який показує користувачеві його поточне місце в ієрархії ресурсу) представлено в композиційній структурі, наприклад, сайту академії мистецтв Брери (Мілан, Італія). Проста композиція з послідовної вертикальної лінії складена з крапок та має додані інтерактивні елементи. (рис. 4).

Простір «білого» як композиційна складова. Це питання дискутується в дослідницькій літературі практично з часу початку вивчення інтернет-культури, як візуального виклику для дизайну. В більшості випадків дослідники зосереджуються на вивченні факторів юзабіліті та особливостей репрезентації інформаційних потоків у контексті узгодження екранного простору (Bernard, M., Chaparro, B., & Thomasson, R., 2000: 1-4).

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

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

Фоновий «білий» простір є найбільш традиційним типом використання простору. Не зважаючи на те, що його витоки укорінені у друкарській культурі та неодноразово описані видатними дослідниками (наприклад, Е. Рудером), мережева візуальна культура має власні пріоритети, що випливають із особливостей екранної комунікації.

Наприклад, дослідницька група вчених з США, що аналізувала практику використання навчальних сайтів дитячими аудиторіями, публікує дані, згідно яких діти у фокус-групах не тільки активно заперечували білий екранний порожній простір, але й виступали проти використання білого кольору як фонового за будь-яких обставин (Large, A., Beheshti, J., & Rahman, T (2002: 91). Очевидно, що практика мультимедійного навчання змінює уявлення про базові дидактичні моделі та саму технологію навчального процесу, і це не може не віддзеркалюватися на генезисі дизайну порталів.

Наприклад, сайт Школи мистецтв і дизайну в Орлеані (Франція) використовує прийомі колірної репрезентації, які відверто суперечать нормам поліграфічного дизайну. Основний фон сайту - чорний, натомість колір шрифтових мас - зелений. Відсутність традиційного «білого» не означає відсутність простору як такого. Хоча, на наше переконання, естетика чорного фону має свої переваги та недоліки. З одного боку чорне тло створює ефект з'єднання елементів у цілісність. Такий фон збирає компоненти в суцільну просторову канву. Проте водночас подібне використання простору впливає на зображальні, ілюстративні та композиційні риси контенту сайту (рис. 5).

Активний «білий» простір. Наприклад, сайт університету мистецтв, ремесла та дизайну Констфак (Швеція) використовує лінійні властивості «білого» як додаткові засоби модульного посилення ієрархії повідомлень. Біла плашка «підсвічує» основну екранну площину, саме вона є тлом, яке узгоджує кордони фреймів. Активне «біле» узагальнює графічний зміст та наочно відділяє елементи. Цікаво, що при цьому простір базового екранного фону лишається в контражурі по відношенню до білого, формуючи, тим самим, лінійні площини (рис. 6).

Рис. 5 Школа мистецтв і дизайну в м. Орлеані (Франція)

Як підкреслює Лізбет Горлацій, активний «білий» простір має більш високий статус в композиційній репрезентації, адже він є, скоріше, графічним ефектом, аніж тлом. Його слід враховувати навіть у тих випадках, коли метою дизайну є створення «невидимої» візуальної комунікації, яка досягає свого мети завдяки інтеграції з функціональністю та вмістом (Thorlacius, L., 2007: 65).

Крім цього, активний «білий» простір є засобом у створені масштабів та планів, що також засвідчує наведений нами приклад композиційно-просторового унормування дизайну сайт університету мистецтв, ремесла та дизайну Констфак (Швеція).

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

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

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

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

Важливо наголосити, що дослідники відносять до елементів композиційного унормування як статичні, так і рухомі об'єкти. Приміром, GIF-зображення із розміщеним в них вмістом, або навіть такі технічні елементи в гарнітурі сайту, як лічильники відвідувань або анімовані банери (Brage, E., 2019: 22).

Серед кола конкретних прийомів, що реалізуються в системі просторово-композиційного унормування веб-сайту виділимо наступні: 1) лінійно-площинні; 2) прийоми симетрії та балансу; 3) єдності та різноманіття; 4) ритму та руху. Усі зазначені прийоми формують загальну систему композиційно-пластичного устрою, яка характеризується гнучкою взаємодією компонентів та не є т.зв. закритою системою.

Лінійно-площинна концепція прийомів традиційно розглядається як основа 2В-дизайну.

Рис. 6 Університету мистецтв, ремесла та дизайну Констфак (Швеція)

Проте веб-дизайн має низку відмінностей, що, як вже було показано нами вище, виникають через екранну природу композиційних форм інтернет-ресурсів. Тому лінія, як композиційний елемент у мережевому дизайні - це, скоріше, об'єкт, що створений серією елементів. Саме тому, для прикладу, Amar і Іоаппа Almasude, пропонують розглядати прийоми лінійного дизайну веб-сторінок за допомогою методу «фокусної точки»: елементу або набору елементів, що першочергово привертають увагу у пластичному «рисунку» екранного простору (Almasude, A., & Almasude, J. (2002: 13). На цій основі триває сприйняття основних зорових ліній, які не є фізично накресленими. Уявність такого лінійного руху ґрунтується на принципах візуальності та ефектах сприйняття екранних об'єктів, які формують композицію з уявним трикутником як орієнтиром.

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

В якості альтернативного прикладу згадаємо просторово-композиційні рішення сайту університету «Київська школа економіки» (KSE). Два умовних трикутника, які складають уявну прямокутну площину, побудовані завдяки маніпуляціям із білим простором та композиційному унормуванню виключки. Усі елементи цієї композиції перебувають у взаємодії та об'єднанні спільною візуальною ідеєю (рис. 8).

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

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

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

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

По-перше, назвемо єдність образно-стилістичного представлення елементів. Наприклад, веб-портал академія мистецтв Брери (Мілан, Італія) стартує з ілюстративної сторінки, яка щільно насичена фотоматеріалами. Їхня репрезентація достатньо динамічна та припускає декілька режимів звернення: від «заморозки» під час наведення курсору до повноформатного розгортання на окремому кольоровому полі. Видима строкатість є, натомість, ефектом сприйняття, за яким стоїть повноцінна модульна структура, що генерує моделі взаємодії та утримує контент у наперед визначеному просторі. Горизонтальні плашки модуля не помітні споживачеві, вони вторинні та не перебирають на себе зайвої уваги (рис. 9).

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