the future of ui - how mobile design is shaping the web 2
DESCRIPTION
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
How Mobile Design Is Shaping The Web
SARA CANNON WP MONTREAL
The Future of UI
SARA CANNONCo-founder / Creative Director At Range sara-cannon.com @saracannon slideshare.net/saracannon
The Future
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.
Desktop Mobile
2007 20152009 20132011
The Mobile Web
The Mobile Web
The Web
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
Mobile Should Never Be An Afterthought
CONTENTDESIGIN
Responsive Web Design
Mobile First
Flexible Grids
Flexible Media
Adaptive Images
HiDPI
163 DPI
153,600 PIXELS
480 P
X
320 PX
iPHONE 3GS -
326 DPI
614,4OO PIXELS
96O P
X
64O PX
iPHONE 4 +
460,800 MORE PIXELS
iPHONE 4 +iPHONE 3GS -
220 DPI
2,304,0OO PIXELS
2880
PX
1800 PX
MACBOOK PRO 15-INCH RETINA
image by Geoff Teehan
HiDPI First
Speed
AWESOMEV.S.
2G Is The New Dial-up
CON
NEC
TION
SPE
ED
IMAGE SIZE
CON
NEC
TION
SPE
ED
IMAGE SIZE
Design Styles & Trends
Skeuomorphic
synth76.com
Flat Design
Hyperlink
Button
Clippy Calendar by Ricardo 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/
http://markpospesel.wordpress.com/
2012/05/10/anatomy-of-a-folding-animation/
Motion As Refinement
Medium.com/design-ux/926eb80d64e3
Pasquale D’Silva
App-Influenced Web Design
Are All Websites Web Apps?!
Are All Websites Web Apps?!
No.
Are All Websites Web 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 The Future?
Touch Influenced &
Enabled
Motion As Refinement
Attention To Detail & Subtlety
Merging Of App & Web
Design
Our work is never over.“- DAFT PUNK