Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Don't be a stereotype: Rapid Prototype

26,225 views

Published on

In just about every industry, rapid prototyping is described as “A group of techniques used to quickly produce a working model”, and web development should be no different. Rapid prototyping allows developers to quickly communicate and collaborate on the product they are creating while investing minimal resources. When used effectively, a prototype can provide structure to a project, ensuring that the development team and the customer are working towards the same vision and goal.

Published in: Technology, Design
  • Be the first to comment

Don't be a stereotype: Rapid Prototype

  1. 1. Ed Charbeneau
  2. 2. Ed Charbeneau Hi, I’m Ed Charbeneau Developer Advocate at Telerik Author of things Eat Sleep Code, podcast host Chat with me @EdCharbeneau
  3. 3. Ed Charbeneau http://imgs.xkcd.com/comics/the_general_problem.png This used to be me…
  4. 4. Ed Charbeneau “Solving Problems” http://imgs.xkcd.com/comics/the_general_problem.png
  5. 5. Ed Charbeneau The real problem was this… Customer’s GoalsMy Goals User’s needs
  6. 6. Ed Charbeneau Later on, it was this… Customer’s GoalsMy Goals
  7. 7. Ed Charbeneau A stereotypical view of users Customer’s GoalsMy Goals What we “thought” our users needed
  8. 8. Ed Charbeneau Stereotype a widely held but fixed and oversimplified image or idea of a particular type of person or thing.
  9. 9. Ed Charbeneau Learning about your users…
  10. 10. Ed Charbeneau The hard way
  11. 11. Ed Charbeneau But communicating is hard
  12. 12. Ed Charbeneau And you end up looking like a jerk If your product requires a flow chart to operate, you failed.
  13. 13. Ed Charbeneau Prototype What I needed is this…
  14. 14. Ed Charbeneau Rapid Prototyping A group of techniques used to quickly produce a working model
  15. 15. Ed Charbeneau It’s all about communication Without a working model, we can’t communicate our goals and we can’t anticipate how users will interact with the product.
  16. 16. Ed Charbeneau We need to be able to communicate on common ground with our: Designers Developers Customers Testers Who are we communicating with?
  17. 17. Ed Charbeneau We need to be able to communicate on common ground with: Designers Developers Customers Testers Users
  18. 18. Ed Charbeneau Prototype Common ground for collaboration
  19. 19. Ed Charbeneau Throughout the entire process Efficient Responsive Design Process By Ben Callahan http://seesparkbox.com/ https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
  20. 20. Ed Charbeneau Who am I in this process?
  21. 21. Ed Charbeneau Web Developer / Designer This is not me and I am both a Web Designer and Developer Source: http://sixrevisions.com/infographics/web-designers- vs-web-developers-infographic/
  22. 22. Ed Charbeneau Don’t be a stereotype Nobody aspires to fit a stereotype, so stop doing it with your tool set Think outside your toolbox
  23. 23. Ed Charbeneau You MUST use these, right? Well, not exactly. OR
  24. 24. Ed Charbeneau Here are some things I like to prototype with Let’s talk about why! Build your own prototyping toolbox
  25. 25. Ed Charbeneau “Traditional” wireframe tools • Pen/Paper Wireframes • Photoshop • Mockup software – Basalmic – SketchFlow – PowerPoint • Prototypes – Axure
  26. 26. Ed Charbeneau Responsive Design tablet desktopmobile
  27. 27. Ed Charbeneau Static wireframe pitfalls Responsive design How will this look on a phone How will this look on my tablet What if I rotate the display What about voice, touch, and other inputs
  28. 28. Ed Charbeneau I write it, and we’ll do it LIVE It’s time to start wire framing in code and using the browser ***
  29. 29. Ed Charbeneau Correct Context Viewing a prototype in a native environment gives you a better perspective. Source: http://www.zurb.com/article/898/wireframes-are-dead-long-live-wireframes
  30. 30. Ed Charbeneau Process Efficient Responsive Design Process By Ben Callahan https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
  31. 31. Ed Charbeneau Wireframe tools Let’s talk about how!
  32. 32. Ed Charbeneau Foundation Rapid prototyping and responsive design framework
  33. 33. Ed Charbeneau Bootstrap
  34. 34. Chrome Devtools • Edit live in the browser • Drag and drop elements • Change colors and styles • Instant
  35. 35. InlineIpsum.js / Prototyping MVC • Placeholder content • injected at runtime • markup remains untouched • source code remains readable
  36. 36. Ed Charbeneau Git Ubiquitous • All platforms • Tooling support GitHub • Large open source community
  37. 37. Ed Charbeneau How it works <!-- begin demos --> <demos>
  38. 38. Chrome developer tools • Edit in browser • Drag/Drop • Device mode • Debug the UX #titanic { float:none; } /* Too soon? */
  39. 39. Ed Charbeneau Prototyping for MVC @* Html helpers example *@ @* Lorem Ipsum on the fly *@ @Html.Ipsum() @* a random length paragraph *@ @Html.Ipsum().h1() @* an h1 tag filled with ipsum*@ @Html.Ipsum().h1().p().ul() @* Fluent Ipsum*@ www.responsivemvc.net
  40. 40. Ed Charbeneau InlineIpsum for jQuery /* Html helpers example */ /* Lorem Ipsum on the fly */ @Html.Ipsum.p() /* a random length paragraph */ @Html.Ipsum.h1() /* an h1 tag filled with ipsum*/ @Html.Ipsum.h1().p().ul() /* Fluent Ipsum*/ Github.com/edcharbeneau/InlineIpsum
  41. 41. Ed Charbeneau Bootstrap demo <!– css example --> <!– a row with two six column wide blocks of content --> <div class=“row”> <div class=“col-md-6”></div> <div class=“col-md-6”></div> </div>
  42. 42. Ed Charbeneau Foundation demo <!– css example --> <!– a row with two six column wide blocks of content --> <div class=“row”> <div class=“large-6 columns”></div> <div class=“large-6 columns”></div> </div>
  43. 43. Ed Charbeneau Kendo UI demo
  44. 44. Ed Charbeneau Iteration and AB testing Create different versions of the same project $ git branch TestA $ git checkout TestA … some changes $ git commit $ git branch TestB $ git checkout TestB … some changes $ git commit
  45. 45. Ed Charbeneau Testing Branch and merge Master Merged Left Navigation Right Navigation Deleted New Master: Using left navigation Decision: Should we use left or right navigation Branch Branch
  46. 46. Ed Charbeneau Questions? <!-- end demos --> </demos>
  47. 47. Ed Charbeneau Prototyping
  48. 48. Resources Reading • simple-talk.com/dotnet/asp.net/rapid-prototyping,-the-mvc-working-model/ • simple-talk.com/author/edward-charbeneau/ • alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/ Examples • github.com/EdCharbeneau Software • Responsivemvc.net/resources (This presentation and related resources) • windows.github.com (GitHub for Windows) • github.com/EdCharbeneau/InlineIpsum (InlineIpsum - jQuery) Ed Charbeneau
  49. 49. Extras The following slides are for Q/A Ed Charbeneau
  50. 50. Ed Charbeneau Nesting
  51. 51. Ed Charbeneau Bootstrap demo
  52. 52. Ed Charbeneau Offsets
  53. 53. Ed Charbeneau Push Pull

×