3 principle of_design

55
Balance 1. Symmetrical balance 2. Asymmetrical balance Principles of Design

Upload: attaporn-ninsuwan

Post on 04-Nov-2014

509 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 3 principle of_design

Balance1. Symmetrical balance 2. Asymmetrical

balance

Principles of Design

Page 2: 3 principle of_design

– Symmetrical balance สมดุ�ลแบบสมมาตร (2 ข้ างเท่�ากั�น ) ท่��งซ้ ายข้วาเหม�อนกั�น กัารสมดุ�ลแบบน��จะท่�าให ดุ!ม�"นคงหน�กัแน�น ย�ต$ธรรม

– Asymmetrical balance สมดุ�ลแบบอสมมาตร (2 ข้ างไม�เท่�ากั�น ) ดุ านซ้ ายและข้วาจะไม�เหม�อนกั�น แต�มองดุ!แล วเท่�ากั�นดุ วยน��าหน�กัท่างสายตา เช่�น สมดุ�ลดุ วยน��าหน�กัและข้นาดุข้องร!ปท่รง ดุ วยจ�ดุสนใจ ดุ วยจ�านวนดุ วยความแตกัต�างข้องรายละเอ�ยดุ ดุ วยค�าความเข้ ม-จางข้องส� เป*นต น

Principles of Design

Page 3: 3 principle of_design

Symmetry Balance

Page 4: 3 principle of_design

Symmetry Balance

Page 5: 3 principle of_design

Symmetry Balance

Page 6: 3 principle of_design

Asymmetrical Balance

Page 7: 3 principle of_design

Asymmetrical Balance

Page 8: 3 principle of_design

Symmetry and asymmetry work together on the home page for Ben Hulse Design. The central image is mostly symmetrical, though some asymmetry is introduced in the people looking in different directions. The asymmetry is continued with the location of the text and the colorful rectangles at the top.

Page 9: 3 principle of_design
Page 10: 3 principle of_design

Asymmetrical Balance

Page 11: 3 principle of_design

Asymmetrical Balance

Page 12: 3 principle of_design

Asymmetrical Balance

Page 13: 3 principle of_design

Asymmetrical Balance

Page 14: 3 principle of_design
Page 15: 3 principle of_design
Page 16: 3 principle of_design

Symmetry Balance VS

Asymmetrical Balance

Page 17: 3 principle of_design

Contrast ความข้�ดุแย ง • กัาร จ�ดุองค+ประกัอบให เกั$ดุความแตกัต�างเพื่�"อดุ-งดุ!ดุ

ความสนใจหร�อให เกั$ดุความสน�กั ต�"นเต น น�าสนใจ ลดุความเร�ยบ น�าเบ�"อ ให ความร! ส-กัฝื/นใจ ข้�ดุใจ แต�ช่วนมอง

Page 18: 3 principle of_design

Contrast ความข้�ดุแย ง

Page 19: 3 principle of_design

Contrast ความข้�ดุแย ง

Page 20: 3 principle of_design

Contrast with Size

Page 21: 3 principle of_design

Contrast with Color

This is just a simple 2-dimensional design using two colors

Page 22: 3 principle of_design

Contrast with Texture

Hands with water texture can be easily distinguished from the textured grains of water background.

Page 23: 3 principle of_design

Contrast with Position

The layout of the brochure below is a simple example of how the title is very interesting because it's located in a different position to other content.

Page 24: 3 principle of_design

Contrast with Shape

The layout of the brochure below is a simple example of how the title is very interesting because it's located in a different position to other content.

Page 25: 3 principle of_design

Contrast with Movement

Just need a few seconds for anyone to be able to understand the message and visual identity that protrudes from the logo 'Killed Productions' below. The letter 'i' which has the same shape and color with other letters still attract attention due to the different movement directions.

Page 26: 3 principle of_design

Emphasis (Dominance) กัารเน นให เกั$ดุจ�ดุเดุ�น

Page 27: 3 principle of_design
Page 28: 3 principle of_design

Point

Page 29: 3 principle of_design

Line

Page 30: 3 principle of_design

Form

Page 31: 3 principle of_design

http://www.digital-web.com/articles/principles_and_elements_of_design/

Page 32: 3 principle of_design

กัารสร างจ�ดุเดุ�น เน นจ�ดุส�าค�ญ ม� 3 ส�วน

1 .วางต�าแหน�งจ�ดุสนใจในงาน (Focus Point) : ใช่ กัฎ 3 ส�วน (Rule of Third)

2. กัารสร างความแตกัต�างในงาน (Contrast) :3. กัารวางแยกัองค+ประกัอบให โดุดุเดุ�น (Isolation)

Page 33: 3 principle of_design

Unity เอกัภาพื่ • คื�อ คืวามเป็นอ�นหน��งอ�นเดี�ยวกั�น เป็นกัลุ่��มเป็น

กั�อน โดียที่��องคื�ป็ระกัอบภายในต้�องกัลุ่มกัลุ่�นกั�น

คืวามใกัลุ่�ชิ#ดีขององคื�ป็ระกัอบ (Proximity)

Page 34: 3 principle of_design

• The objects on the logo above perceived as a group (the letter 'U') because it has proximity to each other position.

Proximity (closeness of the position)

http://jayce-o.blogspot.com/2010/12/graphic-design-and-gestalt-theory.html

Page 35: 3 principle of_design

Similarity (similar form)

The three triangles in the bottom of the logo actually is part of a bird icon in the logo. But because it has a similar form with another triangle, the object is perceived as part of a group triangles that make up the circle.

Page 36: 3 principle of_design

Closure (closing the form)

We can recognize that the icons on the WWF logo is a panda. In fact, the picture is incomplete or not fully closed.

Page 37: 3 principle of_design

Continuity (continuous pattern)

The circles are perceived as a group because of the continued pattern. Although the actual objects are separated from each other.

Page 38: 3 principle of_design

เอกัภาพ (Unity)

Page 39: 3 principle of_design

เอกัภาพ (Unity)

Page 40: 3 principle of_design

Rhythm จ�งหวะ (Rhythm)

• จ�งหวะแบบเหม�อนกั�นซ้��าๆกั�น เป*นกัารน�าเอาองค+ประกัอบหร�อร!ปท่�"เหม�อน ๆ กั�น มาจ�ดุวางเร�ยงต�อกั�น กัารออกัแบบลายต�อเน�"อง เช่�น ลายเหล5กัดุ�ดุ ลายกัระเบ��องป!พื่��นหร�อผน�ง ลายผ า

• จ�งหวะสล�บกั�นไปแบบคงท่�" เป*นกัารน�าองค+ประกัอบหร�อร!ปท่�"ต�างกั�นมาวางสล�บกั�นอย�างต�อเน�"อง เป*นช่�ดุ เป*นช่�วง ให ความร! ส-กัเป*นระบบ สม�"าเสมอ ความแน�นอน

Page 41: 3 principle of_design

• จ�งหวะสล�บกั�นไปแบบไม�คงท่�" เป*นกัารน�าองค+ประกัอบหร�อร!ปท่�"ต�างกั�นมาวางสล�บกั�น อย�างอ$สระ ท่��งข้นาดุ ท่$ศท่าง ระยะห�าง ให ความร! ส-กัสน�กัสนาน

•จ�งหวะจากัเล5กัไปใหญ�หร�อจากัใหญ�ไปเล5กั เป*นกัารน�าร!ปท่�"เหม�อนกั�น มาเร�ยงต�อกั�น แต�ม�ข้นาดุต�างกั�นโดุยเร�ยงจากัเล5กัไปใหญ�หร�อจากัใหญ�ไปเล5กัอย�างต�อ เน�"องท่�าให ภาพื่ม�ความล-กั ม�ม$ต$

Rhythm จ�งหวะ (Rhythm)

Page 42: 3 principle of_design

Rhythm จ�งหวะ (Rhythm)

Page 43: 3 principle of_design

Rhythm จ�งหวะ (Rhythm)

Page 44: 3 principle of_design
Page 45: 3 principle of_design

ข้นาดุและส�ดุส�วนกัารจ�ดุองค+ประกัอบ (Scale & Proportion)

Page 46: 3 principle of_design

ข้นาดุและส�ดุส�วนกัารจ�ดุองค+ประกัอบ (Scale & Proportion)

Page 47: 3 principle of_design

ข้นาดุและส�ดุส�วนกัารจ�ดุองค+ประกัอบ (Scale & Proportion)

Page 48: 3 principle of_design

ข้นาดุและส�ดุส�วนในกัารจ�ดุองค+ประกัอบ (Scale & Proportion)

Page 49: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)• ส่�วน Background กั�บ Foreground

Page 50: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)

Page 51: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)

Page 52: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)

Page 53: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)

Page 54: 3 principle of_design

ท่�"ว�างในกัารออกัแบบ (Spacing)

Page 55: 3 principle of_design

Consistency is a good goal for any design.