intro to the principles of graphic design
TRANSCRIPT
![Page 1: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/1.jpg)
The principles ofGraphic Design
Applied toMODERN WEB DEVELOPMENT
![Page 2: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/2.jpg)
Principles of Design● Balance● Proximity● Alignment
● Repetition● Contrast● Space
![Page 3: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/3.jpg)
Balance● The notion that elements are symmetrical,
which in turn creates harmony, order, and cohesion
● The equal distribution of visual weight in a design
● Not balanced = disturbing and uncomfortable. http://www.onextrapixel.com/2011/08/25/concept-and-
factors-of-balance-in-web-design/
![Page 4: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/4.jpg)
Balance: Symmetrical
![Page 5: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/5.jpg)
Balance - Radial
http://www.ipolecat.com/
![Page 6: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/6.jpg)
![Page 7: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/7.jpg)
Balance- Vertical
![Page 8: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/8.jpg)
Balance - Asymmetric
![Page 9: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/9.jpg)
Asymmetrical Balance
![Page 10: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/10.jpg)
![Page 11: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/11.jpg)
![Page 12: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/12.jpg)
Proximity● Connect elements visually to create
relationship between them
![Page 13: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/13.jpg)
Proximity
![Page 14: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/14.jpg)
Proximity
![Page 15: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/15.jpg)
Alignment● To create order and organization● To connect visually between elements● All of the elements in your design will have to
be aligned in some way● Grids can help!
![Page 16: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/16.jpg)
![Page 17: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/17.jpg)
![Page 18: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/18.jpg)
Grid Systems● 960 grid system● http://thegrid.io●
![Page 19: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/19.jpg)
Repetition● Tying together elements Stronger design'→
● Creates association and consistency● Creates rhythm, organized movement
![Page 20: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/20.jpg)
Repetition - Regular
![Page 21: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/21.jpg)
Repetition - Progressive
![Page 22: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/22.jpg)
Repetition - Flow
![Page 23: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/23.jpg)
Contrast● Juxtaposition of opposing elements● Emphasize elements● Increase readability
http://www.j6design.com.au/6-principles-of-design/
![Page 24: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/24.jpg)
Contrast
![Page 25: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/25.jpg)
Contrast
![Page 26: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/26.jpg)
Contrast
![Page 27: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/27.jpg)
Space● Area between design elements● Positive and negative spaces● Don't attempt to fill spaces!● Spaces help to make the design more
relaxed, emphasize an object, balance...
![Page 28: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/28.jpg)
Space
![Page 29: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/29.jpg)
Space
![Page 30: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/30.jpg)
Additional Concepts● Rule of thirds● Golden Ratio
![Page 31: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/31.jpg)
Rule of Thirds● Creates more tension, energy and interest in
the composition than simply centring the subject.
![Page 32: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/32.jpg)
![Page 33: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/33.jpg)
![Page 34: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/34.jpg)
![Page 35: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/35.jpg)
Golden Ratio● Two quantities are in the golden ratio if their
ratio is the same as the ratio of their sum to the larger of the two quantities.
● ~1.618● “This proportion is aesthetically pleasing”
![Page 36: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/36.jpg)
![Page 37: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/37.jpg)
![Page 38: Intro to the Principles of Graphic Design](https://reader033.vdocument.in/reader033/viewer/2022042723/5886eb101a28abba528b5de3/html5/thumbnails/38.jpg)