Logical Progression of Design Steps

  • Structure & Taxonomy – categorization of content
    Search engines and human beings appreciate a logical division of content because it makes navigation straight forward. Logical and clear taxonomy makes logical and clear menu systems
  • Page Layout – placement of universal & variable elements
    While the layout of a webpage can vary to a great degree there are some constants:
    Header region: branding | name & slogan | contact information | primary navigation | search
    Side Columns (left – right – both – more): secondary navigation | small forms | featured content | ads | testimonials
    Main Content region (single column): Full article content => Text – Images – Media for specific article
    Main Content region (multiple columns and/or rows): Gateway / Directory page => shows excerpted content of featured content with linkage to full article pieces
    Footer: Third level navigation | copyright information | slogan | ads & links
  • Style guide – content length, segmentation & context
    Most publications use some sort of style guide to lend continuity to content. The guide defines writing tone, length of piece, parameters for the selection of accompanying photos or graphics, and preferred vocabulary and writing “rhythm”. Setting these parameters provides a template that can greatly increase efficiency in generating regular content since there is a clear formula.
  • Logos & branding – often set prior to any web presence was considered
    If effort has gone into the creation of a logo or brand identity it should be directly tied to a web identity. Continuity is key in branding every expression of brand should contain similar (if not identical) elements.
  • Photo & image selection – size, frequency & function
    In most cases text accompanied with relevant imagery makes a powerful statement, but if an image does not comply with the style guide or is not an appropriate accent to the text it can detract from the message.
  • Typography – audience profiles & readability
    In general it is best to set the editorial style guide for content, and have representative content inserted into the site before defining typography rules to a fine degree.
    While embedding fonts has become more efficient and reliable, it is important to remember that by default browsers still look to the locally installed fonts first… and some devices will not work with embedded fonts. This means that the most commonly installed “local” fonts are the “safest” and should be included as options in any font-stack.
  • Color scheme – color theory + harmony rules + existing branding elements
    good discussion of color connotations
    great color harmony tool