Creating a Website that Actually

Looks GoodDaniel Lewis

(“the Ramen Noodle”)

Who am I?theRamenNoodle.com

AreYouJustWatching.com

DJosephDesign.com

@theRamenNoodle

Why bother?

Boring = bad = bye-bye3

Go to sleep now!

Quality

Expert?

Eyeto see and understand good

design

Wisdomto pick better templates

Vocabulary

to communicate better with a designer

Skillsto produce your own design

Design PrinciplesContrast

Consistency

Cleanliness

Complimentariness

Catchiness

Calling

Conscious recognition

ContrastThe same or completely

difference

Size

Big vs. little

WeightThick/heavy vs. thin/light

ShapeALL-CAPS vs. lowercase

Web fontsArial / Arial Black

Verdana

Tahoma

Trebuchet

Times New Roman

Georgia

Courier New

Comic Sans

DirectionVertical vs. horizontal

Tall vs. flat

ColorWarm vs. cool

Light vs. dark

Good vs. evil

Special effectsUse sparingly

With vs. without

Don’t use lotsof special effects

Consistency

Repeat styles or elements

Cleanliness

White space is not evil space

Complimentariness

Group and separate

Catchiness

Eye flow and special effects

http://www.thealamobasement.com/

CallingMake them do something!

Conscious Recognition

Once you know it, you’ll see it

HTMLThe structure of your site

CSSWritten language of web design

CSS structureselector { properties; }

p { font-size: 14px; margin-bottom: 9px;}

Important selectorsh1, h2, h3, h4

p

a, a:hover

blockquote

. (period)

#

Headers

Paragraphs

Active links

Blockquotes

Classes

IDs

Important propertiescolor

font-size

line-height

width and height

position

display

float

background

margin

padding

ImagesSubtle gradients

Textured backgrounds

Rounded corners

Special effects

Image formatsJPEG

GIF

PNG

.jpgFor photographs

.gifFor solid colors

.pngFor solid colors and

transparency

TransparencyNot natively supported by IE6

8-bit and 32-bit

Use PNGs from Adobe Fireworks

Stalk metheRamenNoodle.com

AreYouJustWatching.com

DJosephDesign.com

@theRamenNoodle