Design Principles - Task 1: Exploration

Gestalt theory / principles are laws of human perception that describes how humans group similar elements, recognize patterns and simplify complex images when we perceive objects (Interaction Design Foundation, 2016).
“Gestalt” refers to “shape” or “form” in German.
These principles aim to show how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

Fig 1.1 | Picture Source: Bauhaus Alphabeth | Gunes Ozcan, Dribbble, The use of Gestalt theory

Instead of seeing the individual shapes used to form the alphabets and numbers, people are more likely to perceive the numbers first.

Principle of Similarity:

The principle of similarity simply states that when items share some visual characteristic, they are assumed to be related in some way. The items don’t need to be identical, but simply share at least one visible trait such as color, shape, or size to be perceived as part of the same group (NN group, 2020).
Similarity is used to guide the viewer's eye and reinforcing key relationships within a composition.
The brain seems to craft a link between elements of a similar nature.

Fig 1.2 | A Sunday on La Grande Jatte (1884-1886) by Georges Seurat

In this artwork (Fig 1.2), the principle of similarity is used in the figures, colors, and shapes & objects that share similar traits. There is a repetition of shapes and objects because many figures have the same poses and activities (some are sitting, some are standing, and some are relaxing). Some even wear similar clothes and accessories (like umbrellas, hats, and dresses). There is also a similar use of color (like the green in the grass and trees) and warm, muted tones in certain objects.

Principle of Continuation:

Continuation dictates how we interpret direction and movement through a composition. Our mind chooses the path of least resistance, perceiving lines as continuing along their established direction (Smashing Magazine, 2016).
The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects.

Fig 1.3 | Vagabond - Musashi (c. 1998–2006) by Takehiko Inoue

In this artwork (Fig 1.3), the principle of continuity is applied through the flow of Musashi's hair leading to his face, the diagonal line of the sword directing toward the blood splatters, and the harsh line of snow guiding the main focus toward Musashi's figure.
The flow would be Face → Sword → Whole figure.

Principle of Closure:

The principle of closure states that people will fill in blanks to perceive a complete object whenever an external stimulus partially matches that object (NN group, 2021).
The human eye prefers to see complete shapes. If the visual elements are not complete, the user can perceive a complete shape by filling in missing visual information.

Fig 1.4 | The Letter S (1994) by Shigeo Fukuda

In this artwork (Fig 1.4), the principle of closure is applied through the shape of the letter which isn't fully drawn, the use of negative space, and the bold implied lines.

Principle of Proximity:

Items close together are likely to be perceived as part of the same group — sharing similar functionality or traits (NN group, 2020).
The process of ensuring related design elements are placed together. Any unrelated items, should be spaced apart. Close proximity indicates that items are connected or have a relationship to each other and become one visual unit which helps to organize or give structure to a layout.

Fig 1.5 | Sonny Boy (2021) directed by Shingo Natsume – Studio Madhouse

In this scene from the anime (Fig 1.5), the principle of proximity is applied on how the students are grouped together based on how close they are to each other, while the main character is separated from the group, making him stand out as an individual.

Principle of Figure / Ground:

According to Universal Principles of Design, figure-ground is the state in which we perceive elements as either the objects of focus or the background (Smashing Magazine, 2016).
Objects are instinctively perceived as being either in the foreground or the background. They either stand out prominently in the front (the figure) or recede into the back (the ground).

Fig 1.6 | The Climber (2007-2011) by Shinichi Sakamoto – Shueisha

In this artwork (Fig 1.6), the principle of figure/ground is applied through the contrast between the climber's white jacket and the dark sky. The mountain and sky form the ground, creating depth and atmosphere. The swirling clouds blend with the stars, making the background feel fluid and uncertain. The tent in the foreground, the climber in the middle, and the sky in the background establish a layered depth.

Law of Symmetry & Order:

This law states that elements that are symmetrical to each other tend to be perceived as a unified group. Similar to the law of similarity, this rule suggests that objects that are symmetrical with each other will be more likely to be grouped together than objects not symmetrical with each other.
The Law of Symmetry posits that people tend to perceive symmetrical elements as part of a cohesive group. Symmetry provides balance and order, making designs more visually pleasing and easier to process (Eleken, 2024).

Fig 1.7 | Vitruvian Man (c. 1490) by Leonardo da Vinci

In this artwork (Fig 1.7), the law of symmetry & order is applied through the human body's symmetrical structure. The image follows precise mathematical ratios, creating a sense of balance.

Contrast

Contrast is the juxtaposition of strongly dissimilar elements.
Without contrast, visual elements would be monotonous.
As a design principle, contrast is all about using opposites to capture your audience’s attention and draw the eye to key parts of your message (Venngage, 2022).
Without contrast, the highlighted element would not be easily understood, and the same applies to design.
There are two types of tonal contrast, Chiaroscuro and Tenebrism.
Chiaroscuro and tenebrism both focus on the high contrast between brightly lit subjects and darkly lit backgrounds. But the key difference between chiaroscuro vs tenebrism is found in the shadows. Where chiaroscuro uses its light and shadow to create depth behind the subject, tenebrism goes full black. This creates an extreme separation between subject and setting, which is why it's referred to as the "spotlight effect" (Studio Binder, 2021)

Fig 1.8 | Under Voyager (2024) by Mika Pikazo

Under Voyager by Mika Pikazo (Fig 1.8) leans towards chiaroscuro because of the interaction of the light and shadow only highlights certain areas and allowing shadows to softly transition rather than fully overwhelm the composition.

Fig 1.9 | Berserk (1997) by Kentaro Miura – Hakusensha

The work from Berserk (Fig 1.9) leans towards tenebrism due to the extreme contrast between light and shadow. The character's face is almost entirely dark, with only the highlights on his armor and hair defining his form. The glowing eclipse in the background serves as a dramatic light source, creating an intense backlight that further emphasizes his silhouette.

Emphasis

Emphasis is sometimes referred to as dominance. Emphasis is what designers use to draw the eye of the reader to specific elements (Venngage, 2022).
Various elements can be used to create emphasis, such as colour, shapes or value, to achieve dominance.

Fig 1.10 | The Night Watch (1642) by Rembrandt

In this piece (Fig 1.10), emphasis is created through contrast. The way light and shadow work together pulls the viewer's eye to the main subject, making it the focal point.

Balance

Balance refers to the distribution of visual weight in the work of design.
It is the visual equilibrium of the elements that causes the total image to appear balanced.
Balance can be symmetrical or asymmetrical.

Symmetrical:

Symmetrical balance is when both sides of a composition have equal visual weight. This creates a more formal or classic feel (Venngage, 2022).
The equal arrangement of elements on either side of the central axis (horizontal or vertical) resulting in bilateral balance.
Arranging elements equally around a central point results in radial balance.
Approximate symmetry is when equivalent but not identical forms are arranged around the fulcrum line.

Fig 1.11 | The Last Supper (1452-1519) by Leonardo da Vinci

This painting (Fig 1.11) leans towards symmetrical balance, as the composition focuses on Jesus at the center, with his disciples arranged evenly on both sides. The background elements also mirror each other, which adds symmetry.

Asymmetrical:

Asymmetrical balance is when elements aren’t weighted equally. This adds visual interest and is ideal for more modern or informal designs (Venngage, 2022).
One side of the composition might contain a dominant element, which could be balanced by a couple or more lesser focal points on the other side.
More dynamic and interesting. It evokes feelings of modernism, movement, energy and vitality.
Asymmetrical balance offers more visual variety, although it can be more difficult to achieve because the relationships between elements are more complex.

Fig 1.12 | Oberon (Fate/Grand Order) Fanart "夢の噺" (2023) by AU

This artwork (Fig 1.12) leans towards asymmetrical balance, as the figure and light source are heavier on the right. However, the perspective and the outstretched arm help even out the composition.

Extra:

Fig 1.13 | Harmony of Balance Painting (2020) by Olha Asadulaieva

This painting (Fig 1.13) is an example of both symmetrical and asymmetrical balance. It primarily uses symmetrical balance because the stacked rocks are vertically aligned and centered, with the weight evenly distributed. However, the bonsai tree adds a slight asymmetry as its branches lean to the left, but the small bonsai on the third rock from the top helps balance it out.

Repetition

Repetition is simply repeating a single element many times in a design (Interaction Design Foundation, 2024).
Repetition could make a work of design seem active.
The repetition of elements of design creates rhythms and pattern within the work.
Variety is essential to keep rhythms exciting and active, and to avoid monotony.
Pattern increases visual excitement by enriching surface interest.

Fig 1.14 | Sky and Water I (1938) by M.C. Escher

The repetition in this artwork (Fig 1.14) can be seen literally, where there are repetitive shapes of birds and gradually shift into fish. The repetition is also structured in a grid-like manner to ensure a balanced composition and evenly spaced elements.

Movement

The way a design leads the eye in, around, and through a composition - the path the eye follows.
Motion or movement in a visual image occurs when objects seem to be moving in a visual image.
Movement in visual image comes from the kinds of shapes, forms, lines, and curves that are used.

Fig 1.15 | EYE (2023) by Yoneyama Mai

The movement in this artwork (Fig 1.15) can be seen in the curved lines, wind effects, contrast, and the character's pose. The character looks like she's about to summon her power, and the curved lines show the wind, leading the viewer’s eye to her hand. The strong contrast in certain areas helps highlight and emphasize the movement.

Harmony & Unity

Harmony:

Harmony as a principle of design is the sense of cohesiveness between the elements in a composition (Envato Tuts+, 2024).
Harmony involves the selection of elements that share a common trait.
Harmony becomes monotony without variety (change or slight difference in elements and objects in composition).

Fig 1.16 | The Kiss (1908) by Gustav Klimt

In this painting (Fig 1.16), harmony comes as the repeating shapes and patterns, especially the golden and floral designs around the figures. The smooth curves and detailed patterns creates a balanced and peaceful feeling.

Unity:

Unity refers to the repetition of particular elements throughout your design, whether they’re colors, shapes or materials to pull the look together.
Unity occurs when these elements are composed in such a way that they are balanced and give a sense of oneness, creating a theme.
Unity focuses on creating harmony by balancing colors, shapes, and textures while managing positive and negative space. It also involves using repetition, proximity, and alignment to bring all the pieces together, like fitting parts of a puzzle (Prezentium, 2025).
Although unity and harmony may sound similar, they each play distinct roles in the way we experience design.

Fig 1.17 | Composition VIII (1923) by Wassily Kandinsky

In this painting (Fig 1.17), unity comes from the repeating shapes and lines. The use of similar forms throughout the piece makes everything feel like it belongs together, creating a complete and balanced look. The flow of shapes also helps guide the viewer's eye through the artwork.

Extra:

Fig 1.18 | Jupiter et Sémélé (1894-1895) by Gustave Moreau

In this artwork (Fig 1.18), harmony and unity work together. The figures, background, and decorative details all fit together in a way that feels complete. The use of space, repeating shapes, and the balance of light and shadow highlights the emotional and storytelling themes.

Symbol

A sign, shape, or object that is used to represent something else (Cambridge Dictionary, 2020).
Symbols, used in combination with text and images, can make messages more meaningful and memorable than text alone and have been used throughout the history of marketing and design (Venngage, 2019).

Pictorial Symbols:

Image-related and simplified pictures.

Fig 1.19 | Sunflowers (1889) by Vincent van Gogh

In Sunflowers (Fig 1.19), the principle of pictorial symbols is used because the flowers still look like real sunflowers. Even though the brushstrokes are rough and the colors are more intense, the shape and details make them easy to recognize. The flowers can also represent warmth, happiness, or appreciation.

Abstract Symbols:

Abstract symbols can look like the objects that they represent but have less details.

Fig 1.20 | Broadway Boogie Woogie (1942-1943) by Piet Mondrian

This painting (Fig 1.20) uses shapes and colors to symbolize the energy of the city, the rhythm and movement of New York City is the main inspiration. The painter explained that he wanted to capture the city’s dynamic pace through abstract forms. The grid of squares and rectangles, along with the primary colors. It represent the constant motion and energy of urban life, reflecting the nature of the modern world.

Arbitrary Symbols:

Arbitrary symbols have no resemblance at all to the objects or the ideas they represent.

Fig 1.21 | Radiant Baby (From Icon Series) (1990) by Keith Haring

In this artwork (Fig 1.21), the principle of arbitrary symbols is used because the baby doesn’t just represent an actual baby. Instead, it’s often seen as a symbol of innocence, purity, or new life. The lines around it don’t literally mean movement but are used to show energy or importance. The meaning isn’t fixed and depends on how people interpret it, which makes it an arbitrary symbol, it’s not naturally connected to what it represents.

Word and Image

Imagery is a vital part of design, be it print or digital. Users and viewers are able to relate to a concept or a brand if the right images are used in a work of design. It is therefore important to use suitable and relevant images when designing.
Which medium is the best at conveying a part of a message very much depends on what is being communicated; but, in general, images and words can be used in a complementary fashion to communicate specific aspects of a message (Witte Rook, 2016).

Fig 1.22 | Your Body is a Battleground (1989) by Barbara Kruger

This painting (Fig 1.22) uses the image of a woman split into two to show conflict and struggle. This image represents personal identity and the battle over control of the body. The contrast between the negative color effect on the face with the red background makes the message stronger, emphasizing the theme of division along with the text that explains it.

TASK

For this task we are required to describe the design principles listed in the MIB and provide examples for each theory. However, we are prohibited from using the same examples as those in the lecture videos / notes.

Chosen artwork

Fig 2 | Picture Source: Signal to Noise by Neil Gaiman and Dave McKean | Amazon

Signal to Noise, Dave McKean; 1989-1992, various sizes, mixed media (ink, acrylic, collage, digital manipulation). Source: Gaiman, N., & McKean, D. (1992). Signal to noise. Dark Horse Comics.

This is an artwork for a graphic novel written by Neil Gaiman and illustrated by Dave McKean. I chose this artwork because I love how McKean uses mixed media, which inspires me. He is one of the artists I look up to.

This cover shows his strong understanding of design principles. The contrast between the text and the image makes the man the focal point. The difference in color between the background and subject makes him stand out. He uses chaotic textures to emphasize the subject, drawing attention to the man.

Additionally, he adds a subtle glow to guide the viewer’s eye. This high contrast enhances emphasis, ensuring key elements stand out. Despite the chaotic textures, the composition remains balanced, the right side is visually heavy with imagery, while the left is weighted by bold typography and abstract patterns.

Harmony and unity are present, as the interaction between the drawing and typography remains cohesive despite the chaotic elements. The distorted effect reflects the "noise" in the title is the evidence of his strong use of symbolism.

FEEDBACK

Week 1

This week is an introduction to the lecturers and the module, no feedback given.

Week 2

Specific Feedback: Ms. Jinchi told me that I’m already on the right path with completing the assignment. The task is okay, but I need to finish adding the explanation for the principles and provide further elaboration on the Gestalt theory.

General Feedback: The e-portfolio needs to have a clear layout. Don't make it messy, as it will be hard to read later. Each principle needs to have examples. Make sure to ensure readability and avoid making it difficult for people to read.

Week 3

Specific Feedback: Ms. Jinchi told me that the overall task is well-structured, but some parts of my analysis are incorrect (the principle of similarity, pictorial symbols, and arbitrary symbols). Also, when explaining my analysis, I need to include the figure name (referring to the picture I’m talking about) to ensure the readers have a smoother reading flow without having to search for which artwork I’m referring to.

General Feedback: Before doing the task, make sure to read the MIB to understand what it requires. Be careful with typos because they can be visually distracting and ruin the reading flow for others.

REFLECTIONS

Experience

This task was interesting because it was my first time analyzing how some of my favorite artists apply design principles in their artwork. I love that it helped me realize their thought process when creating art (not fully), there’s a lot of planning and decision-making involved. Even though I didn’t analyze every single design principle in the same artwork, I’m happy that I can now recognize some at first glance.

The whole process was fun since I got to incorporate my hobby (consuming Japanese media) into my work. Even though it was just analysis, it was actually quite challenging because I had to look through and read many references to understand where to start.

Observations

From this task, I realized how important value and contrast are in creating artwork. It’s impactful to understand how to use them, as they can shift attention from a large object to a smaller one just through contrast. People’s eyes are naturally drawn to the brightest areas first. By adjusting value and contrast, you can create movement, direction, balance, and emphasis.

I also learned about the context behind some of the paintings, which helped me gain a deeper understanding of their meaning just by looking. It’s fun to see how people interpret art differently. When I shared some artworks I found interesting with my family and friends, they noticed things I didn’t, and at the same time, they didn’t always see what I noticed. This made me realize how a painting can affect people’s emotions differently, especially when it resonates with their own experiences. This whole process made me appreciate art even more.

Findings

This task helped me learn how to analyze artwork more quickly and apply my understanding to it. I learned most of the design principles just by studying the paintings themselves. Finally understanding their meaning and how to apply these principles through observation felt so rewarding. I also learned how to add more depth to my analysis. The whole process is not so smooth, I did make a mistake while analyzing the design, it means I'm not fully grasp the information yet. Ms. Jinchi patiently guides me and points out my mistakes while also providing references I can look into. It helps me learn to be more careful in how I perceive things and to understand the information I receive more carefully.

Through this assignment, I gained a better understanding of the basic principles and how to apply them correctly in my own work. I'll do my best to use the knowledge I gained from analyzing these artworks in my own creations.

Search This Blog

Aquela Zefanya Soares (0374377)