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

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
April 24, 2013

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

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.

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

April 24, 2013
Tweet

Transcript

  1. How Mobile Design Is Shaping The Web SARA CANNON WP

    MONTREAL The Future of UI
  2. SARA CANNON Co-founder / Creative Director At Range sara-cannon.com @saracannon

    slideshare.net/saracannon
  3. The Future

  4. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711 The total number of people

    using the web on mobile devices is set to surpass desktops by 2015.
  5. Desktop Mobile 2007 2015 2009 2013 2011

  6. The Mobile Web

  7. The Mobile Web

  8. The Web

  9. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

  10. Mobile Should Never Be An Afterthought

  11. CONTENT DESIGIN

  12. Responsive Web Design

  13. None
  14. None
  15. None
  16. Mobile First

  17. Flexible Grids

  18. Flexible Media

  19. Adaptive Images

  20. HiDPI

  21. None
  22. 163 DPI 153,600 PIXELS 480 PX 320 PX iPHONE 3GS

    -
  23. 326 DPI 614,4OO PIXELS 96O PX 64O PX iPHONE 4

    +
  24. 460,800 MORE PIXELS iPHONE 4 + iPHONE 3GS -

  25. 220 DPI 2,304,0OO PIXELS 2880 PX 1800 PX MACBOOK PRO

    15-INCH RETINA
  26. image by Geoff Teehan

  27. HiDPI First

  28. None
  29. Speed AWESOME V.S.

  30. 2G Is The New Dial-up

  31. CONNECTION SPEED IMAGE SIZE

  32. CONNECTION SPEED IMAGE SIZE

  33. Design Styles & Trends

  34. Skeuomorphic

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. synth76.com

  43. Flat Design

  44. Hyperlink Button

  45. Clippy Calendar by Ricardo Carlet

  46. None
  47. None
  48. None
  49. None
  50. http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button

  51. None
  52. None
  53. None
  54. http://sachagreif.com/flat-pixels

  55. SkeuoFlat

  56. Eyedrop.me

  57. None
  58. None
  59. Gestures

  60. None
  61. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch

  62. None
  63. 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/

  64. None
  65. None
  66. Motion As Refinement

  67. Medium.com/design-ux/926eb80d64e3 Pasquale D’Silva

  68. None
  69. None
  70. None
  71. App-Influenced Web Design

  72. None
  73. Are All Websites Web Apps?!

  74. Are All Websites Web Apps?! No.

  75. Are All Websites Web Apps?! No.

  76. Navigation Patterns

  77. None
  78. None
  79. None
  80. Http://bradfrostweb.com/blog/web/ responsive-nav-patterns/ The Left Nav Flyout

  81. Http://bradfrostweb.com/blog/web/ responsive-nav-patterns/ The Toggle

  82. Http://bradfrostweb.com/blog/web/ responsive-nav-patterns/ The Select

  83. ResponsiveNavigation.net Erick Arbe

  84. What Is The Future?

  85. Touch Influenced & Enabled

  86. Motion As Refinement

  87. Attention To Detail & Subtlety

  88. Merging Of App & Web Design

  89. Our work is never over. “ - DAFT PUNK