Fast Prototyping Strategies

for UI Design

HTML5?

WIN!

Code behind Design

photo credit: http://www.deviantart.com/?view_mode=2&order=9&q=by%3AGauntDusk

Clients...

#UXBIOMIMICRY

NaturalWorld

Modularity

Standardized Units

Larger Composition

Standardized Units

Larger Composition

HTML5 CSS3 JS

UI Patterns

Settings Workflow Assets

SPAs

http://mimosa.io

http://codepen.io/uxcodeine/pen/ylneo

Sloppy selectors

http://codepen.io/uxcodeine/pen/irhmJ

VisualizeComponents

http://codepen.io/uxcodeine/pen/rkvda

Content & Pseudo Elements

“end result: intelligent, responsive, platform-appropriate yet adaptable components”

- Stephanie Rieger

Efficiency

Support Flow

Lessened Friction

Support Flow

Lessened Friction

Maximize Use

Preprocessors

Redesign

Rediscover & Redefine

How We Code

http://codepen.io/uxcodeine/pen/hwHsB

SmartSelectors

http://codepen.io/uxcodeine/pen/vgxnq

EventToggles

http://codepen.io/uxcodeine/pen/jkclE

Popovers

http://codepen.io/uxcodeine/pen/vgxnq

ClassToggles

“is your css preprocessor actually making your app's css more manageable, or is it just allowing you to make the mess more complex?”

@ryanflorencehttps://twitter.com/ryanflorence/status/405775198739111936

Responsive

Complex Relationships

Ecosystem

Complex Relationships

Ecosystem

Adaptable Workflow

Effective & Efficient

Pixel Perfect

Layout & EMs

touch targets & readability

BoxModel

photo credit: http://www.w3schools.com/css/css_boxmodel.asp

http://codepen.io/uxcodeine/pen/jyzop

DOMManipulation

http://codepen.io/uxcodeine/pen/FhHgc

Beyond EMs & %s

Forced issue

Flexibility

Bendable

Few materials

Bendable

Few materials

Timeless

Iteration

code

iterationn

vanilla

preprocessors

JS

frameworks

photo credit: http://www.emerkirrane.com/

Beyond Device

http://codepen.io/uxcodeine/pen/AcBky

Offset & Alignments

http://codepen.io/uxcodeine/pen/jfCAe

Gesture & Motion

Letting Go

“happy”

users

Futurehacking

#IoT

photo credit: http://www2.psd100.com/ppp/2013/09/2601/rfid-sensor-icon-0926021202.png

“#UX prototyping often feels like getting off a deserted island: build whatever you need with whatever you have to get to Data Civilization.”

- Caryn Vainio@Hellchick

https://twitter.com/Hellchick/status/395650876653588480

“Building

Stuff”

ModularEfficientResponsiveFlexible

Thanks!Questions & Contact:Luis Daniel Rodriguezluis@queenandclarendon.com@uxcodeline

http://codepen.io/collection/egcls/