The Future of UI - How Mobile Design is Shaping The Web 2
Upcoming SlideShare
Loading in...5
×
 

The Future of UI - How Mobile Design is Shaping The Web 2

on

  • 14,596 views

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have ...

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content.

We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI.

Statistics

Views

Total Views
14,596
Views on SlideShare
8,621
Embed Views
5,975

Actions

Likes
48
Downloads
221
Comments
8

56 Embeds 5,975

http://ran.ge 3633
http://popwuping.com 2009
https://twitter.com 89
http://www.scoop.it 39
http://www.iphone-entreprise.com 24
http://dev.ran.ge 20
http://localhost 13
http://herrthees.de 12
http://ehd.development.com 12
http://www.pinterest.com 8
http://design.collected.info 8
http://stagingarea.staffordshirechambers.co.uk 7
http://www.themxgroup.com 6
http://pinterest.com 6
http://nginx.verdadefeminina.com.br 6
http://histrionteatro.es 5
http://wysetc.stage.typify.nl 5
http://designnotestelekom.tumblr.com 5
http://firesafetyconsultants.jhdwebdev.com 4
https://staging.goredridinghood.com 4
http://episcopaldiocesefortworth.org 4
http://kred.com 3
http://team-eight.com 3
http://laagujapublicitaria.controlpublicidad.com 3
http://www.pedalsdemenorca.com 3
http://impetusxmax.dev 3
http://rachelshae.com 2
http://www.twylah.com 2
http://www.conceptweb.com.br 2
http://www.ncsciencefestival.org 2
http://id.getusb.info 2
http://skeletoncase.com 2
http://bomb.ran.ge 2
http://www.newsblur.com 2
http://aestheticrealism.ycproduction1.com 2
http://www.metrix.co.kr 2
http://dev.newsblur.com 2
http://www.roqueta-torras.com 1
http://fcanarioparra.blogspot.com 1
https://web.tweetdeck.com 1
http://www.edret.cat 1
https://www.rebelmouse.com 1
http://tubeprofitpro.com 1
http://pruebaiv.de.mialias.net 1
http://www.freemz.nl 1
http://www.chatnetwerk.nl 1
http://viktorbjork.collected.info 1
http://wp.minin.lan 1
http://reader.aol.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good job! this approach could be right.
    Are you sure you want to
    Your message goes here
    Processing…
  • good job!
    Are you sure you want to
    Your message goes here
    Processing…
  • I wish I could see the script. Great presentation!
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Sara, I attended the live version of this talk that you gave at the wcmtl meetup and it was great. One little thing, you have a typo on slide 11.
    Are you sure you want to
    Your message goes here
    Processing…
  • Need of future. Thanks!!!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Future of UI - How Mobile Design is Shaping The Web 2 The Future of UI - How Mobile Design is Shaping The Web 2 Presentation Transcript

  • How Mobile Design Is ShapingThe WebSARA CANNON WP MONTREALThe Future of UI
  • SARA CANNONCo-founder / Creative Director At Rangesara-cannon.com @saracannon slideshare.net/saracannon
  • The Future
  • INTERNATIONAL DATA CORPORATION (IDC)http://www.idc.com/getdoc.jsp?containerId=prUS23028711The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015.
  • Desktop Mobile2007 20152009 20132011
  • The Mobile Web
  • The Mobile Web
  • The Web
  • ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  • Mobile ShouldNever Be AnAfterthought
  • CONTENTDESIGIN
  • ResponsiveWeb Design
  • Mobile First
  • Flexible Grids
  • Flexible Media
  • Adaptive Images
  • HiDPI
  • 163 DPI153,600 PIXELS480PX320 PXiPHONE 3GS -
  • 326 DPI614,4OO PIXELS96OPX64O PXiPHONE 4 +
  • 460,800MORE PIXELSiPHONE 4 +iPHONE 3GS -
  • 220 DPI2,304,0OOPIXELS2880PX1800 PXMACBOOK PRO15-INCH RETINA
  • image by Geoff Teehan
  • HiDPI First
  • SpeedAWESOMEV.S.
  • 2G Is TheNew Dial-up
  • CONNECTIONSPEEDIMAGE SIZE
  • CONNECTIONSPEEDIMAGE SIZE
  • Design Styles& Trends
  • Skeuomorphic
  • synth76.com
  • Flat Design
  • HyperlinkButton
  • Clippy Calendar byRicardo Carlet
  • http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button
  • http://sachagreif.com/flat-pixels
  • SkeuoFlat
  • Eyedrop.me
  • Gestures
  • How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch
  • http://maniacdev.com/2012/05/open-source-library-for-easy-clear-app-style-and-more-folding-transitions-between-any-uiviews/http://markpospesel.wordpress.com/2012/05/10/anatomy-of-a-folding-animation/
  • Motion AsRefinement
  • Medium.com/design-ux/926eb80d64e3Pasquale D’Silva
  • App-InfluencedWeb Design
  • Are All WebsitesWeb Apps?!
  • Are All WebsitesWeb Apps?!No.
  • Are All WebsitesWeb Apps?!No.
  • Navigation Patterns
  • Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Left Nav Flyout
  • Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Toggle
  • Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Select
  • ResponsiveNavigation.netErick Arbe
  • What Is TheFuture?
  • TouchInfluenced &Enabled
  • Motion AsRefinement
  • Attention ToDetail &Subtlety
  • Merging OfApp & WebDesign
  • Our work is never over.“- DAFT PUNK