Breaking the Web - Webinale 2014

Johannes Ippen
Johannes IppenSenior Graphic Designer at wooga
••
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.
1 of 77

Breaking the Web - Webinale 2014

••
Design

Breaking the web - Session from Webinale 2014 in Berlin by Florian Franke & Johannes Ippen. What do Popups, Modals and chairs have in common? franke@madein.io http://twitter.com/ffranke1985 jo@thxalot.co http://twitter.com/presskind

Johannes Ippen
Johannes IppenSenior Graphic Designer at wooga

Recommended

Iliinsky Guaranteed Successful Design O'Reilly Design conf 2017 by
Iliinsky Guaranteed Successful Design O'Reilly Design conf 2017Iliinsky Guaranteed Successful Design O'Reilly Design conf 2017
Iliinsky Guaranteed Successful Design O'Reilly Design conf 2017iliinsky
1.8K views•37 slides
Guaranteed Successful Design - Noah Iliinsky by
Guaranteed Successful Design - Noah IliinskyGuaranteed Successful Design - Noah Iliinsky
Guaranteed Successful Design - Noah Iliinskyiliinsky
1.8K views•21 slides
DeNA Sharing by
DeNA SharingDeNA Sharing
DeNA SharingBen Lin
11.8K views•37 slides
Максим Ткачук - «Маленькие советы дизайнерам» by
Максим Ткачук - «Маленькие советы дизайнерам»Максим Ткачук - «Маленькие советы дизайнерам»
Максим Ткачук - «Маленькие советы дизайнерам»ПрофсоUX
1.3K views•45 slides
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone by
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows PhoneMWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows PhoneMicrosoft Mobile Developer
569 views•19 slides
5 preso #5 mpv 2 and data presentation.pdf by
5 preso #5 mpv 2 and data presentation.pdf5 preso #5 mpv 2 and data presentation.pdf
5 preso #5 mpv 2 and data presentation.pdfSteve Lee
39 views•10 slides

More Related Content

Similar to Breaking the Web - Webinale 2014

Silverlight An Introduction by
Silverlight An IntroductionSilverlight An Introduction
Silverlight An IntroductionJeff Blankenburg
366 views•39 slides
HTML5 Meetup | Back to Basics: Wireframing & Planning by
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
2.5K views•46 slides
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett by
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
251 views•121 slides
Designing for User Experience (UX) with Atlassian Tools by
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian ToolsAtlassian
10.2K views•54 slides
Why user experience design fails. by
Why user experience design fails.Why user experience design fails.
Why user experience design fails.Patrick Mooney
1.8K views•59 slides
Web valley talk - usability, visualization and mobile app development by
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
1.5K views•48 slides

Similar to Breaking the Web - Webinale 2014(20)

Silverlight An Introduction by Jeff Blankenburg
Silverlight An IntroductionSilverlight An Introduction
Silverlight An Introduction
Jeff Blankenburg•366 views
HTML5 Meetup | Back to Basics: Wireframing & Planning by Paul Crimi
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
Paul Crimi•2.5K views
Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett by 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
Kevin Kimmett•251 views
Designing for User Experience (UX) with Atlassian Tools by Atlassian
Designing for User Experience (UX) with Atlassian ToolsDesigning for User Experience (UX) with Atlassian Tools
Designing for User Experience (UX) with Atlassian Tools
Atlassian•10.2K views
Why user experience design fails. by Patrick Mooney
Why user experience design fails.Why user experience design fails.
Why user experience design fails.
Patrick Mooney•1.8K views
Web valley talk - usability, visualization and mobile app development by Eamonn Maguire
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
Eamonn Maguire•1.5K views
Designing for Today's Web by Meagan Fisher
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
Meagan Fisher•191 views
Mobile first: A future friendly approach to UX design by InVision App
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
InVision App•24.2K views
Responsive Design & Prototyping -- An Agency Model (Part 2/3) by Neeta Goplani
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•748 views
Working better together designers & developers by Vitali Pekelis
Working better together designers & developersWorking better together designers & developers
Working better together designers & developers
Vitali Pekelis•173 views
User Experience & Web Product Design by Steve Hickey
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product Design
Steve Hickey•2.7K views
Impact of Adobe Edge Tools and Services in Higher Education by Joseph Labrecque
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
Joseph Labrecque•1.5K views
The Flashy Side of Adobe Edge by Joseph Labrecque
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe Edge
Joseph Labrecque•1.2K views
Jennifer Robbins: ARTIFACT Conference Keynote by JenRobbins
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins•3.9K views
Responsive Design with Backbone by Mauvis Ledford
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
Mauvis Ledford•6.1K views
UX design for every screen by Four Kitchens
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens•2.7K views
Doran-C4L2010 by Quickoffice Test
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
Quickoffice Test•232 views
Rapid design prototyping by Ayako Sayama
Rapid design prototypingRapid design prototyping
Rapid design prototyping
Ayako Sayama•463 views
Brief introduction Fluent UI Microsoft Design System by Domenico Monaco
Brief introduction Fluent UI Microsoft Design SystemBrief introduction Fluent UI Microsoft Design System
Brief introduction Fluent UI Microsoft Design System
Domenico Monaco•418 views
How to build a kick-ass mobile experience by Michael Dick
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
Michael Dick•1.2K views

Recently uploaded

The Last Grains by
The Last GrainsThe Last Grains
The Last Grainspulkkinenaliisa
43 views•122 slides
FIESTAS DE QUITO.pdf by
FIESTAS DE QUITO.pdfFIESTAS DE QUITO.pdf
FIESTAS DE QUITO.pdfeluniversocom
11 views•8 slides
polaris by
polarispolaris
polarisscribddarkened352
237 views•13 slides
Anti-Cancer Drugs-Medicinal Chemistry by
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal ChemistryNarminHamaaminHussen
7 views•41 slides
Figma Prototype A to Z.pdf by
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdfAtiqur Rahaman
16 views•30 slides
Doing Footwear - Footwear Factory by
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear FactoryDoing Footwear
10 views•15 slides

Recently uploaded(20)

The Last Grains by pulkkinenaliisa
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa•43 views
FIESTAS DE QUITO.pdf by eluniversocom
FIESTAS DE QUITO.pdfFIESTAS DE QUITO.pdf
FIESTAS DE QUITO.pdf
eluniversocom•11 views
polaris by scribddarkened352
polarispolaris
polaris
scribddarkened352•237 views
Anti-Cancer Drugs-Medicinal Chemistry by NarminHamaaminHussen
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen•7 views
Figma Prototype A to Z.pdf by Atiqur Rahaman
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman•16 views
Doing Footwear - Footwear Factory by Doing Footwear
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear•10 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
slideceotemplates•5 views
New Icon Presentation.pdf by sydneyjrichardson
New Icon Presentation.pdfNew Icon Presentation.pdf
New Icon Presentation.pdf
sydneyjrichardson•20 views
Anthelmintic Drugs-Medicinal Chemistry by NarminHamaaminHussen
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen•5 views
TISFLEET WEB DESIGN PROJECT by Rabius Sany
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany•38 views
Design System.pdf by Atiqur Rahaman
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman•16 views
Task 3 copy.pptx by ZaraCooper2
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper2•21 views
Oregon Ducks 4 Spencer Webb Hoodie by brandshop1
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop1•12 views
Nomor Meja RUANG-4.doc by ssuserc40b91
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b91•6 views
Presentation (1).pdf by hjksa
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa•17 views
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
NirmalanGanapathy1•8 views
Menu.pdf by nyhapedraza
Menu.pdfMenu.pdf
Menu.pdf
nyhapedraza•8 views
SS25 Fashion Key Items trend book by Peclers Paris
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris•123 views
Anti -Parkinsonian Drugs-Medicinal Chemistry by NarminHamaaminHussen
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen•12 views
Designing Effective AR Experiences by Kumar Ahir
Designing Effective AR ExperiencesDesigning Effective AR Experiences
Designing Effective AR Experiences
Kumar Ahir•5 views

Breaking the Web - Webinale 2014