SlideShare a Scribd company logo
1 of 24
Wireframing in full ((stereo))
Why interactivity is a winner 
“Wireframes aren’t dead ...
That’s me

Wolf Becvar
wolf@hotgloo.com
@wdbecvar
www.wireframeswednesday.com
#wfwd #wiwe




                              Source: Scott Beale /Laughing Squid, laughingsquid.com
“We support webworkers to
visualize their creative ideas.
                      - HotGloo claim
“Interaction is a kind of action that occurs as
two or more objects have an effect upon one
another. The idea of a two-way effect is
essential in the concept of interaction, as
opposed to a one-way causal effect [...]

• All systems are related and interdependent.
• Every action has a consequence.
                                       - Wikipedia
Interactivity describes how your prototype
behaves.

•Does your prototype react to user inputs
with feedback?

•Can they “click” on something to go to
another page or fill in a form?

•Will buttons appear to depress and drop-
down menus work?

•Will different personas experience
different content?
                        - Chris Farnum for Boxes and Arrows
Good UX is all about interactions
But ...
Wireframes


“Wireframes are a visual representation
of the functional page start. They visually
communicate what functional pieces are
present on a page and their relationship
to each other.
                    - Todd Zaki Warfel, Protyping 2009
Wireframing in full ((stereo)) Why interactivity is a winner
Prototypes


“A prototype is a representative model
or simulation of the final system. Unlike
wireframes, prototypes go further than
show and tell and actually let you
experience the design.
                    - Todd Zaki Warfel, Protyping 2009
Wireframing in full ((stereo)) Why interactivity is a winner
2009
Wireframing in full ((stereo)) Why interactivity is a winner
Source: http://www.utexas.edu/learn/designprocess/structure.html
More than just wireframes ...
Collaborative   Independent




 Bulletproof    Easy-to-use
Wireframing in full ((stereo)) Why interactivity is a winner
Wireframing in full ((stereo)) Why interactivity is a winner
Wireframing in full ((stereo)) Why interactivity is a winner
Good UX is all about communication
It’s Demo Time!
Why interactive wireframing?

• To get a clear picture of what information will be
needed on each page before design.
• To spend time and really focus on what each
page’s purpose is.
• To have a clear look at how the site will react to
various visitors without the clutter of color or
design elements.
• To give designer a clear view of what needs to be
designed.
• To get clients deeply involved in the planning
process.
Thank You
Wolf Becvar
wolf@hotgloo.com
@wdbecvar
www.hotgloo.com

HotGloo
Celsiusweg 15
22761 Hamburg
Germany

More Related Content

Similar to Wireframing in full ((stereo)) Why interactivity is a winner

Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingDavid Farrell
 
State of the inline debate
State of the inline debateState of the inline debate
State of the inline debateRasmus Skjoldan
 
White-boarding & Paper Prototyping
White-boarding & Paper PrototypingWhite-boarding & Paper Prototyping
White-boarding & Paper PrototypingAchin Simhal
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesDavid Farrell
 
Rapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad WorldRapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad WorldMarti Gold
 
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...RSD Relating Systems Thinking and Design
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Careerdpanarelli
 
Skip Cole, USIP, techatstate
Skip Cole, USIP, techatstateSkip Cole, USIP, techatstate
Skip Cole, USIP, techatstatetechatstate
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingLewis Lin 🦊
 
COMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeCOMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeMark Billinghurst
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
Leadership in Online Creative Collaboration - CSCW 2008
Leadership in Online Creative Collaboration - CSCW 2008Leadership in Online Creative Collaboration - CSCW 2008
Leadership in Online Creative Collaboration - CSCW 2008Kurt Luther
 
Prototyping
PrototypingPrototyping
PrototypingNick Hodge
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
User Experience as the Lens
User Experience as the LensUser Experience as the Lens
User Experience as the LensKevin Rundblad
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Dan Mall
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the FutureJoshua Randall
 
Failing faster, failing forward: Collaborative Design as a Development Activity
Failing faster, failing forward: Collaborative Design as a Development ActivityFailing faster, failing forward: Collaborative Design as a Development Activity
Failing faster, failing forward: Collaborative Design as a Development ActivityChristina York
 

Similar to Wireframing in full ((stereo)) Why interactivity is a winner (20)

Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
 
State of the inline debate
State of the inline debateState of the inline debate
State of the inline debate
 
White-boarding & Paper Prototyping
White-boarding & Paper PrototypingWhite-boarding & Paper Prototyping
White-boarding & Paper Prototyping
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Rapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad WorldRapid Prototyping 2015: Its a Mad Mad World
Rapid Prototyping 2015: Its a Mad Mad World
 
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
 
Skip Cole, USIP, techatstate
Skip Cole, USIP, techatstateSkip Cole, USIP, techatstate
Skip Cole, USIP, techatstate
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothing
 
COMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeCOMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and Prototype
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
Leadership in Online Creative Collaboration - CSCW 2008
Leadership in Online Creative Collaboration - CSCW 2008Leadership in Online Creative Collaboration - CSCW 2008
Leadership in Online Creative Collaboration - CSCW 2008
 
Prototyping
PrototypingPrototyping
Prototyping
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
User Experience as the Lens
User Experience as the LensUser Experience as the Lens
User Experience as the Lens
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
 
Failing faster, failing forward: Collaborative Design as a Development Activity
Failing faster, failing forward: Collaborative Design as a Development ActivityFailing faster, failing forward: Collaborative Design as a Development Activity
Failing faster, failing forward: Collaborative Design as a Development Activity
 

More from Wolf Becvar

Guerilla UX Bootcamp
Guerilla UX  BootcampGuerilla UX  Bootcamp
Guerilla UX BootcampWolf Becvar
 
Off The Map
Off The MapOff The Map
Off The MapWolf Becvar
 
Don't let your baby die! 10+ WebApp Survival Tips
Don't let your baby die! 10+ WebApp Survival TipsDon't let your baby die! 10+ WebApp Survival Tips
Don't let your baby die! 10+ WebApp Survival TipsWolf Becvar
 
Some Things You Can't Wireframe
Some Things You Can't Wireframe Some Things You Can't Wireframe
Some Things You Can't Wireframe Wolf Becvar
 
How to not suck! Lessons Learned from running a Web Startup.
How to not suck! Lessons Learned from running a Web Startup. How to not suck! Lessons Learned from running a Web Startup.
How to not suck! Lessons Learned from running a Web Startup. Wolf Becvar
 
Appvertising - How to Brand and Market Your WebApp
Appvertising - How to Brand and Market Your WebAppAppvertising - How to Brand and Market Your WebApp
Appvertising - How to Brand and Market Your WebAppWolf Becvar
 
HotGloo Start-Up Talk WebExpo 2010
HotGloo Start-Up Talk WebExpo 2010HotGloo Start-Up Talk WebExpo 2010
HotGloo Start-Up Talk WebExpo 2010Wolf Becvar
 

More from Wolf Becvar (7)

Guerilla UX Bootcamp
Guerilla UX  BootcampGuerilla UX  Bootcamp
Guerilla UX Bootcamp
 
Off The Map
Off The MapOff The Map
Off The Map
 
Don't let your baby die! 10+ WebApp Survival Tips
Don't let your baby die! 10+ WebApp Survival TipsDon't let your baby die! 10+ WebApp Survival Tips
Don't let your baby die! 10+ WebApp Survival Tips
 
Some Things You Can't Wireframe
Some Things You Can't Wireframe Some Things You Can't Wireframe
Some Things You Can't Wireframe
 
How to not suck! Lessons Learned from running a Web Startup.
How to not suck! Lessons Learned from running a Web Startup. How to not suck! Lessons Learned from running a Web Startup.
How to not suck! Lessons Learned from running a Web Startup.
 
Appvertising - How to Brand and Market Your WebApp
Appvertising - How to Brand and Market Your WebAppAppvertising - How to Brand and Market Your WebApp
Appvertising - How to Brand and Market Your WebApp
 
HotGloo Start-Up Talk WebExpo 2010
HotGloo Start-Up Talk WebExpo 2010HotGloo Start-Up Talk WebExpo 2010
HotGloo Start-Up Talk WebExpo 2010
 

Recently uploaded

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (20)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Wireframing in full ((stereo)) Why interactivity is a winner