Prototyping (WDD) (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
Prototyping (WDD)
What is prototyping?
Prototyping is the creation of a rough version of a website that users can interact with
It is produced after the wireframe design has been completed
It is used to test how users will navigate and understand the final website
It allows early feedback before implementation begins
Wireframes vs prototypes
Feature | Wireframe | Low fidelity prototype |
|---|---|---|
Purpose | Shows page layout and structure | Shows look and feel and user flow |
Audience | Developers and designers | End users for usability testing |
Detail | Basic layout and positioning | More detail including interaction flow |
Format | Static sketch for each page | Paper model using pens, cards and sticky notes |
Use case | Planning structure | Testing usability |
Stage | Early design stage | After wireframing before implementation |
Low fidelity prototyping
Low fidelity prototypes are simple paper based versions of the website
They use basic materials such as pens, paper, scissors and sticky notes
They show more detail than wireframes so users can understand how the site will work
They are quick and inexpensive to create
They are suitable for early usability testing
[Insert example here]
What a low fidelity prototype includes
Included | Not included |
|---|---|
Page layout with text, images and links | Full styling or exact colours |
Basic button and navigation behaviour | Final fonts, spacing or branding |
Simple user journeys between pages | Full functionality or real data |
Movable elements to represent screens | Advanced interactions or animations |
Using prototypes in usability testing
Users attempt typical tasks using the prototype pages
Developers observe how easily the user understands the navigation and layout
Feedback is gathered to identify confusing elements
Changes can be made quickly because the prototype is low cost
Benefits of prototyping
Usability issues are found before coding begins
User feedback improves the final design
Development time is reduced because design mistakes are corrected early
Stakeholders can see how the website will work before it is implemented
Worked Example
During the Web Design and Development process, both a wireframe and a low-fidelity prototype are typically created.
Explain the key purpose of each of these design tools when developing a new website.
[2]
Answer
Wireframe
To show the layout of the website [1 mark]
Low-fidelity prototype (max one from)
To allow the end-user/client to get the look and feel of the website [1 mark]
Enables usability testing [1 mark]
Allows gathering feedback at an early stage [1 mark]
Unlock more, it's free!
Did this page help you?
