close

Head First Web Design

Head First Web Design

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.

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.

A collection of images from inside the book.

Table of Contents

1. Beauty is in the Eye of Your User: Building Beautiful Web Pages
2. Paper Covers Rock: Pre-Production
3. "So you take a left at the green water tower...": Organizing Your Site
4. Follow the Golden Rule: Layout and Design
5. Moving Beyond Monochrome: Designing With Color
6. "In 2 seconds, click ‘Home'.": Smart Navigation
7. Yes, You Scan!: Writing For The Web
8. Inaccessibility Kills: Accessibility
9. The Pathway to Harmonious Design: Listen to Your Users
10. Keeping Your Site Fresh: Evolutionary Design
11. Mind Your Own Business: The Business of Web Design
i. Leftovers: The Top Ten Things (We Didn't Cover)

Read Me:
What you should know before reading this book

This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we're working on at that point in the book. And the first time through, you need to begin at the beginning because the book makes assumptions about what you've already seen and learned.

We start off by teaching one of the most important concepts in web design—the design process—and then we move on to more specific design topics.

The design process is the foundation for developing a great-looking website. Each step gets you closer to better pages, and along the way, you create everything from a visual metaphor to a map of the site's content. Once you understand the overall design process, you can then dive into the details and begin building beautiful websites.

We advocate standards compliant XHTML & CSS.

All of the code that you write during the course of going through this book is standards compliant. This is really important to us, and we would (adamantly) argue that understanding how to think in and write standards compliant XHTML (XHTML 1.0 Strict) & CSS (CSS 2.1) is one of the hallmarks of a talented web designer. There will be no tables for layout, no style information in your markup, and all those <p> tags will be properly closed.

All of the code in this book is available on the Head First site.

Most of the projects in this book will require you to download the code for that particular chapter. Actually, you should just download all the code from the beginning so that you have it ready when the time comes. Sometimes we will ask you to make changes to code that already exists and will provide and "before" and "after" version of the markup and stylesheets.

Every bit of code is not fully explained

We assume that you have a working knowledge of XHTML and CSS and, therefore, don't make it a point to explain every nuance of the code. The important stuff is covered, and the downloadable examples are well documented. Remember, we're trying to make you a better designer not teach you the ins and outs of XHTML and CSS.

The terms "comps" and "storyboards" are used interchangeably.

We introduce storyboarding in this book as method for quickly mocking up design ideas without committing tons of time to code. Sometimes these are referred to as "storyboads," but other times we use the term "comp" (or composition) in reference to the same thing.

We assume that you are using modern browsers.

While we've taken every measure to make sure that our code is cross-browser compatible, you should use a modern browser (IE7+, Safari, Firefox) when putting together the sites in this book. While older browsers (notably IE6 and below) will work, you results may vary, as those browsers are buggy and incredibly finicky.

Our markup and CSS examples are as lean as possible

. Our readers tell us that it's frustrating to wade through 200 lines of markup or CSS looking for the two lines they need to understand. Most examples in this book are shown within the smallest possible context so that the part you're trying to learn is clear and simple. Don't expect all of the examples to be robust—or even complete. They are written specifically for learning and aren't always fully-functional.

We've placed files (markup, CSS, images, complete pages) on the Web so you can copy and paste them into your text/markup/code editor. You'll find them at on this page.

Code Downloads

Download code for the entire book here, or get it by chapter:

1. Beauty is in the Eye of Your User: Building Beautiful Web Pages
2. Paper Covers Rock: Pre-Production
3. "So you take a left at the green water tower...": Organizing Your Site
4. Follow the Golden Rule: Layout and Design
5. Moving Beyond Monochrome: Designing With Color
6. "In 2 seconds, click ‘Home'.": Smart Navigation
7. Yes, You Scan!: Writing For The Web
8. Inaccessibility Kills: Accessibility
9. The Pathway to Harmonious Design: Listen to Your Users
10. Keeping Your Site Fresh: Evolutionary Design
11. Mind Your Own Business: The Business of Web Design

Example Web Sites

Chapter 1: Red Lantern Design
Chapter 2: Mark in Japan
Chapter 3: Mark in Japan
Chapter 4: RPM Music
Chapter 5: Sample Rate
Chapter 6: College of New Media Before, College of New Media Final
Chapter 7: Yes, You Scan!
Chapter 8: Audio 2 Go Before, Audio 2 Go Final
Chapter 9: RMP Music
Chapter 10: Red Lantern Design
Chapter 11: The Foo Bar, The Foo Bar Ripped

Advance Praise

"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
Order
(opens a new window)

Buy 2 books, get 1 free!

Buy 2 books and get the third free! Use the coupon code OPC10 when you check out.

Who is this book for?

If you can answer "yes" to all of these, this book is for you:

  • Are you comfortable with XHTML & CSS but don't have any experience with web design?

  • Do you consider yourself a web developer (working in a fun environment like PHP, Ruby on Rails, .NET) and want to become a better web designer?
  • Do you need to understand web design for a course, your line of work, or you simply want to impress people at parties with your vast knowledge of The Golden Ratio and the Web Content Accessibility Guidelines?

You should probably back away from this book if you can answer "yes" to any of these:

  • Are you someone who doesn't have any experience with HTML/XHTML & CSS? (In this case, pick up Head First HTML first.)
  • Are you an accomplished web or graphic designer looking for a reference book?
  • Are you someone who likes to build webpages with tools like Frontpage and Dreamweaver, so you don't ever have to look at code?