book

Head First Web Design

by Ethan Watrall, Jeff Siarto

December 2008

Beginner

500 pages

10h 27m

English

O'Reilly Media, Inc.

Read now

Unlock full access

What will you learn from this book?Why does this book look so different?
Who is this book for?Who should probably back away from this book?We know what you’re thinkingWe know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead MeThe technical review teamAcknowledgmentsSafari® Books Online
Your big chance with Red Lantern DesignWhere do you start?Draw up a blueprint FIRSTDetermine your top level navigationPut it all in contextHorizontal tabsHorizontal buttonsVertical menuVertical tabsShow Jane some basic design sketchesSketches keep the focus on functionalityDon’t ruin a good design with bad copyWhat makes text scannable?Web design is all about communication, and your USERSYour Web Design Toolbox
Your first “international” gig...Think before you codeStart with a visual metaphorA clear visual metaphor helps reinforce your site’s themeA theme represents your site’s contentBrainstorming: The path to a visual metaphorDevelop a theme and visual metaphor for MarkYour page elements shape your visual metaphorBuild a quick XHTML mock-up for MarkAnd the CSS...Use storyboards to develop ideas and save time without codeDon’t design for yourself!Let’s create a storyboard for MarkYour Web Design Toolbox
Fit your content into your layoutOrganize your site’s informationKeep your site organized with information architecture (IA)IA–The card sorting wayTo run a successful card sort, you needSort your cards into related stacksGive your stacks names that are short and descriptiveWhich card sort is right?Arrange your cards into a site hierarchyIA Diagrams are just card sorts on paperIA Diagrams are NOT just links between pagesIf IA were about links...Move from pre-production to productionBuild Mark’s site structureCreate index.html first......and then screen.css for stylePre-production to production: The complete processYour Web Design Toolbox

Design is about audienceYour newest gig: RPM RecordsPinpoint RPM’s audience with personasData about RPM Music’s usersLet the personas be your guide...Resolution impacts design and layoutScreen real estate determines how MUCH of your site will display in your user’s browserScreen RESOLUTION also affects screen real estateBuild an XHTML and CSS foundation optimized for 1024x768Humans like things lined up and well-organizedHow wide should my grid be? Use the Golden RatioThe rule of thirds: A shortcut to the Golden RatioRPM and the Golden Ratio: An (anti) case studyRemember your personas?Remember your client?Set up RPM 2.0 with the Blueprint FrameworkUse Blueprint CSS rules to style RPM 2.0Time to get your RPM groove onAdd some CSS to clean up the layoutFinish off the content and navigation markupAdd layout and typographic details with some more CSS
Help support your local music scene9Rules: The blog network gold standardSometimes your choices are a bit... limitedColor has an emotional impactThe color wheel (where it all begins)Use the color wheel to choose colors that “go together”First, choose your BASE colorUse the triadic scheme to create usable color patternsGet started on the SampleRate markupCreate the basic page layout with CSSThe opposite of heavy is... lightCreate a richer color palette with the tetradic color schemeCreate contrastEmphasis-o-maticLet’s update the SampleRate CSSYour Web Design Toolbox
School’s back in sessionThe first step to good navigation is good IAWhat’s really in a name, anyway?Approach #1: Horizontally-tabbed navigationApproach #2: Vertical navigationBlock elements are your friendsLet’s float the block navigation on the CNM siteIcons don’t SAY anything... they just look prettyAdd icons to your text, not the other way aroundUpdate the CNM XHTML to use textual linksNow we can style our new block elements...Primary navigation shouldn’t change... but secondary navigation SHOULDEach sub-page gets its own secondary navigationLet’s style the navigation with our CSSYour Web Design Toolbox
Build a better online newspaperHipster Intelligencer Online: project specsThe problem is TEXTImprove your content with the Inverted PyramidCompress your copyAdd lists to your XHTMLUnordered listOrdered listHeadings make your text even more scannableMix fonts to emphasize headings and other textThe level, not the size, of a heading conveys importanceYour Web Design Toolbox
Audio-2-Go: inaccessible accessibilityAccessibility means making your site work for EVERYONEHow does your site READ?A site’s message should be clear...to EVERYONEFace it: computers are stupid!A computer will read your image’s ALT textConvert your long ALT text to a LONGDESCYour improvements are making a difference for SOME Audio-2-Go customersAccessibility is not just about screen readersTabbing through a page should be ORDERLYAudio-2-Go is now a LOT more ACCESSIBLEWCAG Priority 1Color shouldn’t be your ONLY form of communicationLife through web-safe eyes...Life through color-blind eyes...Audio-2-Go, via color-blind eyesThose stars are a real problemBackground images are still your friendThere’s more to ordering than just tabindexes
Problems over at RPMLet your audience speak to you through focus groups and surveysSurveys and focus groups aren’t freeSurvey CostsFocus Groups CostsAsk the right questions in your surveysThe final RPM Music user surveyThe results are in!Responses to the open-ended questionWeb Browser UsageFix RPM’s CSS bug by moving the hover propertyIE6 only supports :hover on link and anchor tagsThe building blocks of budget usability testingUse a moderator script to organize the testFriends and family can be a problemThe results of the usability test–what the users are telling youA simple problem...Site stats give your users (another) voiceWebsite analytics toolsMintGoogle AnalyticsYour Web Design Toolbox
Your portfolio so far...Keeping your site and content fresh keeps your users coming backRevisting Red LanternRed Lantern To-Do List...Web design is about evolution, notUse CSS to evolve your site’s designUse JavaScript lightboxes to add interactivity to your siteAdd Facebox to the Red Lantern home pageEdit your index fileAdding blog functionality with WordPressAdd a WordPress blog to the Red Lantern siteChange the look and feel of your blog with themesYour Web Design Toolbox
The newest potential client: the Foo BarWhat Foo Bar wants in a bidLet’s build a quick mockup for the Foo BarThen, three months later...Welcome to the world of DESIGN PIRACYRed Lantern’s got a new prospective clientClient RequirementsFigure out a total bid...Use a proposal letter to deliver a detailed quote to a clientThe Trilobite podcast: a(nother) new challengeUse Creative Commons to license your workCreative Commons LicensesYour Web Design Toolbox
#1: Cross-cultural & international designIcons have different cultural meaningsDifferent languages have different lengthsIs that the month or the year?Is that really the flag you want to use?#2: The future of web markupHTML 5 vs. XHTML 2When are they coming?#3: The future of CSS#4: Designing for mobile devices#5: Developing web applications#6: Rhythm in your layout#7: Text contrast#8: Match link names with their destination page#9: Contrast is a fundamental layout device#10: More tools for design

Overview

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.