RAPID PROTOTYPING
      with jQuery
PROTOTYPING
WHAT IS A PROTOTYPE?

A prototype is an original type, form,
or instance of something serving as a
typical example, basis,...
“An Experience Prototype is any kind of representation,
 in any medium, that is designed to understand, explore
  or commu...
WHAT IS RAPID
                   PROTOTYPING?


• Implementing    some product functionality as soon as possible

• Not   ...
Rapid prototypers are the
illusionists and magicians of the
               web.
WHY?
design like in
                             ‘product design’


• Engineering   the final design can take a long time

• Slo...
WHY?


• Exploration

• Validating   it works

• Communication
DIFFERENT PROTOTYPES


 • Wireframes     = Walk through prototypes

 • Interactive   prototypes
WHAT IS A PROTOTYPE FOR
           US?


 • Interactive   click dummy

 • Modelled    after wireframes and/or concept layo...
A Prototype doesn’t need to validate!
NO CROSS-
BROWSER
  MESS!
Semantics?
     Who needs semantics!



                       SEO?
  Who cares, damn it?



Structure, logic...!

       ...
Just do it, damnit!
REQUIREMENTS OF A
   PROTOTYPE
Layout

Behavior

 Data
LAYOUT

     • Use   CSS Frameworks!

     • Copy   and Paste!

     • Use WYSIWYG         Editors!




Just get the damn ...
CSS FRAMEWORKS?


• Hides   complexity, like any other framework

• Provides   templates for grids, columns and more

• No...
SOME TECHNIQUES

• If   the floats don’t work, simply position everything

• Use    a CSS Framework that comes with columns...
BEHAVIOR
• Brings    life into the prototype

• Describe     interactions a user can perform

  • Clicks

  • Hover

  • D...
CSS

• Use   CSS whenever possible

• Use   it to simulate hover events: a:hover {}

• Use   content injection through CSS...
DATA


• Use   jQuery’s ajax functions to quickly inject content

• JSONP    is your friend!

• $(‘div’).load(‘some.url#co...
USE PUBLIC API’S


• YQL

• Google API’s   (Maps, Search, Docs, etc)

• Flickr
THE ILLUSION OF SPEED
A PROTOTYPE DOESN’T HAVE
       TO BE FAST.
IT ONLY HAS TO FEEL FAST.
PERCEIVED RESPONSIVENESS

• Slow   down your interactions

• Use   animations and effects to hide a loading process

• Slo...
TOOLS
THEMEROLLER
THEMEROLLER
     • Design   custom themes

     • 100%jQuery UI CSS
      Framework compatible

     • Funand intuitive UI...
JQUERY UI
JQUERY UI CSS FRAMEWORK
THE CSS FRAMEWORK
        • Semantic  + generic
         classes instead of per-
         plugin

        • Seperation   o...
PRETTY NEAT BUT I NEED MY
   OWN STYLES ANYWAY
Crap, rock on!
IT‘S NOT EXCLUSIVE.

• Uses   em‘s for all units

• Scales   background images

• All   documented

• Comes with testing &...
WEBKIT
CSS TRANSFORMS

• Webkit/Gecko  (Safari 3+,
  iPhone, Android, Air, FF 3.5+)

• 2D transformations on HTML
  elements

• Y...
3D CSS TRANSFORMS!
...MUCH MORE

• CSS    Gradients    • box   shadow

• CSS    Reflections   • CSS Animations

• text   shadow       • CSS Tr...
Thank you
 Webkit!
FIREBUG / WEBKIT WEB
     INSPECTOR
FIREBUG / WEB INSPECTOR

• Quickly   edit markup

• Edit   CSS

• Manipulate   JavaScript


                            Th...
GREASEMONEKY
META


• paul.bakaus@gmail.com          • http://jqueryui.com

• http://paulbakaus.com          • http://wiki.jqueryui.com...
THANK YOU FOR YOUR
    ATTENTION.
  http://paulbakaus.com / @pbakaus
Rapid Prototyping With jQuery
Rapid Prototyping With jQuery
Rapid Prototyping With jQuery
Upcoming SlideShare
Loading in...5
×

Rapid Prototyping With jQuery

14,344

Published on

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.

Published in: Technology
2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,344
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
328
Comments
2
Likes
28
Embeds 0
No embeds

No notes for slide
  • Rapid Prototyping With jQuery

    1. 1. RAPID PROTOTYPING with jQuery
    2. 2. PROTOTYPING
    3. 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. 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. 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. 6. Rapid prototypers are the illusionists and magicians of the web.
    7. 7. WHY?
    8. 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. 9. WHY? • Exploration • Validating it works • Communication
    10. 10. DIFFERENT PROTOTYPES • Wireframes = Walk through prototypes • Interactive prototypes
    11. 11. WHAT IS A PROTOTYPE FOR US? • Interactive click dummy • Modelled after wireframes and/or concept layouts • Usually targeted at one audience, on one platform
    12. 12. A Prototype doesn’t need to validate!
    13. 13. NO CROSS- BROWSER MESS!
    14. 14. Semantics? Who needs semantics! SEO? Who cares, damn it? Structure, logic...! LOL!
    15. 15. Just do it, damnit!
    16. 16. REQUIREMENTS OF A PROTOTYPE
    17. 17. Layout Behavior Data
    18. 18. LAYOUT • Use CSS Frameworks! • Copy and Paste! • Use WYSIWYG Editors! Just get the damn job done!
    19. 19. CSS FRAMEWORKS? • Hides complexity, like any other framework • Provides templates for grids, columns and more • Normalizes across browsers
    20. 20. 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
    21. 21. BEHAVIOR • Brings life into the prototype • Describe interactions a user can perform • Clicks • Hover • Drags • ..etc
    22. 22. 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
    23. 23. DATA • Use jQuery’s ajax functions to quickly inject content • JSONP is your friend! • $(‘div’).load(‘some.url#content’)
    24. 24. USE PUBLIC API’S • YQL • Google API’s (Maps, Search, Docs, etc) • Flickr
    25. 25. THE ILLUSION OF SPEED
    26. 26. A PROTOTYPE DOESN’T HAVE TO BE FAST.
    27. 27. IT ONLY HAS TO FEEL FAST.
    28. 28. 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
    29. 29. TOOLS
    30. 30. THEMEROLLER
    31. 31. THEMEROLLER • Design custom themes • 100%jQuery UI CSS Framework compatible • Funand intuitive UI (No coding!) • png8 with alpha transparency • Theme Gallery
    32. 32. JQUERY UI
    33. 33. JQUERY UI CSS FRAMEWORK
    34. 34. 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
    35. 35. PRETTY NEAT BUT I NEED MY OWN STYLES ANYWAY
    36. 36. Crap, rock on!
    37. 37. IT‘S NOT EXCLUSIVE. • Uses em‘s for all units • Scales background images • All documented • Comes with testing & debugging tools
    38. 38. WEBKIT
    39. 39. 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
    40. 40. 3D CSS TRANSFORMS!
    41. 41. ...MUCH MORE • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
    42. 42. Thank you Webkit!
    43. 43. FIREBUG / WEBKIT WEB INSPECTOR
    44. 44. FIREBUG / WEB INSPECTOR • Quickly edit markup • Edit CSS • Manipulate JavaScript The save button is missing!
    45. 45. GREASEMONEKY
    46. 46. META • paul.bakaus@gmail.com • http://jqueryui.com • http://paulbakaus.com • http://wiki.jqueryui.com • http://twitter.com/pbakaus • http://dev.jqueryui.com
    47. 47. THANK YOU FOR YOUR ATTENTION. http://paulbakaus.com / @pbakaus
    1. A particular slide catching your eye?

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

    ×