Labels

Design Principles Task 1 / Exercises

28.3.2022 - 2.5.2022 (Week 1 - Week 6)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Design Principles
Task 1 / Exercises

INSTRUCTION

Week 1 - precondition

The content of this lectures was mainly an explanation of the curriculum structure for this module. And lecturers told to set up a blog called "e-Portfolio". This blog will be used to accumulate the learning process of all modules, and it will be utilized submit assignments including image data of my work, drawings, photos, designs etc.


Week 1 - Week 2 Exercise 1 (2 designs in total):
Create 1 design of Gestalt theory and 1 design of Contrast.

1. Research of "Contrast"

  1. Contrast is the juxtaposition of strongly dissimilar elements
  2. Without contrast, visual experience would be monotonous
  3. Contrast can provide visual interest, emphasize a point and express content

Fig.1: Sample of contrast by lightness

Lightness often indicates contrast. The photograph shows very strong contrast owing to backlit. The light source (the sun) and the dark object (the tree) are simultaneously within the angle.

Fig.2: Sample of contrast by color
https://www.photo-ac.com/main/detail/23064917?title=%E5%8B%9D%E5%B0%BE%E5%AF%BA%E3%80%80%E5%B1%B1%E9%96%80

Contrast is also indicated by color. The green background contrasts with the red buildings because those colors are placed opposite on the hue circle.

My idea exploration and description

The most appropriate way to describe "Contrast" is through photography in my opinion. I have a stock of photos I have took in the past, and I chose 3 photos (Pasta, Eagle, Night cityscape) and experimented whether it could be changed more attractive with only editing by Photoshop and Illustrator.

Fig.3: Adjustment Levels

The first step was to adjust the overall contrast by brightness. I removed the areas with no color (no bar graph in Fig.3) and adjusted the averaged coloration. This makes darker areas darker and even brighter areas brighter.

Fig.4: Adjustment Color Balance

This is an additional adjustment for this task, but warm colors have an appetite stimulating effect for foodstuff. I add red or yellow depending on the type of food. This time, red was added.

Photo 1: "Pasta" Original version of my photograph


Photo 1: "Pasta" Edited Ver.1

The original photo was taken at home, the lighting was poor and the color was grayish. So I adjusted the contrast strongly to clear the light and dark areas. And since it is food, I added a little redness. I suppose it has become a little more attractive compared to the originals.

Photo 1: "Pasta" Edited Ver.2

Prof's idea in the second week of class, I got the idea of processing the background.　The white plates and dark background create further contrast. I tried to place jet black, but discovered that a slightly bluish black looks more delicious. This was inspired by the fact that navy blue is often used for traditional pottery, like "bone china" for example.


Fig.5: Added Outer Glow

Simply cropping the photo is a mismatch with the monochromatic background. I added outer glow for this case.

Photo 2: "Eagle" Original version of my photograph

This is a picture from my previous travel to Langkawi and it looks a bit cloudy. Firstly I adjust the contrast as the main purpose of the assignment same as aforementioned editing in "pasta".

Fig.6: Added New layer

It didn't look very appealing on its own, so I experimented with adding another layer of color.

Photo 2: "Eagle" Edited Ver.

I was conscious of the gradation from blue to orange in the sky at sunset.

Photo 3: "Night cityscape" Original version of my photograph

Photo 3: "Night cityscape" Edited Ver.

The nightscape in urban area offers a vivid contrast between light and dark. However, the sky still seemed too bright with only adjustment the levels, so I painted there by Burn Tool in Photoshop.

Final Composition

Based on the photographs above, I challenged to create visually design-oriented works.

Photo 1: "Pasta"

Photo 2: "Eagle"

Photo 3: "Night cityscape" Final Outcome

Final Outcome

After receiving feedback after all assignments were completed, we revised Photo 3, which was selected as Final Outcome. Adjustments were made to make the contrast stronger.

"Night cityscape" Final Outcome (10/5/2022 After Feedback)

Final Outcome PDF

2. Research of "Gestalt theory"

The human brain is wired to see patterns, logic, structure. "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. They also aim to explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

Gestalt fits to the following 6 rules

  1. Similarity - Using the same motifs repeatedly throughout in the design. The motifs used should be very specific and provide an instant understanding of the meaning of the design
  2. Continuation - Using the same motifs or geometrical pattern repeatedly throughout in the design. It brings harmony to the overall design
  3. Closure - Classifying elements and place them in close proximity, ex.) Impressionism (Strokes are rough, but collectively the shape is observable)
  4. Proximity - To place categorized elements close to each other, and also to place them adjacent to or apart from each other by group
  5. Figure / Ground - Background or silhouette, or both, showing a concrete form
  6. Symmetry & Order - Symmetry with respect to a line or point, providing regularity to aid in understanding

Fig.7: Sample of Closure / Symmetry & Order
https://www.etsy.com/

One of the rules of Gestalt, "closure" is to lay out elements with the same attributes in close proximity so that they are easy to understand. Fig.7 above shows that circularly cropped elements (By Category) in the middle row while squarely cropped elements (By Product) line up horizontally at the lower.

Fig.8: Sample of Figure / Ground
https://www.breathcompany.co.jp/output/2012/08/272.html

Here is an interesting sample which illustrates dolphins or naked humans. However, for pure children, they can only recognize it as a silhouette of a dolphin. Gestalt perception may be influenced by the observer's knowledge and experience.

My idea exploration and description

When a gestalt is shown, several elements with different elements are required. Inevitably, it is not a stand-alone piece, but an infographic that combines various elements that would be best suited. 

1. Determination of design concept

Firstly, I summarized the information to be designed. The subject matter could have been anything, but since I am studying in Malaysia, I will try to make comparative data with my country. I produce a graphic design work using infographics regarding the population ratio in Japan and Malaysia.

Reference list

2. Wireframing

After the numerical data collection was complete, next wireframing. I decided where to put the information and drew a rough sketch. (Some parts have changed on the final outcome)

Fig.9: Rough Sketch for design

3. Designing Final data on Illustrator

I created several icons (pictograms) and arranged them to fit the purpose of the assignment "Gestalt".

"Gestalt" Final Outcome

Final Outcome PDF

Week 3 - Week 4 Exercise 2 (2 designs in total):
Choose TWO principles from Emphasis / Balance / Repetition / Movement. Create 1 design for each chosen principle.

1. Research of "Balance"

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

Fig.10: Example of Balance
©2022 20th Century Studios

This is the example has equal "weight" on equal sides of a centrally placed fulcrum. The following rules can be used to create a balance design.
  1. The equal arrangement of elements on either side of the central axis (horizontal or vertical) resulting in bilateral balance
  2. Arranging elements equally around a central point results in radial balance
  3. Approximate symmetry is when equivalent but not identical forms are arranged around the fulcrum line

Rule of Thirds

Fig.1-5: Rule of Thirds

The Rule of Thirds is the process of dividing an image into thirds, using two horizontal and two vertical lines. This imaginary grid yields nine parts with four intersection points. The most important elements of your image at these intersection points, you produce a much more natural image.

Fig.11: Points that attract the eyes and their weights
https://adashu89.wordpress.com/2013/10/22/the-rule-of-thirds/

The rule of thirds is a best guide to help designer to understand how to make the image looks comfortable when people viewing an design work at first time. From top to bottom, left to right, most designer just set all the important element on the left or right side.

Golden Ratio

The Golden Ratio is a mathematical ratio. It is commonly found in nature, and when used in a design, it fosters organic and natural-looking compositions that are aesthetically pleasing to the eye.

Fig.12: Golden Ratio (1:1.618)

Similar golden spirals are found in various parts of nature, such as nautilus shells, sunflower seeds, and cloud vortexes in typhoons, and are known as a formative beauty created by nature.

Fig.13: Sample of designs using Golden Ratio

2. Research of "Emphasis (and Dominance)"

Emphasis is used to create dominance and focus in a design work.

  • Various elements can be used to create emphasis, such as color, shapes or value, to achieve dominance.

Fig.14: The Persistence of Memory
Salvador Dalí, 1931

Emphasis is often expressed by organic shapes (curves).

3. Research of "Repetition (Pattern and Rhythm)"

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.15: Songket (Malaysian traditional fabric)
Songket＆sutera asli: https://www.go-malaysia.info/shopping/sh-daily-life/songket-sutera-asli

This is a general design theory used very often in crafts and fine arts. This will assist in assembling the template.

4. Research of "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.16: 富嶽三十六景 神奈川沖浪裏
Hokusai Katsushika 葛飾北斎

The moving design, which looks as if the video has been stopped, well expresses a sense of dynamism.

My idea exploration and description

I choose "Balance" and "Movement".

Regarding "Balance", I challenge to create a graphic design utilizing the golden ratio. Theme is a flyer for a restaurant advertisement. Photographs will be from stock photos, and I prepare information about a fictitious restaurant to create the flyer, copywriting as well.

The Golden Ratio is a mathematical ratio. It is commonly found in nature, and when used in a design, it fosters organic and natural-looking compositions (suitable to use a food design) that are aesthetically pleasing to the eye.

Layout of design "Balance"

Fig.14: Layout 1

Fig.15: Layout 2

Both of the layouts above are based on the golden ratio. This is tentative and is variable depending on other factors such as the color and shape of the photo.

Fig.16: Using Golden Ratio

Fig.17: Photo Editing

I decided on a bakery & cafe as my theme and collected photographs for the flyer. Despite the fact that the food looked vibrant on the photo, when I cropped it out the whole thing seemed darker. The brightness of the photos were adjusted as in Exercise 1.




Fig.18: Layout 1 Edited Ver. (After Feedback 11/4/2022)

First, in the layout composition stage, it is advisable to put a "CROSS MARK" on the frame where the photo is to be placed. In addition, the frame that was supposed to contain the interior photo was removed based on the advice because it would clutter the screen. We design students should pursue the beauty of the margins and Balance. With the removal of the photo, the position of the text frame containing the store information was adjusted.

Fig.19: Layout 1 Designed Ver1. (15/4/2022)

There are still issues with typography. The design is not informative and has an amateurish appearance. It will be needed to redesign after receiving next feedback.

Fig.20: Layout 1 Designed Ver2. (After Feedback 18/4/2022)

Changed as per feedback below.
  • Move and change the yogurt image to something a little more appetizing.
  • Move the logo to the bottom, reduce the size, and align the logo with the information

Graphic Design: "Balance" Final Outcome

Various parts have been changed from Fig.20.
  • Yogurt changed to a more vividly colored tart photo
  • Add steam effect on the coffee
  • Change typography - White edges for high visibility, Adjust text size with "Contrast" (font size jumps percentage), "with" occupies extra space so the design was merged
  • Put white edges for high visibility to Logo
  • Remove the dark brown line at the bottom

Final Outcome PDF

Illustration of "Movement"

Regarding ”Movement”, based on the fluid impression, I decided to create a design incorporating water motifs. So I chose a "fish illustration" as my theme. In my country, painting fish is a traditional cultural practice related to location surrounded by sea. Fish paintings have long been favored, sometimes as a record of fish research or as proof of the barbarity of catching a big fish out of rough seas.

Fig.20: Example of Traditional Fish Paintings 
https://fishing.nanj-antenna.net/13813/

However, it is not feeling much "Movement" from the illustration by the traditional production method. My goal is to create a new design that incorporates the movement of a living fish with the pop of a digital illustration.

Fig.21: Rough Sketch for design

Fig.22: Tracing

The impression of the fish illustration looks pretty poor. It will be needed to redesign after receiving next feedback.

Fig.23: Illustration of "Movement" (After Feedback 18/4/2022)

In the main, received instruction on composition. In particular, I learned how to place fish and create a sense of dynamism with regard to the depiction of movement.

Hand-drawing illustration techniques were also advised (details are in feedback section below), but this time, I decided to continue in the direction of creating a digital illustration after much deliberation.

Illustration of "Movement" Final Outcome

The flat design illustration was created by removing lines that would have created a cheap looking. Using a slight gradation, the objects were arranged to create a three-dimensional effect.

Illustration of "Movement" Final Outcome (10/5/2022 After Feedback)

Based on the final feedback, I made some improvements to the design to more effectively showcase the main objective of this assignment, "to express the given design technique.

Final Outcome PDF

Week 5 - Week 6 Exercise 3 (2 designs in total):
Choose TWO principles from Harmony / Unity / Symbol / Word and Image. Create 1 design for each chosen principle.

1. Research of "Harmony"

  1. Harmony involves the selection of elements that share a common trait.
  2. Harmony becomes monotony without variety (*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.).
  3. 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.24: Example of Harmony
© atre co.ltd

Not only the harmony of the colors (pink as the main color and light blue as an accent), but also the shape of the decoration shows the unity of the whole. This is an example of Harmony and it also applies to Unity below.

2. Research of "Unity"

  1. Unity refers to the repetition of particular elements throughout your design - whether they're colors, shapes or materials - to pull the look together.
  2. Unity occurs when these elements are composed in such a way that they are balanced and give a sense of oneness, creating a theme.
  3. Although unity and harmony may sound similar, they each play distinct roles in the way we experience design.

Fig.25: Example of Unity
© LEAD BRAIN

This is a design series for a company. The colors, shapes, illustration style, and layout of information are consistent.

SCALE and PROPORTION

Scale and Proportion are the elements that will be important in creating a design like the harmony and unity described above.
  • 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;
  • Actual measurement
  • Visual estimates based on comparison
Architectural drawings and scale models are examples of the applied use of scale. 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.26: Example of Scale
DALLASNEWS.COM

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.
  • 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.27: Example of Proportion
VOGUE

3. Research of "Symbol"

It is widely used from hieroglyphs in wall paintings in ancient times to corporate logos (for commercial use) in the present.
  1. A sign, shape, or object that is used to represent something else (Cambridge Dictionary, 2020).
  2. 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.28: Classification of Symbols

Pictorial symbols - Image-related, simplified pictures

Fig.29: Flat design illustration

Abstract symbols - Look like the objects that they represent but have less details

Fig.30: Pictogram

Arbitrary symbols - No resemblance at all to the objects or the ideas they represent, invented with the meaning constructed and many are based on geometric shapes and colors

Fig.31:Logos (US)

As a designer, we students need to know more especially about arbitrary symbols.

4. Research of "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.

Fig.32: Example of "Word and Image"
STARBUCKS

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.

My idea exploration and description

In this time, I chose "Harmony" and "Symbol". I will try "Harmony" to produce a website design (which I would like to try as a cornerstone for a future UI/UX major) that unifies colors and shapes throughout the style. Then decided to design a corporate logo for the symbol. As the feedback, these two projects will be carried out jointly.

Fig.33: Coloring 
Color Hunt

Color is very important for both harmony and logo design. I set up an original color palette for my logo design. This will later be used for website design.

1. Determination of design concept

I was advised that something related to my previous work in the press might be a good idea. I set up a fictional research/marketing firm and decided to create a website home page design. The sequence is to design a logo first, then move on to the website design.

2. Logo Design


Fig.34: Logo deformation (Left to Right)

I decided to create a logo that combines the initials T in my name and R in research. Above is images in process I have transformed from alphabet shape to logo.

Logo design Final Outcome

I am trying to make the assignment as practical as possible, consider that the delivery of a logo design for actual work requires CMYK 4-color development, single color development, regulation of font size by size, and vertical or horizontal layout (logo and text combination), black and white background.

3. WEB site Wireframing

Fig.35: Wireframe

The content of the main menu, first view, and content area will be created to fit the company concept determined in the previous section. I make it with some idea of final design.

4. WEB site Design

First, I set the guides and determined the width of the content area on the artboard.

Fig.36: First view

The first view as the face of a website, the appearance is very important. The top menu, login function, contact button and tagline are decided and designed.

Fig.37: Contents area

Designed the main services and categorized them for visual clarity.

Fig.38: Footer

It's a website that doesn't actually exist but all the pages I assumed would be needed are in place.

Web site design Final Outcome

After receiving final feedback, the First view image was changed to a more positive and easily recognizable brand image. Here is a result below.

Web site design Final Outcome (10/5/2022 After Feedback)

"Harmony" and "Symbol" Final Outcome PDF

FEEDBACK

Week 2

This week, the Professor provided me with new ideas on photo editing for "contrast" assignments. Further beauty enhancement, and it can lean on the purpose of the issue of the assignment of "contrast" by modifying the background. Then gave me advice on the structure of my blog post.

Week 3

Received some advise for Exercise 2: To put a "CROSS MARK" on the frame where the photo is to be placed. In addition, the frame that was supposed to contain the interior photo (of the cafe) was removed based on the advice because it would clutter the screen.

Week 4

Balance: The lace object is good because it represents a café. The logo should be in the lower right corner and even smaller to make the design more stylish. Design should be aligned. The information and logo are aligned. Font type is OK, but maybe there is room for improvement.

Movement: discussed the fact that in digitizing the illustrations, the appearance of the illustrations would be cheapened. Removing the contour lines as a countermeasure. Also, if I am going to do hand-drawn artwork, the name of the painting I am seeking is "Etching": reference "90 century botanical illustrations etching", good brands of technical pen: Rotring / Faber-Castell, or pen tablet can be used.

Week 5

Feedback on my visual research;

Harmony: More specific guidance on harmony rules. I have posted two examples in my visual research, one without much. Furthermore, not only color but also shape (e.g., rectangular) can indicate harmony. As for specific ideas on my subject matter, I was advised that something related to my previous work in the press might be a good idea.

Symbol: When I told them I was going to try my hand at logo design, they advised me that the project could be related to the harmony in the section above. This established a direction for me to create my fictional service description and logo and then launch the front page of the web site.

REFLECTIONS

Experiences
Through this exercise I was able to learn some basic design rules. As a job, the design is created from the finished product (what clients want to), whereas this assignment is an attempt to inspire the work from the design rules to be applied. This was a very interesting experiment for me and allowed me to choose productions from what I wanted to do, such as illustration and photography, which I could not try on the job.

Observation
Some of the design rules were similar or covered some of the content and took time to understand. And I thought I'd try my hand at a few different areas, but I feel that my digital illustration skills are particularly poor (Especially I am not satisfied with the quality of the artwork "movement"). I would like to overcome my weak areas soon.

Findings
Famous artworks or designs in the world seems to incorporate a composite of many different elements. By understanding the basics thoroughly, I would like to create more developed works.
Labels:

Comments

Post a Comment

Popular Posts