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

The Recipe for Building a Great Prototype - ManhattanJS 2015

9627abc56bc436faecbe45f2645159d6?s=47 Adekunle Oduye
September 10, 2015

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?

9627abc56bc436faecbe45f2645159d6?s=128

Adekunle Oduye

September 10, 2015
Tweet

Transcript

  1. THE RECIPE FOR BUILDING A GREAT PROTOTYPE Adekunle Oduye ManhattanJS

    - September 2015 @adekunleoduye
  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
  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
  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.
  5. INGREDIENT #1: VISUAL STYLE GUIDE

  6. VISUAL STYLE GUIDE colors grids typography buttons forms icons

  7. STYLE GUIDE - BARRICADE

  8. STYLE GUIDE - SASS-LANG

  9. None
  10. STYLE GUIDE - DISQUS

  11. None
  12. INGREDIENT #2: PATTERN LIBRARY

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

    UI design patterns.
  14. POPULAR PATTERNS: CAROUSELS Credits: http://thepointsguy.com/

  15. POPULAR PATTERNS: ACCORDIONS

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

  17. POPULAR PATTERNS: BREADCRUMBS

  18. TYPES OF PATTERNS

  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
  20. ATOMS - ATOMIC DESIGN http://bradfrost.com/blog/post/atomic-web-design/

  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.
  22. MOLECULES - TWITTER'S TWEETS

  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.
  24. ORGANISMS A combination of molecules that create sections within an

    interface.
  25. ORGANISMS - ESPN'S HEADER

  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.
  27. TEMPLATES - INSTAGRAM'S PROFILE PAGE

  28. PAGES pages aka views are very similar to templates but

    are more specific. Real content is used to resembles the final version.
  29. PAGES - INSTAGRAM'S PROFILE PAGE

  30. Credits: Beyonce's Instagram

  31. INGREDIENT #3: CODE STYLE GUIDE

  32. CODE STYLE GUIDE aka Coding Conventions aka Front-end Style guide,

    are guidelines and standards on how the code is written.
  33. HTML STYLE GUIDE - HARRY ROBERTS

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

  35. CSS STYLE GUIDE - MARK OTTO

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

  37. "There isn't a right way of doing a Coding Style

    Guide, just pick one a stick with it."
  38. INGREDIENTS FOR A PROTOTYPE ARE: Visual Style Guide Pattern Library

    Code Style Guide
  39. WHY DO WE NEED IT A PROTOTYPE? It's where the

    “experience” behind “user experience.” comes alive.
  40. DESIGNER'S BENEFITS: Efficient workflow Consistent Design Focus more on function

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

    designers
  42. PRODUCT OWNER'S BENEFITS: Great presentation tool in meetings Ask the

    right questions See potholes within the workflow
  43. TIPS FOR MAINTAINING A PROTOTYPE

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

    Foundations
  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
  46. CLEAN UP YOUR ROOM PROTOTYPE! "Cleanup Fridays" Archive/Remove code that

    isn't being used
  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
  48. THANKS FOR LISTENING! Adekunle Oduye @adekunleoduye adekunleoduye.com