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

Размещено на http://www.allbest.ru/

ПРИЙОМИ І ЗАСОБИ КОМПОЗИЦІЇ У ВЕБ-ДИЗАЙНІ

Компанєєтс М.О.

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

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

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

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

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

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

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

За словами В. Молочкова, «композиція» є ключовим словом у дизайні, і він визначає це поняття як поєднання різних частин в єдине ціле відповідно до якої-небудь ідеї [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 с.

Анотація

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

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

Размещено на Allbest.ru