Principles of Beautiful Web Design

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.

Principles of Beautiful Web Design

Photo Credit:

davefishernc (flickr)

Design can be learned (srsly!)

Good Design IS Problem Solving:

Designer mentality vs coder methodology

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

“Design depends

largely on constraints.”

- Charles Eames

Layout

Color Texture

Type Imagery

You gotta learn the rules befo you try to break them

Layout: Balance

Finding it and shifting it

Symmetrical & Asymmetrical

Bad Balance

Good Balance

Layout: Unity

Via Proximity and Repetition

Bad Unity

Good Unity

Bad Emphasis

Good Emphasis

Layout: Grids (are good!)

http://designbygrid.com/

Color: The Wheel

 
 


Orange, Green, Violet

Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet

Texture

The web shouldn’t always feel like the web

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

1.
Baseline 2.
Cap height 3.
Crossbar 4.
Serif 5.
Meanline 6.
Bowl 7.
Descended 8.
Counter 9.
Stem 10.
Tittle 11.
Terminal 12.
Ascender 13.
Leg

14.
Ligature 15.
X-height

Typography: Serif Fonts

Typography: Sans-Serif Fonts

Typography: Fixed-Width Fonts

Typography: Handwritten Fonts

Typography: Novelty Fonts

4 Typography: The “OK, Fine” 9

These nine fonts are installed by default on most Mac and PC

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)

Use Cufón (JavaScript text replacement without Flash)

5 Imagery

Images & illustrations can make or break a website

5 Imagery: Selection

1.
What is the most relevant

image for the subject?

2.
What is the most artistic and

interesting image I can use?

3.
What would be the most appealing

image for the target audience?

Digital Web: Cooking with Stock

http://tinyurl.com/dw-stock

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

Keep at it!

“

Typography

As with design principles, there are a lot of vocabulary

terms to digest when first learning about the nuances of

typography... data-page="37">

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... and expanding the

medium''s design vocabulary.”

- Curt Cloninger, "Fresh Styles for Web Designers”, 2001

Keep at it!