Scribd
Upload
62 views17 pages

Lecture 9 - Prototyping

This document discusses the importance of prototyping in the web design process. It outlines that prototyping allows designers to receive early feedback, test design alternatives, and catch problems before significant time and resources are spent. The document recommends prototyping as early and as often as possible using a variety of tools, from pen and paper to specialized software. Prototypes should have enough fidelity for users to interact with and provide feedback to further refine the design.

Uploaded by

Colin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views17 pages

Lecture 9 - Prototyping

This document discusses the importance of prototyping in the web design process. It outlines that prototyping allows designers to receive early feedback, test design alternatives, and catch problems before significant time and resources are spent. The document recommends prototyping as early and as often as possible using a variety of tools, from pen and paper to specialized software. Prototypes should have enough fidelity for users to interact with and provide feedback to further refine the design.

Uploaded by

Colin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Design

Lecture 9 Design
Prototyping

Introduction
Up until now we have
been developing our
design ideas along
certain themes to get
confidence in some of
the decisions that we
have to take and
agree with the client:

Introduction
The proposal:
We have agreed on the key
aspects of the project
We have checked out the state of
the art and decided what to copy
and avoid
We have scoped the design in
terms of its boundaries

Introduction
The user requirements:
The client is now OK but what
about the users will what we
design be what people want
Use of personas as required for the
development process

Introduction
Story board and mood board:
The philosophy of our design and
an overview of its key style
elements
Specific thoughts perhaps on
interaction styles

Introduction
Site map:
The organisation and structure of
our design
How things link together and flow
Identifying schemes/sections/
themes and looking for simplicity
and efficiency

Introduction
Wireframes:
The spatial structure of our design
Use of space and elements
Crucial for mobile devices to avoid
crowding

Advantages of prototyping
remember?
Early prototypes are quick and
easy to change
Less reluctance to accept mistakes
in the design
Serious problems are found early
But its finished when its
finished project management?

Some aspects to remember


Why prototype:
It allows for evaluation and feedback
Stakeholders can see and interact with
something tangible
It helps the design team to communicate
It allows alternatives to be tested
It encourages reflection early on

WHEN?
As soon as possible
As often as possible
Of course we are regarding the
story board, mood board and
wireframe as prototypes for this
purpose rather than just the
realistic looking versions to come

HOW MUCH?
At this stage we have decided on
the key visual elements (colours,
fonts and frames etc.) and now the
focus must be on the user
interaction
Need to decide on where to put the
effort early on

HOW MUCH?
Prototype in depth: check flow and
transitions in design. Choice of
route and awareness of location
Prototype in breadth: interaction
schemes. Choices to be made and
methods. Use of style as cue to
location

FIDELITY
People are very forgiving of cheap
and cheerful prototypes
Current tools make the production
of very realistic prototypes quite
easy
We should aim to get some
interaction elements in place if we
can

Wizard of Oz
Sometimes we may want to simulate
some technology that is not yet
available in a suitable form. In this case
a human can pretend to carry out the
functions (perhaps unknown to the
users) e.g. speech recognition
If there are problems using a Wizard
then things can only get worse

WHO?
Early prototypes were seen by the
client to agree the terms of the
contract they are now on board
Users or personas may have been
used to check some key aspect of
the design in the early stages
Now the user drives the
development by evaluation stages

Tools of the trade


There are a huge variety of tools
available the obvious ones
(PowerPoint) the online ones
(Caccoo, Creately) traditional
pen and paper specialist tools
such as Balsamiq or Omnigraffle
and of course developer tools such
as Dreamweaver

Conclusion
Time now to enter
the final stages of
prototyping and to
start evaluating
our designs as
much as we can

You might also like