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

Als Designer versuche ich jeden Tag, mir Zeit für Inspirationen zu nehmen. 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 in die Zukunft ist ein Blick in die Vergangenheit, und so habe ich in der frühen modernen italienischen Kunst großartige Modi gefunden, die ich auf meinen Stil anwenden und meine Illustration und meine Benutzeroberfläche entwickeln kann. Diese Modi sind die berühmten vier Bildtechniken, die die frühe moderne italienische Kunst charakterisierten, die so genannten „4 kanonischen Malweisen der Renaissance“. Sie heißen Sfumato, Unione, Chiaroscuro und Cangiante.

Sfumato

Sfumato ist eine Maltechnik, bei der die Farben ineinander übergehen. Es entsteht ein Bild, das keine Linien oder Kanten um die Figuren herum aufweist und einen weichen, verschwommenen Effekt erzeugt.

Ein klassisches Beispiel zum Verständnis dieses Modus ist der Vergleich zweier großer Gemälde von Botticelli und Leonardo da Vinci. Botticelli verwendet kein Sfumato. Die Konturen des Bildes sind vorsichtig, aber man kann 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 erzeugen.

Leonardo war ein scharfer Beobachter der Natur und daran interessiert, die Art und Weise, wie unsere Augen die Welt wahrnehmen, nachzubilden. Wir sehen keine Umrisse um Gegenstände oder Menschen. Und so verwendet Leonardo Sfumato, um die Welt so darzustellen, wie unsere Augen sie sehen.

Wenn wir in der Welt der digitalen Produkte landen, ist eine gute Philosophie, die wir bei Design Chapter in Chama haben, dass wir unser Design nicht verä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 fangen mit dem an, was wir haben, und fügen unsere Forschungen und unser Wissen hinzu, um den Weg zu wählen, den wir gehen müssen. So habe ich angefangen, das gesamte Produkt zu betrachten und das Sfumato-Konzept eingeführt, um unsere Illustrationen und unser Design zu verbessern. Ich fing an, es für einen Typen zu verwenden, der unseren Nutzern gut bekannt ist, unsere Figur namens Chamoso. Er ist ein Schlüssel für die Kommunikation auf unserer Benutzeroberfläche mit den Verbrauchern, und natürlich haben wir uns zunächst darauf konzentriert, eine neue Version dieses Kerls zu schaffen.

Beachten Sie, dass die Formen von Chamoso in beiden Versionen gleich sind. Aber wie bei dem Vergleich zwischen Botticelli und Da Vinci habe ich zuerst die Umrisse um das Objekt herum weggelassen. Obwohl ich einen flachen Stil verwendet habe, habe ich Schattierungen angewendet, die die Form vereinheitlichen. Dann änderte ich den Ausdruck in anspruchsvollere Spuren.

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

Indem wir einen kontrastreichen Hintergrund als Element zur Trennung der Karten verwenden, lassen wir visuelle Informationen weg, um die Aufmerksamkeit auf die eigentlichen 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 dem Sfumato sehr ähnlich. Tatsächlich ist es Raffaels Antwort auf Leonardos Sfumato. Auch bei Unione wird versucht, eine langsame Farbabstufung zu erzeugen, aber im Gegensatz zu Sfumato werden bei Unione lebhafte und gesättigte Farben verwendet. Das können Sie unten in Raffaels Gemälde sehen. Wie Leonardo verwendet Raffael keine Umrisslinien, aber im Gegensatz zu Leonardo verwendet Raffael leuchtende Farben.

Da die Farben in Raffaels Gemälde nicht so leuchtend sind, habe ich dieses Konzept verwendet, um ein einheitlicheres UI-Design zu schaffen, indem ich ein wenig blaue Sättigung in der Farbabstufung verwendete. Durch diese Sättigung werden die Bilder konsistenter und ich nutzte auch die Gelegenheit, die Farben der Marke in der gesamten Komposition zu verwenden.