Upload
jason-beaird
View
113
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Updated 7/2009: The same presentation as my Design 4 Developers presentation from the ConvergeSC conference, updated with a few more examples for a presentation at South University on 7/14/2009.
Citation preview
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! “