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.2k
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.3k
It’s All About DevTools
studiomohawk
0
95
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
1.9k
Guiding Through The JavaScript Frameworks
studiomohawk
8
990
CSSI: CSS Investigation
studiomohawk
21
9.4k
Performance in CSS
studiomohawk
5
350
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
520
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
Other Decks in Design
See All in Design
文化に寄りそうデザイン
recruitengineers
PRO
4
920
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
1人歩きする営業資料作成
yutoshukuya
0
150
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Product-Writing
aguringo
6
2.8k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
400
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
The Invisible Side of Design
smashingmag
294
49k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Raft: Consensus for Rubyists
vanstee
132
6.3k
4 Signs Your Business is Dying
shpigford
175
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Why Our Code Smells
bkeepers
PRO
331
56k
How to Ace a Technical Interview
jacobian
272
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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