Head First Web Design. A Learner's Companion to Accessible, Usable, Engaging Websites Ethan Watrall, Jeff Siarto

Kup polskie wydanie:

Spis treści książki

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

pokaż cały spis treści

ukryj recenzje