Don't be a stereotype: Rapid Prototype

23,999 views
24,339 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
23,999
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://about.me/edcharbeneau
  • So what is rapid prototyping? A group of techniques used to quickly produce a working model.
    It’s important to emphasize the words QUICKLY and WORKING here.
    A prototype should be made before we reach this stage [image].
  • Working on a design job, I was asked where my iPhone and Mac book were. I realized we do this [stereotyping] among ourselves in the software industry. We need to set aside preconceived notions about our team, tools and customers and focus on what works; the right tool(s) for the job.
  • Just as nobody would intentionally try to fit a stereotype to become a better web designer or developer, nobody should intentionally fill their toolbox with tools just because it’s expected of a web designer or developer. Sure there are tools that are required for the job, but that doesn’t mean we can’t look out side of our toolboxes or create new tools that improve our productivity.

    We need to be more flexible in our tools and techniques, and learn from others that share a different point of view especially when we are trying to achieve the same goal, building for the web.

    There are excellent tools and techniques being used by Mac, Microsoft and Linux platforms yet often they do not cross over.
  • Just as nobody would intentionally try to fit a stereotype to become a better web designer or developer, nobody should intentionally fill their toolbox with tools just because it’s expected of a web designer or developer. Sure there are tools that are required for the job, but that doesn’t mean we can’t look out side of our toolboxes or create new tools that improve our productivity.

    We need to be more flexible in our tools and techniques, and learn from others that share a different point of view especially when we are trying to achieve the same goal, building for the web.

    There are excellent tools and techniques being used by Mac, Microsoft and Linux platforms yet often they do not cross over.

    Many design related web sites exclude the Microsoft family of products and developer friendly web sites often disregard the design aspect of web development.
  • Foundation for wire framing and responsive design.
    Chrome for debugging and tweaking CSS and JS in real time.
    Visual Studio fast HTML editing
    Git for easy source control and A-B testing.
  • These are a good start [Demo].
  • Traditional wireframes using pen and paper or tools like PowerPoint or Basalmiq Mockups are an ok start but don’t provide us with a working model.
    Incomplete experiences
    Simple wireframes are a great start, and while more advanced tools like SketchFlow provide additional user interactivity, they don’t necessarily produce a true “working model”. The web and it’s multitude of viewing devices is a highly versatile and quickly evolving platform, and attempting to provide a working model from mock-ups or wireframes is a significant challenge.
    Traditional wireframes fail to communicate several key experiences including:
    Device rotation & multiple device resolutions and snap. Experiences created for responsive design would require numerous wireframes.
    User context; experiences will vary from large to small displays.
    Input capabilities, which can vary from desktop to mobile.
    Application flow, which not all prototyping tools can simulate.

  • It’s time to start wire framing in code and using the browser.
    Coded Wireframes with ASP.NET MVC
    Coded wireframes can solve many of the issues with traditional wireframes. Using ASP.NET MVC and a few open source frameworks, we can achieve our goal of a working model that is displayed natively in the browser. While ASP.NET MVC probably isn’t the first tool that jumps to mind when considering a prototyping toolset, it is actually ideal for coded wireframes; it is extremely flexible (thanks to NuGet package manager), and also gives us full control over the HTML rendered.
    With that in mind, let’s look at a few tools that, when combined with ASP.NET MVC, allow us to easily create rich, functional prototypes.
  • By moving the prototype into its intended native environment we can communicate a working model that is far more representative of the final product and relevant on all devices, and thus more valuable to you.

    Further reading:
    A deep dive into Responsive design with foundation
    http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  • Foundation for wire framing and responsive design.
    Chrome for debugging and tweaking CSS and JS in real time.
    Visual Studio fast HTML editing
    Git for easy source control and A-B testing.
  • http://foundation.zurb.com/prototyping.php
    List benefits, show demos.
  • https://github.com/NV/chrome-devtools-autosave/
  • http://foundation.zurb.com

    Install on NuGet http://www.nuget.org/packages/Foundation3_MVC4

    Explore Samples https://github.com/EdCharbeneau/RapidPrototypingMVC4Examples

    And https://github.com/EdCharbeneau/Foundation3SinglePageRWD
  • http://foundation.zurb.com

    Install on NuGet http://www.nuget.org/packages/Foundation3_MVC4

    Explore Samples https://github.com/EdCharbeneau/RapidPrototypingMVC4Examples

    And https://github.com/EdCharbeneau/Foundation3SinglePageRWD
  • http://edcharbeneau.github.io/kendo-quickstart-mvc/ Quick-start guide Currently in Beta
  • Read more at https://www.simple-talk.com/dotnet/asp.net/exploring-html-prototypes-with-git/
  • Navigation issues: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • Conclusion
    Rapid prototyping can and should be an essential part of the development process; with just a few NuGet packages, ASP.NET MVC is transformed into a powerful rapid prototyping tool. Prototyping for MVC’s condensed markup combined with the organized grid system of Foundation simplifies the process, allowing us to iterate faster and more effectively.
  • 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

    ×