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” Bi...
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 Pr...
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 Pinno...
<html prototyping />
<html prototyping />
Place the content
<html prototyping />
1
<div id="container-outer"> <div
id="header-outer"> <div
id="header"> <div
id="log...
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 whic...
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 tow...
Upcoming SlideShare
Loading in...5
×

Rapid prototyping

947
-1

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
947
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rapid prototyping

  1. 1. Rapid Prototyping jayalaxmi dinni @ jayaa.wordpress.com
  2. 2. no right way to do prototype
  3. 3. design questions and communicate design ideas prototype can answer
  4. 4. “show me, don‟t tell” approach
  5. 5. Fig 1 (paper interface to a programmable climate control system) and Fig 2 -taken from book “Sketching User Experience” Bill Buxton
  6. 6. prototype for Web
  7. 7. Scale fast Think Big Act Small Rapid Prototyping
  8. 8. Create a high level vision document to keep track of the big picture Think Big Rapid Prototyping
  9. 9. •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:
  10. 10. Explore Proposes Tentative Lack of commitment for Refinement Specific more Descriptive
  11. 11. Paper Balsamiq PowerPoint PowerPoint Visual Design tools Html/css Mozilla-addon Firebug Ideation stage Evolving Stage
  12. 12. "The best sites are those where there is a seamless divide between the look, the content and the experience" - Issac Pinnock
  13. 13. <html prototyping /> <html prototyping />
  14. 14. 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 -->
  15. 15. Lay(it)out <html prototyping /> 2
  16. 16. start Styling + add extra Visual treats + interactions using jquery/javascript <html prototyping /> 3
  17. 17. Updating: topography layout color/design elements 1/2 <html prototyping /> [ easiness]
  18. 18. Limitations: you tend limit your thought process extra work upfront for complex design, its time-consuming and difficult
  19. 19. Use: its real easy to test and Validate aids building an interactive pattern library could be used for production
  20. 20. 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
  21. 21. Firebug
  22. 22. firebug
  23. 23. firebug
  24. 24. Intermediate Step Html/CSS Firebug Paper PowerPoint Visual Design Tool plus+ plus+ plus+ plus+ plus+
  25. 25. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×