RAPID PROTOTYPINGwith jQuery

PROTOTYPING

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.

“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

WHAT IS RAPID PROTOTYPING?

• Implementing some product functionality as soon as possible

• Not worrying about any details or production issues

• Keeping up an illusion!

Rapid prototypers are the illusionists and magicians of the

web

WHY?

WHY?

• Engineering the final design can take a long time

• Slow feedback loop for each design interaction

• Communication problems between design and engineering

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 layouts

• Usually targeted at one audience, on one platform

A Prototype doesn’t need to validate!

NO CROSS-BROWSER

MESS!

Semantics?

Who needs semantics!

SEO?

Who cares, damn it?

Structure, logic...!

LOL!

REQUIREMENTS OF A PROTOTYPE

REQUIREMENTS OF A PROTOTYPE

Layout

Behavior

Data

LAYOUT

• Use CSS Frameworks!

• Copy and Paste!

• Use WYSIWYG Editors!

Just get the damn job done!

CSS FRAMEWORKS?

• Hides complexity, like any other framework

• Provides templates for grids, columns and more

• Normalizes across browsers

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

BEHAVIOR

• Brings life into the prototype

• Describe interactions a user can perform

• Clicks

• Hover

• Drags

• ..etc

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

DATA

• Use jQuery’s ajax functions to quickly inject content

• JSONP is your friend!

• $(‘div’).load(‘some.url#content’)

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

• Slow interaction makes people understand your prototype!

• Shows the state change

• Shows relationships between elements

• Focusses attention

TOOLS

THEMEROLLER

THEMEROLLER

• Design custom themes

• 100% jQuery UI CSS Framework compatible

• Fun and intuitive UI (No coding!)

• png8 with alpha transparency

• Theme Gallery

JQUERY UI

JQUERY UI CSS FRAMEWORK

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

PRETTY NEAT BUT I NEED MY OWN STYLES ANYWAY

More power!

IT‘S NOT EXCLUSIVE.

• Uses em‘s for all units

• Scales background images

• All documented

• Comes with testing & debugging tools

WEBKIT

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

3D CSS TRANSFORMS!

...MUCH MORE

• CSS Gradients

• CSS Reflections

• text shadow

• box shadow

• CSS Animations

• CSS Transitions

FIREBUG

FIREBUG

• Quickly edit markup

• Edit CSS

• Manipulate JavaScript

The save button is missing!

GREASEMONKEY

META

• paul.bakaus@gmail.com

• http://paulbakaus.com

• http://twitter.com/pbakaus

• http://jqueryui.com

• http://wiki.jqueryui.com

• http://dev.jqueryui.com

THANK YOU FOR YOUR ATTENTION.

http://paulbakaus.com