Design 4 Future Developers

Web Design for Future Developers February 4 th , 2009  Jason Beaird

Identification Designer Coder Me 

Designer Coder

Me? Design? Really? NoWai!

Good Design IS Problem Solving:

Designer mentality vs. coder methodology.

Designers tend to approach problems from an emotional, romantic, artistic perspective. We rely on instinct and experience.

Coders tend to approach problems systematically based on fundamental theories and efficiency. 

 FTW

Find a Balance

Website Development requires artistic talent and theoretical foundations in order to:

Avoid becoming a “one trick pony”

Get unstuck when a design goes south

Understand the rules and when to break them: “Rule Followers rarely make history”

Nielson and Zeldman http://www.happywebbies.com/

Pre-Lesson Case Studies

Tour Reservation System

Book Promo Site

Greenville Symphony

My Design Process

Layout

Color

Texture

Type

Imagery

As Outlined in The Principles of Beautiful Web Design…

1. Layout: Balance

Finding it and shifting it.

Symmetrical & Asymmetrical

Bad Balance

Good Balance

1. Layout: Unity

Via Proximity and Repetition

Bad Unity

Good Unity

1. Layout: Emphasis

Many ways to achieve it, whether you want to or not:

Placement

Continuance

Isolation

Contrast

Proportion

Bad Emphasis

Good Emphasis

1. Layout: Grids (are good!)

http://designbygrid.com/

2. Color: The Wheel Primary Colors Red, Yellow, Blue Secondary Colors Orange, Green, Violet Tertiary Colors Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet

2. Color: Schemes

Monochromatic

One Color + Black/White

Analogous

Adjacent, 1/3 of the wheel.

Complementary

Opposite Colors on the wheel.

Others:Split-Complimentary, Triadic, Tetradic, Etc…

3. Texture The web shouldn’t always feel like the web.

4. Typography As with design principles, there are a lot of vocabulary terms to digest when first learning about the nuances of typography. Getting to know the 5 basic categories of fonts is a good foundation.

Baseline

Cap height

Crossbar

Serif

Meanline

Bowl

Descended

Counter

Stem

Tittle

Terminal

Ascender

Leg

Ligature

X-height

4. Typography: Serif Fonts

4. Typography: Sans-Serif Fonts

4. Typography: Fixed-Width Fonts

4. Typography: Handwritten Fonts

4. Typography: Novelty Fonts

4. Typography: The “OK, Fine” 9 These nine fonts are installed by default on most Mac and PC computers. Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

4. Typography: The “OK, Fine” 9

Specify preferred fonts first:

font-family: Avenir, Helvetica, Arial, sans-serif;

font-family: Minion, "Times New Roman", times, serif;

Use Background Images

Use sIFR (Scalable Inman Flash Replacement)

5. Imagery Images & illustrations can make or break a website.

5. Imagery: Selection

What is the most relevant image for the subject?

What is the most artistic and interesting image I can imagine using?

What would be the most appealing image for the site’s target audience?

"When they're not working on their day jobs, most top-notch web designers are pushing the web design envelope after-hours or on their own personal sites -manipulating current technologies and expanding the medium's design vocabulary.” - Curt Cloninger, "Fresh Styles for Web Designers”, 2001