Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Adekunle Oduye

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

  3. Design Technologist
    @

    View Slide

  4. Places I worked at

    View Slide

  5. What is a prototype?

    View Slide

  6. What is a prototype?
    It’s a sample application used to test &
    validate early concepts of a product.

    View Slide

  7. Why do we create prototypes?

    View Slide

  8. Reasons we build prototypes
    ● Communicate ideas
    ● Uncovering edge cases
    ● Test usability early
    ● Display states

    View Slide

  9. Types of
    prototypes

    View Slide

  10. Paper prototype

    View Slide

  11. Clickable prototype - Powerpoint

    View Slide

  12. Clickable prototype - Invision

    View Slide

  13. Pain points with
    these methods

    View Slide

  14. Creation of
    many artifacts

    View Slide

  15. Sketch versioning control

    View Slide

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

    View Slide

  17. Doesn’t simulate
    the experience

    View Slide

  18. View Slide

  19. Collaboration is
    hard

    View Slide

  20. View Slide

  21. Enter the
    front-end prototype

    View Slide

  22. What is a front-end prototype?

    View Slide

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

    View Slide

  24. Benefits of a
    front-end prototype

    View Slide

  25. One master
    deliverable

    View Slide

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

    View Slide

  27. Using real data
    & content

    View Slide

  28. Design the “real”
    experience

    View Slide

  29. How can
    you start today?

    View Slide

  30. Code Conventions

    View Slide

  31. Style Guide

    View Slide

  32. Pattern Library

    View Slide

  33. Choose your
    front-end prototype
    platform

    View Slide

  34. Online Playground: Custom Built:

    View Slide

  35. STEP 1:
    Import the content

    View Slide

  36. View Slide

  37. Adding content to markup

    View Slide

  38. View Slide

  39. STEP 2:
    Add some style

    View Slide

  40. View Slide

  41. STEP 3:
    Incorporate some
    interaction

    View Slide

  42. View Slide

  43. Takeaways

    View Slide

  44. Keep front-end
    prototypes simple

    View Slide

  45. Front-end
    prototypes <>
    production

    View Slide

  46. The idea drives
    prototype method

    View Slide

  47. Resources
    ● Prototyping Playbook
    - Matt Rothenberg
    ● How & Why Prototypes Are Mandatory for Good Design
    - Jerry Cao
    ● The Master Prototype
    - Atif Azam

    View Slide

  48. Thank you!

    View Slide