The following principles are from Basics of Web Design: HTML5 and CSS3

  • Basic Web Design
    • Know your target audience and their needs
      • Compelling graphics draw users into the site
      • Text and navigation intensive for information purposes
    • Friendly for a wide range of browsers – test on a variety
    • Screen resolution – minimum resolution 800x600 (or 1024x768) or 240x320 (or 320x480) for mobile devices
    • Organizations of pages – hierarchical, linear, random, …

  • Principles of Visual Design

    Repetition
    Repeat visual elements throughout design
    Contrast
    Add visual excitement and draw attention
    Proximity
    Group related items
    Alignment
    Align elements to create visual unity

  • Accessibility: Section 508 of Rehabilitation Act

    Perceivable
    Alt text for pictures
    Operable
    Navigation by the blind
    Understandable
    Easy to read
    Robust
    Will work in the future
  • Writing for the Web
    • Writing for the web
      • Short sentences and phrases
      • Organizes with headings, sub-headings, etc.
      • Bullets stand out well
    • Text design
      • Common fonts – Arial, Verdana, etc.
      • Font size, weight, color (contrast)
      • Alignment and visual cues (lines)
  • Colors (see https://webdevbasics.net/color/)
    • RGB (Red-Green-Blue) as #ff1a5b where ff for red, 1a for green, and 5b for blue
    • Avoid font-background combinations that are difficult to read (e.g., red on blue)
    • Seek expert advice
      • Color design
      • Pick colors per age of target audience
        • Bright colors for children and preteens
        • Dark colors for late teens and early twenties
        • Light backgrounds with well-defined images and large text for 55+
      • Compelling graphics with white background for general appeal
  • Navigation
    • Navigation bars with text / graphics aimed at target audience
    • Graphics for navigation
      • e.g., embed img tags inside hyperlinks
    • Dynamic navigation: tailored based upon top-level choices (e.g., http://www.fresno.gov)
    • Site map
    • Site search
  • Other considerations
    • Load times (based upon various connection speeds)
    • Perceived load times (show in incremental pieces)
    • “Above the fold” (borrowed from newspapers) – put key information on top
    • Adequate white space (Google is great at this)
    • Avoid horizontal scrolling