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 erfassen, und ich denke darüber nach, wie ich dies auf mein Design anwenden kann.

Ich glaube, der beste Weg, um in die Zukunft zu gehen, besteht darin, die Vergangenheit zu betrachten, und so fand ich in der italienischen Kunst der frühen Neuzeit großartige Modi, um meinen Stil anzuwenden und meine Illustration und meine Benutzeroberfläche zu entwickeln. Diese Modi sind die berühmten vier Bildtechniken, die die italienische Kunst der frühen Neuzeit 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 aufweist und einen weichen, dunstigen 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 das Kinn der Venus definiert. Im Gegensatz dazu verwendet Leonardo Sfumato, um eine naturalistische Abstufung der Schatten auf seiner Monalisa zu erstellen.

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

Eine gute Philosophie, die wir bei Design Chapter bei Chama haben, ist, dass wir unser Design nicht ändern, sondern verbessern. Das heißt, wir fangen nicht bei Null an, wenn wir etwas Neues schaffen wollen. Wir verfeinern etwas, das 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 führte das Sfumato-Konzept ein, um unsere Illustrationen und unser Design zu verbessern. Ich fing an, es bei einem Mann zu verwenden, der unseren Benutzern bekannt ist, unserem Charakter namens Chamoso. Er ist ein Schlüssel der Kommunikation auf unserer Benutzeroberfläche mit Verbrauchern, und natürlich haben wir unsere Aufmerksamkeit darauf gerichtet, zunächst eine neue Version dieses Typen zu erstellen.

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 herum fallen lassen. Obwohl ich einen flachen Stil verwendet habe, habe ich Farbtöne angewendet, die die Form vereinheitlichen. Dann habe ich den Ausdruck in anspruchsvollere 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.

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

Wir können die Dropshadows und Konturen verwenden, um einige UI-Zustände zu definieren.

Unione

Der zweite Modus heißt Unione und ist Sfumato sehr ähnlich. Tatsächlich ist es Raphaels Antwort auf Leonardos Sfumato. Unione versucht auch, eine langsame Farbabstufung zu erzielen, aber im Gegensatz zu Sfumato verwendet Unione lebendige und gesättigte Farben. Sie können das unten in Raphaels Paiting sehen. Wie Leonardo verwendet Raphael keine Konturen, aber im Gegensatz zu Leonardo verwendet Raphael helle Farben.

Linke Seite: Mona Lisa (1503) von Leonardo da Vinci; rechte Seite: Heilige Katharina von Alexandria (1508) von Raphael.Schauen Sie sich die Farben jedes Gemäldes einzeln an und prüfen Sie, wie Raphaels Farbpalette 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 konsistenter und ich nutzte auch die Gelegenheit, die Farben der Marke in der gesamten Komposition zu verwenden.

Dazu nahm ich die Grautöne, aus denen meine Illustration bestand, und sättigte sie mit Blau.

Rechte Seite mit der blauen Sättigung.

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

Um unsere Kompositionshaltung zu erklären, muss ich zuerst das 3-Ebenen-Konzept erklären:

Es ist ein Konzept, das ich sehr gerne benutze und bei dem die Benutzeroberfläche eine 3D-Umgebung ist. Es basiert auf dem Elevation-Konzept von Google Material Design. Wenn Sie auch 2D-Elemente und den Flat-Stil verwenden, müssen Sie das Ganze als 3D-Umgebung betrachten. Auf diese Weise können Sie 3 Ebenen definieren, von denen eine die Funktion hat, 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 den Elementen der zweiten Ebene abheben.

Der zweite ist der Leiter 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 Aktion zu definieren, die er ausführen wird.

Die drei Ebenen sind ein langes Thema, aber wenn Sie die Schnittstellen, die wir in unserem täglichen Leben haben, genau bemerken, können Sie dieses Konzept leicht 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 miteinander verbunden sind, hat die Komposition keine Einheit.

Aus diesem Grund habe ich in der Komposition kaum reines Schwarz-Weiß verwendet. Nur 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. Daher verwende ich Blau als Grundfarbe und Blautöne in meiner Komposition. Weiß, Schwarz und Grautöne werden mit etwas Blau gemischt, so dass die Schichten in meiner Komposition miteinander 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 bekannt dafür, dass er eine noch dramatischere Herangehensweise an Chiaroscuro namens Tenebroso verfolgte. Es ist eine Art Helldunkel, die einen intensiveren Kontrast zwischen hell und dunkel erzeugt.

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

Eine sehr beeindruckende Sache ist die Kraft, die dieser Modus hat, um unsere Augen zu den Informationen zu führen. 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.

"Tatsächlich ist dieser intensive Kontrast der Geschichtenerzähler der Geschichte hinter der Leinwand."

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

Schicht nach Schicht

Unter Verwendung des Konzepts der drei Ebenen ist die erste Ebene eine Hintergrundebene. Es muss attraktiv sein, um die Aufmerksamkeit des Benutzers zu erhalten.

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 Charakters 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 Leistung auf.

Die letzte Ebene kann ich 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.

Schau dir 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 der Komposition 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 verwenden kann, um die Benutzer zu informieren und Kommunikation mit ihnen herzustellen.

Und so wurden diese Leute unten geboren. Bitte begrüßen Sie den Chamoso-Trupp:

Ich habe dieses Konzept auch für die Benutzeroberfläche verwendet. In den Karten, die ich Ihnen zuvor gezeigt habe, sind die ETA (voraussichtliche Ankunftszeit) 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 Darstellung und das UI-Design:

Wenn Sie mehr sehen möchten, überprüfen Sie unser Dribbeln (und geben Sie uns eine

Wie Sie sehen können, 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 Helldunkel geht es um den negativen Raum. Und bei Cangiante geht es um den effizienten Einsatz gegensätzlicher Farben. Die beharrliche Suche nach diesen Modi während des gesamten Designprozesses führt dazu, dass Ihr Design 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 man sich bei der Betrachtung einer Inspiration nicht nur an die Technik hält, sondern an das reine Konzept dahinter.

Danke fürs Lesen,

Lincoln.

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