What do you think?
Rate this book
Head First Series
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.
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.
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.
498 pages, Paperback
First published January 1, 2008
18 people are currently reading
273 people want to read
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 15 of 15 reviews
March 14, 2011
I'm about a third of the way through, and this is one of the few nonfiction books I've ever felt that "don't want to put it down" feeling about. Love it! I took a whole 3-credit course on web design at a very good art school, and the first third of this book has done more for my confidence and abilities as a designer than that whole class and a few years' experience in web development. It gives a very clear, concrete, sensible approach and explains WHY they tell you to do things that way. It's totally web design demystified--pure gold.
...
Overall, I really liked this book. Some of the case study/examples toward the end were a little contrived (they added an "Etc." link to the navigation of a site developed earlier in the book, so that during the user testing stuff, they could have users complain about how stupid and meaningless it was. Also, after all the talk about doing mockups, they coded up a working website and handed it to a spec client, who stole it and didn't hire them. Then, instead of demanding to be paid, they demanded he take it down, which seemed a little lose-lose.)
Going through and taking notes, it seems like there really wasn't very much covered, but the beauty of this book is all the exercises as you go along. Everything really sinks in much better if you do them, or at least think about them.
Notes:
Ch 1. Start with Information Architecture. What info is there? Categorize and organize into a tree structure. First row becomes top-level navigation. Then do B&W sketches to figure out info, arrangement, and navigation. Then do a mockup in Photoshop or similar to play with the colors and get more realistic. Once you have it all figured out, do it in code.
Ch 2 . Focus on theme--what site is about (purpose and content). Add visual metaphor to convey it as much as possible.
Ch 3. Fit content into layout--make sure your information architecture produced clear, unambiguous categories, and organize everything by them. Try redoing the information architecture by creating a 3x5 card for each piece of content and sorting them into piles. Have other people do it and see if they come up with the same piles/categories.
Ch 4. Find out the demographics of the site's audience and create 1-2 personas. Design with them in minde. Make everything line up and split things (ex. main column vs. sidebar) using the golden mean (.62 or approximate using thirds). Give the most weight to the most important content.
Ch 5. 9rules.com -- huge, prestigious blog aggregator/network. Submissions allowed during a few 24-hour windows per yer, when 30-40/1000s get accepted.
Think about the feelings you want the site to evoke. Choose a base color that works with that. Then go for a triadic color scheme (3 colors equally spaced around color wheel) or tetradic (2 pairs: 2 right across from each other, the other two each 20 degrees counter-clockwise from one of the first two) Tool for this: Kuler (kuler.adobe.com) Once you've chosen colors, pick parts of page to use those colors. Area of most contrast = most emphasis.
Ch 6. Navigation possibilities: horizontal tabs, vertical tabs. Keep it consistent. If using icons, make sure there's text to go with them. Top-level navigation shouldn't change throughout site, but secondary should.
Ch 7. Make your copy scannable. People can't read as fast on the screen, and sans-serif fonts are easier than serif ones to read on the screen. Use sans-serif for body and serif for headings, perhaps. Use the inverted pyramid. Tighten up the writing and use lists and headings as much as reasonable.
Ch 8. Try out site using a screen reader: JAWS for Windows, or VoiceOver in Mac (part of OSX). Use alt text for images. You can also use longdesc attribute of img to link user to another page with a longer description.
Make sure the tab order makes sense, too. If not, set tabindex="1" &c for all of your links. Don't convey information using only color. Organize documents so they can be read without stylesheets. Make sure all tables have row and column headings.
Accessibility checklist at www.w3.org/TR/WCAGIO/full-checklist.html
Ch 9. Use surveys and/or focus groups to find out what readers really think.
Ch 10. Gradually evolve the design over time to keep it fresh.
Ch 11 If someone steals your design, start with a polite email. If you don't get a response, send a follow-up and cc spamreport@google.com -- Google is committed to stomping out clear violations of copyright. If still no joy, copyright lawyer.
To do an estimate for a design job, figure:
- initial input time (requirements gathering)
- conceptual/preproduction (info architecture, sketches, mockups)
- drafts and design revisions (back-and-forth about design)
- production (actually building the site in html, CSS, whatever else)
- other costs (travel, supplies, other time or materials billable to client)
American Institute of Graphic Artists publishes a handbook of pricing and ethical guidelines--includes salaries, hourly rates, industry standards.
Bid sheet--include:
Client name
Project Description
Initial input time
- Client meetings
- background research
- travel
Pre-production
- in-house meetings
- information architecture
- sketches & mockups
- theme concepts
Drafts and design revisions
- client meetings
- storyboards
- storyboard revisions
Production time
- XHTML and CSS
- back-end programming
- graphics and artwork
- copywriting
- validation and debugging
Misc expenses
- fonts and graphics
- software
- general supplies
--figure hours * rate = total for each line, then total overall
Give breakdown in proposal.
Appendix i
Use rhythm (repetition of design elements) in your design. Match link names with their destination pages.
Tools:
- Pencil - open source app for storyboards, interface prototypes, design diagrams. Add-on for firefox. www.evolus.vn/pencil
- WriteMaps - free web app for developing info architecture. writemaps.com
- WebDeveloper - firefox add-on lets you edit and organize CSS, html of current page http://chrispederick.com/work/web-dev...
- CSSTidy - open source desktop app to parse and optimize CSS csstidy.sourceforge.net
- Firebug free, open source Firefox extension to edit and CSS, view page's download time, debug and execute javascript, other stuff http://getfirebug.com
...
Overall, I really liked this book. Some of the case study/examples toward the end were a little contrived (they added an "Etc." link to the navigation of a site developed earlier in the book, so that during the user testing stuff, they could have users complain about how stupid and meaningless it was. Also, after all the talk about doing mockups, they coded up a working website and handed it to a spec client, who stole it and didn't hire them. Then, instead of demanding to be paid, they demanded he take it down, which seemed a little lose-lose.)
Going through and taking notes, it seems like there really wasn't very much covered, but the beauty of this book is all the exercises as you go along. Everything really sinks in much better if you do them, or at least think about them.
Notes:
Ch 1. Start with Information Architecture. What info is there? Categorize and organize into a tree structure. First row becomes top-level navigation. Then do B&W sketches to figure out info, arrangement, and navigation. Then do a mockup in Photoshop or similar to play with the colors and get more realistic. Once you have it all figured out, do it in code.
Ch 2 . Focus on theme--what site is about (purpose and content). Add visual metaphor to convey it as much as possible.
Ch 3. Fit content into layout--make sure your information architecture produced clear, unambiguous categories, and organize everything by them. Try redoing the information architecture by creating a 3x5 card for each piece of content and sorting them into piles. Have other people do it and see if they come up with the same piles/categories.
Ch 4. Find out the demographics of the site's audience and create 1-2 personas. Design with them in minde. Make everything line up and split things (ex. main column vs. sidebar) using the golden mean (.62 or approximate using thirds). Give the most weight to the most important content.
Ch 5. 9rules.com -- huge, prestigious blog aggregator/network. Submissions allowed during a few 24-hour windows per yer, when 30-40/1000s get accepted.
Think about the feelings you want the site to evoke. Choose a base color that works with that. Then go for a triadic color scheme (3 colors equally spaced around color wheel) or tetradic (2 pairs: 2 right across from each other, the other two each 20 degrees counter-clockwise from one of the first two) Tool for this: Kuler (kuler.adobe.com) Once you've chosen colors, pick parts of page to use those colors. Area of most contrast = most emphasis.
Ch 6. Navigation possibilities: horizontal tabs, vertical tabs. Keep it consistent. If using icons, make sure there's text to go with them. Top-level navigation shouldn't change throughout site, but secondary should.
Ch 7. Make your copy scannable. People can't read as fast on the screen, and sans-serif fonts are easier than serif ones to read on the screen. Use sans-serif for body and serif for headings, perhaps. Use the inverted pyramid. Tighten up the writing and use lists and headings as much as reasonable.
Ch 8. Try out site using a screen reader: JAWS for Windows, or VoiceOver in Mac (part of OSX). Use alt text for images. You can also use longdesc attribute of img to link user to another page with a longer description.
Make sure the tab order makes sense, too. If not, set tabindex="1" &c for all of your links. Don't convey information using only color. Organize documents so they can be read without stylesheets. Make sure all tables have row and column headings.
Accessibility checklist at www.w3.org/TR/WCAGIO/full-checklist.html
Ch 9. Use surveys and/or focus groups to find out what readers really think.
Ch 10. Gradually evolve the design over time to keep it fresh.
Ch 11 If someone steals your design, start with a polite email. If you don't get a response, send a follow-up and cc spamreport@google.com -- Google is committed to stomping out clear violations of copyright. If still no joy, copyright lawyer.
To do an estimate for a design job, figure:
- initial input time (requirements gathering)
- conceptual/preproduction (info architecture, sketches, mockups)
- drafts and design revisions (back-and-forth about design)
- production (actually building the site in html, CSS, whatever else)
- other costs (travel, supplies, other time or materials billable to client)
American Institute of Graphic Artists publishes a handbook of pricing and ethical guidelines--includes salaries, hourly rates, industry standards.
Bid sheet--include:
Client name
Project Description
Initial input time
- Client meetings
- background research
- travel
Pre-production
- in-house meetings
- information architecture
- sketches & mockups
- theme concepts
Drafts and design revisions
- client meetings
- storyboards
- storyboard revisions
Production time
- XHTML and CSS
- back-end programming
- graphics and artwork
- copywriting
- validation and debugging
Misc expenses
- fonts and graphics
- software
- general supplies
--figure hours * rate = total for each line, then total overall
Give breakdown in proposal.
Appendix i
Use rhythm (repetition of design elements) in your design. Match link names with their destination pages.
Tools:
- Pencil - open source app for storyboards, interface prototypes, design diagrams. Add-on for firefox. www.evolus.vn/pencil
- WriteMaps - free web app for developing info architecture. writemaps.com
- WebDeveloper - firefox add-on lets you edit and organize CSS, html of current page http://chrispederick.com/work/web-dev...
- CSSTidy - open source desktop app to parse and optimize CSS csstidy.sourceforge.net
- Firebug free, open source Firefox extension to edit and CSS, view page's download time, debug and execute javascript, other stuff http://getfirebug.com
June 19, 2010
This is the second Head First book I read, and like the first one, HTML with CSS, which I read some months ago, this is a fun and easy to follow book. Even though the book is tailored to people who have some coding under their belt, it's a great starting point for a complete novice like myself. It guides you through the whole process of web design. From the pre-planning, to organizing, to layout, to user testing, and even to the business side of things. It's not going to turn you into a web designer just by reading it, but it gives you the essentials to start at the craft.
October 6, 2014
A little dated technically by now but a good easy-to-read refresher of web design topics.
November 8, 2010
This is a really thick book and it's very helpful. It's got lots of pictures and illustrations and it's easy to read. You can pick it up and flip through it to read about the specific topic you want to know about, or you can read it straight through and learn lots and lots about web design. There are even exercises to do.
I got this book from the library. It's due on Wednesday and I can't renew it. I think I'm going to buy a copy. It's really a good book.
I got this book from the library. It's due on Wednesday and I can't renew it. I think I'm going to buy a copy. It's really a good book.
October 19, 2016
Some of this book felt like common sense. I guess it's good to cover the basics. It was nice to see the proper web designer's process broken down - it just dragged on a little bit.
The last chapter was great. I wish Head First had spent more time discussing the business end of the process. That will be particularly helpful to those of you who intend to make a living out of web design.
The last chapter was great. I wish Head First had spent more time discussing the business end of the process. That will be particularly helpful to those of you who intend to make a living out of web design.
June 9, 2011
This book told me it was not for me because I do not have a working knowledge of HTML and CSS. I read it anyway skipping over the coding parts and found it extremely helpful in the basics of web design. Now I know what a good design consists of; so I can have my husband code it for me:)
December 14, 2011
This was a good book - after I was comfortable with HTML and CSS. It retaught me some basic and solid design concepts, helped me think your methodologies and working with clients. It even taught me some good stuff for my HTML and CSS.
November 30, 2014
A really good book for web design. Slightly dated by using XHTML, but it had a lot of great tips for working with layouts and colors. I will be keeping this one too. Huge help in me building a website.
October 2, 2008
This is another good book for anyone wanting to either begin web design or just brush up on some things.
Another book I have given my son to read.
Another book I have given my son to read.
November 6, 2012
I didn't learn much from reading this. If I hadn't read Head First HTML with CSS & XHTML and taken a course on web design, maybe the book would have been informative.
August 4, 2012
I love it. Give me the big picture, lots of illustrations and I'll look up the details later.
September 15, 2012
كتاب مفيد وممتع في نفس الوقت ^_^
أسلوب الكاتب روووووووووووووووعة
أحلى كتاب قريته عن تصميم المواقع
أسلوب الكاتب روووووووووووووووعة
أحلى كتاب قريته عن تصميم المواقع
October 1, 2012
fun book on web design. explains concepts and process of designing web sites, uses great examples and mockups for site design including information architecture, color, accessibility and much more.
Read
March 13, 2015Location: ND6 IRC
Accession no: DL026854
Accession no: DL026854
Displaying 1 - 15 of 15 reviews