Design

From Things and Stuff Wiki
Revision as of 23:47, 20 July 2012 by Milk (talk | contribs) (→‎SEO)
Jump to navigation Jump to search


still hashing about

Design basics

to add social stuff;

  • many2many, etc

Usability and user experience

General

Examples

  • UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.

Specifics

  • Skeumorphism & Storytelling - "An interface that is not only easy to use, but fun to use, engages the user and creates an experience where obstacles are easier to overcome, and thus an experience where the product is easier and more effortless to use. Done right, skeuomorphism can retain the simplicity and ease of use of an interface while empowering users to act."

Information Architecture

Accessibility

BS 8878, Web accessibility - Code of Practice, is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan

Social, UX and Brand Style Guides

Mobile

See HTML/CSS#Responsive.


SEO

Tools

Analytics

Domain

Process

Concepts

Guides and examples

  • Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Workflow

Using an iterative design and tasklist based roadmap.

  • Define project base style
    • Colour palette
    • Typography
      • Webfont for headings, paragraphs, navigation, etc.
      • Vertical rhythm baseline (proportions for font-size and line-height)
  • Define UX+IA
    • What are the primary areas of the site?
    • What info to display for each area audience?
    • What content needs written?
    • Create sitemap outline
    • Wireframe layout for mobile first and desktop (and then tablet)
    • Wrap base style into UX aesthetics
  • Content and branding
    • Logo
    • Header
    • Slogan
    • Area and page specific text
  • Use base theme
    • HTML5
    • Browser reset
    • Mobile first
      • Make sure mobile devices don't get desktop size CSS or content
      • 320 And Up
    • If available, use server-side CSS preprocessing through theme or plugin.
      • LESS and limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
      • Semantic CSS with grid and vertical rhythm systems
  • Etc.
  • Start coding
    • Install chosen base theme and and additional base plugins
    • Set project based CSS preprocess variables and mixins
    • Style site using test content as a reference
    • Etc!
  • Testing
    • Etc.