The Future of UI - How Mobile Design is Shaping The Web 2
-
Upload
sara-cannon -
Category
Design
-
view
14.429 -
download
2
description
Transcript of The Future of UI - How Mobile Design is Shaping The Web 2
![Page 1: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/1.jpg)
How Mobile Design Is Shaping The Web
SARA CANNON WP MONTREAL
The Future of UI
![Page 2: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/2.jpg)
SARA CANNONCo-founder / Creative Director At Range sara-cannon.com @saracannon slideshare.net/saracannon
![Page 3: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/3.jpg)
The Future
![Page 4: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/4.jpg)
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.
![Page 5: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/5.jpg)
Desktop Mobile
2007 20152009 20132011
![Page 6: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/6.jpg)
The Mobile Web
![Page 7: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/7.jpg)
The Mobile Web
![Page 8: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/8.jpg)
The Web
![Page 9: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/9.jpg)
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
![Page 10: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/10.jpg)
Mobile Should Never Be An Afterthought
![Page 11: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/11.jpg)
CONTENTDESIGIN
![Page 12: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/12.jpg)
Responsive Web Design
![Page 13: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/13.jpg)
![Page 14: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/14.jpg)
![Page 15: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/15.jpg)
![Page 16: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/16.jpg)
Mobile First
![Page 17: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/17.jpg)
Flexible Grids
![Page 18: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/18.jpg)
Flexible Media
![Page 19: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/19.jpg)
Adaptive Images
![Page 20: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/20.jpg)
HiDPI
![Page 21: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/21.jpg)
![Page 22: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/22.jpg)
163 DPI
153,600 PIXELS
480 P
X
320 PX
iPHONE 3GS -
![Page 23: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/23.jpg)
326 DPI
614,4OO PIXELS
96O P
X
64O PX
iPHONE 4 +
![Page 24: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/24.jpg)
460,800 MORE PIXELS
iPHONE 4 +iPHONE 3GS -
![Page 25: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/25.jpg)
220 DPI
2,304,0OO PIXELS
2880
PX
1800 PX
MACBOOK PRO 15-INCH RETINA
![Page 26: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/26.jpg)
image by Geoff Teehan
![Page 27: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/27.jpg)
HiDPI First
![Page 28: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/28.jpg)
![Page 29: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/29.jpg)
Speed
AWESOMEV.S.
![Page 30: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/30.jpg)
2G Is The New Dial-up
![Page 31: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/31.jpg)
CON
NEC
TION
SPE
ED
IMAGE SIZE
![Page 32: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/32.jpg)
CON
NEC
TION
SPE
ED
IMAGE SIZE
![Page 33: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/33.jpg)
Design Styles & Trends
![Page 34: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/34.jpg)
Skeuomorphic
![Page 35: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/35.jpg)
![Page 36: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/36.jpg)
![Page 37: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/37.jpg)
![Page 38: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/38.jpg)
![Page 39: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/39.jpg)
![Page 40: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/40.jpg)
![Page 41: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/41.jpg)
![Page 42: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/42.jpg)
synth76.com
![Page 43: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/43.jpg)
Flat Design
![Page 44: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/44.jpg)
Hyperlink
Button
![Page 45: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/45.jpg)
Clippy Calendar by Ricardo Carlet
![Page 46: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/46.jpg)
![Page 47: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/47.jpg)
![Page 48: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/48.jpg)
![Page 49: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/49.jpg)
![Page 50: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/50.jpg)
http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button
![Page 51: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/51.jpg)
![Page 52: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/52.jpg)
![Page 53: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/53.jpg)
![Page 54: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/54.jpg)
http://sachagreif.com/flat-pixels
![Page 55: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/55.jpg)
SkeuoFlat
![Page 56: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/56.jpg)
Eyedrop.me
![Page 57: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/57.jpg)
![Page 58: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/58.jpg)
![Page 59: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/59.jpg)
Gestures
![Page 60: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/60.jpg)
![Page 61: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/61.jpg)
How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch
![Page 62: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/62.jpg)
![Page 63: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/63.jpg)
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/
![Page 64: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/64.jpg)
![Page 65: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/65.jpg)
![Page 66: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/66.jpg)
Motion As Refinement
![Page 67: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/67.jpg)
Medium.com/design-ux/926eb80d64e3
Pasquale D’Silva
![Page 68: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/68.jpg)
![Page 69: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/69.jpg)
![Page 70: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/70.jpg)
![Page 71: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/71.jpg)
App-Influenced Web Design
![Page 72: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/72.jpg)
![Page 73: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/73.jpg)
Are All Websites Web Apps?!
![Page 74: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/74.jpg)
Are All Websites Web Apps?!
No.
![Page 75: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/75.jpg)
Are All Websites Web Apps?!
No.
![Page 76: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/76.jpg)
Navigation Patterns
![Page 77: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/77.jpg)
![Page 78: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/78.jpg)
![Page 79: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/79.jpg)
![Page 80: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/80.jpg)
Http://bradfrostweb.com/blog/web/responsive-nav-patterns/
The Left Nav Flyout
![Page 81: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/81.jpg)
Http://bradfrostweb.com/blog/web/responsive-nav-patterns/
The Toggle
![Page 82: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/82.jpg)
Http://bradfrostweb.com/blog/web/responsive-nav-patterns/
The Select
![Page 83: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/83.jpg)
ResponsiveNavigation.netErick Arbe
![Page 84: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/84.jpg)
What Is The Future?
![Page 85: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/85.jpg)
Touch Influenced &
Enabled
![Page 86: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/86.jpg)
Motion As Refinement
![Page 87: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/87.jpg)
Attention To Detail & Subtlety
![Page 88: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/88.jpg)
Merging Of App & Web
Design
![Page 89: The Future of UI - How Mobile Design is Shaping The Web 2](https://reader034.fdocuments.us/reader034/viewer/2022051608/53f1354c8d7f72104c8b4748/html5/thumbnails/89.jpg)
Our work is never over.“- DAFT PUNK