My understanding of space using compositions

Shalini Saraf
Bootcamp
Published in
8 min readSep 10, 2021
Source: Self-made

Understanding how space works is a crucial part of design. Space can be used to both connect elements and separate them, it can deeply influence our emotions, experiences, feelings, and behaviors. So I tried to understand how space works by drawing compositions that don’t really make sense. I put on my headphones, added all my favorite songs to queue, and started drawing completely random things just to understand how I would perceive them after they are completed.

Before I start with my compositions, let me tell you about some principles or Gestalt theory to be precise which are important to know to understand human perception.

Gestalt Principles of Design

Gestalt principles of design are principles or laws of human perception used to explain how our human brain perceives everything around us. In its most basic form, gestalt theory proposes that our human brain constantly tries to simplify and organize complex objects or designs with many elements by subconsciously arranging the parts into an orderly system that generates a whole, rather than just a collection of unconnected or unrelated elements. Our brains are designed in such a way that it attempts on finding structure and patterns to better understand the world around us.

There are seven individual principles commonly associated with gestalt theory: closure, similarity, proximity, figure-ground, continuity, common fate, and focal point.

  1. Closure- When elements have complex structures, we tend to make sense of it by looking for a single, recognizable pattern. Seeing the first image, we perceive a cross in between the elements even though there is no defined shape of it.
  2. Proximity- When elements are closer to each other, they appear more closely related than others that are far apart. Notice how we perceived two groups of squares in the image just because some are placed far away from each other? That’s the principle of proximity.
  3. Similarity- When elements have similar properties, we group them, and we also tend to think they have the same function. The image for this provides a good example of this law as we perceive that the squares and circles belong in different groups just because they have properties, in this case, colors and shapes.
  4. Figure-Ground- We instinctively perceive elements as either being in the foreground or the background. This means that objects in the image either stand out prominently in the front (the figure) or recede into the back (the ground). The image of this can be interpreted in two ways depending on how our brains perceive it. To me, it looks like the two green triangles stand out becoming the figure, to you, it might be the white triangles that stand out.
  5. Continuity- Elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve. We perceive the image as one line branching to form two other lines instead of just simple circles floating around in the space.
  6. Common Fate- When elements coordinate movement together, we tend to relate them to each other. This principle provides a sense of direction and when we see objects moving towards the same direction, we group them subconsciously.
  7. Focal point- When an element or elements stands out visually, it captures and holds our attention first. The red circle catches our attention first when we see the picture and this makes it the focal point and we perceive it as having some significant importance.
Image showing Gestalt principles of design
Gestalt Principles of Design (Source: Self-Made)

My Compositions

Back to my compositions and music, the compositions I made, at first, didn't make any sense to me, they all looked like scribbles to put some meaning into it. But this kept me going into creating more compositions and exploring what simple shapes could do. I decided to use one element only in each. I hand drew them on paper and then explored making some compositions on Figma and the following are what I came up with.

On Paper-

Image showing my compositions on paper
My compositions on paper

I drew around one hundred compositions on paper, many started resembling something to me and others just seemed random. At first, everything I made seemed forced to me, they looked thought-about. After 15–20 of these, I had nothing left in my head to draw. That is when my learning process actually started, I was drawing without putting any thought on the paper and I could not interpret what any of them meant. I continued drawing and all of a sudden I started to see patterns in these drawings. So, I picked five of my favorites to put here to explain about them. All these drawings are open to interpretation and might look similar or something completely different to you than what I perceive them as.

Composition including circles that are overlapping and shaded
Composition 1
  1. Snowman on the Moon

Can you see it now? After reading the title? The three circles look like a snowman and the surroundings look like space, doesn't it? I started out experimenting with circles, overlapping them, making them of different sizes, and eventually, this is what I got.

Principles involved: Proximity, Focal point, Common Fate, Similarity

Composition made from triangles giving a tie and pocket look
Composition 2

2. Suit and Tie

Seems pretty obvious now doesn't it? Especially after seeing the pocket formed by two triangles, no? Initially, I started with three triangles and thought the figure was resembling a tower, but then adding more triangles to it gave it the form of a tie and breast pocket, hinting at a suit.

Principles involved: Focal Point, Common Fate, Similarity, Closure

Composition including upside down buildings
Composition 3

3. Leaning Building Of Some-land

This is a bit obvious but I loved how it came out once I was done. I was practicing creating 3D objects using a one-point perspective which means that the drawing has a single vanishing point,i.e, where all the points converge. I messed up a little but the result made it worth it.

Principles involved: Proximity, Similarity, Focal Point

Composition with randomly shaded rectangles
Composition 4

4. People shaking Hands or Building Blocks?

Which one did you see first? Just so you know, I saw the former first. At first, I was making random lines, filling some with color, having no idea what I was doing, and thinking I’d have another composition with no meaning. Then, I started seeing people in it and the drawing resembling the building blocks game. Unable to decide what title to put over it, I have decided to leave it to you to interpret it in whichever way you want.

Principles involved: Closure, Figure-Ground, Continuity

Composition showing a striped pattern
Composition 5

5. Hypnotic Stripes

I saved my favorite for the last. I got inspiration from watching someone making art using strings and paint. So, I drew strings on paper and added stripes to the spaces in between. This was a lot of work but the result was worth it. Hypnotized with this already, aren’t you?

Principles involved: Figure-Ground, Continuity, Common Fate

On Figma

My compositions on Figma
My compositions on Figma

I am new to Figma and only know the basics of it. But I believe I will improve with practice. Despite this, I like how my compositions came out when all that I was doing is exploring the tool. Like the ones on paper, I have selected five of these to explain in detail.

Composition on Figma showing circles merging at a point
Figma Composition 1
  1. Convergence

I named it so as all the circles were converging at one place. Experimenting with circles and boolean operations on Figma led me to this and I am glad it did.

Principles involved: Proximity, Figure-Ground

Composition on Figma depicting a floor plan like formation made with rectangles
Figma Composition 2

2. Floor Plan

This looks like a floor plan to me with very narrow doorways. I made this with just five squares and the difference is only within their strokes. It is funny how experimenting could change the simplest of things.

Principles involved: Closure, Similarity

Composition on Figma with squares merging at one red circle
Figma Composition 3

3. Vertigo

This is another obvious one and this too like the others was a result of something random. This also reminds me of a pinwheel but vertigo, the movie, is the first thing that came into my mind after I made this and hence, the title.

Principles involved: Continuity, Common Fate, Focal Point

Composition on Figma containing squares of varying sizes arranged in different ways
Figma Composition 4

4. Escape Room

This reminds me of an escape room where you solve the mystery in one room, then go to another, solve another mystery and this goes on till you reach the final level. This is what came to my mind when I first saw this.

Principles involved: Closure, Focal Point, Common Fate

Composition on Figma showing concentric hexagons, all merging to give an illusion
Figma Composition 5

5. Inside Out

Confused? Well, so am I and I still haven't figured out whether the shapes are going inside the plane or coming out. This is an illusion made of hexagons only and I enjoyed making this a lot.

Principles involved- Proximity, Common Fate, Focal point

Conclusion

All these compositions made me understand how one can find meaning even in the most abstract of arts and how space works. Adding too many elements in the composition would make it heavy and too little would make it difficult to perceive. Space helps our brains group things and process their meaning, both on their own and as part of their overall image. Using my compositions, I got a better understanding of the principles of human perception, how our brains make sense of anything just to have a better understanding of what is around us.

Thank you for reading.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1