Don't be a stereotype: Rapid Prototype
-
date post
21-Oct-2014 -
Category
Technology
-
view
19.079 -
download
1
description
Transcript of Don't be a stereotype: Rapid Prototype
![Page 1: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/1.jpg)
Ed Charbeneau
![Page 2: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/2.jpg)
Ed Charbeneau
Ed Charbeneau
• Sr. Web Developer for Sypris Solutions
• Code PaLOUsa Co-Chairman• Author: Simple-Talk• ResponsiveMVC.net• Twitter: @EdCharbeneau
![Page 3: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/3.jpg)
Ed Charbeneau
Rapid Prototyping
A group of techniques used to quickly produce a working
model
http://imgs.xkcd.com/comics/the_general_problem.png
![Page 4: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/4.jpg)
Ed Charbeneau
Stereotype
a widely held but fixed and oversimplified image or idea of a particular type of person
or thing.
![Page 5: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/5.jpg)
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.
![Page 6: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/6.jpg)
Ed Charbeneau
It’s all about communication
![Page 7: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/7.jpg)
Ed Charbeneau
It’s all about communication
![Page 8: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/8.jpg)
Ed Charbeneau
Who are we communicating with?
We need to be able to communicate on common ground
with our:Designers
DevelopersCustomers
Testers
![Page 9: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/9.jpg)
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/
![Page 10: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/10.jpg)
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
![Page 11: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/11.jpg)
Ed Charbeneau
You MUST use these, right?
Well, not exactly.
OR
![Page 12: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/12.jpg)
Ed Charbeneau
Build your own prototyping toolbox
Here are some things I like to develop with
Let’s talk about why!
![Page 13: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/13.jpg)
Ed Charbeneau
Tools
Editor
HTML, JS & CSS Editor
IntellisenseExtendablevNext, even
better
Packages
Great resourceOpen Source
Easily manageable
Fast installation
Platforms
Full control of HTML
Promotes reusabilityTemplates
Open source
![Page 14: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/14.jpg)
Ed Charbeneau
Visual Studio
IDE
HTML, JS & CSS Editor
IntellisenseExtendablevNext, even
better
NuGet
Great resourceOpen Source
Easily manageable
Fast installation
ASP.Net MVC
Full control of HTML
Promotes reusability
RazorOpen source
![Page 15: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/15.jpg)
Ed Charbeneau
“Traditional” wireframe tools
• Wireframes• Photoshop• Mockup software
– Basalmic– SketchFlow– PowerPoint
![Page 16: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/16.jpg)
Ed Charbeneau
Responsive Design
tablet desktopmobile
![Page 17: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/17.jpg)
Ed Charbeneau
Static wireframe pitfalls
Responsive designHow will this look a phone
How will this look on my tabletWhat if I rotate the displayWhat will be displayed if I
“snap” the window in Windows 8?
![Page 18: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/18.jpg)
Ed Charbeneau
I write it, and we’ll do it LIVE
It’s time to start wire framing in code and using the browser
***
![Page 19: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/19.jpg)
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
![Page 20: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/20.jpg)
Ed Charbeneau
Foundation
Rapid prototyping and responsive
design framework
![Page 21: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/21.jpg)
Ed Charbeneau
Bootstrap
![Page 22: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/22.jpg)
Ed Charbeneau
Git
Easy to use source controlUbiquitous• All platforms• Tooling support
GitHub• Large open source community
![Page 23: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/23.jpg)
Ed Charbeneau
Chrome developer tools
Edit code directly from the browser
#titanic{
float:none;}/* Too soon? */
![Page 24: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/24.jpg)
Ed Charbeneau
How it works
<!-- begin demos --><demos>
![Page 25: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/25.jpg)
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
![Page 26: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/26.jpg)
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
![Page 27: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/27.jpg)
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>
![Page 28: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/28.jpg)
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>
![Page 29: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/29.jpg)
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
![Page 30: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/30.jpg)
Ed Charbeneau
Testing
Branch and merge
Master Merged
Left Navigation
Right Navigation
Deleted
New Master:Using left navigation
Decision:Should we use left orright navigation
Branch
Branch
![Page 31: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/31.jpg)
Ed Charbeneau
Questions?
<!-- end demos --></demos>
![Page 32: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/32.jpg)
Ed Charbeneau
Prototyping
![Page 33: Don't be a stereotype: Rapid Prototype](https://reader030.fdocuments.net/reader030/viewer/2022020115/54473ae1afaf9f65178b47d9/html5/thumbnails/33.jpg)
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-foun
dation/
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