Advance Praise for Head First Web Design“Building websites has definitely become more than just writing code.. Head First Web Design shows you what you need to know to give your users a
Trang 3Advance Praise for Head First Web Design
“Building websites has definitely become more than just writing code Head First Web Design shows you
what you need to know to give your users an appealing and satisfying experience Another great Head
First book!”
— Sarah Collings, User Experience Software Engineer
“Simplified, but far from dumbed-down Practical and intuitive I wish I had access to a book like this
when I was getting started.”
— Matt DiGangi, real life Web Designer
“Head First Web Design really demystifies the web design process and makes it possible for any
web programmer to give it a try For a web developer who has not taken web design classes,
Head First Web Design confirmed and clarified a lot of theory and best practices that seem to be just
assumed in this industry.”
— Ashley Doughty, Senior Web Developer
“Finally a developer can fully understand the whole process of creating a GREAT website Web Design
101, you finally got the book you needed/wanted.”
— Johannes de Jong, Web Programmer
“The Head First series learning technique works well You feel as though you are working through an
actual design process instead of just reading a how-to manual It’s a much more holistic approach to
learning The books work with your mind, rather than against it.”
— Jonathan Moore, owner of Forerunner Design
Trang 4Other related books from O’Reilly
Learning Web Design
Web 2.0: A Strategy Guide
Ajax: The Definitive Guide
Website Optimization
Other books in O’Reilly’s Head First series
Head First JavaTM
Head First Object-Oriented Analysis and Design (OOA&D) Head First HTML with CSS and XHTML
Head First Design Patterns
Head First Servlets and JSP
Head First EJB
Head First PMP
Head First SQL
Head First Software Development
Head First JavaScript
Head First Ajax
Head First Physics
Head First Statistics
Head First Rails
Head First PHP & MySQL
Head First Algebra
Trang 5Ethan Watrall Jeff Siarto
Head First Web Design
Wouldn’t it be dreamy if
there was a web design book
that went beyond code and really
helped me make my websites
work and look better? It’s
probably just a fantasy
Trang 6the index
site hierarchy and card sorting 93–94
site message 280
site statistics 363–366, 367
website analytics tools 364
sketches 16–19
functionality 17
slashdot.org 254
Sole Proprietor/Partnership 418–420
stacks (card sorting) 86–89
stack names 87
storyboards 21–23, 36, 61, 67
Mark in Japan 64–66
Photoshop 66
Strict XHTML 102
surveys 157, 322–342, 367
asking the right questions 328–341
cost 325
jargon 331
open-ended questions 328, 367
limits 339
RPM Records
final user survey 338–339
results 340–341
Surveys Exposed 327
symmetrical balance 137
T
tabbing through website 289–293
Safari 289
tabindex attribute (<a> tag) 291–293
more than just 308–311
tech.originalsignal.com 254
testing tools 451
tetradic color scheme 182–184, 191
text, scannability 28–33
checklist 31–32
what makes text scannable? 29
text contrast 448
themes 41–55 defined 42 developing 46–48
IA and 99 tools for design 451 top level navigation 13–14, 36 clear top navigation categories 76 triadic color scheme 171, 191 Trilobite Labs project 421–438 podcast 433
Red Lantern Design estimate worksheet 428–429 requirements 421
Tritanopia 305
U
unordered lists 102, 257 usability 319–368 browser testing 343 focus groups 322–327 cost 325
generic browser stats 343 :hover pseudo-property 344–346 site statistics 363–366
website analytics tools 364 surveys 322–342
asking the right questions 328–341 cost 325
jargon 331 open-ended questions 328 RPM Records final user survey 338–339 usability testing 347–362, 367
Behind the Scenes 349 friends and family 359 moderator scripts 351–357 contruction 355–357 number of participants 359
on a budget 351 user-centered design 35, 36 user experience 146–147 user experience designer 415
Trang 7the index
users 110
informed decisions 129
(see also usability)
U.S Federal Rehabilitation Act 296
V
vertical menu type 15
vertical navigation 206–207, 225
vertical ratios 152
vertical tabs menu type 15
Visio 96
visual indicators 306
visual metaphor 40–55, 67
brainstorming 45
page elements shaping 49–51
VoiceOver 278
W
Watch it!
blogs 394
Kuler 176
WCAG checkpoints 308
WCAG checkpoints 308
Audio-2-Go project 313–316
WCAG (Web Content Accessibility Guidelines) 298
Priority 1 298–301, 308–311
web applications 446
web designers, types of 415–420
Web Developer (Firefox add-in) 451
web markup, future of 442–443
web-safe colors 303
website analytics tools 364
workflow 6
“wrap” <div> 102 WriteMaps 451 writing for the web 28–33, 35, 36, 227–274 editing text down 249
headings 259–263, 264–266 fonts 268
level of importance 269 inverted pyramid 241–246, 249, 252–254 lists 251, 255–258
reading online 239 removing unnecessary content 247 serif versus sans-serif fonts 270–271 what makes text scannable? 29
X
XAMPP 396 XHTML College of New Media project secondary navigation 222 updating XHTML to use textural links 218 evolutionary design 385–386
Foo Bar project 406 horizontal tabs 204 lists 257
Mark in Japan project 56 index.html 102 joining XHTML and CSS 58–59 RPM Records project
content and navigation markup 151 optimized for 1024x768 128 SampleRate project 173 Strict XHTML 102 vertical navigation 206 XHTML2 versus HTML5 442–443
Y