• У дома
  • статии
  • Как каноничните режими на Ренесанса подобряват нашия UI Design.
публикувано на 28-09-2019

Как каноничните режими на Ренесанса подобряват нашия UI Design.

Когато видите вдъхновение, какво точно търсите? Техника, цветова палитра или определена форма?

Кредит: Eric Terrade - Unsplash

Като дизайнер всеки ден се опитвам да имам качествено време за вдъхновения. И когато наблюдавам вдъхновение, се опитвам да хвана най-чистата концепция зад вдъхновението или зад техниката и мисля за начините да прилагам това в дизайна си.

Вярвам, че най-добрият начин да вървим към бъдещето е като погледнем към миналото и така открих в ранното модерно италианско изкуство страхотни режими, които да прилагам върху моя стил и да развивам илюстрацията и потребителския си интерфейс. Тези режими са известните четири изобразителни техники, характеризиращи ранното модерно италианско изкуство, така наречените „4 канонични режима на живопис на Ренесанса“. Те са наречени Sfumato, Unione, Chiaroscuro и Cangiante.

Сфумато

Sfumato е изобразителна техника, при която цветовете се смесват. Той създава изображение, което няма линии или ръбове около фигурите, създавайки мек мъгляв ефект.

Отляво: Раждането на Венера (1485 г.) от Ботичели; дясна страна: Мона Лиза (1503) от Леонардо да Винчи.

Класически пример за разбиране на този режим е сравняването на две страхотни картини на Ботичели и Леонардо да Винчи. Botticelli не използва Sfumato. В изображението има внимателни очертания, но ясно можете да видите черен контур, определящ брадичката на Венера. За разлика от него, Леонардо използва Sfumato, за да създаде натуралистична градация на сенките върху неговата Monalisa.

Леонардо беше запален наблюдател на природата и се заинтересуваше да възпроизведе начина, по който очите ни възприемат света. Не виждаме очертания около обекти или хора. И така Леонардо използва Сфумато, за да представи света така, както го виждат очите ни.

Попадането на света на дигиталните продукти, добра философия, която имаме в Главата за дизайн в Чама, е, че не правим промени в дизайна си, а го подобряваме. Това означава, че не започваме от нулата, когато искаме да създадем нещо ново. Ние усъвършенстваме нещо, което вече съществува. Започваме с нещата, които имаме и добавяме нашите изследвания и знания, за да изберем пътя, който трябва да следваме. Така започнах да разглеждам целия продукт и въведох концепцията на Sfumato, за да подобрим нашите илюстрации и дизайн. Започнах да го използвам в човек, който е добре познат на нашите потребители, нашият герой, наречен Chamoso. Той е ключ към комуникацията на нашия Потребителски интерфейс с потребителите и, разбира се, съсредоточихме вниманието си на първо място, създавайки нова версия на този човек.

Отляво: бившата версия на Chamoso; дясна страна: новият Chamoso.

Обърнете внимание, че формите на Chamoso са еднакви и за двете версии. Но като сравнението между Ботичели и Да Винчи, първо зарязах очертанията около обекта. Въпреки че използвах плосък стил, прилагах нюанси, които правят формата унифицирана. Тогава промених израза на по-сложни следи.

Това важи и за UI Elements. Компонент, който прави добър пример са Картите. Много често се вижда карта в редовно състояние с ненужни контури или капки сенки. Това не предава никакви съобщения и е още една информация в област, която вече има много информация.

Използвайки контрастен фон като елемент за разделяне на картите, ние изпускаме визуална информация, за да привлечем вниманието към действителната информация.

Можем да използваме капките и контурите, за да определим някои UI състояния.

Unione

Вторият режим се нарича Unione и е много подобен на Sfumato. Всъщност това е отговорът на Рафаел на Сфумато на Леонардо. Unione също се опитва да създаде бавна градация на цветовете, но за разлика от Sfumato, Unione използва живи и по-наситени цветове. Можете да видите това по-долу в патинга на Рафаел. Подобно на Леонардо, Рафаел не използва очертания, но за разлика от Леонардо, Рафаел използва ярки цветове.

Отляво: Мона Лиза (1503) от Леонардо да Винчи; дясна страна: Света Екатерина Александрийска (1508 г.) от Рафаел.Разгледайте цветовете на всяка картина поотделно и проверете как цветовата палитра на Рафаел е по-наситена от тази на Да Винчи.

Не толкова жизнен като цветовете на Рафаел в неговата картина, аз използвах тази концепция, за да създам по-унифициран UI Design, използвайки малко синя наситеност в градацията на цветовете. Поради тази наситеност изображенията стават по-последователни и аз също използвах възможността да използвам цветовете на марката в цялата композиция.

За да направя това, взех нюансите на сивото, които съставяха моята илюстрация и ги наситих със синьо.

Дясна страна със синята наситеност.

Създадох и ефект на мъгла, използвайки плътни форми. Това е много изискана подробност, която имаше невероятен резултат в началото, но е още по-силна, когато приложите цялата концепция към композицията.

За да обясня нашето мислене на състава, първо трябва да обясня концепцията на 3 слоя:

Това е концепция, която наистина ми е приятно да използвам, в която потребителският интерфейс е 3D среда. Тя се основава на концепцията на Elevation от Google Material Design. Също така използвайки 2D елементи и плоския стил, трябва да разгледате цялото като 3D среда, по този начин можете да определите 3 слоя и един има функцията да се възползва от останалите.

Първият е фонът и основната му функция е да подчертава следващите слоеве, обикновено чрез използване на цветове и форми, които контрастират с елементи от втория слой.

Вторият е проводникът към третия. Обикновено именно съдържанието определя това решение, което потребителят ще вземе.

И последният, третият слой, определя взаимодействие и промяна или финализиране на потока. Обикновено това е слоят на Действията или слой, който ще подчертае информацията за потребителя, за да определи действието, което ще предприеме.

Трите слоя са дълга тема, но нещото е, че ако забележите дълбоко интерфейсите, които имаме в ежедневието си, ще можете лесно да идентифицирате тази концепция. Това показва високо качество на информационната архитектура и йерархия на елементите. Но този лесен начин да ги идентифицирам е това, което ме притеснява, защото въпреки че слоевете са свързани, съставът няма единство.

Поради тази причина почти не използвах чисто черно-бяло в състава. Само в краен случай, но и в този случай, тъй като композицията има вариация на синьото, абсолютното бяло изглежда като цвета на лед поради незадължителна илюзия. Затова използвам Синьото като основен цвят и нюанси на синьото в моята композиция. Бялото, черното и нюансите на сивото се смесват с малко синьо, така че слоевете в моята композиция са свързани и стават част от цялото.

Chiaroscuro

Това е една от любимите ми техники и тази, която ме изненада най-много, когато видях картина пред себе си. Chiaroscuro е техника, при която художникът създава висок контраст между светло и тъмно.

Нощният страж (1642) от Рембранд.

Картина, използваща Chiaroscuro, има дълбоки тъмни сенки и ярки акценти един до друг. Chiaroscuro създава драматичен ефект, който понякога изглежда, сякаш е прожектиран прожектор върху фигурата и което също прави фигурата да изглежда по-закръглена в 3-D. Киароскуро е бил широко използван през Ренесанса и Барока.

Караваджо ще стане известен с използването на още по-драматичен подход към Киароскуро, наречен Тенеброзо. Това е тип Chiaroscuro, който създава по-интензивен контраст на светло и тъмно.

Христос на колоната (1607 г.) от Караваджо.

Много впечатляващо е силата, която този режим има при насочването на очите ни към информацията. Тъмният фон е елемент за привличане на вниманието и създаване на среда за съдържанието в контраст, което ще ви насочи към информацията.

"Всъщност този интензивен контраст е разказвачът на историята зад платното."

Може би, когато видяхте първата версия на Chamoso, когато говорех за Sfumato, си помислихте, че чистият цвят на тялото му е да го почисти и да няма видимост. Това е така, защото използвах режима Chiaroscuro. Това е много важно, защото създадох дълбок контраст и той защитава слоя (който нарекох информационен слой), за да предава по-ясно информацията.

Слой по слой

Все още използвайки концепцията за трите слоя, първият слой е един от фон. Тя трябва да бъде привлекателна, за да задържи вниманието на потребителя.

Вторият слой създава пространство, за да показва информацията по ясен начин. В Design това е известно като отрицателно пространство или празно пространство и в този случай тялото на героя е празно пространство. Той не само определя границите на обектите, но и създава необходимите връзки между тях според принципите на Гещалт и изгражда ефективно визуално представяне.

Що се отнася до последния слой, ще мога да го обясня по-добре, като говоря за последния каноничен режим.

Cangiante

Cangiante се характеризира с промяна в нюанса или цвета с цел изобразяване на сенки и акценти. Картината на Микеланджело на тавана на Сикстинската капела е чудесен пример за тази техника.

Пророк Даниил - Сикстинската капела (около 1508–1512 г.) от Микеланджело.

Вижте робата на пророк Даниил тук. Можете да видите, че засенчената част на робата е боядисана в зелено, но подчертаната част е жълта.

Използвах нюанси на синьото във всички илюстрации в състава на първия слой (фон) и втория слой (съдържание). Но аз използвах друг цвят в третия, защото това е информационният слой. Подготвих полето за работа върху последния слой. Това е от съществено значение, защото мога да го използвам за много ситуации, за да информирам и създавам комуникация с потребителите.

И така се родиха тези момчета по-долу, моля, приветствайте отряда "Шамос":

Използвах и тази концепция в интерфейса. В картите, които ви показах по-рано, ETA (очакваното време на пристигане) и състоянието на доставката са основната информация, която потребителят трябва да знае, за да вземе решение.

Ето няколко примера за окончателна илюстрация и UI Design:

Ако искате да видите повече, проверете нашия дрибъл (и ни дайте „Любов“). https://dribbble.com/chamadesign

Както можете да видите, каноничните режими на Ренесанса не включват процес на създаване, а процес на еволюция. Sfumato е за „Повече е по-малко“. Unione е за последователност и съгласуваност. Chiaroscuro е за Отрицателното пространство. И Cangiante е за ефективното използване на противоположни цветове. Настоятелното търсене на тези режими през целия процес на проектиране е това, което ще накара вашия дизайн да генерира висцерална емоция у вашите потребители.

Точно както Дитер Рамс беше вдъхновение за Джони Айв, великите имена на живопис могат да вдъхновят вашия дизайн. Тайната е, че когато гледате вдъхновение, не се придържате само към техниката, а по-скоро към чистата концепция зад нея.

Благодаря ви за четенето,

Линкълн.

Споменах ли, че се наемаме? Вижте: https://chamatheapp.bamboohr.co.uk/jobs/

Вижте също

Най-вдъхновяващият айсберг в света не е това, което изглеждаПреглед: „Шоуто на Шер“ на Бродуей, КучкиКак може разнообразието и рутината да живеят заедно?Прекрасна дата на изпълнител, разсейване и самозащитаArt ex machinaПисатели: Добре е да мислим, че си ужасен - съпротивата е подарък