Web Design For Dummies®, 2nd Edition

Web Design For Dummies®, 2nd Edition

Released March 2006
Publisher(s): For Dummies
ISBN: 9780471781172

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

How many times have you visited a Web site and thought that you could do a better job if only you had the knowledge and skills?   Or perhaps you have a great idea for a Web site but don’t know how to get started? What was once exclusively a task for professionals, Web designing, has become more accessible to amateurs, thanks to loads of handy software. With Web Design For Dummies, you will be able to design your own Web site like a pro.

Web design requires many programs to make a Website attractive and fun, including:

  • Using Web editors like Dreamweaver

  • Image editing tools like Photoshop elements

  • Drawing utensils like Illustrator

  • Background markup and scripting languages like HTML and CSS

This fun guide covers all of the topics that every aspiring Web designer should know.   This book offers advice on:

  • Designing for your audience

  • Building a solid framework for easy navigation

  • Creating appealing graphics that work with the site

  • Choosing the proper type and colors

  • Tweaking the HTML to make everything work correctly

  • Applying next-step technologies including JavaScript

  • Parlaying your skills into paid work

With expert guidance from Lisa Lopuck, a pioneer in interactive media design and the Senior Producer at Disney, you will be creating superb Web pages that will charm and impress all of your visitors!

Table of contents

  1. Copyright
  2. About the Author
  3. Author's Acknowledgments
  4. Publisher's Acknowledgments
  5. Introduction
    1. About This Book
    2. Conventions Used in This Book
    3. Foolish Assumptions
    4. What You Shouldn't Read
    5. How This Book Is Organized
      1. Part I: The Web Design Kick-Off
      2. Part II: User-Friendly Design
      3. Part III: Designing Web Graphics
      4. Part IV: Producing the Final Web Site
      5. Part V: The Part of Tens
    6. Icons Used in This Book
    7. I'm Here if You Need Me!
  6. I. The Web Design Kick-Off
    1. 1. So You Want to Be a Web Designer?
      1. 1.1. The People Involved
        1. 1.1.1. Business folks
        2. 1.1.2. Producer folks
        3. 1.1.3. Visual designers
        4. 1.1.4. Information architects
        5. 1.1.5. Content designers
        6. 1.1.6. Media specialists
        7. 1.1.7. HTML slingers
        8. 1.1.8. Programmers
      2. 1.2. Getting Started in Web Design
      3. 1.3. Getting Experience
    2. 2. From Concept to Execution
      1. 2.1. Phase 1: Definition
        1. 2.1.1. Understanding site goals
        2. 2.1.2. Gathering business requirements
        3. 2.1.3. Building a project plan
      2. 2.2. Phase 2: Design
        1. 2.2.1. Creating the blueprint for the site
        2. 2.2.2. Designing a plan for each page
        3. 2.2.3. Implementing user testing
        4. 2.2.4. Putting together a content plan
        5. 2.2.5. Establishing "look-n-feel"
        6. 2.2.6. Getting input from a focus group
      3. 2.3. Phase 3: Development
        1. 2.3.1. Producing final Web graphics
        2. 2.3.2. Content development
        3. 2.3.3. Media development
        4. 2.3.4. Holding it all together with HTML
        5. 2.3.5. Databases, programming, and things to make your head spin
      4. 2.4. Phase 4: Testing and Launch
        1. 2.4.1. Quality assurance
        2. 2.4.2. Launch day
      5. 2.5. Phase 5: Maintenance
  7. II. User-Friendly Design
    1. 3. Designing the Right Site for the Right Crowd
      1. 3.1. Who Is the Audience?
        1. 3.1.1. Question checklist for clients
        2. 3.1.2. Personas
        3. 3.1.3. Scenarios
      2. 3.2. Building an Outline for Your Site
        1. 3.2.1. Making a wish list of content, bells, and whistles
        2. 3.2.2. Categorizing and prioritizing information
        3. 3.2.3. Following the five-to-seven rule
      3. 3.3. Crafting a Site Map
        1. 3.3.1. Reading between the lines and boxes
        2. 3.3.2. Developing your own set of symbols
        3. 3.3.3. Everyone's singing from the same songsheet
        4. 3.3.4. The official page index and naming conventions
      4. 3.4. Building a Map for a Site Redesign
        1. 3.4.1. Deconstructing a Web site
        2. 3.4.2. Finishing the site map
      5. 3.5. Developing a Marketing Plan
        1. 3.5.1. Offline marketing
        2. 3.5.2. Online marketing
    2. 4. Organizing and Navigating Web Content
      1. 4.1. Page-Level Planning
        1. 4.1.1. Mapping out content zones
        2. 4.1.2. Wireframing
      2. 4.2. Presenting Content on the Page
        1. 4.2.1. Indicating text on a wireframe
        2. 4.2.2. Working with a content management system
        3. 4.2.3. Maximizing your space
        4. 4.2.4. Indicating Flash in your wireframes
      3. 4.3. Getting Around in Style
        1. 4.3.1. For the jet set: Global navigation
        2. 4.3.2. Section navigation
        3. 4.3.3. For nature lovers: Leaving a trail of bread crumbs
        4. 4.3.4. When jets and nature lovers collide
        5. 4.3.5. Keeping metaphors under adult supervision
    3. 5. Web User Interface Design
      1. 5.1. Interaction Design
        1. 5.1.1. Creating user flow diagrams
        2. 5.1.2. Going with the flow
      2. 5.2. Visual Design's Role in Usability
        1. 5.2.1. Giving rollover feedback
        2. 5.2.2. Designing buttons that look clickable
        3. 5.2.3. Taking clues from everyday life
        4. 5.2.4. Grouping and nesting elements
        5. 5.2.5. Providing "You are here" feedback
        6. 5.2.6. Color-coding
        7. 5.2.7. Using icons properly
        8. 5.2.8. Differentiating between clickable and non-clickable things
      3. 5.3. Consistency Is Everything
      4. 5.4. Alternative Interactive Design Strategies
      5. 5.5. Maximizing Space
    4. 6. User Testing: Lab Coats Not Required
      1. 6.1. Developing Testable Prototypes
        1. 6.1.1. Creating clickable wireframes
        2. 6.1.2. Testing your visual design
        3. 6.1.3. Building an HTML click-through to test for usability
      2. 6.2. Prepping for the User Test
        1. 6.2.1. Preparing to-do lists for users
        2. 6.2.2. Developing a testing methodology
      3. 6.3. Carrying Out the User Test
        1. 6.3.1. Finding willing guinea pigs
        2. 6.3.2. Conducting the test
      4. 6.4. "Houston, We Have a Problem . . .": Evaluating Results
  8. III. Designing Web Graphics
    1. 7. Web Graphic Design 101
      1. 7.1. Crafting the Visual Interface
        1. 7.1.1. Developing a page design strategy
        2. 7.1.2. Creating comps
        3. 7.1.3. Blending color, type, and graphics
          1. 7.1.3.1. Choose colors that are appropriate to the subject matter
          2. 7.1.3.2. Stick to a limited color palette
          3. 7.1.3.3. Pick colors that work well together
          4. 7.1.3.4. Use fonts to set the mood
          5. 7.1.3.5. Mix fonts wisely
          6. 7.1.3.6. Use graphic elements efficiently
        4. 7.1.4. Using the ol' grid system
      2. 7.2. Establishing Visual Priority
        1. 7.2.1. Implementing the "big, medium, small" strategy
        2. 7.2.2. Breaking up the page into manageable areas
        3. 7.2.3. Designing around the fold line
      3. 7.3. Adding Breathing Space
      4. 7.4. Staying Consistent
      5. 7.5. Establishing Design Guidelines
        1. 7.5.1. Graphic templates
        2. 7.5.2. Type style guides
    2. 8. Letter-Perfect Type Design
      1. 8.1. Text That You Can Actually Read
        1. 8.1.1. Favorite and not-so-favorite fonts for the Web
          1. 8.1.1.1. Standard versus fancy fonts
          2. 8.1.1.2. Through the thick and thin
          3. 8.1.1.3. Serif versus sans-serif
        2. 8.1.2. Not too big; not too small
        3. 8.1.3. Text on background tiles
        4. 8.1.4. Graphic text versus HTML-generated text
        5. 8.1.5. A dash of graphic text, a pound of HTML text
        6. 8.1.6. Graphic headings
      2. 8.2. Controlling Text Display
        1. 8.2.1. Font specifications
      3. 8.3. CSS Font Control
        1. 8.3.1. External style sheets
        2. 8.3.2. Internal style sheets
    3. 9. Color on the Web
      1. 9.1. The Secret World of RGB
        1. 9.1.1. Subtractive and additive colors
        2. 9.1.2. Gazillions of colors
        3. 9.1.3. Color bit depth
      2. 9.2. The Web-Safe Color Palette
        1. 9.2.1. Reducing an image's bit depth
        2. 9.2.2. Color palettes
          1. 9.2.2.1. System palettes
          2. 9.2.2.2. Adaptive palettes
          3. 9.2.2.3. Web-safe palette
          4. 9.2.2.4. Web-adaptive palette
          5. 9.2.2.5. Give it a try
        3. 9.2.3. Deciphering the hexadecimal color code
      3. 9.3. Smart Web Color Usage
        1. 9.3.1. Use flat-colored graphics
        2. 9.3.2. Use as few colors as possible
        3. 9.3.3. Beware of the gradient blend
        4. 9.3.4. When an image has a mix of photos and flat colors, save it as a GIF
    4. 10. Building Web Graphics from the Ground Up
      1. 10.1. Bitmap versus Vector Graphics
        1. 10.1.1. Bitmaps: A fabric of pixels
        2. 10.1.2. Vectors: For the mathematically inclined
        3. 10.1.3. The vector-bitmap showdown
        4. 10.1.4. Monitor resolution
        5. 10.1.5. Image resolution
      2. 10.2. The Usual Software Suspects
        1. 10.2.1. Adobe Photoshop
        2. 10.2.2. Macromedia Fireworks
        3. 10.2.3. Paint Shop Pro
        4. 10.2.4. Adobe Illustrator and Macromedia Freehand
        5. 10.2.5. Macromedia Flash
      3. 10.3. Pixel-Pushing 101: Creating a Banner
      4. 10.4. Image Manipulation
        1. 10.4.1. Direct from digital cameras
        2. 10.4.2. Scanning images
        3. 10.4.3. Using stock photography and illustration
        4. 10.4.4. The special sauce: Digital editing
    5. 11. Presenting Your Design Masterpiece
      1. 11.1. Developing Design Directions
        1. 11.1.1. Getting design ideas
        2. 11.1.2. Integrating the venerable brand
        3. 11.1.3. Designing treatments for the home and subpage
      2. 11.2. Assembling an Online Presentation
        1. 11.2.1. Presenting your designs online
        2. 11.2.2. Constructing working and non-working prototypes
      3. 11.3. Creating Sizzling Printed Presentations
        1. 11.3.1. In living color: Printing your mock-ups
        2. 11.3.2. Mounting your work on boards
          1. 11.3.2.1. Adhesive schmesive
          2. 11.3.2.2. Consistency
      4. 11.4. Presenting to Clients
        1. 11.4.1. Clients are suckers for the "ugly duckling"
        2. 11.4.2. Here we go again: Round two
    6. 12. Polishing Pixels to Perfection: Graphic Production
      1. 12.1. Graphic Production
        1. 12.1.1. Design templates
        2. 12.1.2. Style guides
        3. 12.1.3. Version control
      2. 12.2. Fun with File Formats
        1. 12.2.1. When to use GIF
          1. 12.2.1.1. GIF transparency
          2. 12.2.1.2. GIF animation
          3. 12.2.1.3. Dithering: Pixel pointillism
        2. 12.2.2. When to use JPEGs
      3. 12.3. Lean, Mean Page Design
        1. 12.3.1. Minimizing download times
        2. 12.3.2. Slicing and dicing Web graphics
      4. 12.4. Backgrounds for Graphics
        1. 12.4.1. Understanding anti-aliased and aliased graphics
        2. 12.4.2. Preparing graphics with drop shadows
        3. 12.4.3. Matching a background tile
        4. 12.4.4. Using alpha channels
  9. IV. Producing the Final Web Site
    1. 13. Surveying the HTML Landscape
      1. 13.1. HTML: The Glue that Holds a Page Together
        1. 13.1.1. Sneaking a peek at the HTML source
        2. 13.1.2. Learning (borrowing) from others
      2. 13.2. Using Frames, Tables, and Div Tags
        1. 13.2.1. Frames
        2. 13.2.2. IFrames
        3. 13.2.3. Tables
        4. 13.2.4. Using CSS <div> tags
      3. 13.3. Letting HTML Do the Design Work
        1. 13.3.1. Coloring with tables
        2. 13.3.2. Designing with background colors and tiles
      4. 13.4. Making Your Pages Interactive
        1. 13.4.1. Regular links
        2. 13.4.2. Image maps
        3. 13.4.3. Anchor links
        4. 13.4.4. E-mail links
      5. 13.5. Coding to Make You Feel Proud
        1. 13.5.1. HTML editing with power tools
        2. 13.5.2. Using a text editor: Commando-style HTML
    2. 14. Controlling Page Layout
      1. 14.1. Fixed-Width and Stretchy Tables
      2. 14.2. Precise Positioning with CSS Layers
      3. 14.3. Controlling Design Elements with CSS
        1. 14.3.1. Page margin control
        2. 14.3.2. Background images and tiles
          1. 14.3.2.1. Repeating patterns — or not
          2. 14.3.2.2. Fixing the background so it doesn't scroll with the page
          3. 14.3.2.3. Background tile positioning
        3. 14.3.3. Setting background colors
        4. 14.3.4. Text handling
          1. 14.3.4.1. Setting text font, color, size, and style
          2. 14.3.4.2. Upper- and lowercase
          3. 14.3.4.3. Letter and line spacing
      4. 14.4. Adding Extra Space Around Elements
        1. 14.4.1. Adding margins to table cells
        2. 14.4.2. Adding space around graphics
          1. 14.4.2.1. Soft and hard line breaks
          2. 14.4.2.2. Horizontal and vertical space around graphics
          3. 14.4.2.3. Using CSS to add a margin to elements
      5. 14.5. Building HTML Design Templates
    3. 15. Web Sites on Steroids
      1. 15.1. Injecting Power into HTML Pages
        1. 15.1.1. JavaScript
        2. 15.1.2. Embedded media
        3. 15.1.3. Streaming media
      2. 15.2. Creating Dynamic, Database-Driven Web Pages
        1. 15.2.1. Client-side and server-side programming languages
        2. 15.2.2. Server-side includes
        3. 15.2.3. Content management systems
        4. 15.2.4. Personalized Web pages with cookies
        5. 15.2.5. E-commerce shopping carts
  10. V. The Part of Tens
    1. 16. Ten Tips for Managing Your Web Design Business
      1. 16.1. Presenting Your Work
        1. 16.1.1. Assembling a portfolio
        2. 16.1.2. Presenting your work
      2. 16.2. Developing a Proposal
      3. 16.3. Winning the Bid
      4. 16.4. Knowing What to Charge as an Independent Consultant
      5. 16.5. How Agencies Charge
      6. 16.6. Managing a Client's Expectations
      7. 16.7. Setting Client Responsibilities for the Project
      8. 16.8. Getting Clients to Sign Off on Key Milestones
      9. 16.9. Managing the Web Project Workflow
      10. 16.10. Hiring and Managing Subcontractors
    2. 17. Ten Information and Interaction Design Tips
      1. 17.1. Use Only Five to Seven Main Categories
      2. 17.2. Develop Wireframes for Each Unique Page Layout
      3. 17.3. Always Label Your Buttons and Icons
      4. 17.4. Mind the Download Time
      5. 17.5. Provide "You Are Here" Feedback
      6. 17.6. Make It Easy to Get Back Home
      7. 17.7. Visually Differentiate Clickable and Nonclickable Things
      8. 17.8. "One of These Buttons Is Not Like the Others"
      9. 17.9. Tread Lightly with Real-Life Metaphors
      10. 17.10. Use Color-Coding Sparingly
    3. 18. Ten Things That Can Go Wrong
      1. 18.1. "Can We Add Just One More Thing?"
      2. 18.2. "We Don't Have Time for a Site Map."
      3. 18.3. "The Clients Want THAT Design?"
      4. 18.4. "Who Needs Usability Testing When You Have Me?"
      5. 18.5. "But I'm Sure I Can Make This New Technology Work!"
      6. 18.6. "We're Planning for an International Audience?"
      7. 18.7. "The Design Needs to Work on Windows?"
      8. 18.8. "Uh ... It Needs to Work on a Mac?"
      9. 18.9. "We'll Just Make the Whole Thing Database-Driven."
      10. 18.10. "If We Build It, They Will Come."

Product information

  • Title: Web Design For Dummies®, 2nd Edition
  • Author(s):
  • Release date: March 2006
  • Publisher(s): For Dummies
  • ISBN: 9780471781172