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
Designing in the Browser ver. 1.0 RC
Search
Yuya Saito
September 15, 2013
Design
22
2.3k
Designing in the Browser ver. 1.0 RC
2013/09/14 (土) - 第15回リクリセミナー「Frontrend in Osaka」
Yuya Saito
September 15, 2013
Tweet
Share
More Decks by Yuya Saito
See All by Yuya Saito
Design System as a Product @ Frontrend Vol.8
studiomohawk
2
4.6k
It’s All About DevTools
studiomohawk
0
99
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1k
CSSI: CSS Investigation
studiomohawk
21
9.5k
Performance in CSS
studiomohawk
5
360
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
530
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
Other Decks in Design
See All in Design
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
690
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
10k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
490
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.1k
Sci-Fi: Descenso
elrtovar
0
260
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
230
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.2k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
440
ホワイト化するこの世界の片隅に
hisayosky
0
230
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
17
10k
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
240
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
294
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
27
1.6k
The Cult of Friendly URLs
andyhume
76
5.9k
Unsuck your backbone
ammeep
667
57k
Designing with Data
zakiwarfel
98
5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Building Your Own Lightsaber
phodgson
101
5.9k
We Have a Design System, Now What?
morganepeng
48
7.1k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
The Mythical Team-Month
searls
218
43k
Transcript
Frontrend in Osaka 2013.09.14 Yuya Saito in the Designing Browser
in the ver. 1.0 RC
1993.04.30
World Wide Web World Wide Web
info.cern.ch
Web has been changing constantly for 20 years. ͜ͷɺ 8FCίϯελϯτʹมԽ͚͍ͭͮͯ͠·͢ɻ
www.nasa.gov
Web has been changing the world for 20 years. ݟํΛม͑ΕWebੈքΛม͑ଓ͚͍ͯΔͱݴ͑·͢ɻ
None
None
None
None
Web will be changing. Web͜Ε͔ΒมΘΓଓ͚͍ͯ͘͜ͱͰ͠ΐ͏ɻ
## σβΠφίʔυΛॻ͖͔͘ ## ΣϒσβΠϯͷݱࡏ ## ΠϯϒϥβσβΠϯɾϨγϐ Agenda Agenda
Should Designer Write Code? σβΠφίʔυΛॻ͖͔͘
∞
σβΠφ͕ίʔυΛ ॻ͖͘Ͱͳ͍ཧ༝
None
Howard Gardner Developmental Psychologist
Logic Creative v.s. v.s.
Design is hard enough! σβΠϯ͍͠
Knowing Limitations Will Influence Design. ϓϩάϥϜଆͷݶքͷଘࡏ͕ σβΠϯʹӨڹ͢Δɻ
Alan Cooper Father of Visual Basic
⚙ ࣮Ϟσϧ f ϝϯλϧϞσϧ
σβΠφ͕ίʔυΛ ॻ͖͘ཧ༝
Rise of Mobile Web
<table>
None
None
None
codepen.io/sol0mka/full/Jsyxq
Ωϟϯόε ‖
HTML, CSS & JavaScript
Bret Victor Designer
An essential aspect of a painter's canvas and a musical
instrument is the immediacy with which the artist gets something there to react to. ❞
A canvas or sketchbook serves as an "external imagination", where
an artist can grow an idea from birth to maturity by continuously reacting to what's in front of him. ❞
Answer to Many Questions on Web is almost always: It
depends Or 42
www.bohemiancoding.com/sketch
Workflow Needs to Adapt the Change.
What is ΣϒσβΠϯͷࠓ Web Design Now?
20 years old
1997 - 2001 Dot Com Bubble
2004 Web 2.0
None
ϓϥοτϑΥʔϜ
✉
www.nytimes.com/projects/2012/snow-fall
adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src
None
ใ ऩ ू ઃ ܭ σ β Π ϯ
։ ൃ ς ε τ σ ϓ ϩ Π ϝ ϯ ς φ ϯ ε
Stephen Hay CEO of Zero Interface
The landscape has changed, but our workflows have not. We
need to change that. ❞
ઃ ܭ σ β Π ϯ ։ ൃ
։ ൃ σ β Π ϯ
։ ൃ
ઃ ܭ σ β Π ϯ ։ ൃ
Andy Clarke Designer
One answer is to design a system, not a web
page or site. ❞
Designing in the Browser might be the answer.
Prototype First, Photoshop Later.
A Recipe for Designing in the Browser ΠϯϒϥβσβΠϯɾϨγϐ
Design vs. Code ❌
Design and Code
Designing in the Browser
www.facebook.com/home
Quartz Composer
Julie Zhuo Product design director @ Facebook
The tools that kept you safe thus far, that you've
mastered well enough to use in your sleep—those tools will not always be sufficient. […] So invest in new tools. ❞
Which way should We go?
Design a Card ΧʔυΛσβΠϯ͢Δ
What is Card!? Χʔυͬͯ
insideintercom.io/why-cards-are-the-future-of-the-web
None
Card Component Module ♥
Just enough Information.
Pinterest
Chrome Web Store
Readability
੪౻༞ Front-end Developer Text T ext Text Text
None
None
Build a Foundation جૅࣄ
Typography λΠϙάϥϑΟ
Color Scheme ΧϥʔεΩʔϜ
UI Toolkit UIπʔϧΩοτ
topcoat.io
UI Toolkit is: Reference UIπʔϧΩοτ ϦϑΝϨϯε
UI Toolkit is: Document UIπʔϧΩοτ υΩϡϝϯτ
None
None
Build Your UI Toolkit UIπʔϧΩοτΔͷ
html5boilerplate.com
getbootstrap.com
D.R.Y Don’t Repeat Yourself
Sir Jonathan Ive Senior Vice President of Design @ Apple
It’s very easy to be different, but very difficult to
be better. ❞
Iterate on What’s Important. Fail Fast, Fail Often.
Tools
None
Requirement for Designing Cards
Partial Priority: High
Data Listing Priority: Middle
Boilerplate Priority: Middle
Data Model Priority: Low
Nice to Have Functions $44ϓϦϓϩηοαͷࣗಈίϯύΠϧ ϏϧτΠϯɾαʔό ࣗಈϒϥβϦϩʔυ
Mixture
Roots
Middleman
github.com/jensimmons/designstarterkit
Recap
Should Designer Write Code? σβΠφίʔυΛॻ͖͔͘ R ecap
What is ΣϒσβΠϯͷࠓ Web Design Now? R ecap
A Recipe for Designing in the Browser ΠϯϒϥβσβΠϯɾϨγϐ R ecap
Bret Victor Designer
None
The most dangerous thought you can have as a creative
person is to think you know what you're doing. ❞
Learn tools, and use tools, but don't accept tools. Always
distrust them; always be alert for alternative ways of thinking. ❞
Thank You! Follow me @ cssradar