Process

Things and Stuff Wiki - An organically evolving personal wiki knowledge base. An on-the-fly taxonomy containing a patchwork trail of topic outlines, descriptions, notes, stubs and breadcrumbs, with links to sites, systems, software, manuals, organisations, people, articles, guides, slides, papers, books, comments, videos, screencasts, webcasts, scratchpads and more. Content is orientated towards mostly free/libre/open, mostly Linux. Quality and age varies drastically. Sometimes old things are first, sometimes last. Use the Table of Contents menu to navigate long pages. Zoom in if text is too small. Dead link? Wayback Machine. I probably need to fix the theme CSS after an update. See also libreav.org. Chat to msg me (not checking tho atm). e

Guides and examples

The Web Design Process Everyone Should Follow - o rly?, Dec 16th 2010
Simple Usability/UX Checklist- March 29th, 2011
Hacking: Always Design the UX First - June 4th, 2012

http://www.designstaff.org/articles/product-design-sprint-2012-10-02.html

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.
- styletil.es has good ideas but a lack of templates..
- Style Tiles and How They Work - March 27, 2012

https://github.com/zsitro/briefchecklist

The Nine Pillars of Successful Web Teams - July 9, 2003

Tools

See Organisation

User Stories and Experience, Information Architecture

Specification

Size of site and budget

Areas of website
- Info and content
- Extra
Aesthetic and brand
- Logo and style
- Color scheme
- Typography
Social?
Deadline?

Content

Define UX+IA
- What kinds of users? What do they want to see? (User story?)
- Create/brainstorm a sitemap outline/diagram of pages(/addresses)
- What are the primary pages/areas of the site?
- What info to display on each of these for their users?
- What content needs to be written?
- What elements (content areas, etc.) go on each page?
  - Page (as a part of the site as a whole)
  - Primary navigation always available
  - Secondary area navigation depends on area (or subarea) context
  - Primary page info/content
  - Secondary blocks of info/content
- Wireframe layout for mobile first and desktop (and then tablet)
- How can the project brand differ yet retain continuity in each area its pages?

Aesthetics

Using an iterative design and tasklist based roadmap.

Define project brand style
- Feel
- Colour palette
- Logo
- Typography

Texture/background
Header
Slogan

Build estimation

Layout

http://en.wikipedia.org/wiki/Website_wireframe

Service

Mockingbird - customisable grids(!), can't hide sidebar

YouTube: Creating Wireframes: Examples, Advice and Tips

http://wireframe.cc/

Design specifics

Webfonts for headings, paragraphs, navigation, etc. (optimised via Font Squirrel)
Scale and vertical rhythm baseline (proportions for font-size and line-height)
Visual hierarchy
Main and section colour palette (CSS)
And other creative magick

Platforms

Social

Testing

Check in different browsers
Quick; Ask folk for remote feedback
Detailed; Get folk to browse it, quietly watch over their shoulder, tell them to access certain info, ask them to vocalise all thoughts, write down their actions and issues, communicate more, refine design, implement

Migrate to new site
- Full migration of data and users
- Check plugins and settings are alligned
- Test
- Etc.