design-process.md

Design Process

1. Define the problem.
2. Wireframe.
3. Prototype.
4. Test, gather feedback, refine.

Define the problem

• Talk to people (users, clients, customers, businesspeople).
  • What's Your Problem?
  • User Stories - The Beginner's Guide
• Choose a project management system.
  • Trello
  • Pivotal Tracker
  • Task board

Wireframe

• Understand your objectives -> low-fidelity content structure and hierarchy.
  • Why Wireframe
  • 20 Steps to Better Wireframing
  • A Beginner's Guide to Wireframing
• Use whatever tool you want.
  • Wireframe.cc
  • Balsamiq
  • Pen & paper
• Map your content areas to HTML elements.
  • Start Coding with Wireframes

Prototype

• Create a web prototype of your interface.
  • Interface First
• Use less complicated tools to power it.
  • Jekyll
  • Jekyll Kickoff
• Create solid, reusable markup and styles.

Test, gather feedback, refine

• Testing -> watch people use your prototype.
• Usability
  • What & Why of Usability
• Accessibility
  • [access_lint](Ruby gem to test accessibility)
  • The 6 Simplest Web Accessibility Tests Anyone Can Do
  • 5 Steps Towards an Accessible Web Form
  • Check My Colors
  • The Accessibility Project