User Interface Design Document.

profileaydot4life_123
UserInterfaceDesignTemplate.docx

<Project 1>

User Interface Design

<Version>

<Date>

<Your Name>

Table of Contents

1. Introduction 1

1.1 Purpose 1

1.2 Scope 1

1.3 Reference Document 1

1.4 Terms, Abbreviations and acronyms 1

2. Graphical Interface Design 1

2.1 <Module 1> 1

2.1.1 <Screen 1> 1

2.1.2 <Screen 2> 1

2.2 <Module 2> 2

2.2.1 <Screen 3> 2

2.2.2 <Screen 4> 2

<Project 1>

User Interface Design Document Page 2

1. Introduction

1.1 Purpose

Give a brief description of the purpose of this document.

Please note: All areas of the document that include words between < > are implied that they will be replaces with the appropriate terms. For example, replace <Project 1> with the name of the project.

1.2 Scope

Define the scope of the interface design. This could include the application or modules within the application.

1.3 Reference Document

If there are any document reference, include requirement documents, reference them there.

1.4 Terms, Abbreviations and acronyms

If this domain has any special terms, abbreviations or anonyms, list them here with their definitions.

2. Graphical Interface Design

Logically decompose your application’s UI into logical units. For last applications this might be modules of the application. For very small programs this might simple be screens. This will be organized on the 2.x level of the document. You may copy and paste to get as many 2.x subsections of the template as you need.

2.1 <Module 1>

Rename <Module 1> to be the logical name of this module. For each screen create a 2.x.y level of the document. You may copy and paste to get as many 2.x.y subsections of the template as you need.

2.1.1 <Screen 1>

Screen Name: Give a logical name for the screen.

Image: Put an image of the screen.

Internal UI functionality: Explain all relevant internal UI functionality. Include images with parts of screens if needed. For example, if the user clicks a specific button a drop-box gets populated. This example is functionality internal to the screen that is relevant to UI.

External UI functionality: Explain all relevant external UI functionality. This includes UI features that interact with application functionality outside for the screen. For example, when the user clicks a specific button another window opens.

2.1.2 <Screen 2>

Screen Name:

Image:

Internal UI functionality:

External UI functionality:

2.2 <Module 2>

2.2.1 <Screen 3>

Screen Name:

Image:

Internal UI functionality:

External UI functionality:

2.2.2 <Screen 4>

Screen Name:

Image:

Internal UI functionality:

External UI functionality: