• Zuhause
  • Artikel
  • Wie die kanonischen Modi der Renaissance unser UI-Design verbessern.
Veröffentlicht am 28-09-2019

Wie die kanonischen Modi der Renaissance unser UI-Design verbessern.

Was genau suchen Sie, wenn Sie eine Inspiration sehen? Eine Technik, eine Farbpalette oder eine bestimmte Form?

Bildnachweis: Eric Terrade - Unsplash

Als Designer versuche ich jeden Tag, Zeit für Inspirationen zu haben. Und wenn ich eine Inspiration beobachte, versuche ich, das reinste Konzept hinter der Inspiration oder hinter der Technik zu finden, und ich überlege, wie ich dies auf mein Design anwenden kann.

Ich glaube, der beste Weg, um in die Zukunft zu gelangen, ist ein Blick in die Vergangenheit, und so fand ich in der frühen modernen italienischen Kunst großartige Möglichkeiten, meinen Stil anzuwenden und meine Illustration und meine Benutzeroberfläche zu entwickeln. Diese Modi sind die berühmten vier Bildtechniken, die die frühneuzeitliche italienische Kunst charakterisierten, die sogenannten „4 kanonischen Malmodi der Renaissance“. Sie heißen Sfumato, Unione, Chiaroscuro und Cangiante.

Sfumato

Sfumato ist eine Bildtechnik, bei der Farben miteinander verschmelzen. Es wird ein Bild erstellt, das keine Linien oder Kanten um die Figuren hat und einen weichen, verschwommenen Effekt erzeugt.

Linke Seite: Die Geburt der Venus (1485) von Botticelli; rechte Seite: Mona Lisa (1503) von Leonardo da Vinci.

Ein klassisches Beispiel, um diesen Modus zu verstehen, ist der Vergleich zweier großartiger Gemälde von Botticelli und Leonardo da Vinci. Botticelli verwendet kein Sfumato. Das Bild enthält sorgfältige Umrisse, aber Sie können deutlich einen schwarzen Umriss erkennen, der Venus 'Kinn definiert. Im Gegensatz dazu verwendet Leonardo Sfumato, um auf seiner Monalisa eine naturalistische Schattenabstufung zu erzeugen.

Leonardo war ein begeisterter Beobachter der Natur und daran interessiert, wie unsere Augen die Welt wahrnehmen. Wir sehen keine Umrisse um Objekte oder Personen. Und so verwendet Leonardo Sfumato, um die Welt so darzustellen, wie unsere Augen sie sehen.

Eine gute Philosophie von Design Chapter bei Chama ist, dass wir in der Welt der digitalen Produkte nichts an unserem Design ändern, sondern es verbessern. Das heißt, wir fangen nicht bei Null an, wenn wir etwas Neues schaffen wollen. Wir verfeinern etwas, was bereits existiert. Wir beginnen mit dem, was wir haben, und fügen unsere Forschungen und unser Wissen hinzu, um den Weg zu wählen, dem wir folgen müssen. So begann ich, das gesamte Produkt zu betrachten und stellte das Sfumato-Konzept vor, um unsere Illustrationen und unser Design zu verbessern. Ich habe damit bei einem Mann angefangen, der unseren Usern gut bekannt ist, unserem Charakter namens Chamoso. Er ist ein Schlüssel für die Kommunikation auf unserer Benutzeroberfläche mit Verbrauchern, und natürlich haben wir unsere Aufmerksamkeit in erster Linie darauf gerichtet, eine neue Version dieses Typen zu entwickeln.

Linke Seite: die frühere Version von Chamoso; rechte Seite: der neue Chamoso.

Beachten Sie, dass die Formen von Chamoso für beide Versionen gleich sind. Aber wie beim Vergleich zwischen Botticelli und Da Vinci habe ich zuerst die Umrisse um das Objekt gelegt. Obwohl ich einen flachen Stil verwendet habe, habe ich Schattierungen angewendet, die die Form vereinheitlichen. Dann habe ich den Ausdruck in raffiniertere Spuren geändert.

Dies gilt auch für UI-Elemente. Eine Komponente, die ein gutes Beispiel darstellt, sind die Karten. Es ist sehr üblich, eine Karte in einem normalen Zustand mit unnötigen Konturen oder Schlagschatten zu sehen. Dies vermittelt keine Nachrichten und ist eine weitere Information in einem Bereich, der bereits viele Informationen enthält.

Indem wir einen Kontrasthintergrund als Element zum Trennen der Karten verwenden, lassen wir visuelle Informationen fallen, um die Aufmerksamkeit auf die tatsächlichen Informationen zu lenken.

Wir können die Schlagschatten und Konturen verwenden, um einige Zustände der Benutzeroberfläche zu definieren.

Unione

Der zweite Modus heißt Unione und ist Sfumato sehr ähnlich. Tatsächlich ist es Raffaels Antwort auf Leonardo's Sfumato. Unione versucht auch, eine langsame Farbabstufung zu erstellen. Im Gegensatz zu Sfumato verwendet Unione jedoch lebendige und gesättigte Farben. Das können Sie unten in Raffaels Bild sehen. Wie Leonardo verwendet Raphael keine Umrisse, aber im Gegensatz zu Leonardo verwendet Raphael helle Farben.

Linke Seite: Mona Lisa (1503) von Leonardo da Vinci; rechte Seite: Die Heilige Katharina von Alexandria (1508) von Raffael.Schauen Sie sich die Farben jedes Gemäldes einzeln an und prüfen Sie, ob die Farbpalette von Raphael gesättigter ist als die von Da Vinci.

Nicht so lebendig wie Raphaels Farben in seinem Gemälde, habe ich dieses Konzept verwendet, um ein einheitlicheres UI-Design mit ein wenig Blausättigung in der Abstufung der Farben zu erstellen. Aufgrund dieser Sättigung werden die Bilder gleichmäßiger und ich nutzte auch die Gelegenheit, die Farben der Marke in der gesamten Komposition zu verwenden.

Zu diesem Zweck nahm ich die Grautöne, aus denen sich meine Abbildung zusammensetzte, und tränkte sie mit Blau.

Rechte Seite mit der blauen Sättigung.

Ich habe auch einen Dunsteffekt mit festen Formen erzeugt. Dies ist ein sehr raffiniertes Detail, das anfangs ein erstaunliches Ergebnis erzielt hat, aber noch stärker, wenn Sie das gesamte Konzept auf die Komposition anwenden.

Um unsere Kompositions-Denkweise zu erklären, muss ich zuerst das 3-Schichten-Konzept erklären:

Es ist ein Konzept, das ich sehr gerne verwende und dessen Benutzeroberfläche eine 3D-Umgebung ist. Es basiert auf dem Elevation-Konzept von Google Material Design. Wenn Sie auch 2D-Elemente und den flachen Stil verwenden, müssen Sie das Ganze als eine 3D-Umgebung betrachten. Auf diese Weise können Sie 3 Ebenen definieren und eine hat die Funktion, die anderen zu nutzen.

Der erste ist der Hintergrund und seine Hauptfunktion besteht darin, die folgenden Ebenen hervorzuheben, normalerweise unter Verwendung von Farben und Formen, die sich von Elementen der zweiten Ebene abheben.

Der zweite ist der Dirigent des dritten. Normalerweise ist es der Inhalt, der die Entscheidung definiert, die der Benutzer treffen wird.

Und die letzte, die dritte Schicht, definiert eine Interaktion und eine Änderung oder Finalisierung des Flusses. Normalerweise ist dies die Ebene der Aktionen oder die Ebene, auf der Informationen für den Benutzer hervorgehoben werden, um die von ihm auszuführende Aktion zu definieren.

Die 3 Ebenen sind ein langes Thema, aber die Sache ist, wenn Sie die Schnittstellen, die wir in unserem täglichen Leben haben, zutiefst bemerken, werden Sie in der Lage sein, dieses Konzept leicht zu identifizieren. Dies zeigt eine hohe Qualität der Informationsarchitektur und Hierarchie der Elemente. Aber diese einfache Art, sie zu identifizieren, stört mich, denn obwohl die Ebenen verbunden sind, hat die Komposition keine Einheit.

Aus diesem Grund habe ich in der Komposition kaum reines Schwarz-Weiß verwendet. Als letztes Mittel, aber auch in diesem Fall, weil die Komposition eine Variation von Blau aufweist, sieht das absolute Weiß aufgrund einer optionalen Illusion wie die Farbe Eis aus. Deshalb verwende ich Blau als Grundfarbe und Blautöne in meiner Komposition. Weiß, Schwarz und Grautöne werden mit ein wenig Blau gemischt, so dass die Schichten in meiner Komposition verbunden sind und Teil des Ganzen werden.

Chiaroscuro

Dies ist eine meiner Lieblingstechniken und die, die mich am meisten überraschte, als ich ein Gemälde vor mir sah. Helldunkel ist eine Technik, bei der der Maler einen hohen Kontrast zwischen Hell und Dunkel erzeugt.

Die Nachtwache (1642) von Rembrandt.

Ein Gemälde mit Helldunkel hat tiefe dunkle Schatten und helle Lichter nebeneinander. Helldunkel erzeugt einen dramatischen Effekt, der manchmal so aussieht, als ob ein Scheinwerfer auf die Figur projiziert wurde, und der die Figur auch in 3D runder aussehen lässt. Helldunkel war in der Renaissance und im Barock weit verbreitet.

Caravaggio wurde berühmt für seine noch dramatischere Herangehensweise an Chiaroscuro namens Tenebroso. Es ist eine Art Hell-Dunkel, die einen intensiveren Kontrast zwischen Hell und Dunkel erzeugt.

Christus an der Säule (1607) von Caravaggio.

Sehr beeindruckend ist die Fähigkeit dieses Modus, unseren Blick auf die Informationen zu lenken. Der dunkle Hintergrund ist ein Element, um die Aufmerksamkeit auf sich zu ziehen und eine Umgebung für den Inhalt im Kontrast zu schaffen, die Sie zu den Informationen führt.

"In der Tat ist dieser intensive Kontrast der Erzähler der Geschichte hinter der Leinwand."

Vielleicht dachten Sie, als Sie die erste Version von Chamoso sahen, als ich über Sfumato sprach, dass die klare Farbe seines Körpers darin bestand, ihn zu reinigen und keine Sichtbarkeit zu haben. Das liegt daran, dass ich den Chiaroscuro-Modus verwendet habe. Dies ist sehr wichtig, da ich einen tiefen Kontrast erstellt habe und er die Ebene (die ich als Informationsschicht bezeichnet habe) schützt, um die Informationen klarer zu übertragen.

Schicht nach Schicht

Nach dem Konzept der drei Ebenen ist die erste Ebene eine Hintergrundebene. Es muss attraktiv sein, die Aufmerksamkeit des Benutzers zu behalten.

Die zweite Ebene schafft einen Raum, in dem die Informationen übersichtlich dargestellt werden. In Design wird dies als negatives Leerzeichen oder Leerzeichen bezeichnet. In diesem Fall ist der Körper des Zeichens ein Leerzeichen. Es definiert nicht nur die Grenzen der Objekte, sondern schafft auch die notwendigen Bindungen zwischen ihnen nach Gestaltprinzipien und baut eine effektive visuelle Performance auf.

Was die letzte Ebene angeht, kann ich dies besser erklären, indem ich über den letzten kanonischen Modus spreche.

Cangiante

Cangiante zeichnet sich durch eine Änderung des Farbtons oder der Farbe aus, um Schatten und Lichter darzustellen. Michelangelos Gemälde an der Decke der Sixtinischen Kapelle ist ein gutes Beispiel für diese Technik.

Prophet Daniel - Sixtinische Kapelle (um 1508–1512) von Michelangelo.

Schauen Sie sich hier das Gewand des Propheten Daniel an. Sie können sehen, dass der schattierte Teil der Robe grün gestrichen ist, der hervorgehobene Teil jedoch gelb.

Ich habe in allen Abbildungen für die Zusammensetzung der ersten Schicht (Hintergrund) und der zweiten Schicht (Inhalt) Blautöne verwendet. Aber ich habe in der dritten eine andere Farbe verwendet, weil dies die Informationsschicht ist. Ich habe das Feld vorbereitet, um an dieser letzten Schicht zu arbeiten. Dies ist wichtig, da ich es für viele Situationen nutzen kann, um Informationen zu erhalten und Kommunikation mit den Benutzern herzustellen.

Und so wurden die folgenden Gefährten geboren, bitte begrüßen Sie die Chamoso-Truppe:

Ich habe dieses Konzept auch für die Benutzeroberfläche verwendet. Auf den Karten, die ich Ihnen zuvor gezeigt habe, sind die voraussichtliche Ankunftszeit (ETA) und der Lieferstatus die wichtigsten Informationen, die der Benutzer wissen muss, um eine Entscheidung treffen zu können.

Hier einige Beispiele für die endgültige Illustration und das Design der Benutzeroberfläche:

Wenn Sie mehr sehen möchten, schauen Sie sich unser Dribbeln an (und schenken Sie uns eine

Wie Sie sehen, umfassen die kanonischen Modi der Renaissance keinen Schöpfungsprozess, sondern einen Evolutionsprozess. Bei Sfumato geht es um „Mehr ist weniger“. Bei Unione geht es um Konsistenz und Kohärenz. Bei Chiaroscuro geht es um Negative Space. Und bei Cangiante geht es um den effizienten Einsatz gegensätzlicher Farben. Das beharrliche Durchsuchen dieser Modi während des gesamten Entwurfsprozesses bewirkt, dass Ihr Entwurf bei Ihren Benutzern eine viszerale Emotion erzeugt.

So wie Dieter Rams eine Inspiration für Jony Ive war, können große Namen der Malerei Ihr Design inspirieren. Das Geheimnis ist, dass Sie sich beim Betrachten einer Inspiration nicht nur an die Technik halten, sondern an das reine Konzept dahinter.

Danke fürs Lesen,

Lincoln.

Habe ich erwähnt, dass wir einstellen? Check out: https://chamatheapp.bamboohr.co.uk/jobs/

Siehe auch

Der inspirierendste Eisberg der Welt ist nicht das, was er zu sein scheintRezension: "The Cher Show" am Broadway, HündinnenWie können Vielfalt und Routine zusammenleben?Ein schönes Künstlerdatum, Ablenkungen und SelbstschutzArt ex machinaAutoren: Es ist in Ordnung zu glauben, dass du schrecklich bist - Widerstand ist ein Geschenk