SlideShare a Scribd company logo
1 of 77
Breaking 

the web.
Johannes Ippen Florian Franke
Johannes
Ippen
!
@presskind
Breaking the Web - Webinale 2014
www.wooga.com
Florian
Franke
!
@ffranke1985
Breaking the Web - Webinale 2014
www.madein.io
Breaking the Web - Webinale 2014
Breaking 

the
what?
Snowden.
NSA.
FCC.
Flat
vs.
Realism
1100
1750
1790
1800
1950
Breaking the Web - Webinale 2014
Web
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
JavaScript
Prototype
74kB
jQuery 2.11
86kb
JavaScript
jQuery 1.0
20kB
Trends.
Breaking the Web - Webinale 2014
1999
2014
2000
2014
2000
2014
Why?
Design
Visual
Context
Expectation
Breaking the Web - Webinale 2014
BROKEN
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
BROKEN
BROKEN
BROKEN
User?
Don’t
break it
for
them.
!
Please.
User
!
User
Centric
Design
User Centric Design
1
visuals
Breaking the Web - Webinale 2014
User Centric Design
2
context
Breaking the Web - Webinale 2014
User Centric Design
3
speed
http://blog.kissmetrics.com/loading-time/?wide=1
Breaking the Web - Webinale 2014
User Centric Design
4
freedom 

of choice
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
User Centric Design
5
interaction
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
user centric design
=
1 visuals
2 context
3 speed
4 freedom of choice
5 interaction
design =
how
things
work
good design =
!
things
work
for the user
good design =
timeless
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Breaking the Web - Webinale 2014
Think like
a user.
Don’t
break it
for
them.
!
Thanks.

More Related Content

Similar to Breaking the Web - Webinale 2014

Silverlight An Introduction
Silverlight   An IntroductionSilverlight   An Introduction
Silverlight An IntroductionJeff Blankenburg
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin KimmettVancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin KimmettKevin Kimmett
 
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsAtlassian
 
Why user experience design fails.
Why user experience design fails.Why user experience design fails.
Why user experience design fails.Patrick Mooney
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Neeta Goplani
 
Working better together designers & developers
Working better together   designers & developersWorking better together   designers & developers
Working better together designers & developersVitali Pekelis
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product DesignSteve Hickey
 
Impact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationImpact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationJoseph Labrecque
 
The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeJoseph Labrecque
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with BackboneMauvis Ledford
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Rapid design prototyping
Rapid design prototypingRapid design prototyping
Rapid design prototypingAyako Sayama
 
Brief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design SystemBrief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design SystemDomenico Monaco
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experienceMichael Dick
 

Similar to Breaking the Web - Webinale 2014 (20)

Silverlight An Introduction
Silverlight   An IntroductionSilverlight   An Introduction
Silverlight An Introduction
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin KimmettVancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
 
Designing for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
 
Why user experience design fails.
Why user experience design fails.Why user experience design fails.
Why user experience design fails.
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app development
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
 
Working better together designers & developers
Working better together   designers & developersWorking better together   designers & developers
Working better together designers & developers
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product Design
 
Impact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationImpact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher Education
 
The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe Edge
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Doran-C4L2010
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
 
Rapid design prototyping
Rapid design prototypingRapid design prototyping
Rapid design prototyping
 
Brief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design SystemBrief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design System
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
 

Recently uploaded

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
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
 
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
 
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
 
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
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
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
 
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
 
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
 
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
 
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
 

Recently uploaded (20)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
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
 
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 ...
 
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
 
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
 
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...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
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
 
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
 
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
 
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...
 
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