Контрольні питання

1. Які етапи розробки передбачає проектування з використанням моделі Уолта Діснея?

2. Які задачі розв’язує розробник на етапі концептуального проектування?

3. Що повинен отримати розробник після завершення етапу логічного проектування?

4. Які підетапи та кроки складають етап фізичного проектування?

2 Основи композиції

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

Композиція – це цілеспрямована побудова цілого, де розташування й взаємозв'язок частин обумовлюється змістом, призначенням і гармонією цілого. Слово "композиція" походить від латинського "сompositio" що означає – створення, складання, зв'язок, зіставлення.

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

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

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

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

1. Принцип доцільності.

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

2. Принцип єдності.

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

3. Принцип домінанти.

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

4. Супідрядність частин у цілому. Групування.

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

5. Принцип динамізму.

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

6. Принцип рівноваги.

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

7. Принцип гармонії.

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

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

2.1 Правила композиції

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

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

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

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

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

Послідовність. Мається на увазі стильовий взаємозв'язок даної композиції (сторінки) з усіма сторінками сайта. Це досягається застосуванням одного й того ж формату, стилю, тональності, постійного використання єдиних прийомів: логотипа, рисованого персонажа, помітного девізу.

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

• Один шрифт.

• Накладення одного зображення на інше або одного елемента на іншій.

• Продумане використання пробілів.

• Графічні прийоми: стрілки, рамочки, штрихування, тон.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Багато користувачів сприймають сторінку в такому порядку:

1. Дивляться на графічне зображення.

2. Читають заголовок.

3. Читають текст.

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

• Привернути увагу читача

• Визначити основну думку сторінки

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

• Привернути інтерес користувача заголовком.

• Створити сприятливе враження про сторінку і її зміст.

• Забезпечити безперервність впливу всіх сторінок у даному сайті шляхом використання одних і тих же стильових прийомів.

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

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

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

Механічні пристосування, такі, як вказівний палець, прямокутник, лінія або стрілка (у телебаченні – переміщення акторів або камери, зміна мізансцени) переводить увагу з одного об'єкта на іншій.

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

Може бути використана природна звичка читача починати читання з верхнього лівого кутка сторінки й продовжувати зигзагоподібно до низу оголошення.

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

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

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

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

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