5/2/2024 - 21/2/24 | Week 1 - Week 3

Iman Mikudim | 0338004 | Section 1

Design Principles | Bachelor of Design (Hons) in Creative Media

Task 1: Exploration

SECTIONS

| Lectures

Lecture 1: Elements & Principles of Design
Lecture 2: Contrast & Gestalt Theory
Lecture 3: Balance & Emphasis
Lecture 4: Repetition & Movement
Lecture 5: Harmony & Unity
Lecture 6: Symbol, Word & Image

| Instructions

| Feedback

| Reflections

LECTURES

Lecture 1 | Elements & Principles of Design

(i) Elements of Design

The elements of design are essentially the ‘building blocks' for a design. These include point, line, shape, form, texture, space, and colour.

1. Point

Fig 1.1 Point

The simplest element of design.
When used repetitively, it forms a line.
When moved in space, it creates 2D and 3D figures and forms.

2. Line

Fig 1.2 Line

A line is any two connected points.
Can be active or static, aggressive or passive, sensual or mechanical.
Indicates direction, defines boundaries of shapes and spaces, implies volumes or solid masses, and suggests motion or emotion.
Can also be grouped to depict qualities of light and shadow, and to form patterns and textures.

Fig 1.3 Example of Line

Fig 1.3 shows how line (along with colour) is used here to represent different areas of the centre: a flat line for bowling; curved for swimming; and a zigzag for fitness and gym. These lines then form the basis of a navigation system, which directs people to each area.

3. Shapes

Fig 1.4 Shapes (Geometric vs. Organic)

A two-dimensional area.
Visible when the line(s) enclose an area, change in value (lightness/darkness), colour or texture sets an area apart from its surroundings.
Two categories of shapes:

Geometric: Regular and precise (circles, squares, triangles, etc.).
Organic: Irregular, often curved or rounded (similar to shapes found in nature).

Fig 1.5 Example of Shapes

4. Form

Fig 1.6 Form

A three-dimensional area.
When form encloses a space, the space is called volume.
Form is often a major element in sculpture and architecture.

Fig 1.7 Example of Form

In architecture, most forms are geometric. They are usually static too. In Fig 1.7 for example, Dutch architect Piet Blom’s Cube Village incorporates a series of cubes set on point. Each cube is a repetition of form and the series creates a sense of balance and rhythm. However, as an architectural feature, each cube is static.

5. Texture

Fig 1.8 Texture (Actual vs. Implied)

Tactile qualities of surfaces or the visual representation of those qualities.
All surfaces have textures that can be experienced by touching or visual suggestion.
Two categories of texture:

Actual: Experienced by touch.
Simulated/Implied: Created to look like the real texture.

Fig 1.9 Example of Texture

Fig 1.9 shows a texture overlaid to the final logo to add to the vintage look and feel. Without it, the design would most likely appear too “clean” for the topic.

6. Space

Fig 1.10 Space

Space is the seemingly empty space around us.
The space of a picture is defined by its edges.
Three-dimensional space is experienced when we are in it. From the outside, we experience mass. From the inside, we experience volume.
In graphic design, space, or depth, refers to the area that a shape or form occupies. Space can be defined as positive (filled space) or negative (empty).

Fig 1.11 Example of Space

Fig 1.11 shows an example of using white/negative space within a layout. Take note of how there are very few elements on each page; however, with careful placement, the layout is still well-balanced. This has produced a very clean, contemporary and calming layout which is well suited to the topic.

7. Colour

Fig 1.12 Colour

The visual byproduct of the spectrum of light.
Hue: Colours of the spectrum, e.g. yellow and green.
Value: Lightness or darkness from white through greys to black. Black and white pigments are important in changing colour values.
Intensity/Saturation: The purity of a hue.
Colour groupings that provide distinct colour harmonies are called colour schemes:

Monochromatic colour schemes: Based on variations in the value and intensity of a single hue
Analogous colour schemes: Based on colours adjacent to one another on the colour wheel
Complementary colour schemes: Emphasizes two hues directly opposite each other on the colour wheel.

Fig 1.13 Colour Moods and Meanings

Colours can also have both positive and negative psychological effects on people. This is referred to as colour moods or meanings. The table in Fig 1.13 provides some common examples.

Fig 1.14 Example of Colour

Fig 1.14 shows a neutral colour palette on breezy beauty packaging or as part of a minimal interior design scheme to create a mood of freshness and simplicity.

Lecture 2 | Contrast & Gestalt Theory

(ii) Principles of Design

Organizational fundamentals that result from or guide the arrangement of the elements.

1. Contrast

Fig 2.1 Contrast

The juxtaposition of strongly dissimilar elements creates visual contrast.
Contrast is essential for preventing visual monotony.
Visual contrast adds interest, highlights important points, and conveys meaning.

Fig 2.2 Example of Contrast

Fig 2.2 shows an example of a template that uses contrast in several different ways. For starters, the red icons stand out against the white backgrounds. The size contrast of the circles draws the eye to the big ones first. Also, the dates alternate between a blue and white background creating a sense of movement.

2. Gestalt Theory

Fig 2.3 Gestalt Principles of Design

The human brain naturally seeks patterns, logic, and structure in what it sees.
"Gestalt" comes from German, meaning "shape" or "form."
Gestalt principles are rules explaining how the human eye interprets visual elements.
These principles simplify complex scenes into simpler shapes.
They clarify how the eyes perceive these shapes as a unified whole rather than individual parts.

a) Principle of Similarity

Fig 2.4 Similarity

The human eye perceives similar elements in a design as a unified whole.
Even when separated, the brain connects these similar elements.
This phenomenon helps in forming cohesive visual perceptions.

Fig 2.5 Example of Similarity

In Fig 2.5 for example, GitHub uses the similarity principle in two ways on the page below. First, they use it to distinguish different sections. You can immediately tell that the grey section at the top serves a different purpose than the black section, which is also separate from and different from the blue section. Second, they also use the color blue to distinguish links from regular text and to communicate that all blue text shares a common function.

b) Principle of Continuity

Fig 2.6 Continuity

The human eye naturally tracks paths, lines, and curves within a design.
The continuous flow of visual elements is preferred over disjointed objects.
Cohesive design with connected visual elements enhances aesthetic appeal and readability.

Fig 2.7 Example of Continuity

c) Principle of Closure

Fig 2.8 Closure

The human eye has a preference for perceiving complete shapes.
When visual elements are incomplete, the brain fills in missing information to perceive a complete shape.
This ability aids in forming coherent visual perceptions despite incomplete visual input.

Fig 2.9 Example of Closure

d) Principles of Proximity

Fig 2.10 Proximity

Proximity is arranging related design elements close together.
Unrelated items should be spaced apart to avoid confusion.
Close proximity indicates a relationship or connection between elements.
It helps in organizing and structuring a layout by forming visual units.

Fig 2.11 Example of Proximity

e) Principle of Figure/Ground

Fig 2.12 Figure/Ground

Objects are naturally perceived as either foreground or background.
They either appear prominently in the front (figure) or fade into the background (ground).
This distinction helps in organizing visual perception and depth.

Fig 2.13 Example of Figure/Ground

f) Law of Symmetry & Order

Fig 2.14 Symmetry & Order

Symmetrical elements are perceived as a single group.
Like the law of similarity, symmetry enhances the grouping of objects.
Symmetry contributes to visual coherence and organization.

Fig 2.15 Example of Symmetry & Order

The Gestalt principle of symmetry and order can be clearly seen in UI design through the use of grid systems. Grids serve as a structure for arranging design elements like text, images, and buttons, ensuring symmetry and equal spacing.
Grids can also be used to organize content into columns and rows, establishing a clear visual hierarchy and making it easier for users to navigate and understand information.
An excellent example of grid use in website design can be seen on the Allbirds website in Fig 2.15. The grid layout is used to make scanning easy, with their offerings arranged in neat rows and columns that are symmetrical and organized.

Lecture 3 | Balance & Emphasis

1. Balance

Balance in design is about how visual weight is distributed.
It's the equilibrium among elements that creates a sense of balance in the overall image.
Two main types of balance: symmetrical (equal distribution) and asymmetrical (unequal distribution).

Fig 3.1 Symmetrical balance

Fig 3.2 Radial balance

Symmetrical balance:

Balance is achieved when elements have equal "weight" on both sides of a central point.
Bilateral balance occurs when elements are equally arranged on either side of a central axis.
Radial balance is achieved by arranging elements evenly around a central point.
Approximate symmetry involves arranging equivalent but not identical forms around the central axis.

Fig 3.3 Example of Symmetrical balance

Fig 3.3 shows an example of a comparison infographic that uses a simple symmetrical balance whereby the composition has equal visual weight, creating a more formal or classic feel.

Fig 3.4 Example of Radial balance

Fig 3.4 shows a business mind map template whereby the different text boxes and icons radiate out from the rocket ship and end up being symmetrical as a result.

Fig 3.5 Asymmetrical balance

Asymmetrical balance:

Unequal visual weight is characteristic of asymmetrical balance.
Dominant elements on one side of the composition are counterbalanced by smaller focal points on the other side.
Asymmetrical balance infuses compositions with modernism, movement, and vitality.
It adds dynamism and interest by offering visual variety.
Achieving asymmetrical balance can be challenging due to the complexity of relationships between elements.

Fig 3.6 Example of Asymmetrical balance

Fig 3.6 shows an infographic whereby the text boxes in the template below are unevenly distributed, resulting in an asymmetrical balance. But as you can see, despite the uneven division of elements, the layout as a whole looks perfectly balanced

2. The Golden Ratio

Fig 3.7 Golden Ratio

The Golden Ratio, also called phi, is a mathematical concept derived from the Fibonacci sequence.
It's found in nature, from the arrangement of leaves on trees to the shape of seashells.
Throughout history, it's been associated with perfect beauty and harmony.
In architecture and art, it's used to create visual balance and appeal.
Designers, illustrators, and digital artists use it to bring harmony, balance, and structure to their work, enhancing its appeal.

Fig 3.8 Example of Golden Ratio

Fig 3.8 shows Singapore-based design agency Lemon Graphic creating a visual identity for Terkaya Wealth Management. Here, the three design elements of the business card – the small eagle, the text and the large eagle – all fit into a different section of the Golden Ratio. Plus, lay a Golden Ratio over the small eagle and it also fits within the proportions.

3. Rule of Thirds

Fig 3.9 Rule of Thirds

The rule of thirds enhances dynamism in design, photography, film, or painting.
The image is divided into thirds both horizontally and vertically.
The subject is ideally positioned at the intersections of these lines or along them, creating a balanced yet engaging composition.

Fig 3.10 Example of Rule of Thirds

Fig 3.10 shows a photo using the rule of thirds for good composition:

The tree, which is the main subject, is perfectly aligned with the left vertical line and well positioned with the help of the intersections. This leaves negative space on the right to set the scene.
The photo is cleanly divided into two parts. With the ground aligned to the horizontal grid line, ⅓ of the picture is the foreground. ⅔ of the photograph makes the background, adding depth.
Since no object or element is on the right, there are no distractions, and the focus remains on the subject.

Click here for more examples of the rule of thirds.

4. Emphasis

Fig 3.11 Emphasis

Emphasis is crucial for establishing dominance and directing focus in design.
Elements like colour, shape, and value are utilized to create emphasis.
These elements help to prioritize certain aspects of the design and guide viewer attention.

Fig 3.12 Example of Emphasis

Fig 3.12 shows Carmax's website which has an interesting example of emphasis put on the "Find your car" CTA. First of all, the button is of contrasting yellow colour that stands out well from the white background. Also, the lady in the car is watching in the direction of the CTA and is pointing her hand towards the button and this way increases the emphasis.

Fig 3.13 Another example of Emphasis

Fig 3.13 shows various elements of emphasis on the Dropbox website, intended to pull a customer’s attention and show them what they need to know about the service. An animation appears in an orange block, a colour contrasting the rest of the shades on the page. The animation in itself is also a form of emphasis as it breaks from the static nature of the rest of the graphics on the page.

Lecture 4 | Repetition & Movement

1. Repetition (Pattern/Rhythm)

Fig 4.1 Repetition

Repetition in design can add a sense of activity and movement.
It creates rhythm and pattern by repeating design elements.
Variety is crucial to maintain interest and prevent monotony in rhythms.
Patterns enhance visual appeal by adding depth to surface interest.

*Variety is about a change or slight difference in elements and objects in composition, to avoid a boring composition. Variety can also involve varying angles, exposure, composition, etc.

Fig 4.2 Example of Repetition

Fig 4.2 shows a prime example of repetition. Each section has a similar, but not identical layout. They all use the same fonts, colours and data visualization style, too. The effect this creates is one of unity and harmony throughout the entire design, even though the individual sections themselves are all a little bit different.

Click here for more examples of repetition.

2. Movement

Fig 4.3 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 a visual image comes from the kinds of shapes, forms, lines, and curves that are used.

Fig 4.4 Example of Movement

Fig 4.4 shows an artwork titled 'The Great Wave' by Katsushika Hokusaiwhere your eye begins at the left and is carried to the right by the movement and curves of the crashing wave. When the wave is followed to its natural endpoint, the eye is led to Mt. Fuji in the background, which you may not have seen until your eye was led there.

3. Hierarchy

Fig 4.5 Hierarchy

Hierarchy organizes content to convey meaning effectively.
It guides viewers to prioritize important information.
Visual hierarchy assists in navigating through secondary content.

Fig 4.6 Example of Hierarchy

Fig 4.6 shows an example of hierarchy on a billboard whereby the primary message (focal point) is a photo of the actual product which was chosen to heighten product recognition within the supermarket. The secondary message is the logo which is used to re-enforce the brand and the tertiary message further explains what the product is. Therefore, in a matter of seconds, the reader knows what the product looks like, what it does and who makes it.

Click here for more examples of hierarchy.

4. Alignment

Fig 4.7 Alignment

Alignment involves positioning elements so their edges or bodies line up along common rows, columns, or centres.
It fosters unity and cohesion in the design, enhancing its overall aesthetic and perceived stability.
Additionally, alignment guides the viewer through the design, directing their focus and navigation.

Fig 4.8 Example of Alignment

Fig 4.8 shows an infographic where the main elements (pie charts denoting weeks of a project) are centre-aligned. So that’s the technical alignment of those objects. But as a principle, alignment also comes into play with the icons and accompanying text being aligned with the corresponding pie charts.

Lecture 5 | Harmony & Unity

1. Harmony

Fig 5.1 Harmony

Harmony in design involves choosing elements that share a common trait.
However, too much similarity can lead to monotony.
It's about ensuring that all elements in a design blend together cohesively.
Elements may align in theme, aesthetic style, or mood to achieve harmony.

Fig 5.2 Example of Harmony

We can see applications of principles of design harmony in any graphic design online. The example in Fig 5.2 might look like there are a lot of disparate elements at a glance, but the use of similar fonts, shapes, colours, and lines all create harmony in the piece.

Click here for more examples of the 3 types of harmony in art.

2. Unity

Fig 5.3 Unity

Unity in design involves repeating specific elements like colours, shapes, or materials to create coherence.
It's about arranging these elements to achieve balance and a feeling of wholeness, establishing a theme.
Unity and harmony, though related, have distinct functions in design perception.

Fig 5.4 Example of Unity

Fig 5.4 shows a coffee delivery app design that uses some trending and analogous colour schemes to make it a very unified design. It also implements the principle of alignment and repetition, helping to enhance its unity.

Click here for more examples of unity.

3. Scale & Proportion

Scale and proportion are design elements related to size.
Scale concerns an object's size compared to others in a design.
Proportion focuses on the size relationship between parts of the same object.

a) Scale

Scale pertains to the size and proportions of figures and forms relative to a set standard.
It can be measured directly or estimated visually through comparison.
Examples of scale application include architectural drawings and models.
Scale helps specify details by showing relative sizes of objects.
Dramatic effects and visual interest can be achieved by deviating significantly from normal scale relationships.

Fig 5.5 Example of Scale

In the above public artwork in Fig 5.5, the person pushing the sphere provides a sense of scale. Given the reflections of skyscrapers in the sphere, viewers might infer that the globe symbolizes the world, and its relatively small scale suggests that humans can manipulate it.

b) Proportion

Proportion in art and design refers to the relationship between elements such as size, colour, quantity, and setting.
It's about how these elements compare to each other, creating a ratio within the composition.
Proportion is considered harmonious when there's a correct balance between these elements in terms of size or quantity.
Effective use of proportion in design leads to harmony and unity within the overall visual composition.

Fig 5.6 Example of Proportion

When you see a disproportionate object, it catches your attention. Cartoons with large-headed people, like "The Head" by Eric Fogel in Fig 5.6 for example, catch your eye. Obvious exaggeration may even elicit a sense of amusement.

Lecture 6 | Symbol, Word & Image

1. Symbol

Figurative representations

Visuals
Graphic symbols:

Pictorial symbols: Simplified pictures related to objects.
Abstract symbols: Resemble objects but with fewer details.
Arbitrary symbols:

Have no resemblance to represented objects or ideas.
Invented with constructed meanings, often based on shapes and colours.
Learning required for understanding.

Non-figurative representations

Fig 6.1 Example of Symbol (Graphic)

2. Word & Image

Images play a crucial role in both print and digital design, aiding in user connection with concepts or brands.
Use of suitable and relevant images enhances design effectiveness.
Pairing imagery with well-chosen words deepens design meaning.
Strategic typography selection and placement create visual hierarchy and balance in design.
Typography involves designing and arranging text to communicate messages or concepts effectively.

Fig 6.2 Example of Word & Image (Airbnb)

Fig 6.2 shows an example of good usage of words & images on Airbnb's website:

Images: Airbnb heavily relies on imagery to showcase its listings. High-quality photos of accommodations, destinations, and experiences are prominently featured throughout the website, aiding users in connecting with the concept of travel and accommodation.
Word & Image Pairing: Airbnb pairs its images with well-crafted descriptions that enhance the user's understanding and connection with the listings. The combination of imagery and wording helps convey the unique selling points of each accommodation or experience.
Strategic Typography: Airbnb uses strategic typography in its interface design to create visual hierarchy and balance. Clear and readable typography is used for headings, descriptions, and calls to action, ensuring that users can easily navigate and engage with the platform.

INSTRUCTIONS

Brief

For this task, we are to:

Recap the design principles we have learned in the lectures.
Pick and briefly describe one goal from the United Nations’ Sustainable Development Goals (UNSDG).
Select an existing art/design work that revolves around that goal of our choice.

1. Selected UNSDG

Fig 2.1 UNSDG Goal #4: Quality Education Infographic | Week 1 (7/2/24)

My selected UNSDG goal is Quality Education which means ensuring inclusive and equitable quality education and promoting lifelong learning opportunities for all.

2. Selected Design

I used these specific keywords to aid my search for art/design work related to my chosen UNSDG goal.

Research Keywords: 'Education', 'Access to education', 'Literacy', 'Learning', 'Educational equity', 'Education for all', 'Educational resources'.

Fig 2.2 Collection of different artworks/designs | Week 2 (14/2/24)

Fig 2.2 shows a collection of different artworks I had considered using after conducting some research. However, after stumbling upon the artwork shown in Fig 2.3, I realized that there were more design principles involved in it, and I believed that it also aligned with the goal I had selected.

Fig 2.3 Selected design representing 'Quality Education' | Week 3 (21/2/24)

Credit line:

Title of art/design work: Design for Education Illustration
Artist’s/designer’s name: Tubik (portfolio: dribbble)
Year: Jun 21, 2019
Size: 1600x1200 px
Medium: Digital
Source link: dribbble

3. Explanation for selecting the work of art/design

Explanation:

I chose this illustration because it beautifully captures the essence of quality education, which is central to UNSDG's 4th goal. The artwork vividly portrays a girl immersed in her studies, utilizing modern technology alongside traditional educational tools. The integration of educational elements within her hair symbolizes the holistic approach to learning, suggesting that education permeates every aspect of life. Moreover, the elements in her hair also suggest that she is exposed to many subjects, highlighting that she is not limited to only one career path for her future. The scattered papers represent her dedication and hard work, while the A+ grade signifies her academic success. This illustration embodies the principles of inclusivity, innovation, and dedication, essential for achieving quality education. The open composition reflects the never-ending journey of learning, emphasizing that education is a lifelong process.

(136 words)

List of design principles observed:

Movement
Continuity
Similarity
Rule of Thirds
Golden Ratio
Pictorial Symbols
Emphasis
Balance
Repetition
Harmony

FEEDBACK

Week 2

General Feedback:

Recap lectures in your own words.
Ensure to include links to website(s) for external research.
Only list the design principles; elaboration is only required for the second task.
Explain why you chose that design in relation to the UNSDG goal.

Specific Feedback:

Ms. Jinchi liked that I have multiple options for artworks and that I do not limit myself to only one.
She commented that most of the artworks I’ve chosen exhibit distinct design principles, however, she advised me not to choose artworks that look like stock/vector images as they may appear generic.
She also asked which design I liked the most, and I picked the first illustration as it struck me the most, believing it had a deep meaning behind the goal of ‘quality education’.
Ms. Jinchi appreciated my thought process and understanding of the design principles presented in the artwork, giving me the green light to proceed with my work.

Week 3

Ms. Jinchi approved my explanation for my selected design and commented that it met the requirements, and indicated that I was ready to submit my work.

REFLECTIONS

I really enjoyed this first task as it exposed me to many design principles that were new to me and also allowed me to further learn and understand the ones I've already learned in the past. I noticed myself doing further research and looking into more examples, which also really helped me understand the design processes of other designers.

QUICK LINKS

| Task 2: Visual Analysis

| Task 3: Design

| Task 4: Final Compilation & Reflection

Search This Blog

Iman Mikudim (0338004)

Design Principles | Task 1: Exploration