Design Principles - Task 1: Exploration
6/2/2024 Week 1 - 20/2/2024 Week 3
Ng Jia Ern 0363033
Design
Principles
Task 1: Exploration
INSTRUCTIONS
1. Recap the design principles (Gestalt theory, Contrast, Emphasis, Balance, Repetition, Movement, Harmony & Unity, Symbol, Word and Image)
2. Pick and briefly describe one goal from the United Nations’ Sustainable Development Goals (UNSDG).
3. Select an existing art/design work that revolves around that goal of your
choice. Beneath the image, include the credit line of the art/design work
(title of art/design work, artist’s/designer’s name, year, size, medium, source link). Some works may not have all these but
provide as complete as possible.
4. Explain, in about 100-150 words, why you chose that design in relation to
the UNSDG goal and list the design principles you observed in that
design.
LECTURES
Design principles:
1. Contrast
-juxtaposition (placing two or more things side by side often to compare or
contrast) of strongly dissimilar elements
-contrast can provide interesting visuals, emphasise a point and express
content.
Examples:
web design:
Fig 1.1 Facebook login page
Strong blue colour and green colours can let us know where to log in and create a new account
Fig 1.2 instagram log in page
The call to action button's colours are different and vibrant to draw the viewer's attention
Interior design:
Fig 1.3 Example of contrast in Interior design
Contrast can be found in shapes, how the furniture is positioned, and
colour.
Yellow seat is set against white background
This work puts two contrasting textures — rough and smooth and contrast in colour — black and yellow
2. Gestalt theory 格式塔理论
Rules that describe how the human eye perceives visual elements
Reduced complex scenes to simple shapes
Reduced complex scenes to simple shapes
1. Principle of similarity
-Human eye tends to perceive similar elements in a design as a complete
picture, shape, or a group if those elements are separated.
Fig 2.1 Principle of similarity logo, NBC logo
the drop shapes if seen as a group will form a peacock.
2. Principle of continuation
-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 2.2 Principle of continuation example
3. Principle of closure
-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 2.2 Principle of continuation example
Fig 2.3 Principle of continuation example on Pinterest
The road creates movement continuation to emphasise the tree.
-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 2.4 Principle of closure example, WWF logo
Fig 2.6 Principle of proximity poster on Pinterest
5. Principle of figure/ground
6. Law of symmetry and order
Fig 2.4 Principle of closure example
Actually, there are no triangles drawn, but we can still see triangles by
joining the missing lines.
4. Principle of proximity
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 organise or give structure to a layout.
Fig 2.5 Shopee website
same function icons have the same design
same function icons have the same design
as the crows- although individual crows- are grouped together in the viewer’s perception in the shape of a woman.
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).
Examples:
Fig 2.7 Principle of figure/ground example
Can see two faces and a vase
Can see a swan and a face
Fig 2.8 Principle of figure/ground example
Can see a swan and a face
6. Law of symmetry and 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
Fig 2.9 Law of symmetry and order
Two cups group together to create the owl's eye
3. Balance
• Balance refers to the distribution of visual weight in a 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 不对称.
THE GOLDEN RATIO
Fig 3.1 Example of the golden ratio, The Great Wave off Kanagawa
RULE OF THIRDS
Fig 3.2 Example of the rule of thirds
4. Emphasis
• Emphasis is used to create dominance主导地位 and
focus in a design work.
• Various elements can be used to create emphasis, such as
colour, shapes or value, to achieve dominance.
Fig 4.1 Example of emphasis art by Itsuko Suzuki
Emphasis is created in this image through the contrast of bright yellow on gray
5. Repetition
• Repetition could make a work of design seem active.
• The repetition of elements of design creates rhythm 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.
*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
6. 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 6.1 Example of movement
HIERARCHY 层次结构
• Hierarchy is the
choreography编排 of content in a composition to communicate
information and convey meaning.
• Visual hierarchy
directs viewers to the most important information first and identifies navigation through secondary content.
Fig 6.2 Example of hierarchy
ALIGNMENT
• Alignment is the placement of elements in a way that
edges line up along common rows or columns, or their
bodies along a common centre.
• Alignment creates a sense of unity and cohesion凝聚力, which
contributes to the design's overall aesthetic and
perceived stability.
• Alignment can also be a powerful means of
leading a person through a design.
Fig 6.3 Example of alignment
7. Harmony & Unity
HARMONY
• Harmony involves the selection of elements that share a common
trait.
• Harmony becomes monotony without variety.
• Harmony is the sense that all of the elements of your design fit
together. They may fit the same theme, aesthetic style or mood.
Fig 7.1 Example of Harmony and unity
Similar colour tone
UNITY
• Unity refers to the repetition of particular elements throughout
your design — whether they’re colours, 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.
• Although unity and harmony may sound similar, they each play distinct
roles in the way we experience design
Fig 7.2 Example of Unity
SCALE AND PROPORTION
• Scale and proportion are both design elements that have to do with
size.
• Scale is the
size of one object in relation to the other objects in a design or
artwork.
• Proportion refers to the size of the
parts of an object in relationship to other parts of the same
object.
• Throughout the centuries, designers have used scale and proportion to
depict or distract from the ideal.
SCALE
• Scale refers to the size and dimension of figures and forms relative to
a specific unit of measure.
• Scale can be determined in two ways:
Fig 7.3 Example of scale
• Architectural drawings and scale models are examples of the applied use
of scale.
Fig 7.4 Architectural drawings
• Also, scale is used to specify or illustrate details based on the
relative sizes of objects.
• Substantial deviation from a normal scale relationship can create
dramatic results and visual interest within the design or composition
Fig 7.5 Example of scale contrast in Installation art
PROPORTION
• Proportion in art and design is
the relationship of two or more elements in a composition and how
they compare to one another with respect to size, color, quantity, degree,
setting, etc.; i.e. ratio.
• Proportion is said to be harmonious when a correct relationship exists
between the elements with respect to size or quantity.
• The effective use of proportion in design often results in harmony and
unity
Fig 7.6 Comic cover
8. Symbol
• A sign, shape, or object that is used to represent something else
(Cambridge Dictionary, 2020).
• In design, symbols can provide or convey information, equivalent to one
or more sentences of text, or even a whole story (Eco, 1976 &
Pettersson, 2015).
Fig 8.1 Symbols types
PICTORIAL SYMBOLS
• Image-related and simplified pictures.
Fig 8.2 Example of pictorial symbols
ABSTRACT SYMBOLS
• Abstract symbols can look like the objects that they represent but have
less details.
Fig 8.3 Example of abstract symbols
ARBITRARY SYMBOLS 任意的符号
• Arbitrary symbols have no resemblance 不相似 at all to the
objects or the ideas they represent.
• The symbol is invented with the meaning constructed.
Many are based on geometric shapes and colours.
• We have to learn arbitrary symbols.
Fig 8.4 Examples of arbitrary symbols
9. 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.
• Choosing the right words to pair with the imagery is of high importance as
it would deepen the meaning of the design. Suitable typeface and
strategic positioning of the type will result in visual
hierarchy and balance in a work of design.
• Typography is the design and arrangement of text to convey a message or
concept.
Fig 9.1 Examples of book cover with typography
1. UNSDG goal
The United Nations created 17 world development goals called the Sustainable
Development Goals (SDGs) in 2015. These goals aim to address various social,
economic, and environmental challenges faced by the world, with a target to
achieve them by 2030. They provide a framework for countries, organizations,
and individuals to work together towards a more sustainable and equitable
future for all.
Fig 10.1 UNGDG goals
I chose Goal 7: Affordable and Clean Energy
This goal aims to ensure access to affordable, reliable, sustainable and
modern energy for all. This involves promoting renewable energy sources,
improving energy efficiency, and expanding energy infrastructure to support
economic development and environmental sustainability.
Clean energy works by producing power without having negative environmental impacts, such as the release of greenhouse gases like carbon dioxide.
Clean energy works by producing power without having negative environmental impacts, such as the release of greenhouse gases like carbon dioxide.
Example of Clean Energy:
1. Solar energy: Generated from sunlight using photovoltaic cells or
solar thermal systems.
2. Wind energy: Captured from the wind using turbines to generate
electricity.
Fig 10.2 Wind energy and solar energy
3. Hydroelectric power: Generated by harnessing the energy of flowing
water in dams or rivers.
Fig 10.3 Hydroelectric power
4. Geothermal energy: Extracted from heat stored beneath the Earth's
surface to generate electricity or for heating purposes.
Fig 10.4 Geothermal energy
5. Biomass energy: Produced from organic materials such as wood,
agricultural residues, and municipal solid waste through processes like
combustion, anaerobic digestion, or gasification.
6. Tidal energy 潮汐能: Captured from the kinetic energy of
tides using underwater turbines.
Fig 10.5 Tidal energy
7. Wave energy: Harvested from the motion of ocean waves to generate
electricity.
2. Chosen artwork
Title of artwork: Don't Be a Dirty Player
Artist's name: Wu Li (李悟)
Date: 15/1/2023
Medium: Digital Art
Why I chose this design in relation to the UNSDG goal:
I chose Wu Li's "Don't Be a Dirty Player" poster because it effectively
aligns with UNSDG Goal 7: Affordable and Clean Energy. He uses a chessboard
to represent the power between non-renewable energy like nuclear power
towers, fossil fuel oil pumps and a lonely nature plant. This highlighted
the urgent need to transform traditional energy into sustainable energy to
protect the environment. Besides that, the poster also advocates reducing
pollution using the image of huge smoke billowing from the factories and
chimneys, showing that air pollution is also an issue nowadays. In
conclusion, Li's artwork serves as a compelling call to action,
advocating for comprehensive efforts to achieve sustainable energy practices
and reduce pollution for a healthier planet.
(118 words)
Design principles in this design:
1. Symmetrical Balance
2. Repetition
The repetition of factories on the chessboard creates rhythm and pattern
within the work, lead the viewer's focus from bottom left to right.
3. Harmony
The overall colour tone of the poster is grey and uses a little bit of green
and orange to embellish the plant, making the picture look harmonious.
The contrast between the size of the factories and the little plant creates
dramatic results and visual interest.
Feedback:
Specific Feedback: Honestly, I forgot what Dr Charles said to me.😳but what I do remember is that he mentioned my effective use of drawing lines on the poster to explain design principles.
Reflection:
This task has allowed us to learn about the principles of design, so that we can better apply them in future designs and create better works. From this task, I've learned how to explain what aspects of a piece are worth learning from and referencing.
Comments
Post a Comment