Прийоми і засоби композиції у веб-дизайні

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

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

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

Аналіз останніх досліджень і публікацій. Беручи до уваги те, що веб-дизайн — це відносно молодий напрям в проектно-художній творчості, то і кількість бібліографічних джерел лімітована, більшість з яких присвячена лише веб-програмуванню. А серед авторів, що досліджували різноманітні аспекти графічної складової веб-дизайну можна відмітити роботи: Д. Бородаєва, в якій науковець розглядав сайт як об'єкт графічного дизайну; А. Бєляєва, що досліджував особливості графічної моделі інтернет-версій періодичних видань; Н. Кузнєцової, що розглядала веб-дизайн в контексті інструментарію моделювання віртуального простору сучасної культури. Праця Д. Віна «Искусствовеб-дизайна» має в собі ідею системного підходу до вивчення веб-дизайну та осмислення його як феномену Інтернету разом з наведенням паралелей між веб-дизайном та дизайном друкованих видань. Монографія російського веб-дизайнера Д. Кірсанова «Веб-дизайн: книга Дмитрия Кирсанова» спрямована саме на вирішення практичних завдань щодо веб-дизайну, починаючи з теоретичних основ візуального дизайну і закінчуючи інтернет-технологіями і прийомами практичної роботи над веб-сайтом. В роботі Е. Платонової «Интернет-реклама как объект и субъект культуротворчества» в якості складової сайту розглядається саме реклама.

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

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

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

За словами В. Молочкова, «композиція» є ключовим словом у дизайні, і він визначає це поняття як поєднання різних частин в єдине ціле відповідно до якої-небудь ідеї [6, с. 178]. Також він зауважує, що і в комп’ютерній графіці, і в мистецтві взагалі, дуже важливим є знання законів композиції. Зокрема, композиція у вебдизайні — це побудова сайту відповідно до його змісту, характеру і призначення. Композиція «тримає» ваш простір, організовує його і підпорядковує законам композиції. Композиція — це цілий світ, ціла наука. У цьому світі є свої закони (досягнення стильової єдності, вибір головного композиційного центру, ритм, пропорційність, масштабність, рівновага) і свої прийоми (симетрія-асиметрія; статика-динаміка, контраст-нюанс) та інші [6, с. 178].

Будь-яка композиція складається з окремих елементів, які певним чином пов’язані один з одним, і саме про це пише Д. Кірсанов:

«Чи йде мова про дизайн або будь-яке інше мистецтво, яке орієнтоване на візуальне сприйняття (живопис, скульптура або навіть створення візерунків для тканин), будь-яку композицію завжди можна розбити на елементи, пов’язані між собою різного роду відношеннями — відношеннями балансу, контрасту, укладення, послідовності і т. д. Ці відношення спираються на (точніше навіть, виражаються через) різні візуальні аспекти об'єктів: їх розміри, форму, взаємне розташування, колір» [3, с. 78].

Одним із найважливіших аспектів композиції є візуальна ієрархія, що визначає ступінь важливості кожного елементу згідно зі ступенем його виразності. Як зазначає В. Молочков, у композиції з чіткою візуальною ієрархією візуальна вага кожного елементу визначає шлях, по якому буде рухатись увага глядача. Збалансована ієрархія допомагає не тільки визначити порядок сприйняття інформації, а й об'єднати розрізнені елементи сторінки в єдине ціле. Так створюється відчуття гармонії і балансу. Без візуальної ієрархії кожен елемент сторінки притягує увагу користувача до себе, в результаті увага розсіюється [6, с. 189].

Формування візуальної ієрархії здійснюється за допомогою акцентування елементів композиції. І саме на це вказує П. Макнейл:

«Акцентування — це підкреслення особливої важливості або значимості будь-якого елементу. Багато в чому воно тісно пов’язане, а то і зовсім збігається з поняттям ієрархії. Щоб дотримати в процесі створення дизайну принцип акцентування, необхідно проаналізувати зміст сайту і з’ясувати, яка ієрархія елементів має місце в ньому. З’ясувавши це ви зможете створити дизайн з грамотно реалізованою ієрархією» [4, с. 17].

Акцентування, в свою чергу, досягається завдяки такому художньому прийому, як контраст. За визначенням П. Макнейла, контрастування — це візуальна диференціація двох або більше елементів [4, с. 20]. Далі науковець зазначає, що елементи з високим ступенем контрастування виглядають чіткими і відокремленими, в той час як елементи з низьким ступенем контрастування здаються зливаючимися і мають тенденцію візуально змішуватись в єдину масу. Існує безліч характеристик елементів дизайну, якими можна маніпулювати з метою досягнення необхідного ступеню контрастування елементів, включаючи колір, розмір, розташування, тип і товщину шрифту. Якщо елементи дизайну будуть контрастувати між собою, це додасть візуальну різноманітність сайту і дозволить уникнути банальності в його зовнішньому вигляді. Контрастування також дозволяє привертати увагу, забезпечуючи акцент на певних елементах [4, с. 20].

Про контраст і про те, як ним можна маніпулювати для створення візуальної ієрархії, також пише П. Макінтайр, вказуючи, що контраст — це різниця в характеристиках різних елементів, і що він є основним інструментом для створення візуальної стимуляції і акценту [5, с. 158]. За словами науковця, до характеристик, якими можна маніпулювати, щоб створити контраст, відносяться [5, с. 160−162]:

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

Контраст також впливає і на виразність композиції. Як стверджує В. Молочков, виразність — це якість композиції, яка проявляється в тому, що зображення швидко захоплює увагу глядача, ясно показує процеси, які дизайнер хотів відобразити. Фактично це відповідність вашої ідеї і форми, знайденої для її вираження. Коли глядачі не розуміють вашу ідею, швидше за все, винна композиція, а не сприйняття глядача. Виразність проявляється в умілому використанні контрастів за кольорами, світлотою, розмірами [6, с. 180].

Іще одним із ключових понять в композиції є вирівнювання. П. Макнейл визначає це поняття так: «вирівнювання — це впорядкування елементів таким чином, щоб вони максимально близько підступали до природних ліній (або кордонів), які вони утворюють» [4, с. 28]. Далі він наголошує, що вирівнювання уніфікує елементи, і даний процес часто називають роботою з сіткою. Невирівняні елементи мають тенденцію відбиватися від загальної групи і вимагати уніфікації, до якої ми так часто прагнемо [4, с. 28].

За словами Д. Кірсанова, вирівнювання — це одне з ключових понять композиції на площині, яке застосовується далеко не тільки до однорівневих елементів. Його можна порівняти з перекликами кольорів або текстур, подібністю форм; вирівнювання здатне встановити міцні відносини між елементами, розташованими досить далеко один від одного, надавши тим самим стійкість всій композиції. Мабуть, можна сказати, що вирівнювання — це природна тенденція розташування елементів, якою є сенс нехтувати тільки з метою пожвавити композицію, внести в неї певний елемент розкиданості і випадковості [3, с. 86]. композиція сайт візуальний сторінка Також Д. Кірсанов звертає увагу на допоміжну сітку, яка є дуже корисною в процесі вирівнювання:

«Зручно уявити собі щось на зразок накладеної на вашу сторінку координатної сітки, осередки якої мають розмір того чи іншого виступаючого елементу, і враховувати прагнення інших елементів „прилипати“ до ліній цієї сітки — лише враховувати, втім, а аж ніяк не беззастережно підкорятися цьому їх прагненню» [3, с. 83].

Д. Бородаєв визначає сітку як важливий стратегічний інструмент, який дозволяє впорядкувати складові елементи веб-сторінки:

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

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

Далі науковець підсумовує, що головним призначенням модульної сітки у веб-дизайні є впорядкування інформації у відповідності до її призначення та релевантності, створення композиційної структури веб-сторінки та всього вебсайту. У такий спосіб забезпечуються однорідність та естетичні якості веб-сайту [2, с. 15−16].

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

«Щільність розміщення матеріалу може бути вельми і вельми різною, і в значній мірі від неї залежать загальний стиль і настрій, що створюються композицією. Ділові, енергійні сторінки вимагають більш тісного розташування, ніж сторінки художнього, розважального та взагалі „неквапливого“ характеру. На останніх простір, що розділяє елементи, є повноправним елементом композиції, що робить свій внесок в загальне враження, і порівняно багато його (нерідко значно більше, ніж несучих інформацію елементів) саме тому, що, будучи порожнім, він вимагає певної компенсації кількістю за свою відсутнісну якість» [3, с. 89].

Також на важливість наявності достатнього порожнього простору звертає увагу С. Бердишев, говорячи, що на сторінці завжди повинна переважати інформація, що представляє інтерес для користувача, і що вона повинна кидатись в очі і бути просторово відокремленою від інших повідомлень. Це одна з причин, чому не слід боятись порожніх, «білих» областей, вважаючи їх марною тратою простору. До того ж, слова і картинки повинні візуально врівноважувати один одного, інакше композиція сторінки виявиться дисгармонійною. Справа в тому, що кожен об'єкт на білому або кольоровому полотні має візуальну «вагу», а тому шукає противагу [1, с. 57].

Важливим композиційним засобом також є пропорції. Як пише Д. Кірсанов, пропорцією в дизайні називають співвідношення розмірів або різних об'єктів, або складових частин чи різних вимірів (наприклад, ширини і висоти) одного об'єкту. Тут ми робимо перший крок від розмірів окремого об'єкту до просторових відносин всередині композиції — поки що абстрагуючись від взаємного розташування елементів і розглядаючи тільки співвідношення їх розмірів [3, с. 82].

Далі науковець розглядає особливості процесу вибору правильних пропорцій:

«Сучасний дизайнер вибирає пропорції майже виключно „на око“, домагаючись потрібного йому співвідношення активностей елементів не тільки варіюванням розмірів, але і за допомогою багатьох інших інструментів. Таким чином, чарівного правила вибору пропорцій на всі випадки життя не існує. При виборі розмірів елементів потрібно враховувати безліч чинників: внесок елементів в інформаційний зміст композиції, їх положення в контексті даної композиції (веб-сторінки) і більшої інформаційної одиниці (сайту), контрастні відношення між ними, необхідність нюансування і багато іншого. Стиль композиції багато в чому залежить від того, наскільки покірно дизайнер слідує „натуральним“ розмірам елементів, відповідним їх відносної важливості і традиціям оформлення, або ж, навпаки, наскільки вільно він варіює пропорціями, домагаючись незвичного звучання сторінки» [3, с. 83].

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

І саме П. Макінтайр дивиться на методи маніпулювання візуальними характеристиками сторінки для знаходження ідеальної гармонії між спокійним та стимулюючим настроями сторінки, і які полягають в тому, що треба [5, с. 154−156]:

• — обмежити кількість елементів на сторінці, усунувши текст і графіку, яка насправді не відповідає меті сайту;
• — повторно використовувати елементи на сторінці: форму, розмір, пропорції, колір та розміщення;
• — для забезпечення цілісності, створити порожній шаблон сторінки загального призначення і використовувати його як основу для більшості сторінок на сайті;
• — наскільки це можливо, розташувати в одну лінію зовнішні краї різних елементів сторінки;
• — організувати різні елементи сторінки у блоки, що допомагає сторінці виглядати простіше.
• — Також науковець зазначає, що для створення візуально привабливої сторінки потрібно [5, с. 162−168]: включити багато порожнього простору, тому що він забезпечує очі відпочинком, надаючи відчуття просторості;
• — знайти між елементами на сторінці візуальний баланс;
• — обрати композиційний центр, слідуючи правилу третин, тобто поділивши сторінку на третини по горизонталі та вертикалі, і використовувати одну або декілька точок перетину як область фокусу;
• — при створенні прямокутних форм використовувати прямокутник з золотим перетином, який має приблизне відношення ширини до висоти 1:1.6, тому що він є найбільш візуально привабливим;
• — для різноманітності, спробувати включити деякі округлені або неправильні форми;
• — для досягнення балансу уникати занадто багато одноманітності та занадто багато контрасту.

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

Список літератури

• 1. Бердишев С. Н. Искусство оформления сайта. Практическое пособие / С. Н. Бердишев. — Дашков, 2009. — 100 с.
• 2. Бородаєв Д. В. Веб-сайт як об'єкт графічного дизайну: автореф. дис. … канд. мистецтвознавства: 05.01.03 / Д. В. Бородаєв. — Харківська державна академія дизайну і мистецтв. — Харків, 2004. — 20 с.
• 3. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова / Д. Кирсанов. — СПб.: Символ-Плюс, 2004. — 376 с.
• 4. Макнейл П. Веб-дизайн. Идеи, секреты, советы / П. Макнейл. — СПб.: Пітер, 2012. — 272 с.
• 5. McIntire, Penny. Visual Design for the Modern Web. Berkeley: New Riders, 2008, 352 p.
• 6. Молочков В. П. Компьютерная графика для Интернета. Самоучитель / В. П. Молочков. — СПб.: Питер, 2004. — 368 с.

Анотація

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

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