Don't be a stereotype: Rapid Prototype
Upcoming SlideShare
Loading in...5
×
 

Don't be a stereotype: Rapid Prototype

on

  • 18,803 views

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 ...

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.

Statistics

Views

Total Views
18,803
Views on SlideShare
1,074
Embed Views
17,729

Actions

Likes
1
Downloads
19
Comments
0

10 Embeds 17,729

http://edcharbeneau.github.io 10522
http://edcharbeneau.github.com 7070
http://localhost 72
http://www.behance.net 51
http://www.rojodojo.com 4
http://172.16.30.22 3
https://translate.googleusercontent.com 3
http://translate.googleusercontent.com 2
http://www.slashdocs.com 1
https://www.behance.net 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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].
  • Image 1 corresponds to how the UI for a pager might look if we don’t prototype. Image 2 shows an extreme case of how a user might comprehend instructions.
  • 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.
  • Chrome for debugging and tweaking CSS and JS in real time.Visual Studio for server technologies like ASP.Net MVC.Git for fast and easy source control and A-B testing.Foundation for wire framing and responsive design.NuGet for pulling in open source tools into Visual Studio.
  • List reasons.
  • These are a good start [Demo].
  • Wireframe pitfall ;-)
  • 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 experiencesSimple 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 MVCCoded 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.
  • Creating wireframes in the browserCoded Wireframes with ASP.NET MVCCoded 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 foundationhttp://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  • http://foundation.zurb.com/prototyping.phpList benefits, show demos.
  • http://code.google.com/p/gitextensions/http://windows.github.com/[Quick demo]
  • https://github.com/NV/chrome-devtools-autosave/
  • http://foundation.zurb.comInstall on NuGethttp://www.nuget.org/packages/Foundation3_MVC4Explore Samples https://github.com/EdCharbeneau/RapidPrototypingMVC4ExamplesAndhttps://github.com/EdCharbeneau/Foundation3SinglePageRWD
  • 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/
  • ConclusionRapid 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 Don't be a stereotype: Rapid Prototype Presentation Transcript

  • Ed Charbeneau
  • Ed CharbeneauEd Charbeneau• Corporate web developer for Sypris Solutions• Code PaLOUsa Co-Chairman• Author: Simple-Talk• ResponsiveMVC.net• Twitter: @EdCharbeneau
  • Ed CharbeneauRapid PrototypingA group of techniques used to quicklyproduce a working modelhttp://imgs.xkcd.com/comics/the_general_problem.png
  • Ed CharbeneauIt’s all about communicationWithout a workingmodel, we can’tcommunicate ourgoals and we can’tanticipate how userswill interact withthe product.
  • Ed CharbeneauWho are we communicating with?We need to be able to communicate oncommon ground with our:DesignersDevelopersCustomersTesters
  • Ed CharbeneauWeb Developer / DesignerThis is not meand I am both aWeb Designer andDeveloperSource: http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
  • Ed CharbeneauDon’t be a stereotypeNobody aspires to fit a stereotype, so stop doing itwith your tool setThink outside your toolbox
  • Ed CharbeneauYou MUST use these, right?Well, not exactly.OR
  • Ed CharbeneauBuild your own prototyping toolboxHere are some things I like to develop withLet’s talk about why!
  • Ed CharbeneauVisual StudioIDEHTML, JS & CSS EditorIntellisenseExtendablevNext, even betterNuGetGreat resourceOpen SourceEasily manageableFast installationASP.Net MVCFull control of HTMLPromotes reusabilityRazorOpen source
  • Ed Charbeneau“Traditional” wireframe tools• Wireframes• Photoshop• Mockup software– Basalmic– SketchFlow– PowerPoint
  • Ed CharbeneauStatic wireframe pitfalls
  • Ed CharbeneauStatic wireframe pitfallsResponsive designHow will this look a phoneHow will this look on my tabletWhat if I rotate the displayWhat will be displayed if I “snap” thewindow in Windows 8?
  • Ed CharbeneauI write it, and we’ll do it LIVEIt’s time to startwire framing incode and usingthe browser***
  • Ed CharbeneauDon’t look at me like I’m crazyCreatingwireframes in thebrowser has itsadvantages
  • Ed CharbeneauCorrect ContextViewing aprototype in anativeenvironmentgives you a betterperspective.Source: http://www.zurb.com/article/898/wireframes-are-dead-long-live-wireframes
  • Ed CharbeneauFoundationRapid prototyping andresponsive designframework
  • Ed CharbeneauGitEasy to use source controlWindows integration• Git Extensions• GitHub for WindowsGitHub• Large open source following
  • Ed CharbeneauChrome developer toolsEdit code directly from the browser#titanic{float:none;}/* Too soon? */
  • Ed CharbeneauHow it works<!-- begin demos --><demos>
  • Ed CharbeneauPrototyping 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
  • Ed CharbeneauInlineIpsum 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
  • Ed CharbeneauFoundation demo<!– css example --><!– a row with two six column wide blocks of content --><div class=“row”><div class=“six columns”></div><div class=“six columns”></div></div>
  • Ed CharbeneauIteration and AB testingCreate 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
  • Ed CharbeneauTestingBranch and mergeMaster MergedLeft NavigationRight Navigation DeletedNew Master:Using left navigationDecision:Should we use left orright navigationBranchBranch
  • Ed CharbeneauQuestions?<!-- end demos --></demos>
  • Ed CharbeneauThank youEd Charbeneau@EdCharbeneauAbout.me/EdCharbeneauCodePaLOUsa.com2013Future web developer
  • ResourcesReading• 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/EdCharbeneauSoftware• Responsivemvc.net/resources (This presentation and related resources)• windows.github.com (GitHub for Windows)• github.com/EdCharbeneau/InlineIpsum (InlineIpsum - jQuery)Ed Charbeneau