The document outlines principles of graphic design relevant to modern web development, focusing on elements such as lines, shapes, texture, direction, size, and color. It emphasizes the role of lines in organizing content, the significance of shapes in creating visual interest, and how direction impacts user experience on websites. Additionally, it discusses the attributes of color and its effects in design.

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