Designing a digital screen: A clean recipe
On visual design principles
"There's a story in my mind, and I want to draw it as a picture. It's not concrete yet, but I might get there."
Designers experience plenty of moments like these. They want to create their version of stories that exist in their heads onto paper or digital screens. The goal can be as simple as communicating an idea or confirming whether an idea works.
In this post, I'll take you through the sketching process that a designer goes through to bring about the desired result, in our case, a splash screen of a meditation app called Headspace.
This is a reverse construction or reconstruction of the screen that's already designed on the app. The intent is to understand the process of creation and the relationships that the design elements have amongst each other in creating the end result.
Before we dive in, the context is this: A designer at Headspace is asked to create a splash screen (the screen that appears when we open an app) that conveys the concept of the meditation app.
Now, if it is a splash screen, it usually has the brand logo or the brand mascot or relevant imagery with an explanation of the app’s usefulness. In our case, it's an intermediary splash screen that is intended to communicate a partial concept, reminding the users to take deep breaths and clear their heads to achieve peace of mind.
Let's breakdown the creative process that a designer usually goes through to clearly communicate what's in his/her head in coming up with the desired result.
Step 1: Identifying the core emotion that the screen should convey
Since a meditation app helps people become calmer, happier, and more peaceful, the emotion we want to convey is joy. We have three different sketches of joy on the screen. The first one is a smiling face with eyes open, the second is a laughing emoticon, and the third is a pleasant face with closed eyes. We will go with the third one as developing peace is the core offering of Headspace.
Step 2: Finding the right object to contain the emotion
All of the objects that a designer draws can be broken down into basic geometrical shapes. Here, we have three different objects that contain the chosen emotion. The first one is a diagonal in the form of a rectangle; the second is a rectangle attached on the base and the third a triangle. Diagonals signify movement and tension, they are dynamic in nature and are perceived as active objects. Vertical shapes are seen to possess high energy as they rebel against gravity. Triangles convey stability as they have a broad base. That's the desired effect we are looking for.
Step 3: Orienting the object to the appropriate position
In continuation with step 2, there's a fourth shape that we need to look at, which is a horizontal rectangle. Horizontal shapes are stable like triangles too. Now that we have triangles and horizontal rectangles as our desired shapes, let's get into their positioning. Positioning/orienting conveys a lot more to the viewer than we imagine. Placing an image at the center keeps the focus of the viewer towards the center, ignoring the other areas. Placing the object on the top of the screen is perceived as the object having high energy and moving upwards. The bottom position conveys the feeling of being grounded. As a meditation app, the users are looking to ground themselves more than anything.
Step 4: Introducing curves for the feeling of comfort (and realism)
Let us finalize the triangle to be our object of interest as it closely resembles a human head and implies stability. If you look at the first image, the triangle has a tilted base, making it look like it is moving within the frame. This dynamic effect means that the triangle could hit the edges of the screen. We don't want that perception. Triangles also have sharp edges. In the real world, humans tend to keep away from sharp objects like knives. To induce the feeling of comfort, we bring in curves and curvey shapes as they are biologically comforting in nature - like waves in the sea or human bodies.
Step 5: Signifying the strength of the object through size
(Refer to the previous image)
The bigger the object, the higher is its importance and strength. Thus, we expand the curved object to resembles a peaceful and light-hearted human avatar.
Step 6: Applying the apt color
This is one of the most critical steps of the process as the color association is stronger than the other design principles. Colors dig deeper into our psyche and allow us to associate strongly. The first one is a pale color, which is blue-violet, signifying authority. If we look closely at the human shape, the emotion it holds is smugness. Yellow is an exciting color that shows happiness and sunshine over calmness. The third one, orange, is associated with health and vitality. Orange is also associated with autumn leaves, which implies change or transition of a kind. This can be used as the primary color as meditation, in essence, change us into better human beings.
Step 7: Creating the background
The lighter the background, the safer the viewers feel. Black symbolizes the darkness within or around. Shades of purple or blue mean thunderstorms or the time when the day approaches night. White indicates hope or brightness, in general. We'll go with white as the background color as we want people to feel safer and calmer. We aren't adding any extra elements in the background to keep things simple.
Step 8: Finalizing the shape and the content
While the curvy triangular shape made sense in the previous sketches, with the introduction of the text, Breathe in, it demands edits. A micro animation expanding and contracting the orange shape will convey the significance of meditation in a much better way, in real-time. Thus, the shape is made bigger and rounder, to facilitate the animation.
Last one. If we take the text to the top, the user can perceive that the shape (which denotes the human and human's mind) has more space to expand among the free whitespace. This enhances the feeling of stability and transformation in the brain.
In the end, the designer comes up with this screen that Headspace uses today.
This is a breakdown of one screen (of fewer elements and interactions) that a designer has produced. Deconstructing designs will help us make better design decisions and also assist us in explaining our design choices. If you are like me, with an engineering degree in STEM, and haven't been to art school, this is one way to learn the basics of design by going deeper into the process of creating screens. I hope this knowledge helps you in your creative process as well! You'll now be able to observe the explained principles in images, pictures, and screens that you come across. Thanks for reading along!
Courtesy: Molly Bang, and her book ‘Picture This’
Now’s the time to subscribe to my weekly newsletter. :)