Embed Size (px)
Citation preview
@tinkadoic#smartfirstJun 4 2015 #FILIVE
smart first, phones laterTaking Responsive a Step Further
@tinkadoic#smartfirstJun 4 2015 #FILIVE
smart first, phones laterTaking Responsive a Step Further
@tinkadoic
@fivenyc
@tinkadoic#smartfirst
r rozo romeo
@tinkadoic#smartfirst
Please, can the application do the
hard work, so I don't have to.
@tinkadoic#smartfirst
responsive/1
@tinkadoic#smartfirst
1,25 M
1,000 M
750 M
500 M
250 M
01995 1999 2003 2007 2011
Smartphones
& Tablets
PCs
@tinkadoic#smartfirst
from desktop to mobile
LukeW
@tinkadoic#smartfirst
.lasvegas {
float: left;
margin-left: -17.0886076%;
width: 14.556962%;
}
@tinkadoic#smartfirst
responsive web design rwd
= crafting sites to provide an optimal viewing experience
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
screen size
The web is 95% typography.
@tinkadoic#smartfirst
http://viljamis.com/blog/2012/typography/
@tinkadoic#smartfirst
@tinkadoic#smartfirst
Century Expanded
@tinkadoic#smartfirst
iA Writer
@tinkadoic#smartfirst
http://webdesign.maratz.com/lab/responsivetypography/
@tinkadoic#smartfirst
@tinkadoic#smartfirst
@tinkadoic#smartfirst
The Rain Room
School of Design Zagreb
@tinkadoic#smartfirst
beyond rwd
Designing responsive experiences rather than
responsive sites, apps, software.
@tinkadoic#smartfirst
scenarios/2
context
location
user needs
historyuser
patterns
ecosystem
brand
people
hardware
time
screen size
body
feelings content
trends
@tinkadoic#smartfirst
1Responsive to
location
@tinkadoic#smartfirst
if !airplaneMode {
showStandupReminder();
}
@tinkadoic#smartfirst
2Responsive to
user needs
Foursquare
@tinkadoic#smartfirst
The data is already there.
Density
Product Hunt
Timeful
@tinkadoic#smartfirst
3Responsive to
context
Google Now
1
2
3
Now on Tap
@tinkadoic#smartfirst
4Responsive to
history
Runkeeper
@tinkadoic#smartfirst
5Responsive to
people
Nuzzel
@tinkadoic#smartfirst
6Responsive to
ecosystem
Gmail
@tinkadoic#smartfirst
7Responsive to
user pattern
iTunes
Foursquare
Croatia@tinkadoic
Meaning full comment@tinkadoic location
Meaning full comment@tinkadoic
Existing
Proposed
Periscope
DO by IFTTT
@tinkadoic#smartfirst
8Responsive to
hardware
Ministry of Sound
@tinkadoic#smartfirst
Amazon Dash
Bret Victor
@tinkadoic#smartfirst
9Responsive to
brand
Timehop
Sleepbot
@tinkadoic#smartfirst
10Responsive to
time
e.flux
@tinkadoic#smartfirst
11Responsive to
emotion
VS
positivenegative
Swarm
Citymapper
@tinkadoic#smartfirst
12Responsive to
body
Hangry
@tinkadoic#smartfirst
13Responsive to
content
Luka
Biophilia / Polyfauna
@tinkadoic#smartfirst
14Responsive to
trends
Yo B*****
context
location
user needs
historyuser
patterns
ecosystem
brand
people
hardware
time
screen size
body
feelings content
trends
@tinkadoic#smartfirst
ixd laws/3
The Three Laws Of Robotics IxD
@tinkadoic#smartfirst
harm your work
waste your time
be humane
/1
/2
/3
@tinkadoic#smartfirst
conclusion/5
@tinkadoic#smartfirst
Polite software has common sense.
Polite software is responsive.
momify the interface
@tinkadoic#smartfirst
responsive = Intelligent?
@tinkadoic#smartfirst
In a mobile-first world,can we finally start designing
smart first and phones later?
@tinkadoic#smartfirst
Resources— http://uxdiogenes.com/blog/the-three-laws-of-interaction-design
— http://www.amazon.com/gp/product/0201379376
— http://wwword.com/2387/style/on-design/ways-of-seeing/
— https://developers.google.com/webmasters/mobile-sites/get-started/
— http://czechandslovakpavilion.cz/
— http://www.trypap.com/
— http://webdesign.maratz.com/lab/responsivetypography/realtime/
— http://alistapart.com/column/font-hinting-and-the-future-of-responsive-typography/
#figure2
— http://viljamis.com/blog/2013/prototyping-responsive-typography/
— http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
