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 ...
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...
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
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
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

16,767

Published on

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
8 Comments
52 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,767
On Slideshare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
249
Comments
8
Likes
52
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×