This will give you an introduction about Prototyping in general, highlights advantages and disadvantages and gives you a pragramtic view on solutions, tools and ways to get the job done and win your next pitch.

1. RAPID PROTOTYPING
with jQuery

2. PROTOTYPING

3. WHAT IS A PROTOTYPE?
A prototype is an original type, form,
or instance of something serving as a
typical example, basis, or standard for
other things of the same category.

4. “An Experience Prototype is any kind of representation,
in any medium, that is designed to understand, explore
or communicate what it might be like to engage with
the product, space or system we are designing.”
Jane Fulton Suri

5. WHAT IS RAPID
PROTOTYPING?
• Implementing some product functionality as soon as possible
• Not worrying about any details or production issues
• Keeping up an illusion!

6. Rapid prototypers are the
illusionists and magicians of the
web.

7. WHY?

8. design like in
‘product design’
• Engineering the final design can take a long time
• Slow feedback loop for each design interaction
• Communication problems between design and
engineering

9. WHY?
• Exploration
• Validating it works
• Communication

11. DIFFERENT PROTOTYPES
• Wireframes = Walk through prototypes
• Interactive prototypes

12. WHAT IS A PROTOTYPE FOR
US?
• Interactive click dummy
• Modelled after wireframes and/or concept layouts
• Usually targeted at one audience, on one platform

13. A Prototype doesn’t need to validate!

14. NO CROSS-
BROWSER
MESS!

15. Semantics?
Who needs semantics!
SEO?
Who cares, damn it?
Structure, logic...!
LOL!

17. Just do it, damnit!

18. REQUIREMENTS OF A
PROTOTYPE

19. Layout
Behavior
Data

20. LAYOUT
• Use CSS Frameworks!
• Copy and Paste!
• Use WYSIWYG Editors!
Just get the damn job done!

21. CSS FRAMEWORKS?
• Hides complexity, like any other framework
• Provides templates for grids, columns and more
• Normalizes across browsers

22. SOME TECHNIQUES
• If the floats don’t work, simply position everything
• Use a CSS Framework that comes with columns or a grid
• Utilize all kinds of specific browser technology

23. BEHAVIOR
• Brings life into the prototype
• Describe interactions a user can perform
• Clicks
• Hover
• Drags
• ..etc

24. CSS
• Use CSS whenever possible
• Use it to simulate hover events: a:hover {}
• Use content injection through CSS
• Switch class names in JavaScript, not styles

25. DATA
• Use jQuery’s ajax functions to quickly inject content
• JSONP is your friend!
• $(‘div’).load(‘some.url#content’)

26. USE PUBLIC API’S
• YQL
• Google API’s (Maps, Search, Docs, etc)
• Flickr

27. THE ILLUSION OF SPEED

28. A PROTOTYPE DOESN’T HAVE
TO BE FAST.

29. IT ONLY HAS TO FEEL FAST.

30. PERCEIVED RESPONSIVENESS
• Slow down your interactions
• Use animations and effects to hide a loading process
• Slow interaction makes people understand your prototype!
• Shows the state change
• Shows relationships between elements
• Focusses attention

31. TOOLS

32. THEMEROLLER

33. THEMEROLLER
• Design custom themes
• 100%jQuery UI CSS
Framework compatible
• Funand intuitive UI (No
coding!)
• png8 with alpha
transparency
• Theme Gallery

34. JQUERY UI

36. JQUERY UI CSS FRAMEWORK

37. THE CSS FRAMEWORK
• Semantic + generic
classes instead of per-
plugin
• Seperation of design and
layout
• Support
for CSS Sprites
+ CSS3 corner radius
• Modular and extensible

38. PRETTY NEAT BUT I NEED MY
OWN STYLES ANYWAY

39. Crap, rock on!

40. IT‘S NOT EXCLUSIVE.
• Uses em‘s for all units
• Scales background images
• All documented
• Comes with testing &
debugging tools

41. WEBKIT

42. CSS TRANSFORMS
• Webkit/Gecko (Safari 3+,
iPhone, Android, Air, FF 3.5+)
• 2D transformations on HTML
elements
• Yes, all
kinds of 2d
transformations: Rotating, Scaling,
Skewing

43. 3D CSS TRANSFORMS!

44. ...MUCH MORE
• CSS Gradients • box shadow
• CSS Reflections • CSS Animations
• text shadow • CSS Transitions

45. Thank you
Webkit!

46. FIREBUG / WEBKIT WEB
INSPECTOR

47. FIREBUG / WEB INSPECTOR
• Quickly edit markup
• Edit CSS
• Manipulate JavaScript
The save button is missing!

48. GREASEMONEKY

49. META
• paul.bakaus@gmail.com • http://jqueryui.com
• http://paulbakaus.com • http://wiki.jqueryui.com
• http://twitter.com/pbakaus • http://dev.jqueryui.com

50. THANK YOU FOR YOUR
ATTENTION.
http://paulbakaus.com / @pbakaus