SlideShare uma empresa Scribd logo
1 de 53
Ed Charbeneau
Ed Charbeneau
Hi, I’m Ed
Charbeneau
Developer Advocate at Telerik
Author of things
Eat Sleep Code, podcast host
Chat with me @EdCharbeneau
Ed Charbeneau
http://imgs.xkcd.com/comics/the_general_problem.png
This used to be me…
Ed Charbeneau
“Solving Problems”
http://imgs.xkcd.com/comics/the_general_problem.png
Ed Charbeneau
The real problem was this…
Customer’s GoalsMy Goals User’s needs
Ed Charbeneau
Later on, it was this…
Customer’s GoalsMy Goals
Ed Charbeneau
A stereotypical view of users
Customer’s GoalsMy Goals
What we “thought” our users needed
Ed Charbeneau
Stereotype
a widely held but fixed and
oversimplified image or idea of a
particular type of person or thing.
Ed Charbeneau
Learning about your users…
Ed Charbeneau
The hard way
Ed Charbeneau
But communicating is hard
Ed Charbeneau
And you end up looking like a jerk
If your product requires a flow chart to operate, you failed.
Ed Charbeneau
Prototype
What I needed is this…
Ed Charbeneau
Rapid Prototyping
A group of techniques used to quickly
produce a working model
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.
Ed Charbeneau
We need to be able to communicate on
common ground with our:
Designers
Developers
Customers
Testers
Who are we
communicating
with?
Ed Charbeneau
We need to be able to communicate on
common ground with:
Designers
Developers
Customers
Testers
Users
Ed Charbeneau
Prototype
Common ground for collaboration
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/
Ed Charbeneau
Who am I in this
process?
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/
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
Ed Charbeneau
You MUST use these, right?
Well, not exactly.
OR
Ed Charbeneau
Here are some things I like to prototype with
Let’s talk about why!
Build your own prototyping toolbox
Ed Charbeneau
“Traditional” wireframe tools
• Pen/Paper Wireframes
• Photoshop
• Mockup software
– Basalmic
– SketchFlow
– PowerPoint
• Prototypes
– Axure
Ed Charbeneau
Responsive Design
tablet desktopmobile
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
Ed Charbeneau
I write it, and we’ll do it LIVE
It’s time to start wire
framing in code and
using the browser
***
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
Ed Charbeneau
Process
Efficient Responsive Design Process
By Ben Callahan
https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
Ed Charbeneau
Wireframe tools
Let’s talk about how!
Ed Charbeneau
Foundation
Rapid prototyping and
responsive design
framework
Ed Charbeneau
Bootstrap
Chrome Devtools
• Edit live in the browser
• Drag and drop elements
• Change colors and styles
• Instant
InlineIpsum.js / Prototyping MVC
• Placeholder content
• injected at runtime
• markup remains untouched
• source code remains readable
Ed Charbeneau
Git
Ubiquitous
• All platforms
• Tooling support
GitHub
• Large open source community
Ed Charbeneau
How it works
<!-- begin demos -->
<demos>
Chrome developer tools
• Edit in browser
• Drag/Drop
• Device mode
• Debug the UX
#titanic
{
float:none;
}
/* Too soon? */
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
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
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>
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>
Ed Charbeneau
Kendo UI demo
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
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
Ed Charbeneau
Questions?
<!-- end demos -->
</demos>
Ed Charbeneau
Prototyping
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
Extras
The following slides are for Q/A
Ed Charbeneau
Ed Charbeneau
Nesting
Ed Charbeneau
Bootstrap demo
Ed Charbeneau
Offsets
Ed Charbeneau
Push Pull

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Agile project management in IT - Sebastian Sussmann
Agile project management in IT - Sebastian SussmannAgile project management in IT - Sebastian Sussmann
Agile project management in IT - Sebastian Sussmann
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
 
E learning
E learningE learning
E learning
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzione
 
Web needs
Web needsWeb needs
Web needs
 

Destaque

Lecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principlesLecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principles
moduledesign
 
UE in der agilen Produktentwicklung #iak10
UE in der agilen Produktentwicklung #iak10UE in der agilen Produktentwicklung #iak10
UE in der agilen Produktentwicklung #iak10
Sandra Griffel
 
Portfolio_UX Designer Miona Bojanovic
Portfolio_UX Designer Miona BojanovicPortfolio_UX Designer Miona Bojanovic
Portfolio_UX Designer Miona Bojanovic
miona bojanovic
 
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
Rod King, Ph.D.
 

Destaque (20)

Stereotpyes
StereotpyesStereotpyes
Stereotpyes
 
Types of characters
Types of charactersTypes of characters
Types of characters
 
Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014
Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014
Mobile ASP.Net Web Forms - Making the impossible possible | FalafelCON 2014
 
Describing people
Describing people Describing people
Describing people
 
Describing people part 2
Describing people part 2Describing people part 2
Describing people part 2
 
Regional Identity
Regional IdentityRegional Identity
Regional Identity
 
The Ugly American Stereotype
The Ugly American StereotypeThe Ugly American Stereotype
The Ugly American Stereotype
 
About One Big Field
About One Big FieldAbout One Big Field
About One Big Field
 
Lecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principlesLecture 5 wireframes_and_ux_principles
Lecture 5 wireframes_and_ux_principles
 
52 Copy And Paste Blog Post Ideas For Your Blog
52 Copy And Paste Blog Post Ideas For Your Blog52 Copy And Paste Blog Post Ideas For Your Blog
52 Copy And Paste Blog Post Ideas For Your Blog
 
How to build a mobile app for patients health tracking
How to build a mobile app for patients health tracking How to build a mobile app for patients health tracking
How to build a mobile app for patients health tracking
 
How to run a pop-up lab : Innovation through rapid R&D (Emerce Retail, Holland)
How to run a pop-up lab: Innovation through rapid R&D (Emerce Retail, Holland)How to run a pop-up lab: Innovation through rapid R&D (Emerce Retail, Holland)
How to run a pop-up lab : Innovation through rapid R&D (Emerce Retail, Holland)
 
Prototypy
PrototypyPrototypy
Prototypy
 
What is good design, from One Big Field
What is good design, from One Big FieldWhat is good design, from One Big Field
What is good design, from One Big Field
 
Lean Startup Lab_Batch 1_2016
Lean Startup Lab_Batch 1_2016Lean Startup Lab_Batch 1_2016
Lean Startup Lab_Batch 1_2016
 
UE in der agilen Produktentwicklung #iak10
UE in der agilen Produktentwicklung #iak10UE in der agilen Produktentwicklung #iak10
UE in der agilen Produktentwicklung #iak10
 
From user journey to prototyping
From user journey to prototypingFrom user journey to prototyping
From user journey to prototyping
 
Portfolio_UX Designer Miona Bojanovic
Portfolio_UX Designer Miona BojanovicPortfolio_UX Designer Miona Bojanovic
Portfolio_UX Designer Miona Bojanovic
 
Recruiting Strategy Analysis
Recruiting Strategy AnalysisRecruiting Strategy Analysis
Recruiting Strategy Analysis
 
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
BUSINESS MODEL JIGSAW GAME: Use a Jigsaw Board to Rapidly Visualize, Prototyp...
 

Semelhante a Don't be a stereotype: Rapid Prototype

Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Anthony D. Paul
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
btopro
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
ipmindthegap
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
Abdul Dibosh
 

Semelhante a Don't be a stereotype: Rapid Prototype (20)

OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
Lean Prototyping Guide
Lean Prototyping GuideLean Prototyping Guide
Lean Prototyping Guide
 
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul ...
 
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - an...
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Make your own device with Script
Make your own device with ScriptMake your own device with Script
Make your own device with Script
 
User Experience Bootcamp for Developers
User Experience Bootcamp for DevelopersUser Experience Bootcamp for Developers
User Experience Bootcamp for Developers
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Enterprise PHP (PHP London Conference 2008)
Enterprise PHP (PHP London Conference 2008)Enterprise PHP (PHP London Conference 2008)
Enterprise PHP (PHP London Conference 2008)
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutions
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Rasmus, Think Again! Agile Framework == Happy Php Developer
Rasmus, Think Again! Agile Framework == Happy Php DeveloperRasmus, Think Again! Agile Framework == Happy Php Developer
Rasmus, Think Again! Agile Framework == Happy Php Developer
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 

Mais de Ed Charbeneau

Mais de Ed Charbeneau (19)

Writing JavaScript for C# Blazor.pptx
Writing JavaScript for C# Blazor.pptxWriting JavaScript for C# Blazor.pptx
Writing JavaScript for C# Blazor.pptx
 
Blazor Stability Testing Tools for Bullet Proof Applications
Blazor Stability Testing Tools for Bullet Proof ApplicationsBlazor Stability Testing Tools for Bullet Proof Applications
Blazor Stability Testing Tools for Bullet Proof Applications
 
Secrets of a Blazor Component Artisan (v2)
Secrets of a Blazor Component Artisan (v2)Secrets of a Blazor Component Artisan (v2)
Secrets of a Blazor Component Artisan (v2)
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
 
Blazor Full-Stack
Blazor Full-StackBlazor Full-Stack
Blazor Full-Stack
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component Artisan
 
Writing java script for Csharp's Blazor
Writing java script for Csharp's BlazorWriting java script for Csharp's Blazor
Writing java script for Csharp's Blazor
 
Goodbye JavaScript Hello Blazor
Goodbye JavaScript Hello BlazorGoodbye JavaScript Hello Blazor
Goodbye JavaScript Hello Blazor
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verse
 
Blazor
BlazorBlazor
Blazor
 
Giving Clarity to LINQ Queries by Extending Expressions R2
Giving Clarity to LINQ Queries by Extending Expressions R2Giving Clarity to LINQ Queries by Extending Expressions R2
Giving Clarity to LINQ Queries by Extending Expressions R2
 
The future of .NET lightning talk
The future of .NET lightning talkThe future of .NET lightning talk
The future of .NET lightning talk
 
Into the next dimension
Into the next dimensionInto the next dimension
Into the next dimension
 
Giving Clarity to LINQ Queries by Extending Expressions
Giving Clarity to LINQ Queries by Extending ExpressionsGiving Clarity to LINQ Queries by Extending Expressions
Giving Clarity to LINQ Queries by Extending Expressions
 
What is new in Q2 2015
What is new in Q2 2015What is new in Q2 2015
What is new in Q2 2015
 
TelerikNEXT What's new in UI for ASP.NET AJAX
TelerikNEXT What's new in UI for ASP.NET AJAXTelerikNEXT What's new in UI for ASP.NET AJAX
TelerikNEXT What's new in UI for ASP.NET AJAX
 
Journey to JavaScript (from C#)
Journey to JavaScript (from C#)Journey to JavaScript (from C#)
Journey to JavaScript (from C#)
 
Refactoring css
Refactoring cssRefactoring css
Refactoring css
 

Último

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Don't be a stereotype: Rapid Prototype

Notas do Editor

  1. http://about.me/edcharbeneau
  2. 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].
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. These are a good start [Demo].
  8. 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.
  9. 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.
  10. 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/
  11. 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.
  12. http://foundation.zurb.com/prototyping.php List benefits, show demos.
  13. https://github.com/NV/chrome-devtools-autosave/
  14. 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
  15. 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
  16. http://edcharbeneau.github.io/kendo-quickstart-mvc/ Quick-start guide Currently in Beta
  17. Read more at https://www.simple-talk.com/dotnet/asp.net/exploring-html-prototypes-with-git/
  18. Navigation issues: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  19. 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.