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.5k
It’s All About DevTools
studiomohawk
0
98
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
1.9k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1k
CSSI: CSS Investigation
studiomohawk
21
9.4k
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
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
3
760
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
MiKS inc. Company PR en_202404
zakkerooni
1
770
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.4k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
720
3 Reasons Why I Got into Design
harukausui
1
130
Sensitive Texter Storyboard
ctagulao98
0
160
Tuzukuru解説ブック
atsumaru1377
0
240
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
B/43プラスカードができるまで
putchomsmartbank
1
630
Another works Brand Guidelines
designdoor
0
100
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Leading Effective Engineering Teams 2024
addyosmani
3
300
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Done Done
chrislema
179
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
What's new in Ruby 2.0
geeforr
338
31k
Designing for humans not robots
tammielis
247
25k
GraphQLとの向き合い方2022年版
quramy
36
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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