- Head First Web Design
- Dedication
- A Note Regarding Supplemental Files
- Head First Web Design
- 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 you’re thinking
- We know what your brain is thinking
- Metacognition: thinking about thinking
- Here’s what WE did
- Here’s 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
- Show Jane some basic design sketches
- Sketches keep the focus on functionality
- Don’t 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
- A clear visual metaphor helps reinforce your site’s theme
- A theme represents your site’s 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
- Don’t design for yourself!
- Let’s 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 site’s information
- Keep your site organized with information architecture (IA)
- IA–The card sorting way
- 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
- Move from pre-production to production
- Build Mark’s 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 RPM’s audience with personas
- Let the personas be your guide...
- Resolution impacts design and layout
- Screen real estate determines how MUCH of your site will display in your user’s browser
- 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
- Let’s update the SampleRate CSS
- Your Web Design Toolbox
- 6. Smart Navigation: “In 2 Seconds, Click ‘Home’.”
- School’s back in session
- The first step to good navigation is good IA
- What’s really in a name, anyway?
- Approach #1: Horizontally-tabbed navigation
- Approach #2: Vertical navigation
- Block elements are your friends
- Let’s float the block navigation on the CNM site
- Icons don’t 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 shouldn’t change... but secondary navigation SHOULD
- Each sub-page gets its own secondary navigation
- Let’s 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
- 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 site’s message should be clear...to EVERYONE
- Face it: computers are stupid!
- A computer will read your image’s 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 shouldn’t 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
- There’s 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 aren’t free
- 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 RPM’s CSS bug by moving the hover property
- 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 test–what the users are telling you
- A simple problem...
- Site stats give your users (another) voice
- Website analytics tools
- 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
- Web design is about evolution, not
- Use CSS to evolve your site’s 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
- Let’s build a quick mockup for the Foo Bar
- Then, three months later...
- Welcome to the world of DESIGN PIRACY
- Red Lantern’s got a new prospective client
- 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 didn’t cover)
- Index
- About the Authors
- Copyright
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.