rapid prototyping
TRANSCRIPT
Rapid Prototyping
jayalaxmi dinni @ jayaa.wordpress.com
no right way to do prototype
design questions
and
communicate design ideas
prototype can answer
“show me, don‟t tell” approach
Fig 1 (paper interface to a programmable climate control system) and Fig 2
-taken from book “Sketching User Experience” Bill Buxton
prototype for Web
Scale fast
Think Big
Act Small
Rapid Prototyping
Create a high level vision document
to keep track of the big picture
Think Big
Rapid Prototyping
•Basic design principles
-http://www.thefloatingfrog.co.uk/graphic-design/basic-design-principles-explained/
•Heuristic Principles
- http://www.useit.com/papers/heuristic/heuristic_list.html
•Essential controls for web applications
(or invent new one)
•Psychology
•Contextual Inquiry
What you should know:
Explore
Proposes
Tentative
Lack of commitment
for Refinement
Specific
more Descriptive
Paper
Balsamiq
PowerPoint
PowerPoint
Visual Design tools
Html/css
Mozilla-addon Firebug
Ideation stage Evolving Stage
"The best sites are those where there is a seamless divide
between the look, the content and the experience"
- Issac Pinnock
<html prototyping />
<html prototyping />
Place the content
<html prototyping />
1
<div id="container-outer"> <div
id="header-outer"> <div
id="header"> <div
id="logo"></div> <div
id="navigation"> </div> </div>
</div> <div id="content-outer">
<div id="content <div
class="inner-content"> <div>
</div> </div> </div> <div
id="box-bottom"> </div>
</div><!-- end of sub page
content --> </div><!-- end of
content --> </div><!-- end of
content-outer --> <div
id="footer-outer"> <div
id="footer"> </div> </div><!--
end of footer outer -->
</div><!--- end of container-
outer -->
Lay(it)out
<html prototyping />
2
start Styling
+ add extra Visual treats
+ interactions using jquery/javascript
<html prototyping />
3
Updating:
topography
layout
color/design elements
1/2
<html prototyping />
[ easiness]
Limitations:
you tend limit your thought process
extra work upfront
for complex design, its time-consuming and difficult
Use:
its real
easy to test and Validate
aids building an interactive pattern library
could be used for production
1
2
3
4
1. On click of the calendar icon, calendar will pop up, where the user can select the date range.
2. The date which have records are highlighted with blue background. And the user can select only those dates
3. The dates which don’t have records are disabled and colored grey.
4. The user can choose the month and year
On click of the calendar icon, calendar will pop up, where the user can select the date range. The date which have records should be highlighted with blue background. And the user can select only those dates. The dates which don’t have records are disabled and colored grey. The user can choose the month and year
Nobody likes to read. So
prototype and „annotate‟
Less need for clarification and
less rework
# tips
Firebug
firebug
firebug
Intermediate Step
Html/CSS
Firebug
Paper
PowerPoint
Visual Design Tool
plus+plus+
plus+
plus+
plus+
not just for Designers, its for everyone
use Right tool for the right Job
validate the design, through prototyping
way towards creating a culture of user experience