Head First Web Design

Head First Web Design

by Ethan Watrall, Jeff Siarto
Released December 2008
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449369828

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Want to know how to make your pages look beautiful, communicate your message effectively, guide visitors through your website with ease, and get everything approved by the accessibility and usability police at the same time? Head First Web Design is your ticket to mastering all of these complex topics, and understanding what's really going on in the world of web design.

Whether you're building a personal blog or a corporate website, there's a lot more to web design than div's and CSS selectors, but what do you really need to know? With this book, you'll learn the secrets of designing effective, user-friendly sites, from customer requirements to hand-drawn storyboards all the way to finished HTML and CSS creations that offer an unforgettable online presence.

The revised two-color edition of this book includes a free online version of the chapter on web color. You can easily access this chapter at Oreilly.com once you register your book.

Your time is way too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First Web Design uses a visually rich format specifically designed to take advantage of the way your brain really works.

Publisher resources

View/Submit Errata

Table of contents

  1. Head First Web Design
  2. Dedication
  3. A Note Regarding Supplemental Files
  4. Head First Web Design
    1. What will you learn from this book?
    2. Why does this book look so different?
  5. Advance Praise for Head First Web Design
  6. Authors of Head First Web Design
  7. How to Use This Book: Intro
    1. Who is this book for?
    2. Who should probably back away from this book?
    3. We know what you’re thinking
    4. We know what your brain is thinking
    5. Metacognition: thinking about thinking
    6. Here’s what WE did
    7. Here’s what YOU can do to bend your brain into submission
    8. Read Me
    9. The technical review team
    10. Acknowledgments
    11. Safari® Books Online
  8. 1. Building Beautiful Web Pages: Beauty is in the eye of your user
    1. Your big chance with Red Lantern Design
    2. Where do you start?
    3. Draw up a blueprint FIRST
    4. Determine your top level navigation
    5. Put it all in context
      1. Horizontal tabs
      2. Horizontal buttons
      3. Vertical menu
      4. Vertical tabs
    6. Show Jane some basic design sketches
    7. Sketches keep the focus on functionality
    8. Don’t ruin a good design with bad copy
    9. What makes text scannable?
    10. Web design is all about communication, and your USERS
    11. Your Web Design Toolbox
  9. 2. Pre-Production: Paper covers rock
    1. Your first “international” gig...
    2. Think before you code
      1. Start with a visual metaphor
    3. A clear visual metaphor helps reinforce your site’s theme
    4. A theme represents your site’s content
    5. Brainstorming: The path to a visual metaphor
    6. Develop a theme and visual metaphor for Mark
    7. Your page elements shape your visual metaphor
    8. Build a quick XHTML mock-up for Mark
    9. And the CSS...
    10. Use storyboards to develop ideas and save time without code
    11. Don’t design for yourself!
    12. Let’s create a storyboard for Mark
    13. Your Web Design Toolbox
  10. 3. Organizing Your Site: “So you take a left at the green water tower...”
    1. Fit your content into your layout
    2. Organize your site’s information
    3. Keep your site organized with information architecture (IA)
    4. IA–The card sorting way
      1. To run a successful card sort, you need
    5. Sort your cards into related stacks
    6. Give your stacks names that are short and descriptive
    7. Which card sort is right?
    8. Arrange your cards into a site hierarchy
    9. IA Diagrams are just card sorts on paper
    10. IA Diagrams are NOT just links between pages
      1. If IA were about links...
    11. Move from pre-production to production
    12. Build Mark’s site structure
    13. Create index.html first...
    14. ...and then screen.css for style
    15. Pre-production to production: The complete process
    16. Your Web Design Toolbox
  11. 4. Layout and Design: Follow the Golden Rule
    1. Design is about audience
    2. Your newest gig: RPM Records
    3. Pinpoint RPM’s audience with personas
      1. Data about RPM Music’s users
    4. Let the personas be your guide...
    5. Resolution impacts design and layout
    6. Screen real estate determines how MUCH of your site will display in your user’s browser
      1. Screen RESOLUTION also affects screen real estate
    7. Build an XHTML and CSS foundation optimized for 1024x768
    8. Humans like things lined up and well-organized
    9. How wide should my grid be? Use the Golden Ratio
    10. The rule of thirds: A shortcut to the Golden Ratio
    11. RPM and the Golden Ratio: An (anti) case study
    12. Remember your personas?
    13. Remember your client?
    14. Set up RPM 2.0 with the Blueprint Framework
    15. Use Blueprint CSS rules to style RPM 2.0
    16. Time to get your RPM groove on
    17. Add some CSS to clean up the layout
    18. Finish off the content and navigation markup
    19. Add layout and typographic details with some more CSS
  12. 5. Designing With Color: Moving Beyond Monochrome
    1. Help support your local music scene
    2. 9Rules: The blog network gold standard
    3. Sometimes your choices are a bit... limited
    4. Color has an emotional impact
    5. The color wheel (where it all begins)
    6. Use the color wheel to choose colors that “go together”
    7. First, choose your BASE color
    8. Use the triadic scheme to create usable color patterns
    9. Get started on the SampleRate markup
    10. Create the basic page layout with CSS
    11. The opposite of heavy is... light
    12. Create a richer color palette with the tetradic color scheme
      1. Create contrast
      2. Emphasis-o-matic
    13. Let’s update the SampleRate CSS
    14. Your Web Design Toolbox
  13. 6. Smart Navigation: “In 2 Seconds, Click ‘Home’.”
    1. School’s back in session
    2. The first step to good navigation is good IA
    3. What’s really in a name, anyway?
    4. Approach #1: Horizontally-tabbed navigation
    5. Approach #2: Vertical navigation
    6. Block elements are your friends
    7. Let’s float the block navigation on the CNM site
    8. Icons don’t SAY anything... they just look pretty
    9. Add icons to your text, not the other way around
    10. Update the CNM XHTML to use textual links
    11. Now we can style our new block elements...
    12. Primary navigation shouldn’t change... but secondary navigation SHOULD
    13. Each sub-page gets its own secondary navigation
    14. Let’s style the navigation with our CSS
    15. Your Web Design Toolbox
  14. 7. Writing for the Web: Yes, You Scan!
    1. Build a better online newspaper
    2. Hipster Intelligencer Online: project specs
    3. The problem is TEXT
    4. Improve your content with the Inverted Pyramid
    5. Compress your copy
    6. Add lists to your XHTML
      1. Unordered list
      2. Ordered list
    7. Headings make your text even more scannable
    8. Mix fonts to emphasize headings and other text
    9. The level, not the size, of a heading conveys importance
    10. Your Web Design Toolbox
  15. 8. Accessibility: Inaccessibility Kills
    1. Audio-2-Go: inaccessible accessibility
    2. Accessibility means making your site work for EVERYONE
    3. How does your site READ?
    4. A site’s message should be clear...to EVERYONE
    5. Face it: computers are stupid!
    6. A computer will read your image’s ALT text
    7. Convert your long ALT text to a LONGDESC
    8. Your improvements are making a difference for SOME Audio-2-Go customers
    9. Accessibility is not just about screen readers
    10. Tabbing through a page should be ORDERLY
    11. Audio-2-Go is now a LOT more ACCESSIBLE
    12. WCAG Priority 1
    13. Color shouldn’t be your ONLY form of communication
    14. Life through web-safe eyes...
    15. Life through color-blind eyes...
    16. Audio-2-Go, via color-blind eyes
    17. Those stars are a real problem
    18. Background images are still your friend
    19. There’s more to ordering than just tabindexes
  16. 9. Listen to Your Users: The Pathway to Harmonious Design
    1. Problems over at RPM
    2. Let your audience speak to you through focus groups and surveys
    3. Surveys and focus groups aren’t free
      1. Survey Costs
      2. Focus Groups Costs
    4. Ask the right questions in your surveys
    5. The final RPM Music user survey
    6. The results are in!
    7. Responses to the open-ended question
    8. Web Browser Usage
    9. Fix RPM’s CSS bug by moving the hover property
      1. IE6 only supports :hover on link and anchor tags
    10. The building blocks of budget usability testing
    11. Use a moderator script to organize the test
    12. Friends and family can be a problem
    13. The results of the usability test–what the users are telling you
    14. A simple problem...
    15. Site stats give your users (another) voice
    16. Website analytics tools
      1. Mint
      2. Google Analytics
    17. Your Web Design Toolbox
  17. 10. Evolutionary Design: Keeping your site fresh
    1. Your portfolio so far...
    2. Keeping your site and content fresh keeps your users coming back
      1. Revisting Red Lantern
      2. Red Lantern To-Do List...
    3. Web design is about evolution, not
    4. Use CSS to evolve your site’s design
    5. Use JavaScript lightboxes to add interactivity to your site
    6. Add Facebox to the Red Lantern home page
    7. Edit your index file
    8. Adding blog functionality with WordPress
    9. Add a WordPress blog to the Red Lantern site
    10. Change the look and feel of your blog with themes
    11. Your Web Design Toolbox
  18. 11. The Business of Web Design: Mind Your Own Business
    1. The newest potential client: the Foo Bar
    2. What Foo Bar wants in a bid
    3. Let’s build a quick mockup for the Foo Bar
    4. Then, three months later...
    5. Welcome to the world of DESIGN PIRACY
    6. Red Lantern’s got a new prospective client
      1. Client Requirements
      2. Figure out a total bid...
    7. Use a proposal letter to deliver a detailed quote to a client
    8. The Trilobite podcast: a(nother) new challenge
    9. Use Creative Commons to license your work
    10. Creative Commons Licenses
    11. Your Web Design Toolbox
  19. A. Leftovers: The Top Ten Things (we didn’t cover)
    1. #1: Cross-cultural & international design
      1. Icons have different cultural meanings
      2. Different languages have different lengths
      3. Is that the month or the year?
      4. Is that really the flag you want to use?
    2. #2: The future of web markup
      1. HTML 5 vs. XHTML 2
      2. When are they coming?
    3. #3: The future of CSS
    4. #4: Designing for mobile devices
    5. #5: Developing web applications
    6. #6: Rhythm in your layout
    7. #7: Text contrast
    8. #8: Match link names with their destination page
    9. #9: Contrast is a fundamental layout device
      1. #10: More tools for design
  20. Index
  21. About the Authors
  22. Copyright

Product information

  • Title: Head First Web Design
  • Author(s): Ethan Watrall, Jeff Siarto
  • Release date: December 2008
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449369828