$30 off During Our Annual Pro Sale. View Details »

Code at the Center: Front-end Prototyping for Great Experiences

Code at the Center: Front-end Prototyping for Great Experiences

Wireframes and mockups often fail to demonstrate the actual experience of a product. Often than not, the final product doesn't look anything like the mockups that were approved. This happens because the final deliverables weren't tested and iterated on. Another reason is that static deliverables are hard for others who aren't designers to collaborate on. During this process the interaction design & animation is often neglected, making the experience feel flat & emotionless. So are there ways we can create designs quickly, collaborate with others and test out our application without disrupting the design process?

Enter the front-end prototype....

Adekunle Oduye

July 17, 2016

More Decks by Adekunle Oduye

Other Decks in Design


  1. Code at the Center: Front-end Prototyping for Great Experiences Adekunle

  2. Adekunle Oduye (Add-eh-koon-lay Oh-due-yay)

  3. Design Technologist @

  4. Places I worked at

  5. What is a prototype?

  6. What is a prototype? It’s a sample application used to

    test & validate early concepts of a product.
  7. Why do we create prototypes?

  8. Reasons we build prototypes • Communicate ideas • Uncovering edge

    cases • Test usability early • Display states
  9. Types of prototypes

  10. Paper prototype

  11. Clickable prototype - Powerpoint

  12. Clickable prototype - Invision

  13. Pain points with these methods

  14. Creation of many artifacts

  15. Sketch versioning control

  16. Credit: http://atifaz.am/blog/the-master-prototype.html

  17. Doesn’t simulate the experience

  18. None
  19. Collaboration is hard

  20. None
  21. Enter the front-end prototype

  22. What is a front-end prototype?

  23. What is a front-end prototype? A prototype built with HTML,

    CSS and Javascript
  24. Benefits of a front-end prototype

  25. One master deliverable

  26. Front-end prototype process Track A Track C Track B Master

  27. Using real data & content

  28. Design the “real” experience

  29. How can you start today?

  30. Code Conventions

  31. Style Guide

  32. Pattern Library

  33. Choose your front-end prototype platform

  34. Online Playground: Custom Built:

  35. STEP 1: Import the content

  36. None
  37. Adding content to markup

  38. None
  39. STEP 2: Add some style

  40. None
  41. STEP 3: Incorporate some interaction

  42. None
  43. Takeaways

  44. Keep front-end prototypes simple

  45. Front-end prototypes <> production

  46. The idea drives prototype method

  47. Resources • Prototyping Playbook - Matt Rothenberg • How &

    Why Prototypes Are Mandatory for Good Design - Jerry Cao • The Master Prototype - Atif Azam
  48. Thank you!