Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Beyond the pixels
Search
Hervé Mischler
December 11, 2012
Design
14
1.5k
Design Beyond the pixels
Presentation for #FranceHTML5 Meetup
Hervé Mischler
December 11, 2012
Tweet
Share
More Decks by Hervé Mischler
See All by Hervé Mischler
« Voyage aux Frontières du Design » – Le Futur du Design pour l’Entreprise
dstroii
2
270
WHERE NO ONE HAS GONE BEFORE
dstroii
4
1.3k
How to rumble in the Responsive Application jungle
dstroii
10
690
Responsive Headache Relief for Android
dstroii
42
5.5k
Quick tips for porting your iOS designs to Android
dstroii
42
7.8k
In defence of mobile diversity
dstroii
10
2k
Other Decks in Design
See All in Design
Dreamia
elsh
0
130
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
350
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
410
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.4k
User Experience Design für Entwickler
joergneumann
4
950
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
190
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
310
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.6k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
39k
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
4
3.7k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
179
21k
Clear Off the Table
cherdarchuk
91
320k
Optimizing for Happiness
mojombo
375
69k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Being A Developer After 40
akosma
84
590k
Building Adaptive Systems
keathley
36
2.1k
Embracing the Ebb and Flow
colly
83
4.4k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
A Modern Web Designer's Workflow
chriscoyier
691
190k
Infographics Made Easy
chrislema
239
18k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Design by the Numbers
sachag
277
19k
Transcript
#FranceHTML5 Design the pixels
ello ’m Hervé Mischler @Dstroii
http://www.ux-paris.com/ UXPARIS
None
None
None
None
None
None
None
2,000 1,600 1,200 800 400 Internet Users (MM) 0 2007
2008 2009 2010 2011 2012 2013 2014 2015 Source: Morgan Stanley Research Mobile internet users Desktop internet users
None
hello tomorrow http://futurefriend.ly
#RWD
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css'
/>
@media screen and (min-width: 701px) and (max-width: 900px){ }
600px 480px 800px 360px Mobil Tablet
0px 1280px 1280px 1024px 1024px ablet Desktop
“f you put water into a cup, it becomes the
cup. ou put water into a bottle and it becomes the bottle. Bruce Lee http://www.slideshare.net/MadPowHxD/josh-clark-hxd-presentation
Marku First
http://bradfrost.github.com/this-is-responsive/ This Is Responsive. Patterns, resources and news for creating
responsive web experiences.
#RAD
F a men s
Show / Hide
Wireframes
Wireframes
Asking for a pixel perfect mockup is like asking to
print a website!
Prototype early Prototype often
a pixel is not a pixel anymore!
.no-svg .logo { background: url('logo.png'); } .svg .logo { background:
url('logo.svg'); } http://modernizr.com/
http://www.bohemiancoding.com/sketch/
None
None
@font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff')
format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; }
CSS [class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style:
normal; speak: none; -webkit-font-smoothing: antialiased; } HTML <div class=”icon-glass”></div>
/* Font Awesome uses the Unicode Private Use Area (PUA)
to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; }
CSS [data-icon]:before { font-family: FontAwesome; content: attr(data-icon); font-weight: normal; font-style:
normal; speak: none; -webkit-font-smoothing: antialiased; } HTML <div data-icon="\f000"></div>
https://github.com/blog/1135-the-making-of-octicons
http://glyphsapp.com/
http://www.fontsquirrel.com/fontface/generator
http://informationarchitects.net/blog/the-web-is-all-about-typography-period/ Web Design is 95% Typography
http://typecast.com/
learn to SHOULD Desi ners code?
http://dribbble.com/
http://codepen.io/
None
http://www.sublimetext.com/
None
None
None
http://csscomb.com/
.::6GTT2+'<+85;J-/:.;(J)53T68+¿>,8++T
None
http://git-scm.com/
http://try.github.com
http://lesscss.org
http://sass-lang.com
/* ===================================== IOS =====================================*/ $fontfamily: helvetica, sans-serif; $fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px $fontmedium: 1.0625em; //17px $fontlarge: 1.25em; //20px $baseline: 1em; //16px $baseheight: 2.75em; //44px $navwidth: 20em; //320px
/* ===================================== Android =====================================*/ $fontfamily: "roboto","droid-sans", sans-serif; $fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px $fontmedium: 1.125em; //18px $fontlarge: 1.375em; //22px $baseline: 1em; //16px $baseheight: 3em; //48px $navwidth: 20em; //320px
http://incident57.com/codekit/
http://html.adobe.com/edge/inspect/ Adobe Edge Inspect Preview & inspect web designs on
devices. In
WEINRE https://github.com/apache/cordova-weinre
CORDOVATM APACHE http://incubator.apache.org/cordova/
http://build.phonegap.com
None
.::6GTT===J35@/22'J58-T+4IT¿8+,5>59T
None
http://webplatform.org
http://speakerdeck.com/u/dstroii