SlideShare una empresa de Scribd logo
1 de 31
Descargar para leer sin conexión
Work Smarter,
Not Harder.
Using digital prototypes to
create responsive wireframes.
Who are we?
A brief history
Wireframes:
The Guttenberg
Version
The Wireframe
3 in 3
Illustrator

Axure

Omnigraffle
Responsive
Prototype
html

3 in 1
Early collaboration
Prototype Tools
Foundation

Bootstrap

Proty
What You Need
To Know
Responsive Principles
Grid System
Content is king
Sketch A Plan
Technical Components
GitHub*
Text Wrangler

Coda

Dreamweaver

Sublime Text 2

Textmate
Prototype Pros
Instant feedback
...for the most part.
Prototypes
are
dynamic.

…like these
two.
Prototype Cons
This looks convincingly real!
Changes to
timeline
Integrate as a
deliverable
Paparazzi

Awesome Screenshot
In sum...
• 3 in 1
• HTML/CSS (more universal)
• instant feedback
• more effective wireframes
Gracias!
Michelle Chin	


mchin@rockcreeksm.com	


Andrew Wachholz	


awachholz@rockcreeksm.com

Más contenido relacionado

Destacado

Destacado (13)

Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)Testing Paper Prototypes (IxDworks)
Testing Paper Prototypes (IxDworks)
 
Approaches to Interaction Design
Approaches to Interaction DesignApproaches to Interaction Design
Approaches to Interaction Design
 
6 Thinking Hats
6 Thinking Hats6 Thinking Hats
6 Thinking Hats
 
Tallinn summerschool 21.07.2015
Tallinn summerschool 21.07.2015Tallinn summerschool 21.07.2015
Tallinn summerschool 21.07.2015
 
Reply Labcamp: Test before you Invest, A Guide to Rapid Prototyping (Design D...
Reply Labcamp: Test before you Invest, A Guide to Rapid Prototyping (Design D...Reply Labcamp: Test before you Invest, A Guide to Rapid Prototyping (Design D...
Reply Labcamp: Test before you Invest, A Guide to Rapid Prototyping (Design D...
 
Design for non-designers
Design for non-designersDesign for non-designers
Design for non-designers
 
Low Fidelity Prototyping with Paper
Low Fidelity Prototyping with PaperLow Fidelity Prototyping with Paper
Low Fidelity Prototyping with Paper
 
Paper Prototyping
Paper PrototypingPaper Prototyping
Paper Prototyping
 
Rapid Prototyping Paper
Rapid Prototyping PaperRapid Prototyping Paper
Rapid Prototyping Paper
 
Paper Prototyping
Paper Prototyping Paper Prototyping
Paper Prototyping
 
User Research: Personas, scenarios, user stories
User Research: Personas, scenarios, user storiesUser Research: Personas, scenarios, user stories
User Research: Personas, scenarios, user stories
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar a Digital Prototypes: Work Smarter, Not Harder

LangChain Intro by KeyMate.AI
LangChain Intro by KeyMate.AILangChain Intro by KeyMate.AI
LangChain Intro by KeyMate.AI
OzgurOscarOzkan
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 

Similar a Digital Prototypes: Work Smarter, Not Harder (20)

2013 Lecture 5: AR Tools and Interaction
2013 Lecture 5: AR Tools and Interaction 2013 Lecture 5: AR Tools and Interaction
2013 Lecture 5: AR Tools and Interaction
 
Doing data science with Clojure
Doing data science with ClojureDoing data science with Clojure
Doing data science with Clojure
 
LangChain Intro by KeyMate.AI
LangChain Intro by KeyMate.AILangChain Intro by KeyMate.AI
LangChain Intro by KeyMate.AI
 
LanGCHAIN Framework
LanGCHAIN FrameworkLanGCHAIN Framework
LanGCHAIN Framework
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
 
ThreadModel rev 1.4
ThreadModel rev 1.4ThreadModel rev 1.4
ThreadModel rev 1.4
 
A Pragmatic Approach
A Pragmatic ApproachA Pragmatic Approach
A Pragmatic Approach
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 
Wireframes vs prototypes
Wireframes vs prototypesWireframes vs prototypes
Wireframes vs prototypes
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
Computer repair bootstrap theme
Computer repair bootstrap themeComputer repair bootstrap theme
Computer repair bootstrap theme
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworks
 
Hci 3
Hci 3Hci 3
Hci 3
 
Hexagonal Symfony - SymfonyCon Amsterdam 2019
Hexagonal Symfony - SymfonyCon Amsterdam 2019Hexagonal Symfony - SymfonyCon Amsterdam 2019
Hexagonal Symfony - SymfonyCon Amsterdam 2019
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
Lambda Architecture and open source technology stack for real time big data
Lambda Architecture and open source technology stack for real time big dataLambda Architecture and open source technology stack for real time big data
Lambda Architecture and open source technology stack for real time big data
 
Applying Graphs to Enterprise Media Asset Management at Scripps Networks
Applying Graphs to Enterprise Media Asset Management at Scripps NetworksApplying Graphs to Enterprise Media Asset Management at Scripps Networks
Applying Graphs to Enterprise Media Asset Management at Scripps Networks
 
Intelligent Thumbnail Selection
Intelligent Thumbnail SelectionIntelligent Thumbnail Selection
Intelligent Thumbnail Selection
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

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
 
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
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
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
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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...
 
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...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
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