The Recipe for Building a Great Prototype - ManhattanJS 2015

Today’s designers have more responsibilities than ever. Our jobs are more than how an application looks but also creating interesting interactions that add to the user experience. There are many products out here that assist designers conceptualizing user interactions in little time but the problem is being able to validate these experience before the product is launched. So how can we test out our application without disrupting the design process?

Transcript

1. THE RECIPE FOR BUILDING A GREAT
   PROTOTYPE
   Adekunle Oduye
   ManhattanJS - September 2015
   @adekunleoduye
   

   View Slide

2. WHO AM I?
   My name is Adekunle Oduye
   (Add-eh-koon-lay Oh-due-yay)
   Product Designer at Nasdaq Co-organizer of GothamSass & SassConf
   

   View Slide

3. WHAT I HOPE YOU'LL LEARN:
   What ingredients are needed to create a great prototype
   How can a prototype improve collaboration &
   communication in a team
   How to make a prototype scalable and usable for
   designers AND developers
   

   View Slide

4. WHAT IS A PROTOTYPE?
   It's a simulated application where features of a product are
   designed and validated by the product team and users.
   

   View Slide

5. INGREDIENT #1:
   VISUAL STYLE GUIDE
   

   View Slide

6. VISUAL STYLE GUIDE
   colors
   grids
   typography
   buttons
   forms
   icons
   

   View Slide

7. STYLE GUIDE - BARRICADE
   

   View Slide

8. STYLE GUIDE - SASS-LANG
   

   View Slide

9. View Slide

10. STYLE GUIDE - DISQUS
    

    View Slide

11. View Slide

12. INGREDIENT #2:
    PATTERN LIBRARY
    

    View Slide

13. PATTERN LIBRARY
    A pattern library is a collection of reusable UI design
    patterns.
    

    View Slide

14. POPULAR PATTERNS: CAROUSELS
    Credits: http://thepointsguy.com/
    

    View Slide

15. POPULAR PATTERNS: ACCORDIONS
    

    View Slide

16. Credits: http://thepointsguy.com/
    

    View Slide

17. POPULAR PATTERNS: BREADCRUMBS
    

    View Slide

18. TYPES OF PATTERNS
    

    View Slide

19. ATOMS
    Atoms are basic html elements like anchors tags, input text
    field, buttons, icons, headings and other elements that
    should be defined in the styles guide
    

    View Slide

20. ATOMS - ATOMIC DESIGN
    http://bradfrost.com/blog/post/atomic-web-design/
    

    View Slide

21. MOLECULES
    aka components, are a combination for 1 or more atoms
    together. They are more complex than an atom and contain
    some sort of interaction.
    

    View Slide

22. MOLECULES - TWITTER'S TWEETS
    

    View Slide

23. As you can see, the Tweet component has two states,
    expand and collapse...which is trigger when the user clicks
    on it. The next type are organisms.
    

    View Slide

24. ORGANISMS
    A combination of molecules that create sections within an
    interface.
    

    View Slide

25. ORGANISMS - ESPN'S HEADER
    

    View Slide

26. TEMPLATES
    Templates are well structured organisms that are very
    abstract and most of the time use placeholder text and
    images. Think of them as a wireframe in a webpage.
    

    View Slide

27. TEMPLATES - INSTAGRAM'S PROFILE PAGE
    

    View Slide

28. PAGES
    pages aka views are very similar to templates but are more
    specific. Real content is used to resembles the final version.
    

    View Slide

29. PAGES - INSTAGRAM'S PROFILE PAGE
    

    View Slide

30. Credits: Beyonce's Instagram
    

    View Slide

31. INGREDIENT #3:
    CODE STYLE GUIDE
    

    View Slide

32. CODE STYLE GUIDE
    aka Coding Conventions aka Front-end Style guide, are
    guidelines and standards on how the code is written.
    

    View Slide

33. HTML STYLE GUIDE - HARRY ROBERTS
    

    View Slide

34. Credits - http://cssguidelin.es/#html
    

    View Slide

35. CSS STYLE GUIDE - MARK OTTO
    

    View Slide

36. JS STYLE GUIDE - DOUGLAS CROCKFORD
    Credits - http://javascript.crockford.com/code.html
    

    View Slide

37. "There isn't a right way of doing a Coding
    Style Guide, just pick one a stick with it."
    

    View Slide

38. INGREDIENTS FOR A PROTOTYPE ARE:
    Visual Style Guide
    Pattern Library
    Code Style Guide
    

    View Slide

39. WHY DO WE NEED IT A PROTOTYPE?
    It's where the “experience” behind “user
    experience.” comes alive.
    

    View Slide

40. DESIGNER'S BENEFITS:
    Efficient workflow
    Consistent Design
    Focus more on function than visual
    

    View Slide

41. DEVELOPER'S BENEFITS:
    Freedom to design
    Less deliverables
    Stronger communication with designers
    

    View Slide

42. PRODUCT OWNER'S BENEFITS:
    Great presentation tool in meetings
    Ask the right questions
    See potholes within the workflow
    

    View Slide

43. TIPS FOR MAINTAINING A PROTOTYPE
    

    View Slide

44. DO NOT USE ANY CSS FRAMEWORK IF YOU CAN
    Bootstrap
    Foundations
    

    View Slide

45. ONE PERSON SHOULD NOT BE IN CHARGE OF PATTERN
    LIBRARY
    If a component is used in three different views, it should
    be in the pattern library
    There should be an audit of patterns every 3-6 months
    

    View Slide

46. CLEAN UP YOUR ROOM PROTOTYPE!
    "Cleanup Fridays"
    Archive/Remove code that isn't being used
    

    View Slide

47. RESOURCES:
    by Anna Debenham
    by Brad Frost
    by Mark Otto
    by Paul Boag
    by Ben Gremillion
    by Anna Debenham & Brad Frost
    Front-end Style Guides
    Atomic Design
    Code Guide
    How and why to create a pattern library
    Creating a Killer Style Guide
    Styleguides.io
    

    View Slide

48. THANKS FOR LISTENING!
    Adekunle Oduye
    @adekunleoduye
    adekunleoduye.com
    

    View Slide