Is prototyping mobile experiences in the web browser useful? How do responsive web application techniques help to manage maintainability, performance and designs and how does it lead to client buy-in at product demos? Learn to leverage the following 4 strategic principles derived from nature’s models: Modularity - Overwrite general box model to make site wide changes, optimize application workflow and asset management Efficiency - maximize use of JS templates & CSS pre-processors Responsiveness - realign design workflows to work more efficiently and effectively Flexibility - achieve timelessness by making visual and interaction styles easier to iterate with advanced preprocessor techniques Nature’s models will be explained then practical application demonstrated to speed up prototyping. Also a recent case study of how these were applied for data exploration tools.

1. Fast Prototyping
Strategies
for UI Design

2. HTML5?

3. WIN!

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

5. Clients...

6. Natural
World
#UXBIOMIMICRY

7. Modularity

8. Standardized Units
Larger Composition

9. Standardized Units
HTML5 CSS3 JS
Larger Composition
UI Patterns

10. Settings
Workflow
Assets

11. SPAs

12. http://mimosa.io

13. Sloppy
selectors
http://codepen.io/uxcodeine/pen/ylneo

14. Visualize
Components
http://codepen.io/uxcodeine/pen/irhmJ

15. Content &
Pseudo Elements
http://codepen.io/uxcodeine/pen/rkvda

17. “end result: intelligent, responsive, platformappropriate yet adaptable components”
- Stephanie Rieger

18. Efficiency

19. Support Flow
Lessened Friction

20. Maximize Use
Support Flow
Lessened Friction
Preprocessors

21. Redesign
Rediscover & Redefine

23. How
We
Code

24. Smart
Selectors
http://codepen.io/uxcodeine/pen/hwHsB

25. Event
Toggles
http://codepen.io/uxcodeine/pen/vgxnq

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

27. Class
Toggles
http://codepen.io/uxcodeine/pen/vgxnq

28. “is your css preprocessor
actually making your app's
css more manageable, or is
it just allowing you to make
the mess more complex?”
@ryanflorence
https://twitter.com/ryanflorence/status/405775198739111936

29. Responsive

30. Complex Relationships
Ecosystem

31. Complex Relationships
Adaptable Workflow
Effective & Efficient
Ecosystem

32. Pixel Perfect
Layout & EMs

33. touch
targets
& readability

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

35. DOM
Manipulation
http://codepen.io/uxcodeine/pen/jyzop

36. Beyond
EMs & %s
http://codepen.io/uxcodeine/pen/FhHgc

37. Forced
issue

39. Flexibility

40. Bendable
Few materials

41. Bendable
Timeless
Few materials
Iteration

42. vanilla
frameworks
code
preprocessors
JS
iteration
n

43. Beyond
Device
photo credit: http://www.emerkirrane.com/

44. Offset &
Alignments
http://codepen.io/uxcodeine/pen/AcBky

45. Gesture &
Motion
http://codepen.io/uxcodeine/pen/jfCAe

46. Letting
Go

48. “happy”
users

50. Future
hacking

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

52. “#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

53. “Building
Stuff”

54. Modular
Efficient
Responsive
Flexible

55. Thanks!
Questions & Contact:
Luis Daniel Rodriguez
luis@queenandclarendon.com
@uxcodeline
http://codepen.io/collection/egcls/