Don't be a stereotype: Rapid Prototype
•Télécharger en tant que PPTX, PDF•
2 j'aime•18,195 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
En vedette
En vedette (20)
Similaire à Don't be a stereotype: Rapid Prototype
Similaire à Don't be a stereotype: Rapid Prototype (20)
Plus de Ed Charbeneau
Plus de Ed Charbeneau (19)
Dernier
Dernier (20)
Don't be a stereotype: Rapid Prototype
- 2. Ed Charbeneau Hi, I’m Ed Charbeneau Developer Advocate at Telerik Author of things Eat Sleep Code, podcast host Chat with me @EdCharbeneau
- 5. Ed Charbeneau The real problem was this… Customer’s GoalsMy Goals User’s needs
- 6. Ed Charbeneau Later on, it was this… Customer’s GoalsMy Goals
- 7. Ed Charbeneau A stereotypical view of users Customer’s GoalsMy Goals What we “thought” our users needed
- 8. Ed Charbeneau Stereotype a widely held but fixed and oversimplified image or idea of a particular type of person or thing.
- 9. Ed Charbeneau Learning about your users…
- 10. Ed Charbeneau The hard way
- 11. Ed Charbeneau But communicating is hard
- 12. Ed Charbeneau And you end up looking like a jerk If your product requires a flow chart to operate, you failed.
- 13. Ed Charbeneau Prototype What I needed is this…
- 14. Ed Charbeneau Rapid Prototyping A group of techniques used to quickly produce a working model
- 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. Ed Charbeneau We need to be able to communicate on common ground with our: Designers Developers Customers Testers Who are we communicating with?
- 17. Ed Charbeneau We need to be able to communicate on common ground with: Designers Developers Customers Testers Users
- 18. Ed Charbeneau Prototype Common ground for collaboration
- 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. Ed Charbeneau Who am I in this process?
- 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. 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. Ed Charbeneau You MUST use these, right? Well, not exactly. OR
- 24. Ed Charbeneau Here are some things I like to prototype with Let’s talk about why! Build your own prototyping toolbox
- 25. Ed Charbeneau “Traditional” wireframe tools • Pen/Paper Wireframes • Photoshop • Mockup software – Basalmic – SketchFlow – PowerPoint • Prototypes – Axure
- 26. Ed Charbeneau Responsive Design tablet desktopmobile
- 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. 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. 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. Ed Charbeneau Process Efficient Responsive Design Process By Ben Callahan https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
- 31. Ed Charbeneau Wireframe tools Let’s talk about how!
- 32. Ed Charbeneau Foundation Rapid prototyping and responsive design framework
- 34. Chrome Devtools • Edit live in the browser • Drag and drop elements • Change colors and styles • Instant
- 35. InlineIpsum.js / Prototyping MVC • Placeholder content • injected at runtime • markup remains untouched • source code remains readable
- 36. Ed Charbeneau Git Ubiquitous • All platforms • Tooling support GitHub • Large open source community
- 37. Ed Charbeneau How it works <!-- begin demos --> <demos>
- 38. Chrome developer tools • Edit in browser • Drag/Drop • Device mode • Debug the UX #titanic { float:none; } /* Too soon? */
- 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. 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. 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. 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. Ed Charbeneau Kendo UI demo
- 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. 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. Ed Charbeneau Questions? <!-- end demos --> </demos>
- 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. Extras The following slides are for Q/A Ed Charbeneau
Notes de l'éditeur
- 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.