Tuesday, August 31, 2010

DEV202 Pimp My App

Speaker: Shane Morris @shanemo

- lack of whitespace causes clutter - very flat
- colour balance across the page drawing the eye to one location.
- promote symmetry.
- where is the logical starting point in the page. Queues.
- What do we want people to see and in what order?
- Uppercase is harder to read due to outline versus mixed case text.
- What is lower down on the page?
- Avoid spilt navigation

1. Graphics come last, not first.
2. Set goals
- User, business, usability, experience.
3. "You are not your user
4. test early and often
5. Go with the flow 
Start with navigation and flow of the tasks


Layout steps
1. Map out the workflow
- What would a first time user do.
2. List your content
- Widgets
- quince.infragistics.com Pattern Library
3. Layout the elements in order
- left-right, top-bottom.
4. Check natural grouings
- Keep releated concepts together.

Presentation
1. Remove every unnecessary element.
2. Minimise Variation
- Err on the side of consistency.
3. Colours 
"Red and green should not be seen without a colour in between."
"Angry fruit salad."
Rate 1 to 5 for visual design skills and use that many colours.
Neutral background colours are safest. (white, grey, black, navy blue,)

Pull colours from a suitable photo.

kuler.adobe.com
colourlovers.com

About 10% of males have some form of colour blindness. Vischeck.com

How many diffent type faces shoul I use?

3. Line stuff up.
- Beware unintended relationships

4. Space and Size things evenly

5. Indicate Grouping
- Group boxes
- Similirity
- Proximity
- Alignment
- Empty Space

 Visual Hierarchy

6. Adjust Visual weight
Hot colours,
Size,
Contrast
Irregular Shapes
Misalignment
3D
Animation.