Design documention template

[Project name] design document

Prepared by: [Name]
Date: [Date]
Version: [Version number]

Introduction

• Scope of this document: [Explain the purpose and scope]

• Related documents:

  • User stories [link]

  • Acceptance criteria [link]

  • Test scripts [link]

User flows and wireframes

User story [#ID]: [Title]

• Flow diagram: [Insert or link to flowchart]

• Screens:

  1. Screen name: [Name]

     • Description: [Purpose of the screen]

     • Wireframe/design: [Insert image or link]

     • Annotations:

       • Interactive elements: [Buttons, links]

       • Behaviours: [What happens on user actions]

       • Error states: [Designs for validation errors]

  2. Screen name: [Name]

     • [Repeat as above]

Unhappy paths and error states

• Scenario: [Description of the error condition]

  • Screen/design: [Insert image or link]

  • Annotations: [Explain how the user is informed and can recover]

Responsive design considerations

• Mobile designs: [Screenshots and notes for mobile layouts]

• Desktop designs: [For web applications]

• Tablet designs: [If applicable]

Revision history

[Log of changes made to the document]