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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 16,127 views
Published

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 …

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.

Published in Design , Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Good job! this approach could be right.
    Are you sure you want to
    Your message goes here
  • good job!
    Are you sure you want to
    Your message goes here
  • I wish I could see the script. Great presentation!
    Are you sure you want to
    Your message goes here
  • 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
  • Need of future. Thanks!!!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
16,127
On SlideShare
0
From Embeds
0
Number of Embeds
58

Actions

Shares
Downloads
226
Comments
8
Likes
49

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. How Mobile Design Is ShapingThe WebSARA CANNON WP MONTREALThe Future of UI
  • 2. SARA CANNONCo-founder / Creative Director At Rangesara-cannon.com @saracannon slideshare.net/saracannon
  • 3. The Future
  • 4. 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.
  • 5. Desktop Mobile2007 20152009 20132011
  • 6. The Mobile Web
  • 7. The Mobile Web
  • 8. The Web
  • 9. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  • 10. Mobile ShouldNever Be AnAfterthought
  • 11. CONTENTDESIGIN
  • 12. ResponsiveWeb Design
  • 13. Mobile First
  • 14. Flexible Grids
  • 15. Flexible Media
  • 16. Adaptive Images
  • 17. HiDPI
  • 18. 163 DPI153,600 PIXELS480PX320 PXiPHONE 3GS -
  • 19. 326 DPI614,4OO PIXELS96OPX64O PXiPHONE 4 +
  • 20. 460,800MORE PIXELSiPHONE 4 +iPHONE 3GS -
  • 21. 220 DPI2,304,0OOPIXELS2880PX1800 PXMACBOOK PRO15-INCH RETINA
  • 22. image by Geoff Teehan
  • 23. HiDPI First
  • 24. SpeedAWESOMEV.S.
  • 25. 2G Is TheNew Dial-up
  • 26. CONNECTIONSPEEDIMAGE SIZE
  • 27. CONNECTIONSPEEDIMAGE SIZE
  • 28. Design Styles& Trends
  • 29. Skeuomorphic
  • 30. synth76.com
  • 31. Flat Design
  • 32. HyperlinkButton
  • 33. Clippy Calendar byRicardo Carlet
  • 34. http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button
  • 35. http://sachagreif.com/flat-pixels
  • 36. SkeuoFlat
  • 37. Eyedrop.me
  • 38. Gestures
  • 39. How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch
  • 40. 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/
  • 41. Motion AsRefinement
  • 42. Medium.com/design-ux/926eb80d64e3Pasquale D’Silva
  • 43. App-InfluencedWeb Design
  • 44. Are All WebsitesWeb Apps?!
  • 45. Are All WebsitesWeb Apps?!No.
  • 46. Are All WebsitesWeb Apps?!No.
  • 47. Navigation Patterns
  • 48. Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Left Nav Flyout
  • 49. Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Toggle
  • 50. Http://bradfrostweb.com/blog/web/responsive-nav-patterns/The Select
  • 51. ResponsiveNavigation.netErick Arbe
  • 52. What Is TheFuture?
  • 53. TouchInfluenced &Enabled
  • 54. Motion AsRefinement
  • 55. Attention ToDetail &Subtlety
  • 56. Merging OfApp & WebDesign
  • 57. Our work is never over.“- DAFT PUNK