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.9k
It’s All About DevTools
studiomohawk
0
120
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1.1k
CSSI: CSS Investigation
studiomohawk
21
9.7k
Performance in CSS
studiomohawk
5
390
Refactoring: What, Why and When
studiomohawk
5
300
Refactoring CSS
studiomohawk
9
570
Leveling Up Your Front-end skills
studiomohawk
6
1.4k
Other Decks in Design
See All in Design
Cyber Heart Online Book
hjnasby
0
140
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
540
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
410
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
530
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
190
線で考える画面構成
natsuume
1
890
mento Design Team Portfolio
mento0fficial
0
270
今日から意識できるアクセシビリティ
fumiko
0
270
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
270
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
300
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
810
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Raft: Consensus for Rubyists
vanstee
140
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Side Projects
sachag
455
42k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Rails Girls Zürich Keynote
gr2m
95
14k
KATA
mclloyd
30
14k
What's in a price? How to price your products and services
michaelherold
246
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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