Jak kánonické režimy renesance zlepšují náš design uživatelského rozhraní.

Když vidíte inspiraci, co přesně hledáte? Technika, barevná paleta nebo konkrétní tvar?

Kredit: Eric Terrade - Unsplash

Jako designér se každý den snažím mít kvalitní čas na inspiraci. A když pozoruji inspiraci, snažím se zachytit nejčistší koncept za inspirací nebo za technikou a přemýšlím o způsobech, jak ji aplikovat na svůj design.

Věřím, že nejlepším způsobem, jak jít do budoucnosti, je podívat se na minulost, a tak jsem v raném moderním italském umění našel skvělé způsoby, jak aplikovat na můj styl a rozvíjet své ilustrace a své uživatelské rozhraní. Tyto režimy jsou slavné čtyři obrazové techniky, které charakterizovaly rané moderní italské umění, tzv. „4 kanonické malířské režimy renesance“. Jmenují se Sfumato, Unione, Chiaroscuro a Cangiante.

Sfumato

Sfumato je obrazová technika, ve které se barvy mísí dohromady. Vytváří obrázek, který nemá žádné čáry nebo hrany okolo postav, čímž vytváří jemný mlhavý efekt.

Levá strana: Narození Venuše (1485) od Botticelliho; pravá strana: Mona Lisa (1503) od Leonarda da Vinciho.

Klasickým příkladem pro pochopení tohoto režimu je porovnání dvou velkých obrazů Botticelliho a Leonarda da Vinciho. Botticelli nepoužívá Sfumato. Na obrázku jsou opatrné obrysy, ale můžete jasně vidět černý obrys definující Venusovu bradu. Naproti tomu Leonardo používá Sfumato k vytvoření naturalistické gradace stínů na jeho Monalise.

Leonardo byl horlivým pozorovatelem přírody a zajímal se o opakování způsobu, jakým naše oči vnímají svět. Nevidíme obrysy kolem předmětů nebo lidí. A tak Leonardo používá Sfumato k reprezentaci světa, jak to vidí naše oči.

Přistátím ve světě digitálních produktů, dobrou filozofií, kterou máme v Design Chapter v Chama, je to, že v našem designu neprovádíme žádné změny, vylepšujeme ho. To znamená, že nezačínáme od nuly, když chceme vytvořit něco nového. Vylepšujeme něco, co již existuje. Začneme tím, co máme, a přidáme naše výzkumy a znalosti, abychom vybrali cestu, kterou musíme sledovat. Tak jsem se začal zabývat celým produktem a představil koncept Sfumato, abych vylepšil naše ilustrace a design. Začal jsem to používat u chlapa, který je dobře známý našim uživatelům, naší postavě zvané Chamoso. Je klíčem k komunikaci na našem uživatelském rozhraní se zákazníky a samozřejmě jsme svou pozornost zaměřili především na vytvoření nové verze tohoto chlapa.

Levá strana: dřívější verze Chamoso; pravá strana: nový Chamoso.

Uvědomte si, že tvary Chamoso jsou stejné pro obě verze. Ale stejně jako porovnání Botticelliho a Da Vinciho jsem poprvé upustil obrysy kolem objektu. Přestože jsem použil plochý styl, aplikoval jsem odstíny, které sjednocují tvar. Pak jsem změnil výraz na sofistikovanější stopy.

To platí také pro prvky uživatelského rozhraní. Komponenta, která je dobrým příkladem, jsou Karty. Je velmi běžné vidět kartu v pravidelném stavu se zbytečnými obrysy nebo vrženými stíny. To nepřináší žádné zprávy a je to další informace v oblasti, která již má spoustu informací.

Používáme kontrastní pozadí jako prvek k oddělení karet, upustíme vizuální informace, abychom upozornili na skutečné informace.

K definování některých stavů uživatelského rozhraní můžeme použít stíny a obrysy.

Unione

Druhý režim se nazývá Unione a je velmi podobný Sfumato. Ve skutečnosti je to reakce Raphaela na Leonardovu Sfumato. Unione se také pokouší vytvořit pomalou gradaci barev, ale na rozdíl od Sfumato, Unione používá živé a sytější barvy. Můžete to vidět níže v Raphaelově paitingu. Podobně jako Leonardo Raphael nepoužívá obrysy, ale na rozdíl od Leonarda používá Raphael jasné barvy.

Levá strana: Mona Lisa (1503) od Leonarda da Vinci; pravá strana: svatá Kateřina z Alexandrie (1508) od Raphaela.Podívejte se samostatně na barvy každého obrazu a zkontrolujte, jak je barevná paleta Raphaela sytější než barva Da Vinciho.

Ne tak zářivé jako Raphaelovy barvy v jeho malbě, použil jsem tento koncept k vytvoření více sjednoceného designu uživatelského rozhraní s trochou modré saturace při gradaci barev. Díky této nasycení se obrázky stanou konzistentnějšími a také jsem využil příležitosti použít barvy značky v celé kompozici.

Abych toho dosáhl, vzal jsem odstíny šedé, které skládaly můj obrázek, a nasycovaly je modrou.

Pravá strana s modrou saturací.

Také jsem vytvořil zákal pomocí pevných tvarů. Jedná se o velmi sofistikovaný detail, který měl zpočátku úžasný výsledek, ale je ještě silnější, když aplikujete celý koncept na kompozici.

Abychom vysvětlili naše kompoziční myšlení, musím nejprve vysvětlit třívrstvý koncept:

Je to koncept, který se mi opravdu líbí, ve kterém je uživatelské rozhraní 3D prostředím. Je založen na konceptu Elevation by Google Material Design. Také pomocí 2D elementů a plochého stylu musíte za celek považovat celek jako 3D prostředí, takže můžete definovat 3 vrstvy a jedna má funkci, která prospívá ostatním.

První je pozadí a jeho hlavní funkcí je zvýraznění následujících vrstev, obvykle použitím barev a tvarů, které kontrastují s prvky druhé vrstvy.

Druhým je dirigent k třetímu. Normálně je to rozhodnutí, které uživatel učiní.

A poslední, třetí vrstva, definuje interakci a změnu nebo finalizaci toku. Normálně se jedná o vrstvu Akce nebo vrstvu, která zvýrazní informace pro uživatele, aby definoval akci, kterou provede.

Tyto tři vrstvy jsou dlouhý předmět, ale věc je taková, že pokud si hluboce všimnete rozhraní, která máme v našem každodenním životě, budete moci tento koncept snadno identifikovat. To ukazuje na vysokou kvalitu informační architektury a hierarchii prvků. Ale tento snadný způsob, jak je identifikovat, je, co mi vadí, protože i když jsou vrstvy spojeny, kompozice nemá jednotu.

Z tohoto důvodu jsem v kompozici sotva používal čistě černobílou. Stejně jako poslední možnost, ale také v tomto případě, protože složení má variaci modré barvy, vypadá absolutní bílá jako volitelná iluze jako barva LED. Takže používám Blue jako primární barvu a odstíny modré v mé kompozici. Bílá, černá a odstíny šedé se mísí s trochou modré, takže vrstvy v mé kompozici jsou spojeny a stávají se součástí celku.

Chiaroscuro

To je jedna z mých oblíbených technik a ta, která mě nejvíce překvapila, když jsem před sebou viděl obraz. Chiaroscuro je technika, při které malíř vytváří vysoký kontrast mezi světlem a tmou.

Noční hlídka (1642) od Rembrandta.

Obraz využívající Chiaroscuro má vedle sebe tmavé tmavé stíny a světlé body. Chiaroscuro vytváří dramatický efekt, který někdy vypadá, jako by byl na postavu promítán reflektor, a který také způsobí, že postava bude vypadat zaoblenější ve 3D. Chiaroscuro byl široce používán v období renesance a baroka.

Caravaggio by se proslavil tím, že uplatnil ještě dramatičtější přístup k Chiaroscuru zvanému Tenebroso. Je to typ Chiaroscuro, který vytváří intenzivnější kontrast světla a tmy.

Kristus u sloupu (1607) od Caravaggia.

Velmi působivá věc je síla, kterou má tento režim při vedení našich očí k informacím. Tmavé pozadí je prvkem, který upoutá pozornost a vytvoří prostředí pro kontrast, který vás provede informacemi.

"Ve skutečnosti je tento intenzivní kontrast vypravěčem příběhu za plátnem."

Možná, když jsi viděl první verzi Chamosa, když jsem mluvil o Sfumato, myslel jsi, že jeho jasnou barvou je jeho čištění a ne viditelnost. Je to proto, že jsem použil režim Chiaroscuro. To je velmi důležité, protože jsem vytvořil hluboký kontrast a chrání vrstvu (kterou jsem nazval Informační vrstva), abych informace přenášel jasněji.

Vrstva po vrstvě

První vrstva, která stále používá koncept tří vrstev, je jednou z pozadí. Musí být atraktivní, aby si udržel pozornost uživatele.

Druhá vrstva vytváří prostor pro jasné zobrazení informací. V Design, toto je známé jako negativní prostor nebo prázdné místo a v tomto případě, tělo těla je prázdné místo. Definuje nejen hranice objektů, ale také vytváří potřebné vazby mezi nimi podle Gestaltových principů a vytváří efektivní vizuální výkon.

Pokud jde o poslední vrstvu, budu to moci lépe vysvětlit mluvením o posledním kanonickém režimu.

Cangiante

Cangiante se vyznačuje změnou odstínu nebo barvy, aby zobrazoval stíny a světla. Michelangelova malba na stropě Sixtinské kaple je skvělým příkladem této techniky.

Prorok Daniel - Sixtinská kaple (cca 1508–1512) od Michelangela.

Podívejte se na róbu proroka Daniela. Vidíte, že stínovaná část roucha je namalovaná zeleně, ale zvýrazněná část je žlutá.

Ve všech ilustracích jsem použil odstíny modré ve složení první vrstvy (pozadí) a druhé vrstvy (obsahu). Ale ve třetí jsem použil jinou barvu, protože to je informační vrstva. Připravil jsem pole, abych pracoval na této poslední vrstvě. Je to nezbytné, protože jej mohu použít v mnoha situacích, k informování a vytváření komunikace s uživateli.

A tak se narodili tito chlapi níže, prosím, vítejte chamososkou komando:

Tento koncept jsem také použil na rozhraní. Na kartách, které jsem vám ukázal dříve, jsou ETA (odhadovaná doba příjezdu) a stav doručení hlavními informacemi, které uživatel potřebuje vědět, aby se mohl rozhodnout.

Zde je několik příkladů pro konečnou ilustraci a návrh uživatelského rozhraní:

Pokud chcete vidět více, podívejte se na náš dribling (a dejte nám 'Lásku'). https://dribbble.com/chamadesign

Jak vidíte, kanonické režimy renesance nezahrnují proces stvoření, ale proces evoluce. Sfumato je o „Více je méně“. Unione je o soudržnosti a soudržnosti. Chiaroscuro je o negativním prostoru. A Cangiante je o účinném používání protichůdných barev. Neustálé hledání těchto režimů v průběhu procesu navrhování je to, co způsobí, že váš návrh u vašich uživatelů vytvoří viscerální emoce.

Stejně jako Dieter Rams byl inspirací pro Jonyho Iveho, skvělá jména malby mohou inspirovat váš design. Tajemství je, že když se podíváte na inspiraci, nebudete se držet pouze techniky, ale spíše čistého konceptu, který je za ní.

Děkuji za přečtení,

Lincoln.

Zmínil jsem se, že najmeme? Podívejte se: https://chamatheapp.bamboohr.co.uk/jobs/