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 for Web
Search
Tractical
October 24, 2013
Design
3
220
Design for Web
Tractical
October 24, 2013
Tweet
Share
Other Decks in Design
See All in Design
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
B/43プラスカードができるまで
putchomsmartbank
0
470
Wolf and the seven goatkids
_limex_
PRO
0
450
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
実案件でのFigmaデータの作り方
xxxkinu
2
220
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
モデル・デザイン入門
akitsugu7935
0
460
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1k
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Clear Off the Table
cherdarchuk
84
310k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
GraphQLとの向き合い方2022年版
quramy
32
12k
GitHub's CSS Performance
jonrohan
1025
450k
Building Adaptive Systems
keathley
31
1.9k
Gamification - CAS2011
davidbonilla
76
4.6k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
BBQ
matthewcrist
80
8.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Transcript
None
DESIGN FOR WEB Tools & Tips ×
1. “Of course” 2. Don’t make me click 3. Let
me accomplish DESIGN FOR INSTANT
Photoshop is slow. PSD WIREFRAMES DON’T
Move fast with a pencil. SKETCH WIREFRAMES DO
Sketch Wireframes
Too precise. MOCKUPS DON’T
Between moodboards and mockups. STYLE TILES DO
Style Tiles
There will be changes. PIXEL PERFECTION DON’T
Inventory of elements and patterns. STYLEGUIDES DO
Styleguides
Styleguide
Zoom out. LAYOUT DO
Layout
Design for screen size. RESPONSIVE DESIGN DON’T
Design for content. RESPONSIVE DESIGN DO
Responsive Design
Constraints help prioritize. MOBILE FIRST DO
Mobile First
Learn basic HTML & CSS. CODE DO
CSS Tricks Codecademy HTML5 & CSS for Web Designers -
Jon Ducket Code
Square & Bellroy CASE STUDIES DO
Square
Bellroy
There’s no leather in web. SKEUOMORPHISM DON’T
Skeuomorphism
Simplify. FLAT DESIGN DO
Flat Design
Ideate, design, test. COLLABORATE DO
http://styletil.es/ https://github.com/styleguide/ css/11.0 http://www.abookapart.com/ products/mobile-first https://squareup.com/ http://bellroy.com/ Links Links
https://speakerdeck.com/tractical @tractical