Principles of Graphic Design

with some background on Web 2.0 styles

The Principles of Graphic Design

• Balance (layout: spacing, alignment, proximity grouping, etc.)

• Unity/Rhythm (repetition)

• Color (complementary and contrast; general rules)

• Emphasis (what gets noticed first)

• Texture (the look and feel of the design)

• Other issues: type (font, size, color, weight, kerning, etc.) and shape (size, use, color, weight, etc.)

Web 2.0 Style Guide• Simplicity = web2.0 means focused, clean, and simple

(deliver more with less)

• (remove unnecessary, don’t decorate, create moods, alternate solutions)

• Central layout = very few are full-screen or left-aligned. There is a need to sit the site straight, front, and center (makes it more bold and honest)

• Fewer columns = 3 is the mainstream max (2 is better). Makes it more bold, simple, and forces you to communicate less info. // Note: each column should have a specific purpose (especially if using 3 columns).

• Separate top sections = the top area is the branding area and main nav area—it needs to be distinct from the main content area. (Increases user knowledge and confidence; it’s bold, clear, informative statement.)

Web 2.0 Style Guide (p2)• Solid areas of screen real-estate: navigation,

background/canvas, main content, other stuff, callouts/cross-links (white space)

• Simple nav: web2.0 makes global nav large, bold, clean, and obvious (differentiate from other links, content, no ambiguity, action-oriented.) Inline links = not underlined (use other ambient identifier).

• Bold logos: clear, bold, strong brand = says “this is who we are.” Make it usable for other contexts (ie. shirts), distinctive, and representative (personality and content)

• Bigger text: now that you have less content, and more white space, use large text (it stands out more, easier to navigate, and scan.

• Bold text introductions: elevator pitch/main message should stand out. (Can leave this one out.)

Web 2.0 Style Guide (p3)• Strong colors: bright, strong colors draw the eye; useful for

dividing the page. Also, helps communicate brand values. *Don’t have too many things attracting the eye or it gets confusing.

• Rich surfaces: 3D, but yes to reflections, drop-shadows, and gradients = things that make visual feel more real, solid, and finished. *Use with care and don’t overdo. Consider consistent light source.

• Gradients: softened areas that would otherwise be flat (re: color and tone). They are a part of drop shadows.

• Reflections: application of gradients (shiny table effect, light reflected on shiny surfaces)

• Cute icons: simple, clean, quirky, richly detailed, more vector based.

• Star flashes: star shaped labels. (Careful = they can cheapen a site).

BalanceSimplicity 

Central layout 

Fewer columns 

Separate top sections

Simple nav

Bold logos

Bigger text

Strong colors

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Unity/Rhythm (repetition)

Simplicity 

Central layout 

Fewer columns 

Separate top sections

Simple nav

Bold logos

Bigger text

Strong colors

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

ColorSimplicity 

Central layout 

Fewer columns 

Separate top sections

Simple nav

Bold logos

Bigger text

Strong colors

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

EmphasisSimplicity 

Central layout 

Fewer columns 

Separate top sections

Simple nav

Bold logos

Bigger text

Strong colors

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

TextureSimplicity 

Central layout 

Fewer columns 

Separate top sections

Simple nav

Bold logos

Bigger text

Strong colors

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes