Labels

Design Principles /Task 1: Exploration

Start from 6.2.2024

6.2.2024 -20.2.2024 /Week 1- Week 3
Kong Cai Yi / 0363862 
Design Principles / Bachelor of Design (Hons) in Creative Media 
Task 1: Exploration



INDEX

1. Lectures:
2. Task 1/Exploration
3. Feedback
4. Reflections
5. Further Reading

LECTURES

Introduction: Elements & Principles of Design
  • Visual communication is about utilising design to convey purposeful messages to a target audience. As such, the design must be well thought-out and executed. To achieve effective communication through design, it is important to learn about and apply the elements and principles of design.
ELEMENTS OF DESIGN : Individual "building blocks".

1. Point
  • A point or dot is the simplest element of design, used as repetitive mark forms a line. 
  • As the point moves in space, other two- and three-dimensional figures and forms are created.
2. Line
  • Lines can be active or static, aggressive or passive, sensual or mechanical.
3. Shape
Two general category of shapes - geometric (circles, squares, triangles) & organic (Irregular).

Fig1.1 Geometric (8.2.2024-Week 1) 391 × 280
Fig 1.2 Organic (8.2.2024-Week 1) https://pin.it/5P2Et1ECZ

4. Form
  • A three-dimensional area is called a form. When form encloses space, the space is called volume.
Fig 1.3 Example of form (8.2.2024-Week 1) https://pin.it/dlo6AaoEo
  • With two-dimensional media, such as painting, illustration or drawing, form must be implied.
Fig 1.4 Two-dimensional form  (8.2.2024-Week 1) https://pin.it/5uIm17ZI1

5. Texture: 
  • All surfaces have textures that can be experienced by touching or through visual suggestion.
  • Two categories of texture - actual (experienced by touch) & simulated or implied (created to look like the real texture).
Fig 1.5 Actual texture (8.2.2024-Week 1) https://pin.it/6HN4Kopi8

Fig 1.6 Simulated texture  (8.2.2024-Week 1)https://pin.it/1g788ISWm

6. Space
  • Space is the indefinable, general receptacle of all things - the seemingly empty space around us.
  • The actual space of each picture's surface is defined by its edges - the two dimensions of height and width. 
  • From the outside, we experience mass. 
  • From the inside, we experience volume.
Fig 1.7 Mass space  (8.2.2024-Week 1)https://pin.it/5isupGYve

Fig 1.8 Volume space  (8.2.2024-Week 1) https://pin.it/SVV49BbfL
  • 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 space).
  • This can be achieved by overlapping of images, the variation of sizes, placement and perspective.

7. Colour
  • Each of the millions of colours human beings can distinguish is identifiable in terms of just three variables: 
  1. Hue: Colours of the spectrum, e.g. yellow and green.
  2. Value: This refers to the lightness or darkness from white through greys to black.
  3. Intensity: Also called saturation or chroma, it refers to the purity of a hue. A pure hue is the most intense form of a given colour, it is the hue in its highest saturation, in its brightest form.
Fig 1.9 Purity of hue, saturation and brightness (8.2.2024-Week 1) 736 × 568
  • Colour groupings that provide distinct colour harmonies are called colour schemes.
  1. Monochromatic colour schemes: based on variations in the value and intensity of a single hue.(Example: Blue with different shade)
  2. Analogous colour schemes: based on colours adjacent to one another on the colour wheel, each containing the same pure hue. (Example: Red-Orange)
  3. Complementary colour schemes: emphasise two hues directly opposite each other on the colour wheel. (Example: Yellow & Purple, Red & Green)

  • PRINCIPLES OF DESIGN : Organisational fundamentals that resulted from or guides the arrangement of the elements.
  1. Contrast 
  2. Balance 
  3. Emphasis 
  4. Rules of Third 
  5. Repetition/Pattern/Rhythm 
  6. Movement 
  7. Hierarchy 
  8. Alignment 
  9. Harmony 
  10. Unity 
  11. Proportion

Example : Line (Elements of design) to Pattern (Principles of design)
Fig  1.10 Example 1  (8.2.2024-Week 1) 758 × 789

Topic 1: Contrast & Gestalt Theory
  • Contrast is the juxtaposition of strongly dissimilar elements.
  • Contrast can provide visual interest, emphasise a point and express content.

Fig 2.1 Contrast in colour  (9.2.2024-Week 1) https://pin.it/7LQzK4Ymv

Fig 2.2 Contrast in shape (9.2.2024-Week 1) https://pin.it/5yWIC6Z2S


GESTALT THEORY
  • "Gestalt" refers to "shape" or "form" in German.
  • Gestalt principles or laws are rules that describe how the human eye perceives visual elements.
  • These principles aim to show how complex scenes can be reduced to more simple shapes.

1. Principle of Similarity
  • The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
Fig 2.3 Use Lips shape to present New York City (9.2.2024-Week 1) https://pin.it/1VMygdxKy

2.Principle of Continuation
  • 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.5
Fig 2.4 Read from Botton to top (staircase) (9.2.2024-Week 1)

3.Principle of Closure
  • 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 2.5 Example for principle of Closure(9.2.2024-Week 1) https://pin.it/bOG3gA3WP

4.Principle of Proximity
  • The process of ensuring related design elements are placed together. 
  • 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.6 Different information are grouped together where they belong each other (9.2.2024-Week 1)


4.Principle of Figure/Ground
  • 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 2.7 Two images in 1 design (Trees + Elephant) (9.2.2024-Week 1) https://pin.it/60rbloXrv


5. 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.
Fig 2.8 Symmetrical of each same figure (9.2.2024-Week 1) https://pin.it/6inJHTNH2

Fig 2.9 Symmetrical-Equally distributed the words and shape (9.2.2024-Week 1)https://pin.it/olcISnQNE


Topic 2: Balance & Emphasis

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.
Symmetrical Balance
  • Has equal "weight" on equal sides of a centrally placed fulcrum.
  • Arranging elements equally around a central point results in radial balance.
Fig 3.0 Symmetrical Balance (10.2.2024-Week 1) https://pin.it/1N1Xp7HfZ

Asymmetrical Balance
  • Approximate symmetry 
  • Unequal visual weight on each side of the composition.
  • 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.
Fig 3.1 Left bottom image is balanced by left and right typeface (10.2.2024-Week 1) https://pin.it/70mzTB2rh

THE GOLDEN RATIO
  • Golden Ratio can be used to bring harmony, balance and structure to one's work. It can also increase the appeal of a design work.
Fig 3.2 Fibonacci sequences in nature (10.2.2024-Week 1) https://pin.it/2yA12yrZs

RULE OF THIRDS
  • It is a composition guideline to create more dynamism to a work of design/photography/film/painting.
  • An image is divided evenly into thirds, both horizontally and vertically, and the subject of the image is placed at the intersection of those dividing lines, or along one of the lines itself.
Fig 3.3 Rule of thirds (10.2.2024-Week 1) https://pin.it/271fiae6b

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 3.4 Emphasis given to different colour of umbrella (10.2.2024-Week 1) https://pin.it/2m5UEgu1M

Topic 3: Repetition & Movement

REPETITION
Pattern & Rhythm
  • Repetition could make a work of design seem active.
  • 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.
Fig 4.2 Repetition form Pattern (12.2.2024-Week 2) https://pin.it/2hgkZr2lB

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.3 Line moving towards to the middle circle (12.2.2024-Week 2) https://pin.it/5l0kmX0w2

Fig 4.4 Typeface make movement (12.2.2024-Week 2) https://pin.it/630b51tgU

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 4.5 Lead readers read from left bottom (12.2.2024-Week 2) https://pin.it/1kv0Ljv24

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.
Fig 4.9 Alignment that have movement ,Order in chaos  (12.2.2024-Week 2) https://pin.it/3i0TI9SVH


Topic 4: 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 5.0 Balance arrangement of furniture + Matching variations of khaki (15.2.2024-Week 2) https://pin.it/4OsQ3vRtP

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. 
The bright circle in the middle + black borders close in on the darker brown circle= reaching to the centre point. Analogous colour applied
Fig 5.1 The elements group together to bring our attention to one details (15.2.2024-Week 2)

Fig 5.2 Principle of unity (15.2.2024-Week 2) https://pin.it/hNj8NGLcX

SCALE
  • 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. 
  • 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:
1. Actual measurement 
Fig 5.3 Actual measurement (15.2.2024-Week 2) 461 × 350

2. Visual estimates based on comparison
Fig 5.4 Bigger than life size (15.2.2024-Week 2) https://pin.it/2HQAARnWb

PROPORTION
  • Proportion refers to the size of the parts of an object in relationship to other parts of the same object. 
  • 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. 

Fig 5.5 Cone angle is closer to the audience, make a shape of ice cream with the cloud (15.2.2024-Week 2) https://pin.it/7ia6WRe8W


Topic 5: Symbol, Word & Image

SYMBOL
  • A sign, shape, or object that is used to represent something else. 
  • In design, symbols can provide or convey information, equivalent to one or more sentences of text, or even a whole story.
Fig 6.0 Category of symbols (17.2.2024-Week 2)


1. Pictorial symbols: Image-related and simplified pictures.


Fig 6.1 Example of pictorial symbols (17.2.2024-Week 2) https://pin.it/2cAEMCxNZ

2. Abstract symbols: Look like the objects that they represent but have less details.


Fig 6.2 Example of abstract symbols logo (17.2.2024-Week 2) 2,880 × 1,800


3. 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.

Fig 6.3 Example of arbitrary symbols  (17.2.2024-Week 2) 2,000 × 800


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. 
  • 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 6.5 Example of word and image (17.2.2024-Week 2)


Topic 6: Visual Analysis

VISUAL ANALYSIS
  • Is a method of understanding design that focuses on the visual elements and principles.
  • In its strictest definition - a description and explanation of visual structure for its own sake.
  • Visual analysis is a critical part of visual literacy, a skill that helps people read and critically interpret images, whether in a museum, on social media, in entertainment, advertising, or the news.
HOW DOES VISUAL ANALYSIS WORK?
  • Phase 1: Observation
  • Phase 2: Analysis
  • Phase 3: Interpretation
PHASE 1: OBSERVATION
  • Observation means closely looking at and identifying the visual elements of a design, trying to describe them carefully and accurately in your own words. Do not read beforehand about the design at all.
  • The observation phase is about looking, thinking, and finding good language to communicate what you notice.
PHASE 2: ANALYSIS
  • Analysis requires you to think about your observations and try to make statements about the work based on the evidence of your observations.
  • Think about how the specific visual elements that you’ve identified combine to create design principles that complete that work of design/art, and the effects on the viewer.
  • How are your eyes led through the work and why? Apply the design principles knowledge you have learnt.
PHASE 3: INTERPRETATION
  • In this final phase, your observations, description, and analysis of the work are fused with facts about the design work (and in some cases the designer) and historical context that you find in trustworthy published sources.
  • What is the meaning of the design? What was the purpose for it to be created?

INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/12j3QQUC6lhqv6BsidoBj2MNpbpZSsHTI/preview" width="640" height="480" allow="autoplay"></iframe>

Week 2/ Task 1: Exploration
Instructions:
  1. Pick and briefly describe one goal from the United Nations’ Sustainable Development Goals (UNSDG).
  2. 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.
  3. 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.

Chosen SDG Goal: 
12 Responsible Consumption and Production
  • Advocates for sustainable consumption and production patterns worldwide. It emphasizes resource efficiency, waste reduction, sustainable procurement, and awareness-raising efforts. By promoting responsible consumption habits and sustainable production practices, the goal aims to decouple economic growth from environmental degradation. 
  • Recognizes the importance of minimizing waste generation, maximizing resource efficiency, and ensuring equitable access to resources for all.
  • Achieving this goal requires collaboration among governments, businesses, civil society, and individuals to promote sustainable lifestyles and mitigate the negative impacts of unsustainable consumption and production patterns on the environment and future generations.
2. Chosen Artwork: 
Title: Half Rabbit
Creator: Bordalo II
Date Created: 2017
Location Created: Vila Nova de Gaia, Portugal
Medium: Mixed Media
Source link: https://streetartnews.net/2017/06/half-rabbit-by-bordalo-ii-in-vila-nova-de-gaia-portugal.html

Half Rabbit by Bordalo II

Fig 7.0  Half Rabbit by Bordalo II (17.2.2024-Week 2)
Fig 7.0  Half Rabbit by Bordalo II- closer (17.2.2024-Week 2)

Design Principles:
1. Contrast
2. Balance
3. Unity

3. Explanation:
I chose Bordalo II's "Half Rabbit" artwork for its powerful representation of Sustainable Development Goal (SDG) 12, "Responsible Consumption and Production". Made from waste materials, this sculpture is a powerful representation of the need for waste reduction and sustainable resource management. 
Furthermore, "Half Rabbit" demonstrates important design elements including contrast, movement, and balance.  He artwork juxtaposes the organic form of a rabbit with industrial materials, creating a striking contrast between nature and urban waste. This artwork also achieves balance through proportional arrangements and visual weight distribution, juxtaposing organic forms with industrial materials to convey a message of sustainability. Despite being composed of various found objects and scrap materials, the sculpture achieves a unified appearance, where each component contributes to the overall depiction of the rabbit.


FEEDBACK

Feedback from Mr Zeon

WEEK 2:
General Feedback: Make sure the artwork are able to analysis during the stage of task 2.
Specific Feedback: Emphasis can't be found, try to find more other design principles in the artwork.
WEEK 3:
General Feedback: Find other photos reference for lecture recap, make every figure are different from lecture note.
Specific Feedback: No need explanation for chosen design principles, only write it on Task 2. 

REFLECTIONS

Experience
During the process of selecting artwork related to my chosen SDG goals, I initially felt overwhelmed by the requirement for at least three design principles. This led me to conduct extensive observation and analysis before finalizing my choice. Initially, I focused on understanding all SDG meanings and then gravitated towards the one that resonated with me the most. However, I found myself continuously changing my SDG topic due to the abundance of captivating artwork related to various SDGs. Ultimately, my priority became choosing artwork that held personal meaning and resonance, while also endeavoring to relate it to both SDG goals and design principles. Furthermore, I initially believed that the artwork I selected had to directly relate to my final project, establishing a strong connection between the two. This belief led me to thoroughly evaluate the implications and relevance of my chosen artwork, ensuring it aligned seamlessly with my project's objectives. However, upon further consideration, Mr Zeon told me that there was no strict requirement for the artwork to be related, allowing for greater flexibility in my selection process.
Observations 
When exploring artwork related to SDGs, I've encountered many pieces with profound meanings, often conveyed through subtle nuances. Analyzing their design principles adds an intriguing challenge. Vibrant colors, like blue oceans against grey backgrounds, often serve to emphasize messages and captivate viewers. Additionally, contemporary artists utilize technology, such as computer graphics or AI, to amplify their impact. However, amidst these innovations, I've chosen a wall artwork for its raw authenticity and tangible connection to reality.

Findings
Through this task, we've delved into a wealth of meaningful artwork, uncovering their design principles and learning how they communicate messages to audiences. This opportunity has expanded our understanding of SDG goals, highlighting the significance of aligning artwork with specific topics and meanings to create impactful pieces that inspire others. Additionally, we've discovered that every artwork possesses its unique topic and underlying message, emphasizing the importance of intentionality and depth in artistic expression. Moreover, we've come to appreciate the diversity of approaches artists employ, from vibrant colors to advanced technology, to convey their messages effectively. This exploration has broadened our horizons and deepened our appreciation for the power of art in sparking conversation and driving change.

FURTHER READING

A guide to the Golden Ratio for designers

How to use golden ratio in design

1. Typography and defining hierarchy
  • The Golden Ratio can help you figure out what size font you should use for headers and body copy on a website, landing page, blog post, or even print campaign.
  • Body copy is 12px. If you multiply 12 by 1.618, you’ll get 19.416, meaning a header text size of 19px or 20px would follow the Golden Ratio and balance the 12px body font size.
Fig 8.0 The Golden Ratio Headline (22.02.2024-Week 3)

2. Cropping and resizing images
  • Use the Golden Spiral as a guide for the image’s composition to make sure the image is still balanced after you resize it
  • If you overlay the Golden Spiral on an image, you can make sure that the focal point is in the middle of the spiral.
Fig 8.1 Crop and resize using golden spiral(22.02.2024-Week 3)

3. Layout
  • Leveraging the Golden Ratio can help you design a visually appealing UI that draws the user’s attention to what matters the most. For example, a page that highlights a wide block of content on the left with a narrower column on the right can follow the Golden Ratio’s proportions and help you decide where to put the most important content.
Fig 8.1 Golden ration proportions layout (22.02.2024-Week 3)



4. Logo development
Turn to the Golden Ratio to help you sketch out the proportions and shapes.

Fig 8.1 Logo sketch (22.02.2024-Week 3)


Tools to help you use the Golden Ratio
  • Golden Ratio Calculator: Calculate the shorter side, longer side, and combined length of the two sides to figure out the Golden Ratio.
  • goldenRATIO: Created for designers and developers, this app gives you an easy way to design websites, interfaces, layouts, and more according to the Golden Ratio. It includes a built-in calculator with visual feedback and features to store screen position and settings, so you don’t have to rearrange the Golden Ratio for every task.
  • Golden Ratio Typography Calculator: Discover the perfect typography for your website by entering your font size and width. You can optimize based on font size, line height, width, and characters per line.
  • PhiMatrix: This Golden Ratio design and analysis software comes customizable grids and templates that you can overlay on any image. It can be used for design and composition, product design, logo development, and more.
  • Golden Ratio Sketch resource: Download a free Sketch file of the Golden Spiral to help with image and layout composition.


What is Visual Hierarchy?
  • Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically and strategically, designers influence users’ perceptions and guide them to desired actions.
Fig 8.2 Visual Hierarchy (22.02.2024-Week 3)
Visual Hierarchy Principles:
  • Size – Users notice larger elements more easily.
  • Color – Bright colors typically attract more attention than muted ones.
  • Contrast – Dramatically contrasted colors are more eye-catching.
  • Alignment – Out-of-alignment elements stand out over aligned ones.
  • Repetition – Repeating styles can suggest content is related.
  • Proximity – Closely placed elements seem related.
  • Whitespace – More space around elements draws the eye towards them.
  • Texture and Style – Richer textures stand out over flat ones.

How to Craft a Strong Visual Hierarchy?
  • When encountering an interface, users react extremely fast (in milliseconds), developing gut feelings about whether to stay or leave.
  • Users’ eyes follow predictable reading paths, which are culturally influenced. Left-to-right-reading Western users use an F- and a Z-pattern. So, you can design a hierarchy either to:

Fig 8.3 F & Z Pattern (22.02.2024-Week 3)

  • Reinforce these natural patterns and lead users along a cleverly constructed path to a desired goal; or Break these patterns to highlight a focal point for users.
  • Users prefer recognition over recall – hence why it’s essential they can scan instead of having to work at reading and remembering things.



Labels:

Comments

Post a Comment

Popular Posts