Fast Prototyping Strategies for UI design

3,121 views
2,868 views

Published on

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.

Published in: Design, Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,121
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fast Prototyping Strategies for UI design

  1. 1. Fast Prototyping Strategies for UI Design
  2. 2. HTML5?
  3. 3. WIN!
  4. 4. Code behind Design photo credit: http://www.deviantart.com/?view_mode=2&order=9&q=by%3AGauntDusk
  5. 5. Clients...
  6. 6. Natural World #UXBIOMIMICRY
  7. 7. Modularity
  8. 8. Standardized Units Larger Composition
  9. 9. Standardized Units HTML5 CSS3 JS Larger Composition UI Patterns
  10. 10. Settings Workflow Assets
  11. 11. SPAs
  12. 12. http://mimosa.io
  13. 13. Sloppy selectors http://codepen.io/uxcodeine/pen/ylneo
  14. 14. Visualize Components http://codepen.io/uxcodeine/pen/irhmJ
  15. 15. Content & Pseudo Elements http://codepen.io/uxcodeine/pen/rkvda
  16. 16. “end result: intelligent, responsive, platformappropriate yet adaptable components” - Stephanie Rieger
  17. 17. Efficiency
  18. 18. Support Flow Lessened Friction
  19. 19. Maximize Use Support Flow Lessened Friction Preprocessors
  20. 20. Redesign Rediscover & Redefine
  21. 21. How We Code
  22. 22. Smart Selectors http://codepen.io/uxcodeine/pen/hwHsB
  23. 23. Event Toggles http://codepen.io/uxcodeine/pen/vgxnq
  24. 24. Popovers http://codepen.io/uxcodeine/pen/jkclE
  25. 25. Class Toggles http://codepen.io/uxcodeine/pen/vgxnq
  26. 26. “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
  27. 27. Responsive
  28. 28. Complex Relationships Ecosystem
  29. 29. Complex Relationships Adaptable Workflow Effective & Efficient Ecosystem
  30. 30. Pixel Perfect Layout & EMs
  31. 31. touch targets & readability
  32. 32. Box Model photo credit: http://www.w3schools.com/css/css_boxmodel.asp
  33. 33. DOM Manipulation http://codepen.io/uxcodeine/pen/jyzop
  34. 34. Beyond EMs & %s http://codepen.io/uxcodeine/pen/FhHgc
  35. 35. Forced issue
  36. 36. Flexibility
  37. 37. Bendable Few materials
  38. 38. Bendable Timeless Few materials Iteration
  39. 39. vanilla frameworks code preprocessors JS iteration n
  40. 40. Beyond Device photo credit: http://www.emerkirrane.com/
  41. 41. Offset & Alignments http://codepen.io/uxcodeine/pen/AcBky
  42. 42. Gesture & Motion http://codepen.io/uxcodeine/pen/jfCAe
  43. 43. Letting Go
  44. 44. “happy” users
  45. 45. Future hacking
  46. 46. #IoT photo credit: http://www2.psd100.com/ppp/2013/09/2601/rfid-sensor-icon-0926021202.png
  47. 47. “#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
  48. 48. “Building Stuff”
  49. 49. Modular Efficient Responsive Flexible
  50. 50. Thanks! Questions & Contact: Luis Daniel Rodriguez luis@queenandclarendon.com @uxcodeline http://codepen.io/collection/egcls/

×