1. The principles of
Graphic Design
Applied to
MODERN WEB DEVELOPMENT

2. Elements of Design
● Lines
● Shapes
● Texture
● Direction
● Size
● Colour

3. Lines - Why?
● Lines can be used to divide space and direct the viewers eyes.
● Lines can be used to separate content.
● Lines direct the flow of content.
● Can be used to create emphasis on a specific area of your work.
● Can be used as an organizational guide, some examples are:
● Wire-framing in web design / Sketching in logo design
● Properly aligning text and images in web design and graphic design
● The grid system
Source: http://deltadesignz.com/2010/09/design-
principle-lines-in-graphic-design/

4. Lines
IBM Design Language Inspiration - Service Catalog

6. Shape
● Everything is a shape
● Shapes add interest in the design
● Used for emphasis
● Geometric and organic shapes

7. Geometric Shapes

10. Organic Shapes

11. Shapes
● A positive shape automatically creates a
negative shape.

12. Texture
● The way a surface feels or is perceived to feel
● With flat design dominating, use textures
smartly (or avoid them)

13. Texture

14. Direction
● Horizontal suggests calmness, stability and
tranquillity.
● Vertical gives a feeling of balance, formality and
alertness.
● Oblique suggests movement and action
http://www.j6design.com.au/6-principles-of-design/

15. Direction

16. Direction
● Websites scroll vertically (most of the times)
● Visual direction usually form a Z shape in LTR
web designs, a S shape in RTL.

17. Direction - Horizontal

18. Size
● The relationship of the area occupied by one
shape to that of another.

19. Size

20. Colour
● Colour is the visual perceptual property
corresponding in humans to the categories
called red, blue, yellow, etc. [Wikipedia]

21. Colour
● The 3 main characteristics:
● Hue = Colour's wavelength
● Saturation (or Chroma) = How Sharp or dull a
colour appears
● Brightness (or Value) = is the shade (darkness) or
tint (lightness) of a colour

22. Color

23. Colour
● http://brandcolors.net