How the canonical modes of the Renaissance are improving our UI Design.
When you see an inspiration, what exactly are you looking for? A technique, a color palette or a specific shape?
As a designer, every day I try to have quality time for inspirations. And when I’m observing an inspiration, I try to catch the purest concept behind the inspiration or behind the technique, and I think about ways to apply this on my design.
I believe the best way to walk to the future is by looking at the past, and this was how I found, in the early modern Italian art, great modes to apply on my style and develop my illustration and my User Interface. These modes are the famous four pictorial techniques that characterised early modern Italian art, the so called “4 canonical painting modes of the Renaissance”. They are named Sfumato, Unione, Chiaroscuro and Cangiante.
Sfumato
Sfumato is a pictorial technique in which colors blend together. It creates an image that has no lines or edges around the figures, producing a soft hazy effect.
A classic example to understand this mode is comparing two great paintings by Botticelli and Leonardo da Vinci. Botticelli does not use Sfumato. There are careful outlines in the image but you can clearly see a black outline defining Venus’s chin. In contrast, Leonardo uses Sfumato to create a naturalistic gradation of shadows on his Monalisa.
Leonardo was a keen observer of nature and was interested in replicating the way our eyes perceive the world. We don’t see outlines around objects or people. And so Leonardo uses Sfumato to represent the world as our eyes see it.
Landing on the world of digital product, a good philosophy that we have at Design Chapter at Chama is that we don’t make changes to our design, we improve it. This means we don’t start from scratch when we want to create something new. We refine something that already exists. We start with the stuff we have and add our researches and knowledge to choose the path we have to follow. That was how I started looking at the whole product and introduced the Sfumato concept to improve our illustrations and design. I started using it in a guy who is well known to our users, our character called Chamoso. He is a key of communication on our User Interface with consumers and, of course, we focused our attention at, first of all, creating a new version of this guy.
Note that Chamoso’s shapes are the same for both versions. But like the comparison between Botticelli and Da Vinci, I first dropped the outlines around the object. Even though I used a flat style, I applied shades that make the form unified. Then I changed the expression to more sophisticated traces.
This also applies to UI Elements. A component that makes a good example is the Cards. It is very common to see a card in a regular state with unnecessary contours or drop shadows. This does not convey any messages and is one more piece of information in an area that already has a lot of information.
Using a contrast background as an element to separate the cards, we drop visual information to draw attention to the actual information.
We can use the dropshadows and contours to define some UI states.
Unione
The second mode is called Unione and it is very similar to Sfumato. In fact, it is Raphael’s response to Leonardo’s Sfumato. Unione also attempts to create a slow color gradation, but unlike Sfumato, Unione deploys vibrant and more saturated colors. You can see that below in Raphael’s paiting. Like Leonardo, Raphael does not use outlines, but unlike Leonardo, Raphael uses bright colors.
Not as vibrant as Raphael’s colors in his painting, I used this concept to create a more unified UI Design using a bit of blue saturation in the gradation of colors. Due to this saturation the images get more consistent and I also took the opportunity to use the colors of the brand in the whole composition.
In order to do this I took the shades of gray that composed my illustration and saturated them with blue.
I also created a haze effect using solid shapes. This is a very sophisticated detail that had an amazing result at first but it is even stronger when you apply the whole concept to the composition.
To explain our composition mindset I first need to explain the 3-layer concept:
It is a concept I really enjoy using, in which user interface is a 3D environment. It is based on the Elevation concept by Google Material Design. Also using 2D elements and the Flat style, you need to consider the whole as a 3D environment, this way you can define 3 layers and one has the function to benefit the others.
The first is the background and its main function is to highlight the following layers, normally by using colors and shapes that contrast with elements of the second layer.
The second one is the conductor to the third. Normally it is the content that defines the decision that the user will make.
And the last one, the third layer, defines an interaction and a change or finalization of the flow. Normally this is the layer of the Actions, or the layer that will highlight information for the user to define the action he/she will take.
The 3 layers are a long subject, but the thing is, if you deeply notice the interfaces that we have in our daily lives, you will be able to easily identify this concept. This shows a high quality of information architecture and hierarchy of elements. But this easy way to identify them is what bothers me, because even though the layers are connected the composition doesn’t have a unity.
For this reason, I hardly used pure black&white in the composition. Just as a last resort, but also in this case, because the composition has a variation of blue, the absolute white looks like the color Ice due to an optional illusion. So I use Blue as a primary color and shades of blue in my composition. White, black and shades of gray are mixed with a little blue so that the layers in my composition are connected and become part of the whole.
Chiaroscuro
This is one of my favorite techniques and the one that surprised me the most when I saw a painting in front of me. Chiaroscuro is a technique in which the painter creates a high contrast between light and dark.
A painting using Chiaroscuro has deep dark shadows and bright highlights next to each other. Chiaroscuro creates a dramatic effect which sometimes looks as if a spotlight was projected on the figure and which also makes the figure look more rounded in 3-D. Chiaroscuro was widely used in the Renaissance and the Baroque.
Caravaggio would become renowned for employing an even more dramatic approach to Chiaroscuro called Tenebroso. It is a type of Chiaroscuro that creates a more intense contrast of light and dark.
A very impressing thing is the power that this mode has in guiding our eyes to the information. The dark background is an element to catch the attention and create an environment for the content in contrast, which will guide you to the information.
"In fact this intense contrast is the storyteller of the story behind the canvas."
Maybe when you saw the first version of Chamoso, when I was talking about Sfumato, you thought that the clear color of his body was to clean it and not to have visibility. This is because I used the Chiaroscuro mode. This is very important because I created a deep contrast and it protects the layer (which I called Information layer) in order to transmit the information more clearly.
Layer by layer
Still using the concept of the three layers, the first layer is one of background. It needs to be attractive to keep the attention of the user.
The second layer creates a space to show the information in a clear way. In Design, this is known as negative space or blank space and in this case, the character’s body is a blank space. It not only defines the limits of the objects but also creates the necessary bonds between them according to Gestalt principles and builds up effective visual performance.
As for the last layer, I will be able to explain it better by talking about the last canonical mode.
Cangiante
Cangiante is characterized by a change in hue or color in order to depict shadows and highlights. Michelangelo’s painting on the Sistine Chapel ceiling is a great example of this technique.
Look at the robe of the prophet Daniel here. You can see that the shaded part of the robe is painted green, but the highlighted part is yellow.
I used shades of blue in all the illustrations in the composition of the first layer (background) and the second layer (content). But I used another color in the third one, because this is the information layer. I prepared the field to work on this last layer. This is essential because I can use it for many situations, to inform and create communication with the users.
And that was how these fellows below were born, please welcome the Chamoso Squad:
I also used this concept on the interface. In the cards that I showed you earlier, the ETA (estimated time of arrival) and the status of delivery are the main information that the user needs to know in order to make a decision.
Here are some examples for final illustration and UI Design:
As you can see, the canonical modes of the Renaissance do not comprise a creation process, but an evolution process. Sfumato is about “More is less”. Unione is about consistency and coherence. Chiaroscuro is about Negative Space. And Cangiante is about the efficient use of opposing colors. The insistent search of these modes throughout the design process is what will make your design generate a visceral emotion in your users.
Just as Dieter Rams was an inspiration for Jony Ive, great names of painting can inspire your design. The secret is that when you look at an inspiration you don’t just stick to the technique, but rather to the pure concept behind it.
Thank you for reading,
Lincoln.
Have I mentioned we’re hiring? 😬 Check out: https://chamatheapp.bamboohr.co.uk/jobs/
