1

Interface Design- Wireframes

2

Interface Design- Wireframes

• Wireframing• Lo-Fi design• Hi-Fi design• Concept design• Prototyping• Usability Testing

*Fidelity refers to the level of detail

3

Interface Design- Wireframes

• Depending on the need, i.e. for the client’s understanding, you can present a wireframe to illustrate the interface design.

4

Interface Design- Wireframes

• Lo-Fi Design• Basic structure• Minimal labels• Use of Placeholders

5

Interface Design- Wireframes

6

Interface Design- Wireframes

• Hi-Fi Design• Detailed structure• Formal or final labels• Use of Placeholders• Images if possible

7

Interface Design- Wireframes

8

Interface Design- Wireframes

• From your wireframe you can flush out your interface design.

9

Interface Design- Wireframes

10

Interface Design- Wireframes

11

Interface Design- Wireframes

• Wireframes allow you to:• Do a low level usability test• Test your interface• Find omissions• Make low-cost changes