Портфоліо з дисципліни Основи технічної естетики та дизайну видання Парна Анастасія, ВСР 3 курс, 2016
Готичний стиль у дизайні
Готичний стиль
Гоотика — це художній стиль, що виявився завершальним етапом у розвитку середніх століть культури країн Західної Європи. Термін «Готика» введений в епоху Відродження як зневажливе позначення всього середньовічного мистецтва. Готика зародилася в Північній частині Франції (Ільде-Франс) у середині 12 ст. і досягла розквіту в першій половині 13 ст.
Готика розвивалася в країнах, де панувала католицька церква, і під її егідою феодально-церковної основи зберігалися в ідеології і культурі епохи Готики. Готичне мистецтво залишалося переважно культовим по призначенню і релігійним по тематиці: воно було співвіднесено з вічністю, з «вищими» ірраціональними силами. Відомо, що готичний художній стиль, визначився у своїх типових рисах під час розвитку західноєвропейської середньовічної художньої культури. Беручи початок в середині XII ст. у північних та центральних областях Франції на теренах Іль де Франса, він отримав загальноєвропейське поширення і пройшов ряд самостійних етапів еволюції та національних версій.
Розквіт середньовічної художньої культури виникав на базі інтенсивного соціального руху широких народних мас, які викликали ще задовго до формування мистецтва могутні ідеологічні течії. Художня культура сягає корінням безпосередньо до самодіяльної практики соціального низу. Таким чином, прагнення особистості на увагу до себе підготувало основу для появи нових форм та способів самовираження у художній культурі. Зі зростанням чисельності міст та піднесенням ролі, яку вони відігравали, зростала потреба в нових формах організації праці. Ремісники у містах об‘єднувалися в союзи та цехи. Зміцнення міських ремесел сприяло формуванню міської культури. В багатьох містах на базі церковних та приходських шкіл виникали університети, як нові форми культурнопросвітницьких установ. Вони сприяли розвитку освіченості та поступово змінювали мислення середньовічної людини. Посилюється дух раціоналізму, дух допитливості, встановлюється тенденція до дослідження нового. Зростала індивідуалізація світовідчуття кожної особистості. Поступово університети перетворилися на своєрідні інтелектуальні центри.
Щодо положення митця, архітектора, то як висококваліфіковані майстри вони мали певний ранг та статус у суспільстві і працювали вони, зрозуміло, на замовника (суверена чи священика). Але при цьому їм була притаманна деяка свобода самовираження як творчій особистості. Це давало можливість автору надати своєму творінню неповторного вигляду. Собори та ратуші будувались на замовлення міської комуни, однак всі вони відрізнялися своєю особливою темою чи ідеєю. Це свідчить, що кожна будівля цілком була підлеглою певного плану чи задуму. Саме у готичний період починається теоретизація техніки мистецтва. Але в розмаїття образів впліталися такі, що мали зовсім віддалене відношення до загальної церковної чи архітектурної концепції.
Існує багато так званих готичних гротесків, які є відлунням народної фантазії. І хоча діячі церкви з розпачем дивилися на цю самодіяльність, але не могли нічого вдіяти, бо тут діяла стихія колективного народного мистецтва. Декілька поколінь художників-ремісників будували та прикрашали собор, і внаслідок цього можна бачити не тільки приклади загальної стильової обробки будівлі, але й взірці індивідуальної уяви майстрів. Середньовічні майстри віддавали перевагу яскравим кольорам, це помітно з вітражів, мініатюр та скульптур (готика була поліхромною, тому скульптури та стіни розфарбовувалися). Готичні собори великі, живописні, вони є відлунням реального життя середньовічного міста. Слід зауважити, що середньовічний майстер вже не є рабом, за ним визнаються права людини, але фактично він не є цілком вільним від обставин життя. Він ніби належить самому собі і в той же час не належить, що знайшло відгук у його творчості. Середньовічні майстри не залишали своїх імен історії, вони просто працювали над своїм ремеслом.
Отже, закони цього ремесла і закони конструкції приводили до використання певних форм в мистецтві, а втілення бажання змінити форму, стиль примушували міняти конструкцію та винаходити нові прийоми в обробці матеріалів. Зміни в конструкції змінювали естетику, тобто сам архітектурний стиль. Спадає на думку, що все це — одночасний процес: естетика змінює техніку, а техніка змінює естетику. Відомо, що поворот до готики почався з архітектури та потім розповсюдився на скульптуру, живопис та інші види мистецтва. В живописі та книжковій мініатюрі було більше можливостей втілити своє особисте бачення світу, тому що створення об‘єктів в цій галузі не забирало стільки часу, як побудова собору, і майстер міг завершити справу сам. Але й ці сфери були достатньо канонізовані та контрольовані церквою. Готичний живопис дуже експресивний та драматичний. В цьому й був прояв саме того унікального, що міг надати художник до свого творіння, все ж вимушений враховувати вплив церкви.
Готика, не пов'язана безпосередньо з будь-якими національними умовами, була наднаціональним історичним явищем і проявила себе саме в той період Середньовіччя, коли національні розходження були змішані у свідомості релігійної та церковної єдності, якою було охоплене все європейське суспільство. Таким чином, готика як художній стиль, в більшості своїх проявів, це скоріше результат творчих зусиль народу, ніж яскравий задум генія; це не стільки витвори індивідуальні, скільки робота цілого суспільства; це художньо-історична спадщина, яку залишили після себе покоління середньовічних майстрів.
Середньовічні майстри часто надавали фігурас неприродні пози та жести для того, щоб сильніше передати такі релігійні почуття, як віра в бога або каяття в гріхах.
Статуї та живописні зображення «святих» були дуже витягнуті та сильно вкорочені.
Готичний стиль в період Середньовіччя багатий на орнаменти та символіку. У період готики був створений, точніше сконструйований, за допомогою циркуля та без впливу будь-якої органічної форми типу ажурного орнаменті, що отримав назву масверк. Орми цього орнаменту дуже різноманітні: троянжи, «риб’яча бульбашка», трилисники тощо.
МАСВЕРК – готичний орнамент, який заснований на складному переплетенні прямий та дугоподібних ліній. Використовується, як в архітектурі, так і декоритивно-прикладному мистецтві.
Лілія отримала свою назву від давньокельтського «лілі», що означає «білизна». В алхімії біла лілія символізувала жіночий принцип. В християнстві лілія – це чистота та невинність, символ Діви Марії. У вранції, де сивол лілії має для француз особливе значення, три лілії – це три добродія – співчуття, правосуддя та милосердя.
Головні особливості готичного стилю: o o o o
Вертикальність композицій, направленість догори; Органічний зв’язок архітектури та скульптури; Стрільчані (а не напівкруглі) арки; Широкі інтер’єри с величезними прорізними вікнами з вітражами; o Пишний декор з використанням золотої фарби, різьблення по дереву, розфарбованої релігійної культури.
Найвідоміші готичні споруди
Аббатство Сен-Дені в північному пригороді Парижу, головний монастир середньовічної Франції
Собор Паризької Богоматері
Собор в Кельні
Готичний стиль в газетах та книгах
Готичний стиль у Web-design Чи боїшся ти Темряви?
Говорячи про готичний стиль дизайну ми відразу згадуємо гнітючу красу Дракули замку Брема Стокера. Ви бачили замок Дракули в Трансільванії? Чи знаєте ви, що слово "гот" було синонімом до "вандал" в 17-му столітті? Ви знаєте, що характеризує справжню готичну культуру і як це відображено в веб-дизайні?
Що стосується веб-дизайну, то він як дзеркало, відображає всі процеси, що відбуваються в суспільстві. Звичайно, субкультура Гот не могла не впливати на нього. Субкультура Готів є сучасною субкультурою, яку можна знайти в багатьох країнах. Вона виникла в Англії на початку 1980-х в готичних рок-сценах (відгалуження постпанк-жанру). Субкультура готів збереглася набагато довше, ніж інші тієї ж епохи, і продовжує диверсифікувати. Субкультура готів пов'язав смаки в музиці, естетики та моди. Музика субкультури гот включає в себе ряд різних стилів, в тому числі готичний рок, Deathrock, пост-панк, дарквейв, ефірний, даркембієнту, індустріальна музика й неокласична. Стилі одягу в діапазоні субкультури від Deathrock, панку і вікторіанських стилів, або їх комбінації вище. Найчастіше вони поєднуються в темному одязі, макіяжі та волоссі.
Про основи все вищесказане, давайте сформулюємо деякі основні загальні принципи стилю Gothic веб-дизайну: o В основному темні кольори (всі відтінки чорного, коричневого, червоного, нічногосинього тощо); o Skeuomorphic елементи, присутні в макеті. o Марочні, стримані відчуття; o Гранж текстури. o Шрифти минулих віків (old-school); o Страшна атмосфера. o Тверді золоті і срібні рами. o Символістика року: як черепа з трояндами в образах. o Поєднання чудових і огидних елементів. o Кров, повний місяць, монстри, кладовища, ворони й вампіри в середовищах. o Прямі лінії. o Гострі кути. o Химерні декоративні елементи.
Тема 2а. Дотримання законів композиції • Закон цілісності: вся композиція неподільна, єдина, але кожен елемент несе інформацію. Вирівнювання – центральне. • Закон підпорядкованості: композиція в усіх деталях підпорядковується ідейному змісту.
Тема 2а. Дотримання законів композиції • Закон цілісності: вся композиція неподільна, єдина, але кожен елемент несе інформацію. • Закон підпорядкованості: композиція в усіх деталях підпорядковується ідейному змісту. • Діагональ у композиції спрямовує погляд та допомагає нам прослідкувати за всіма елементами.
Тема 2а. Дотримання законів композиції • Закон цілісності: вся композиція неподільна, єдина, але кожен елемент несе інформацію. Вирівнювання – центральне. • Закон підпорядкованості: композиція в усіх деталях підпорядковується ідейному змісту. • Закон констрасту: з усієї композиції виділяється нижній елемент. Він сильно контрастує з усіма елементами.
Тема 2а. Дотримання законів композиції • Закон цілісності: вся композиція неподільна, єдина, але кожен елемент несе інформацію. • Закон підпорядкованості: композиція в усіх деталях підпорядковується ідейному змісту. • Трикутник у композиції допомагає нам зробити свої акценти.
Тема 2б. Стилі дизайну Хіпстерський стиль • У ньому є багато шрифтів. Приматанним є трішки «брудний» шрифт. • Багато інших дрібних елементів, окрім шрифтів. • Присутні приматанні цьому стилеві стрічки.
Тема 2б. Стилі дизайну Ретро стиль • Використана своєрідна картинка, яка притаманна лише цьому стилеві. • Ретро кольори (особливо червоний). • Пошарпаність картинки. • Чіткий шрифт.
Тема 2б. Стилі дизайну Мінімалістичний стиль • Мінімум кольорів. • Виділення головної думки й нічого крім неї. • Один шрифт, один елемент. • Білий фон.
Тема 3. Розташування елементів за композиційними центрами
Повністю симетричний розворот. Це дзеркальна симетрія.
Тема 3. Розташування елементів за композиційними центрами Гвинтова симетрія. Спрямовує погляд від початку до кінця історії.
Тема 3. Розташування елементів за композиційними центрами Осьова симетрія. Усе прямує до центру симетрично.
Тема 3. Розташування елементів за композиційними центрами Дисиметрія.
Тема 3. Розташування елементів за композиційними центрами Антисиметрія.
Тема 3. Розташування елементів за композиційними центрами Асиметрія.
Рівновага
Симетрична рівновага Всі елементи, що знаходяться по різні сторони вертикальної осі, розташованої в центрі сторінки, дзеркально відображають один одного. Логотип, навігаційна панель, круглі фотографії, заголовок, три колонки тексту центровані.
Симетрична рівновага
Втім, симетрія не ідеальна: наприклад, колонки містять різну кількість тексту. До речі, зверніть увагу на верх сторінки. І логотип, і навігаційна панель розташовані по центру, але візуально вони не здаються центрованими. Можливо, логотип варто було б центрувати по амперсандах або, принаймні, по області поруч з ним.
У трьох текстових посиланнях меню, розташованих у правій частині навігаційної панелі, більше букв, ніж в посиланнях лівій частині здається, що центр повинен розташовуватися між About і People. Може бути, якщо розташувати ці елементи в дійсності не по центру, але так, щоб візуально вони здавалися центрованими, композиція в цілому виглядала б більш збалансованою.
Симетрична рівновага Домашня сторінка Tilde ще один приклад дизайну з симетричним рівновагою. Як і на Helen & Hard, все розташовується навколо вертикальної осі, що проходить по центру сторінки: навігація, текст, люди на фотографіях.
Симетрична рівновага
Як і у випадку з Helen & Hard, симетрія не ідеальна: по-перше, центровані рядки тексту не можуть бути відображенням фотографії знизу, а по-друге, пара елементів вибивається із загального ряду - стрілка «Meet the Team» вказує вправо, і текст внизу сторінки закінчується ще однією стрілкою вправо. Обидві стрілки є закликами до дії і обидві порушують симетрію, привертаючи до себе додаткову увагу. Крім того, за кольором обидві стрілки контрастують з фоном, що теж притягує погляд.
Асиметрична рівновага Домашня сторінка Carrie Voldengen демонструє асиметричну рівновагу навколо домінуючої симетричної форми. Дивлячись на композицію в цілому, можна побачити кілька окремих один від одного форм.
Асиметрична рівновага
Більшу частину сторінки займає прямокутник, що складається з решітки менших прямокутних зображень. Сама по собі решітка симетрична і по вертикальній, і по горизонтальній осі і виглядає дуже міцною і стабільною - можна навіть сказати, що вона занадто збалансована і виглядає нерухомою.
Блок тексту справа порушує симетрію. Решітці протиставлений текст і круглий логотип в лівому верхньому кутку сторінки. Ці два елементи мають приблизно рівну візуальну масу, що впливає на решітку з різних сторін. Відстань до уявної точки опори приблизно таке ж, як і маса. Блок тексту справа більше і темніше, але круглий блакитний логотип додає ваги своєї області і навіть збігається з верхнім лівим кутом решітки за кольором. Текст внизу решітки, здається, звисає з неї, але він досить легкий, щоб не порушувати композиційної рівноваги.
Зверніть увагу, що порожній простір теж здається збалансованим. Порожнечі зліва, зверху і знизу, а також справа під текстом - врівноважують один одного. У лівій частині сторінки більше порожнього простору, ніж справа, але в правій частині є додатковий простір вгорі і внизу.
Асиметрична рівновага Колона на фотографії зміщена трохи вправо від центру і створює помітну вертикальну лінію, оскільки ми знаємо, що колона - це дуже важкий об'єкт. Перила зліва створюють міцний зв'язок з лівим краєм екрану і теж видаються досить надійними.
Асиметрична рівновага
Текст над перилами начебто спирається на них; до того ж, справа він візуально збалансований фотографією хлопчика. Може скластися враження, що перила як би звисають з колони, порушуючи баланс, але наявність хлопчика і темніший фон за ним врівноважують композицію, а світлий текст відновлює баланс в цілому.
Золотистого кольору посилання в лівому верхньому і нижньому правому куті створюють відчуття трансляційній симетрії, як і кнопка внизу сторінки. Білий текст так само повторюється.
Радіальна рівновага
Радіальна рівновага
Домашня сторінка Vlog.it демонструє радіальну рівновагу, що помітно на скріншоті. Все, крім об'єкта в правому верхньому куті, організовано навколо центру, і три кільця зображень обертаються навколо центрального кола.
Втім, на скріншоті не видно, як сторінка завантажується: лінія малюється з нижнього лівого кута екрану до його центру - і з цього моменту все, що з'являється на сторінці, обертається навколо центру або розходиться з нього променями, як кола по воді.
Маленький коло в правому верхньому куті додає трансляційній симетрії і асиметрії, підвищуючи візуальний інтерес до композиції.
Радіальна рівновага
Радіальна рівновага
На головній сторінці Opera's Shiny Demos немає кіл, але все текстові посилання розходяться із загального центру, і легко уявити, як вся ця конструкція обертається навколо одного з центральних квадратів або, може бути, одного з кутів.
Назва Shiny Demos в лівому верхньому кутку і логотип Opera в правому нижньому - врівноважують один одного і теж ніби виходять з того ж центру, що і текстові посилання.
Це хороший приклад того, що для досягнення радіального рівноваги не обов'язково використовувати кола.
Мозаїчна рівновага
Мозаїчна рівновага
Ви можете подумати, що мозаїчний баланс використовується на сайтах найрідше, особливо після того, як в якості прикладу були названі картини Джексона Поллока. Але мозаїчне рівновагу зустрічається набагато частіше, ніж здається.
Яскравий приклад - домашня сторінка Rabbit's Tale. Розкидані по екрану букви виразно створюють відчуття хаосу, але композиційне рівновагу присутній.
Майже рівні по величині області кольору і простору, розташовані з двох сторін, справа і зліва - врівноважують один одного. Кролик в центрі служить точкою опори. Кожен елемент не привертає уваги сам по собі.
Складно розібратися, які конкретні елементи врівноважують один одного, але в цілому баланс присутній. Може бути, візуальна маса правого боку трохи більше, але не настільки, щоб порушити рівновагу.
Мозаїчна рівновага Сайти з великою кількістю контенту, наприклад, новинні портали або сайти журналів, теж демонструють мозаїчне рівновагу. Ось скріншот домашньої сторінки The Onion.
Мозаїчна рівновага
Тут безліч елементів, їх розташування не симетрично, розмір текстових колонок не однаковий, і складно зрозуміти, що врівноважує що. Блоки містять різну кількість контенту, і, отже, їх розміри відрізняються. Об'єкти не розташовуються навколо якогось загального центру.
Блоки різних розмірів і щільності створюють деяке відчуття безладу. Оскільки сайт оновлюється щодня, структура цього хаосу постійно змінюється. Але в цілому рівновагу зберігається.
Можна порахувати цей приклад музичного рівноваги притягнутим за вуха, але багато сайтів організовують свій контент подібним чином. Хоча, напевно, в основному безлад НЕ спланований спеціально.
Формальна рівновага
Формальна рівновага
Неформальна рівновага
Неформальна рівновага
Неформальна рівновага
Тема 4. Динаміка, статика, рух
Напрям погляду На цій рекламі погляд спрямований від продукту й виходить за межі. Так погляд не може нормально сфокусуватися на тому, що рекламують. Проте погляд надає динаміку рекламі.
Напрям погляду Напрям погляду і створює рух фотографії.
Напрям рукою
Напрям лініями
Динаміка форми
Динаміка форм
Динаміка руху Пташка рухається. Це найлегший спосіб надати динаміку фотографії/картинці/сайту/розвороту тощо.
Динаміка руху
Статика
Усі предмети утворюють певну фігуру (трикутник). Це й створює спокій, статику сайту.
Предмети утворюють просто геометричну фігуру – коло.
Відображення руху у композиці Напрям погляду
Напрям рукою
Фотоісторія
Дія в часі
Зміна насиченості, кольорового тону
Зображення дороги, яка направляє погляд
Емоційний рух композиції
Рухом об’єкта композиції, спрямованість у певному напрямку
Частковий вихід об’єкта за межі композиції
Вільний простір перед об’єктом, що рухається.
Виділення силуету світлом та тінню
Діагональне розташування предметів
Інтервали між об’єктами
Читач починає дивитися з верхнього лівого кута
Зміна афіші Для цієї афіші я обрала спокійні кольори та мінімалістичний стиль. Це допомагає спрямувати погляд куди потрібно. Уся необхідна інформація зазначена, але вона не переобтяжує листівку. Увагу привертають усі важливі елементи по черзі. Є вирівнювання. Кожний елемент обов’язково вирівняний в декількома іншими.
Акценти на обкладинці • Кожен елемент на обкладинці привертає увагу. • Завдяки грі світла та тіні, обкладинку хочеться розглядати далі й далі. • Акценти зроблені на головній темі номера, що підкреслено фотографією (в неї інші кольори). • Акценти зроблені й у назві: синій LIFE підкреслює, що фотографія – це життя. • Акценти зроблені й на головній фотографії, за допомогою світла та тіні.
Невдала реклама
• Забагато інформації. • Багато однотипових елементів, немає основного акценту. • Текстовий матеріал не уніфікований: багато різних гарнітур, розмірів шрифтів, багато кольорів. • Немає центру.
• Весь фокус у центрі. • Увага спрямована на чоловіка, а не на продукт, який рекламують. • Багато зображальних елементів, які відволікають увагу. При чому вони ще й налазять одне на одного.
• Однакова відстань між різними предметами. • Важко сфокусуватися на потрібному.
• Плутанина в заголовках, підписах. • Не можна виділити головне. • Фокус «стрибає» з одного елементу на інший.
Фірмовий стиль (фотограф) •
Логотип: схилений фотоапарат.
•
Кольори: темно-фіолетовий, зелений.
•
На різних прикладах (візитка, конверт, документи) зображено, як можуть елементи фірмового стилю розташовуватися на різній продукції.
Фірмовий стиль (фотограф)
Кадрування
Траєкторія погляду
Дякую за увагу!