Books & Videos

Table of Contents

  1. Chapter 1 Building Beautiful Web Pages: Beauty is in the eye of your user

    1. Your big chance with Red Lantern Design

    2. Where do you start?

    3. Draw up a blueprint FIRST

    4. Determine your top level navigation

    5. Put it all in context

    6. Show Jane some basic design sketches

    7. Sketches keep the focus on functionality

    8. Don’t ruin a good design with bad copy

    9. What makes text scannable?

    10. Web design is all about communication, and your USERS

    11. Your Web Design Toolbox

  2. Chapter 2 Pre-Production: Paper covers rock

    1. Your first “international” gig...

    2. Think before you code

    3. A clear visual metaphor helps reinforce your site’s theme

    4. A theme represents your site’s content

    5. Brainstorming: The path to a visual metaphor

    6. Develop a theme and visual metaphor for Mark

    7. Your page elements shape your visual metaphor

    8. Build a quick XHTML mock-up for Mark

    9. And the CSS...

    10. Use storyboards to develop ideas and save time without code

    11. Don’t design for yourself!

    12. Let’s create a storyboard for Mark

    13. Your Web Design Toolbox

  3. Chapter 3 Organizing Your Site: “So you take a left at the green water tower...”

    1. Fit your content into your layout

    2. Organize your site’s information

    3. Keep your site organized with information architecture (IA)

    4. IA–The card sorting way

    5. Sort your cards into related stacks

    6. Give your stacks names that are short and descriptive

    7. Which card sort is right?

    8. Arrange your cards into a site hierarchy

    9. IA Diagrams are just card sorts on paper

    10. IA Diagrams are NOT just links between pages

    11. Move from pre-production to production

    12. Build Mark’s site structure

    13. Create index.html first...

    14. ...and then screen.css for style

    15. Pre-production to production: The complete process

    16. Your Web Design Toolbox

  4. Chapter 4 Layout and Design: Follow the Golden Rule

    1. Design is about audience

    2. Your newest gig: RPM Records

    3. Pinpoint RPM’s audience with personas

    4. Let the personas be your guide...

    5. Resolution impacts design and layout

    6. Screen real estate determines how MUCH of your site will display in your user’s browser

    7. Build an XHTML and CSS foundation optimized for 1024x768

    8. Humans like things lined up and well-organized

    9. How wide should my grid be? Use the Golden Ratio

    10. The rule of thirds: A shortcut to the Golden Ratio

    11. RPM and the Golden Ratio: An (anti) case study

    12. Remember your personas?

    13. Remember your client?

    14. Set up RPM 2.0 with the Blueprint Framework

    15. Use Blueprint CSS rules to style RPM 2.0

    16. Time to get your RPM groove on

    17. Add some CSS to clean up the layout

    18. Finish off the content and navigation markup

    19. Add layout and typographic details with some more CSS

  5. Chapter 5 Designing With Color: Moving Beyond Monochrome

    1. Help support your local music scene

    2. 9Rules: The blog network gold standard

    3. Sometimes your choices are a bit... limited

    4. Color has an emotional impact

    5. The color wheel (where it all begins)

    6. Use the color wheel to choose colors that “go together”

    7. First, choose your BASE color

    8. Use the triadic scheme to create usable color patterns

    9. Get started on the SampleRate markup

    10. Create the basic page layout with CSS

    11. The opposite of heavy is... light

    12. Create a richer color palette with the tetradic color scheme

    13. Let’s update the SampleRate CSS

    14. Your Web Design Toolbox

  6. Chapter 6 Smart Navigation: “In 2 Seconds, Click ‘Home’.”

    1. School’s back in session

    2. The first step to good navigation is good IA

    3. What’s really in a name, anyway?

    4. Approach #1: Horizontally-tabbed navigation

    5. Approach #2: Vertical navigation

    6. Block elements are your friends

    7. Let’s float the block navigation on the CNM site

    8. Icons don’t SAY anything... they just look pretty

    9. Add icons to your text, not the other way around

    10. Update the CNM XHTML to use textual links

    11. Now we can style our new block elements...

    12. Primary navigation shouldn’t change... but secondary navigation SHOULD

    13. Each sub-page gets its own secondary navigation

    14. Let’s style the navigation with our CSS

    15. Your Web Design Toolbox

  7. Chapter 7 Writing for the Web: Yes, You Scan!

    1. Build a better online newspaper

    2. Hipster Intelligencer Online: project specs

    3. The problem is TEXT

    4. Improve your content with the Inverted Pyramid

    5. Compress your copy

    6. Add lists to your XHTML

    7. Headings make your text even more scannable

    8. Mix fonts to emphasize headings and other text

    9. The level, not the size, of a heading conveys importance

    10. Your Web Design Toolbox

  8. Chapter 8 Accessibility: Inaccessibility Kills

    1. Audio-2-Go: inaccessible accessibility

    2. Accessibility means making your site work for EVERYONE

    3. How does your site READ?

    4. A site’s message should be clear...to EVERYONE

    5. Face it: computers are stupid!

    6. A computer will read your image’s ALT text

    7. Convert your long ALT text to a LONGDESC

    8. Your improvements are making a difference for SOME Audio-2-Go customers

    9. Accessibility is not just about screen readers

    10. Tabbing through a page should be ORDERLY

    11. Audio-2-Go is now a LOT more ACCESSIBLE

    12. WCAG Priority 1

    13. Color shouldn’t be your ONLY form of communication

    14. Life through web-safe eyes...

    15. Life through color-blind eyes...

    16. Audio-2-Go, via color-blind eyes

    17. Those stars are a real problem

    18. Background images are still your friend

    19. There’s more to ordering than just tabindexes

  9. Chapter 9 Listen to Your Users: The Pathway to Harmonious Design

    1. Problems over at RPM

    2. Let your audience speak to you through focus groups and surveys

    3. Surveys and focus groups aren’t free

    4. Ask the right questions in your surveys

    5. The final RPM Music user survey

    6. The results are in!

    7. Responses to the open-ended question

    8. Web Browser Usage

    9. Fix RPM’s CSS bug by moving the hover property

    10. The building blocks of budget usability testing

    11. Use a moderator script to organize the test

    12. Friends and family can be a problem

    13. The results of the usability test–what the users are telling you

    14. A simple problem...

    15. Site stats give your users (another) voice

    16. Website analytics tools

    17. Your Web Design Toolbox

  10. Chapter 10 Evolutionary Design: Keeping your site fresh

    1. Your portfolio so far...

    2. Keeping your site and content fresh keeps your users coming back

    3. Web design is about evolution, not

    4. Use CSS to evolve your site’s design

    5. Use JavaScript lightboxes to add interactivity to your site

    6. Add Facebox to the Red Lantern home page

    7. Edit your index file

    8. Adding blog functionality with WordPress

    9. Add a WordPress blog to the Red Lantern site

    10. Change the look and feel of your blog with themes

    11. Your Web Design Toolbox

  11. Chapter 11 The Business of Web Design: Mind Your Own Business

    1. The newest potential client: the Foo Bar

    2. What Foo Bar wants in a bid

    3. Let’s build a quick mockup for the Foo Bar

    4. Then, three months later...

    5. Welcome to the world of DESIGN PIRACY

    6. Red Lantern’s got a new prospective client

    7. Use a proposal letter to deliver a detailed quote to a client

    8. The Trilobite podcast: a(nother) new challenge

    9. Use Creative Commons to license your work

    10. Creative Commons Licenses

    11. Your Web Design Toolbox

  1. Appendix Leftovers: The Top Ten Things (we didn’t cover)

    1. #1: Cross-cultural & international design

    2. #2: The future of web markup

    3. #3: The future of CSS

    4. #4: Designing for mobile devices

    5. #5: Developing web applications

    6. #6: Rhythm in your layout

    7. #7: Text contrast

    8. #8: Match link names with their destination page

    9. #9: Contrast is a fundamental layout device