determine content strategy: types of content etc.

when looking for ideas, look at work of popular designers:

- graphic designers: milton glaser, paula scher, saul bass, paul rand, m
ichael bierut, stephan sagmeister, massimo vignelli, david carson, louise fili,
ellen lupton, karlsson wilker, jessica hische
- web designers: jason santa maria, chris coyier, meagan fisher, jeffrey
zeldman, rachel andrew, paul boag, aaron gustafson, rachel hinman, cameron moll
, luke wroblewski, dan cederholm, andy clarke, simon collison, elliot jay stocks
, sarah parmenter, veerle pieters, yaron schoen, jan rajtoral

8 elements of design:
- color (hue)
- think about what moods you want to convey
- value (tone)
- can be used to set mood, create contrast
- to attract the eyes: light obj on dark bg / dark obj on light bg / bri
ght obj on neutral bg
- gradation to create the illusion of depth, reflections
- drop shadows, inner glow
- texture
- rough, smooth, soft, hard, shiny, dull, glossy
- decorative bgs, headers and footers, sidebars, navigation bar, buttons
, bars, banner ads, dividers
- combine textures
- shape
- use positive and negative shapes (esp to carve out spaces)
- repeating shapes create unity
- ribbon effects, border effects
- form
- good form is when all of the elements hang together, when it feels lik
e the design always existed
- plan website in grayscale outlines first
- space (whitespace)
- give the eye space to rest around elements
- use whitespace to distinguish more important info from less important
info
- use in header (to help identify logo & navigation), footer
- it's all about breathing room
- use space by evenly distributing elements or by varying space througho
ut
- line
- pen, pencil, brush, crayon,
- thick, thin, long, short, smooth, rough, hard-edged, soft, curvy, stra
ight, solid, dashed, dotted
- edges (boundaries) create illusion of line
- curved edge - pocket or flap
- undulating lines - wave shape
- sloping line
- lines can create a focal area, ex: with double lines on either side of
something important
- can use lines as borders with strokes or drop shadows
- lines as dividers
- type
- typeconnection.com
10 principles of design
- contrast
- show emphasis with colors, tones, directions, lines, shapes
 - use in logo, header, navigation, banner, slider, news items, sidebar,
featured items, article, search bar, gallery, footer
- emphasis
- typographic hierarchy: using fonts to create a sense of flow and empha
sis on a page by varying the size, weight, color and spacing
- balance
- when elements as a whole have a feeling of equality of weight, attenti
on, or attraction
- NOT the same things as symmetry
- use grid system to determine balance
- dark can be balanced with light
- unity
- pattern
- repeating elements, ideas:
- same size elements distributed evenly using a grid system
- repeating shapes
- decorative designs (ex: header or footer)
- similar color scheme throughout layout
- background pattern
- movement
- can be the invisible path visitors' eyes follow through the design
- can be implied, i.e. illusion of motion that happens with static eleme
nts:
- lines (hor, ver, diag, curved)
- angled, curved shapes / rotated object
- illustrations or photos that imply movement (ex: rocket launch
ing)
- can be actual:
- fixed bg
- parallax scrolling
- easing
- rhythm & repetition
- alternating numbers of columns or rows
- border styles
- proportion
- scaling objects in set increments
- large image with small amount of text
- simplicity
- elimination of non-essential details to reveal the essence of a form
- gradation
- apply to color, value, direction, line, shape, size, texture
- color: gradient, light to dark transition from top to bottom of page
- using lines to show direction
- path that cuts across design
- long to short, thick to thin
- shape
- angular to round
- texture
- rough to smooth, fibrous to chakly, prickly to spongy, granula
t to liquid
balance
- symmetrical: equal on all sides
- asymmetrical: seemingly unequal but symmetrical using whitespace
- radial: around a center point
proximity
- group like elements
- separate groups
alignment
use grids
repetition creates rhythm
contrast - shapes, sizes, colors etc
whitespace - minimalism
typefaces:
arial
cabin
corbel
futura
georgia
gotham
helvetica
league gothic (for headlines)
myriad
rockwell
typography rules:
1. use classic typefaces:
- helvetica, times new roman, gill sans, bodoni, gotham, garamond, futura, myria
d pro, league gothic, baskerville, bickham script, courier
2. limit the number of typefaces: 1-3 suffice for any project
3. avoid similar typefaces (ex: garamond, times new roman) - make sure you have
clear dinstinction and contrast
4. be carefuly with capitalization - using all capts makes body copy extremely h
ard to read
5. use a legible font size: use 10-12 pt fonts minimum
6. don't mix size & weight: choose a single style for each facet of text
7. pay attention to your kerning
8. create a unified mood: typefaces should be on the same page, emotionally (ex:
rustic, modern, sans-serif)
9. use proper alignment: flush left, ragged right for optimal reading experience
10. create contrast: type should stand out from its background at all times - ma
ke it clear where the background ends and the typeface begins
11. maintain typeface integrity: never arbitrarily stretch or distort letters; i
f you need a wider/taller typeface, pick a different one
12. avoid widows & orphans: adjust your paragraph settings accordingly; widows:
lines from a paragraph that overflow to the next page; orphans - single words th
at wrap to the next line in a paragraph
13. use even & consistent spacing: consider using a grid system to ensure equal
spacing throughout the design
14. stop using underlines: italics are a more refined way of calling attention t
o a word or phrase
15. use real dashes & quotations: double hyphens and straight quotes are for ama
teurs
16. avoid novelty typefaces
bold, beautiful, memorable

more typefaces:
proxima nova, pt sans/serif, brandon grotesque, tisa pro