Home Page Icon
Home Page
Table of Contents for
Cover
Close
Cover
by Jeff Siarto, Ethan Watrall
Head First Web Design
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 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
Horizontal tabs
Horizontal buttons
Vertical menu
Vertical tabs
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
Start with a visual metaphor
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
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 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
Data about RPM Music’s 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 user’s 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
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
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 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
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 RPM’s 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 test–what 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 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
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 didn’t 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
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Head First Web Design
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset