The principles of
Graphic Design

Applied toMODERN WEB DEVELOPMENT

Elements of Design

Lines

Shapes

Texture

Direction

Size

Colour

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/

Lines

IBM Design Language Inspiration - Service Catalog

Shape

Everything is a shape

Shapes add interest in the design

Used for emphasis

Geometric and organic shapes

Geometric Shapes

Organic Shapes

Shapes

A positive shape automatically creates a negative shape.

Texture

The way a surface feels or is perceived to feel

With flat design dominating, use textures smartly (or avoid them)

Texture

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/

Direction

Direction

Websites scroll vertically (most of the times)

Visual direction usually form a Z shape in LTR web designs, a S shape in RTL.

Direction - Horizontal

Size

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

Size

Colour

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

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

Color

Colour

http://brandcolors.net

Click to edit the title text format

Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level