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.

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
16. Mobile First
17. Flexible Grids
18. Flexible Media
19. Adaptive Images
20. HiDPI
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
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
42. synth76.com
43. Flat Design
44. Hyperlink Button
45. Clippy Calendar by Ricardo Carlet
50. http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button
54. http://sachagreif.com/flat-pixels
55. SkeuoFlat
56. Eyedrop.me
59. Gestures
61. How Is It Held? image via http://thetechblock.com/visual-language-designing-for-touch
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/
66. Motion As Refinement
67. Medium.com/design-ux/926eb80d64e3 Pasquale D’Silva
71. App-Influenced Web Design
73. Are All Websites Web Apps?!
74. Are All Websites Web Apps?! No.
75. Are All Websites Web Apps?! No.
76. Navigation Patterns
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