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
2.1k
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
minpaku-community-scrum-patterns
norinity1103
1
180
AI時代に淘汰されないデザインのしごと
akinen
1
160
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
Memory Man v3 (WIP)
storybychad
PRO
0
2.2k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
freee + Product Design FY25Q4
freee
4
15k
CMS管理画面のアクセシビリティ
magi1125
8
2.3k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
590
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
720
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
630
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Gamification - CAS2011
davidbonilla
81
5.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Site-Speed That Sticks
csswizardry
10
730
How to Think Like a Performance Engineer
csswizardry
25
1.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
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