Principles of Beautiful Web Design

Photo Credit: Samhines(flickr)

Me? Design? But I’m not an artist…

My personal site circa 1998…Jason meets Photoshop.

A few years later in 2001…Hooray for art classes.

Senior year at UCF in 2003…Experimenting with CSS

The 2004 redesign that broke the mold.

The 2005 redesign that lingered around too long…

Design can be learned. (srsly!) Good Design IS Problem Solving:

Designer mentality vs. coder methodology.

Visual

Emotional

Random Intuitive

Subjective

Verbal

Logical

Sequential Analytical

Objective

Nielson and Zeldman

http://www.happywebbies.com/

“Design depends largely on constraints.”

- Charles Eames

Pre-Lesson Case Studies

1. Tour Reservation System

Pre-Lesson Case Studies

2. Book Promo Site

Pre-Lesson Case Studies

3. Greenville Symphony

Layout

Color

Texture

Type

Imagery

You gottalearn the rules befoyou try tobreak them

Layout: Balance

Finding it and shifting it. Symmetrical & Asymmetrical

Bad Balance

Good Balance

Layout: Unity Via Proximity and Repetition

Bad Unity

Good Unity

Layout: Emphasis

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

Placement

Continuance

Isolation

Contrast

Proportion

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

Color: Schemes

Color: Resources

1. http://www.colorzilla.com Firefox eyedropper plugin.

2. http://kuler.adobe.com Flash-based color scheme tool.

3. http://www.colourlovers.com Color scheme community site.

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

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)

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! “