philduba.com

Get out of the talk
- interacting with clients
- steps for design pages - visual hierarchy, choosing colors
- branding
- implementation

Practical Design
- common sense methodology
- quick way to get feedback from clients at beginning of project
- speeds up development time by focusing only on what client needs
- practical approach to analysis, ia, design and development

Process of Practical Design
- Review information architecture
- Create a comp design
- Review with client
- Implement simplest solution

Dummy Pages/Comps
- dovetails with IA and analysis phase
- get all the elements, how they relate
- determine major elements and where they display and relate to other major elements
- encourages the use of processes like FLiP or Interface Driven Architecture with prototyping built into it. Prefers to do a graphical comp prior to prototype

Get Feedback
- present with client as part of workflow
- does client like how handled branding? very touchy subject with clients
- visual themes reinforce the IA

How to implement?
- Color choices
- Basic PS skills like color correction, cropping, etc.
- Using concept of reuse
- CSS starter templates
- Font choices
- Page Layout basics

Visual Hierarchy
- Four main elements - positioning, weight, color, white space
- Some incorporate all elements (Photos/Animations)

- Showed some layouts starting with newspaper, Yahoo!, and a few other examples from his work/university

Color basics
- black isn't a color choice - it's harder on eyes, contrast is different than what people are used to
- Choosing color sets
    - no more need for web safe colors
    - http://kuler.adobe.com
- using images to choose colors
- using colors effectively on a page
- white space, utilize it, don't fill it

Additive vs. Subtractive Color
- subtractive is primary colors, elementary school colors, based on psychology observations
- most concerned with additive color nowadays

Color Hierarchy
- Hot -> Cold (ROYGBIV)
- hot colors are picked up first
- color photos have a higher value than most colors because they also have weight

Fonts demystified
- Serif or San Serif (Feet vs. no-feet)
- put into families

Serif font
- the feet helps to distinguish letters at a small scale - usually in print
- anti-aliased text - for web use, sans serif is always clearer than serif. the web fonts aren't anti-aliased
- Sans serif is better for the web, make use of Serif's for things like headings, titles

Branding
- visual themes
- icons

Merchandising
- product placement
- IA - color to accentuate the architecture, visual themes to reinforce architecture

Photos
- Cropping of photos is critical, a picture that's too large or too small or contains too much, may not be right presentation and right connotations
- a tight shot has a connotation of action/intimacy, adds drama. someone coming into the frame adds to this feeling
- a wide shot is good for association
- try and match colors from photos to web pages (Kuler 2.0)

Just the photo piece of this was enough information for me as one sees photos all around the web on company pages and understanding how the size and number of people in them can convey certain things was invaluable.