Visual Design for the Modern Web

Visual Design for the Modern Web

Released November 2007
Publisher(s): New Riders
ISBN: 9780321550033

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

Just as great artists must understand their tools, great Web designers must understand the technology behind their art. In Visual Design for the Web, author Penny McIntire shows novice Web designers how to use their tools--including HTML, CSS, and JavaScript--in conjunction with the principles of aesthetics and usability to become masters of their craft. Chapters begin with explanations of the terminology and techniques of web structures, then demonstrate how to apply the rules of design to create beautiful sites.  The book:

  • Illustrates how fundamental principles of design apply to the web

  • Includes charts, diagrams, and graphics to enhance learning and retention

  • Covers site analysis, navigation, layout, color, graphics, typography and forms

  • Demonstrates multiple techniques for getting just the right look and feel for your web sites

  • Focuses on the characteristics that make sites usable, engaging, and memorable

    •

    Table of contents

    1. Copyright
    2. Introduction
      1. So what topics, exactly, does this book cover?
      2. Target Audience
      3. Features of This Book
      4. Acknowledgments
    3. One. Introduction to Visual Design for the Modern Web
      1. Review of Web Technology
        1. Client-side Technologies
          1. Browsers
          2. HTML/XHTML
          3. Cascading Style Sheets
          4. Scripting Languages
          5. Adobe Flash
          6. Multimedia: Audio and Video
        2. Server-side Technologies
          1. Static Web Pages
          2. Data-driven Web Pages
          3. XML
          4. Ajax
        3. Integrated Development Environments
      2. Web Site Development Life Cycle
        1. Prototyping/Rapid Application Development
      3. Introduction to Content Analysis
      4. Introduction to Site Architecture Analysis
      5. Introduction to Usability Factors
        1. Usability Principles
        2. Usability Testing
      6. Introduction to Visual Design
        1. Visual Design versus Usability
        2. Branding: Creating an Identity
        3. Creating a Web Site with Appeal
        4. Metaphor as a Design Tool
        5. Overall Design Hints
      7. Introduction to Interaction Design
      8. Introduction to Web Accessibility
        1. Types of Disabilities
        2. Accessibility Guidelines
        3. Accessibility Resources
      9. Summary
        1. Design Checklist
    4. Two. Site Analysis
      1. Clarify the Organization’s Goals
        1. Increasing Profits
        2. Disseminating Information
        3. Serving as the User Interface for a Business Application
      2. Identify the Target Audience
      3. Identify Target Audience Goals
      4. Determine Site Constraints
      5. Determine Site Content
        1. Creating Content
        2. Creating a Sticky Web Site
      6. Define Site Architecture
        1. Labeling
          1. Preferred Labels
        2. Categorizing Topics
        3. Organizing Site Structure for the Developers
          1. Organizing Files and Directories on the Server
          2. Establishing Standard Naming Conventions
          3. Choosing Relative versus Absolute Addressing
      7. Summary
        1. Design Checklist
    5. Three. Navigation
      1. Introduction to Navigation
        1. Navigation Principles
          1. Create Simple, Visible, Consistent Navigation
          2. Take Advantage of What Visitors Already Know
          3. Orient Visitors with “You Are Here” Markers
          4. Minimize Visitor Effort
          5. Provide Multiple Ways to Access Information
          6. Provide for Visitors with Varied Skill Levels
          7. Provide Feedback
          8. Make Sure the Navigation is Flexible and Expandable
        2. Required Navigation
        3. Organizing Navigational Structure to Match Site Structure
          1. Random-access Navigation
          2. Sequential Navigation
          3. Hierarchical Navigation
          4. Mixing Navigational Models
      2. Link Functions
        1. Internal Hyperlinks
        2. External Hyperlinks
        3. Download Links
        4. Auto-email Links
        5. Note Hyperlinks
      3. Navigation Affordances
      4. Link States
        1. Available/At Rest State
        2. Available/Rollover State
        3. Active State
        4. Visited State
        5. Current State
      5. Navigational Text
        1. Text Link Wording
        2. Affordances for Text Links
          1. CSS Pseudo-classes for Indicating Link State
          2. Disabling the Current Link
        3. Enhancing Text Links
          1. Bulleted Lists with Custom Bullets Images
          2. Rollover Bullets
          3. Background Button Images
          4. CSS Borders that Mimic Buttons
      6. Navigational Images
        1. Affordances for Navigational Images
        2. Image Rollovers
        3. Navigational Icons
        4. Image Maps
        5. Sliced Images with Hotspots
      7. Navigation Organization Tools
        1. Menus
          1. Mutually Exclusive Menus
          2. Menu Location
          3. Menu Appearance
          4. Menu Size
          5. Expandable Menus
            1. Jump Menus Using Select Boxes
            2. Dynamic HTML Menus
          6. Sequential Menus
          7. Drill-down Menu Pages
        2. Frames
        3. Local Search Functions
          1. Search Interface
          2. Search Engine Results Pages
          3. Search Logs
        4. Embedded Links
        5. Teasers
        6. Site Maps, Tables of Contents, Site Indexes, and Directories
        7. Breadcrumbs
        8. Keyboard Shortcuts
        9. Splash Pages
        10. Favorites Menus
      8. Link Reliability
      9. Navigation and Accessibility
      10. Summary
        1. Design Checklist
    6. Four. Page Layout
      1. Technical Considerations
        1. File Size Concerns
          1. Planning for Limited File Sizes
        2. Display Size and Resolution
        3. Horizontal Page Size
          1. Pages for Printing
        4. Vertical Page Size
        5. Tools of Page Layout
          1. Frames
          2. Tables
          3. The <div> Tag
          4. Tables versus <div>s
          5. Adobe Flash
      2. Aesthetic Issues
        1. Filling the Display Window
          1. Solid Layout
          2. Liquid Layout
          3. Comparison of Solid versus Liquid Layout
        2. Building Blocks of Page Layout
          1. Line
          2. Shape
          3. Color
        3. Visual Harmony
          1. Techniques for Providing Visual Harmony
            1. Limit the number of elements on the page
            2. Repeat elements
            3. Repeat a standard page layout throughout the site
            4. Align elements
            5. Chunk related information
            6. Manipulate contrast to create a visual hierarchy
            7. Provide white space
            8. Manipulate visual balance
            9. Choose a composition center
            10. Employ the golden-mean rectangle
            11. Round out a “rectangles only” layout
          2. Striking a Balance
        4. Positioning Page Elements
          1. Required Page Elements
          2. The Home Page
      3. Storyboarding: Sketching the Layout
        1. Using an Image Editor to Create a Comp
        2. Using HTML to Create a Comp
        3. Page Templates
      4. Page Layout and Accessibility
      5. Summary
        1. Design Checklist
    7. Five. Color
      1. Color Theory
        1. The Color Wheel
        2. Color Attributes
          1. Hue
          2. Value
          3. Saturation
          4. Temperature
        3. Subtractive Color Mode: Reflected Light
        4. Additive Color Mode: Projected Light
        5. RGB Color Codes
        6. The Web-safe Palette
        7. Color Rendering on Different Systems
      2. Defining Colors for the Web
        1. Choosing from Predefined Color Palettes
        2. Sampling Colors
          1. Mixing Colors Manually
          2. Mixing Neutrals
          3. Mixing Tints
          4. Mixing Shades
          5. Mixing Tones
          6. Mixing Other Colors
      3. Choosing a Color Scheme
        1. Color Proportions
        2. Color Schemes
          1. Monochromatic Color Scheme
          2. Complementary Color Scheme
          3. Triad Color Scheme
          4. Analogous Color Scheme
          5. Warm Color Scheme
          6. Cool Color Scheme
        3. Inspiration for Color Schemes
        4. Color Contrast
        5. Background Colors
        6. Link Colors
        7. Printed Materials
      4. Color and Accessibility
      5. Summary
        1. Design Checklist
    8. Six. Graphics
      1. Principles and Terminology
        1. Principles of Employing Graphics
          1. Avoid gratuitous graphics
          2. Save images in the appropriate format
          3. Reuse graphics
          4. Reduce image size
          5. Use height and width attributes appropriately
          6. Include the alt parameter on all images
        2. Terminology
          1. Graphic Types
          2. Anti-aliasing
          3. Transparency
          4. Interlacing
          5. Graphics File Compression
          6. Vector Images
          7. Bitmapped/Raster Images
          8. Master Images
      2. Image Formats for the Web
        1. JPG Format Graphics
          1. JPG File Compression
        2. GIF Graphics
          1. GIF File Compression
        3. PNG Format Graphics
          1. PNG File Compression
        4. Combination Images
      3. Acquiring Images
        1. Stock Photos and Clip Art
        2. Screen Capture Utilities
        3. Scanners
          1. Types of Scanners
          2. Scanner Specifications
          3. Scanner Settings
        4. Digital Cameras
      4. Creating and Editing Images
        1. Layered Images
        2. Exporting Images
        3. Matching Colors across Software Packages
        4. Dingbat Typefaces
        5. Effects, Filters, Textures, and Patterns
        6. Logo Design
        7. Image Design Inspiration
      5. Background Images
        1. Background Image Contrast
        2. Tiled Background Images
        3. Full-screen Background Images
        4. Non-tiling Partial Background Images
        5. An Alternative to a Background Image
      6. Hints on Working with Graphics
        1. Think in Pixels
        2. Employ Visual Echoes
        3. Keep a 1 × 1-Pixel GIF at Hand
        4. Avoid Web Clichés
        5. Consider Using Image Borders
        6. Use Dreamweaver to Create Remote Rollovers
        7. Name Images by Function, Not Visual Attributes
      7. Animation
        1. Animation Terminology
        2. Animation Formats
          1. GIF Animation
          2. Flash Animation
      8. Graphics and Accessibility
      9. Summary
        1. Design Checklist
    9. Seven. Typography
      1. Typography Basics
        1. Body Copy versus Display Type
        2. Typefaces
        3. Formatting and Contrast
        4. Spacing
        5. Justification
        6. Typography and Web Design
      2. HTML Text
        1. HTML Typefaces
        2. HTML Font Sizes
          1. Absolute Text Sizing
          2. Relative Text Sizing
          3. Absolute versus Relative Text Sizing
        3. HTML Formatting
          1. Color
          2. Emphasis
          3. Decoration
        4. HTML Text Spacing
        5. HTML Text Justification
        6. HTML Text Layout
        7. HTML Special Characters and Punctuation Marks
      3. Graphic Text
      4. Text and Accessibility
      5. Summary
    10. Eight. Forms
      1. Principles of Form Design
        1. Reduce physical effort
        2. Reduce cognitive effort
        3. Avoid requiring any information perceived to be unnecessary
      2. Input Controls
        1. Radio Buttons
        2. Checkboxes
        3. List Boxes
          1. Drop-down List Boxes
          2. Scrollable List Boxes
          3. Multiple-selection List Boxes
          4. Grouping List Box Options under a Header
        4. Single-line Text Input Areas
          1. Punctuation and Formatting in Text Input Controls
          2. Hiding Input Data on the Screen
          3. Default Values for Text Input Controls
          4. Re-entering Critical Fields
        5. Multi-line Text Input Areas
      3. Form Completion
        1. Form Validation
        2. Submit Buttons
          1. Avoiding Multiple Submissions
        3. Reset Buttons
        4. Submit and Reset Button Hints
      4. Transaction Structure
        1. Wizards
        2. Control Panels
      5. Input Form Page Layout
        1. Controlling Cursor Focus and Tab Order
        2. Presenting Input Controls in the Expected Order
        3. Chunking Input Controls by Category
      6. Visitor Support
        1. Principles of Visitor Support
        2. Instructions
        3. Help Documents
        4. Feedback
        5. Error Handling
      7. Visual Design of Form Controls
      8. Input Forms and Accessibility
      9. Summary
        1. Usability—Did you:

    Product information

    • Title: Visual Design for the Modern Web
    • Author(s):
    • Release date: November 2007
    • Publisher(s): New Riders
    • ISBN: 9780321550033