The principles ofGraphic Design

Applied toMODERN WEB DEVELOPMENT

Principles of Design● Balance● Proximity● Alignment

● Repetition● Contrast● Space

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/

Balance: Symmetrical

Balance - Radial

http://www.ipolecat.com/

Balance- Vertical

Balance - Asymmetric

Asymmetrical Balance

Proximity● Connect elements visually to create

relationship between them

Proximity

Proximity

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!

Grid Systems● 960 grid system● http://thegrid.io●

Repetition● Tying together elements Stronger design'→

● Creates association and consistency● Creates rhythm, organized movement

Repetition - Regular

Repetition - Progressive

Repetition - Flow

Contrast● Juxtaposition of opposing elements● Emphasize elements● Increase readability

http://www.j6design.com.au/6-principles-of-design/

Contrast

Contrast

Contrast

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

Space

Space

Additional Concepts● Rule of thirds● Golden Ratio

Rule of Thirds● Creates more tension, energy and interest in

the composition than simply centring the subject.

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”