View
856
Download
0
Category
Preview:
DESCRIPTION
From PodCamp Ohio 2. Each slide transitions to the next with a sliding effect, revealing it to be a giant, seamless template. Simple design principles and easy tips to transform your site from worthless to wonderful without being an artist
Citation preview
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
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
Recommended