Head First Web Design: A Brain-Friendly Guide

Head First Web Design......Page 1
Advance Praise for Head First Web Design......Page 2
Authors of Head First Web Design......Page 7
Table of Contents
......Page 8
how to use this book: Intro
......Page 22
Who should probably back away from this book?......Page 23
This must be important! Don’t forget it!......Page 24
So just how DO you get your brain to treat WebDesign like it was a hungry tiger?......Page 26
Here’s what WE did:......Page 27
Here’s what YOU can do to bend your brain into submission......Page 28
Read Me......Page 29
The technical review team......Page 31
Acknowledgments......Page 32
Safari® Books Online......Page 33
1 building beautiful web pages: Beauty is in the eye of your user......Page 34
Your big chance with Red Lantern Design......Page 35
Where do you start?......Page 38
Draw up a blueprint FIRST......Page 40
Determine your Top Level Navigation......Page 46
Vertical tabs......Page 48
Show Jane some basic design sketches......Page 49
Sketches keep the focus on functionality......Page 50
Now it’s time to prototype the site in code......Page 57
Don’t ruin a good design with bad copy......Page 61
What makes text scannable?......Page 62
Web design is all about communication, and your USERS......Page 68
Your Web Design Toolbox......Page 69
2 pre-production: Paper covers rock......Page 70
Your first "international" gig.........Page 71
Start with a visual metaphor......Page 73
A clear visual metaphor helps reinforce your site’s theme......Page 74
A theme represents your site’s content......Page 75
Brainstorming: The path to a visual metaphor......Page 78
Develop a theme and visual metaphor for Mark......Page 79
Your page elements shape your visual metaphor......Page 82
Build a quick XHTML mock-up for Mark......Page 89
And the CSS.........Page 90
Use storyboards to develop ideas and save time without code......Page 94
Don’t design for yourself!......Page 95
Sketch out your design......Page 97
Add color and finalize your storyboard......Page 98
Your Web Design Toolbox......Page 100
3 organizing your site:
"So you take a left at the green water tower..."......Page 102
Fit your content into your layout......Page 104
Organize your site’s information......Page 105
Keep your site organized with Information Architecture (IA)......Page 112
To run a successful card sort, you need:......Page 113
Sort your cards into related stacks......Page 119
Give your stacks names that are short and descriptive......Page 120
Which card sort is right?......Page 125
Arrange your cards into a site hierarchy......Page 126
IA Diagrams are just card sorts on paper......Page 128
IA Diagrams are NOT just links between pages......Page 129
Move from pre-production to production......Page 133
Build Mark’s site structure......Page 134
Create index.html first.........Page 135
,,,and then screen.css for style......Page 136
screen.css, continued.........Page 137
Pre-production to production: The complete process......Page 139
Your Web Design Toolbox......Page 140
4 layout and design:
Follow the Golden Rule......Page 142
Design is about audience......Page 143
Your newest gig: RPM Records......Page 146
Pinpoint RPM’s audience with personas......Page 147
Data about RPM Music’s users
......Page 148
Let the personas be your guide.........Page 153
Smaller displays limit screen real estate......Page 154
Resolution impacts design and layout......Page 155
Your users don’t care about screen realestate... they just want sites to "work.
"......Page 157
Build an XHTML and CSS foundation optimized for 1024x768......Page 161
Humans like things lined up and well-organized......Page 165
How wide should my grid be? Use the Golden Ratio......Page 166
The rule of thirds: A shortcut to the Golden Ratio......Page 167
RPM and the Golden Ratio: An (anti) case study......Page 168
Remember your client?......Page 172
Set up RPM 2.0 with the Blueprint Framework......Page 174
Use Blueprint CSS rules to style RPM 2.0......Page 177
Time to get your RPM groove on......Page 178
Add some CSS to clean up the layout......Page 182
Finish off the content and navigation markup......Page 184
Add layout and typographic details with some more CSS......Page 187
5 designing with color:
Moving Beyond Monochrome......Page 192
Help support your local music scene......Page 193
9Rules: The blog network gold standard......Page 194
Sometimes your choices are a bit... limited......Page 195
Color has an emotional impact......Page 196
The color wheel (where it all begins)......Page 200
First, choose your BASE color......Page 203
Use the triadic scheme to create usable color patterns......Page 204
Get started on the SampleRate markup......Page 206
Create the basic page layout with CSS......Page 207
We need a digital color wheel.
......Page 208
The opposite of heavy is... light......Page 213
Create a richer color palette with the tetradic color scheme......Page 215
Emphasis-o-matic......Page 218
Let’s update the SampleRate CSS......Page 219
Your Web Design Toolbox......Page 224
6 smart navigation: "In 2 seconds, click ‘Ho
me’."......Page 226
School’s back in session......Page 227
The first step in good navigation is good IA......Page 230
What’s really in a name, anyway?......Page 231
Approach #1: Horizontally-tabbed navigation......Page 237
Approach #2: Vertical navigation......Page 239
Inconsistent navigation confuses users.
......Page 241
Block elements are your friends......Page 245
Let’s float the block navigation on the CNM site......Page 246
Icons don’t SAY anything... they just look pretty......Page 248
Add icons to your text, not the other way around......Page 250
Update the CNM XHTML to use textual links......Page 251
Now we can style our new block elements.........Page 252
Primary navigation shouldn’t change... ...but secondary navigation SHOULD......Page 254
Each sub-page gets its own secondary navigation......Page 255
Let’s style the navigation with our CSS......Page 256
Your Web Design Toolbox......Page 258
7 writing for the web:
Yes, you scan!......Page 260
Build a better online newspaper......Page 266
The problem is TEXT......Page 267
Improve your content with the Inverted Pyramid......Page 274
Compress your copy......Page 280
Add lists to your XHTML......Page 290
Headings make your text even more scannable
......Page 292
Mix fonts to emphasize headings and other text......Page 301
The level, not the size, of a heading conveys importance......Page 302
Your Web Design Toolbox......Page 306
8 accessibility: Inaccessibility Kills
......Page 308
Audio-2-Go: inaccessible accessibility......Page 309
Accessibility means making your site work for EVERYONE......Page 310
How does your site READ?......Page 311
A site’s message should be clear...to EVERYONE......Page 313
Face it: computers are stupid!......Page 314
A computer will read your image’s ALT text......Page 315
EVERYONE’s time is valuable.......Page 318
Convert your long ALT text to a LONGDESC......Page 319
Your improvements are making a difference for SOME Audio-2-Go customers......Page 321
Accessibility is not just about screen readers......Page 322
Tabbing through a page should be ORDERLY......Page 324
Audio-2-Go is now a LOT more ACCESSIBLE......Page 327
Accessibility is the right thing ToDo......Page 329
WCAG Priority 1......Page 331
Color shouldn’t be your ONLY form of communication......Page 335
Life through color-blind eyes.........Page 336
Audio-2-Go, via color-blind eyes......Page 337
Those stars are a real problem......Page 339
Background images are still your friend......Page 340
There’s more to ordering than just tabindexes......Page 341
9 listen to your users: The Pathway to Harmonious Design
......Page 352
Problems over at RPM......Page 353
Let your audience speak to you through focus groups and surveys......Page 355
Surveys and focus groups aren’t free......Page 358
Ask the right questions in your surveys......Page 361
The final RPM Music user survey......Page 371
The results are in!......Page 373
Responses to the open-ended question:......Page 374
IE6 only supports :hover on link and anchor tags......Page 377
User Testing: Let your users tell you how they use your site......Page 380
The building blocks of budget usability testing......Page 384
Use a moderator script to organize the test......Page 385
Friends and family can be a problem......Page 392
The results of the usability test–what the users are telling you......Page 393
A simple problem.........Page 394
Site stats give your users (another) voice......Page 396
Google Analytics......Page 397
Your Web Design Toolbox......Page 400
10 evolutionary design:
Keeping your site fresh......Page 402
Your portfolio so far.........Page 403
Red Lantern To-Do List.........Page 405
Web design is about evolution, not revolution......Page 408
Use CSS to evolve your site’s design......Page 409
You don’t need to be a crack programmer to addinteractivity with JavaScript.
......Page 420
Use JavaScript lightboxes to add interactivity to your site......Page 421
Add Facebox to the Red Lantern homepage......Page 422
Edit your index file......Page 423
Adding blog functionality with WordPress......Page 428
Add a WordPress blog to the Red Lantern site......Page 429
Change the look and feel of your blog with themes......Page 433
Your Web Design Toolbox......Page 435
11 the business of web design:
Mind Your Own Business......Page 436
The newest potential client: the Foo Bar......Page 437
What Foo Bar wants in a bid:......Page 438
Let’s build a quick mockup for the Foo Bar......Page 439
Then, three months later.........Page 443
Welcome to the world of DESIGN PIRACY......Page 446
There’s more than one type of web designer.......Page 448
Choose your job—and your business—based on knowing who you are in the Web universe.
......Page 451
Client Requirements......Page 454
Hourly Rate = $60,000 / ((8 x 5 x 50) x .60)......Page 455
Figure out a total bid.........Page 458
Talking back is highly recommended.
......Page 463
Use a proposal letter to deliver a detailed quote to a client......Page 464
Use Creative Commons to license your work......Page 466
Creative Commons Licenses......Page 467
Your Web Design Toolbox......Page 471
appendix i: leftovers:
The Top Ten Things (we didn't cover)......Page 472
Different languages have different lengths......Page 473
Is that really the flag you want to use?......Page 474
HTML 5 vs. XHTML 2......Page 475
When are they coming?......Page 476
#3: The future of CSS......Page 477
#4: Designing for mobile devices......Page 478
#5: Developing Web applications......Page 479
#6: Rhythm in your layout......Page 480
#7: Text contrast......Page 481
#8: Match link names with their destination page......Page 482
#9: Contrast is a fundamental layout device......Page 483
#10: More tools for design......Page 484
B......Page 486
C......Page 488
E......Page 489
H......Page 490
L......Page 491
N......Page 492
R......Page 493
S......Page 494
U......Page 495
Y......Page 496