Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
What Lies Ahead for HTML5
What Lies Ahead for HTML5
Loading in …3
×

Check these out next

1 of 89 Ad

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

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to The Future of UI - How Mobile Design is Shaping The Web 2 (20)

More from Sara Cannon (20)

Advertisement

Recently uploaded (20)

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

  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 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 Should Never Be An Afterthought
  11. CONTENT DESIGIN
  12. Responsive Web Design
  13. Mobile First
  14. Flexible Grids
  15. Flexible Media
  16. Adaptive Images
  17. HiDPI
  18. 163 DPI 153,600 PIXELS 480PX 320 PX iPHONE 3GS -
  19. 326 DPI 614,4OO PIXELS 96OPX 64O PX iPHONE 4 +
  20. 460,800 MORE PIXELS iPHONE 4 +iPHONE 3GS -
  21. 220 DPI 2,304,0OO PIXELS 2880PX 1800 PX MACBOOK PRO 15-INCH RETINA
  22. image by Geoff Teehan
  23. HiDPI First
  24. Speed AWESOME V.S.
  25. 2G Is The New Dial-up
  26. CONNECTIONSPEED IMAGE SIZE
  27. CONNECTIONSPEED IMAGE SIZE
  28. Design Styles & Trends
  29. Skeuomorphic
  30. synth76.com
  31. Flat Design
  32. Hyperlink Button
  33. Clippy Calendar by Ricardo 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 As Refinement
  42. Medium.com/design-ux/926eb80d64e3 Pasquale D’Silva
  43. App-Influenced Web Design
  44. Are All Websites Web Apps?!
  45. Are All Websites Web Apps?! No.
  46. Are All Websites Web 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.net Erick Arbe
  52. What Is The Future?
  53. Touch Influenced & Enabled
  54. Motion As Refinement
  55. Attention To Detail & Subtlety
  56. Merging Of App & Web Design
  57. Our work is never over.“ - DAFT PUNK

×