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
Non-Designer's Design
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Keisuke Tada
May 13, 2013
Design
3
550
Non-Designer's Design
Keisuke Tada
May 13, 2013
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
380
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
14k
Tablet View of COOKPAD Website
tdksk
0
240
Other Decks in Design
See All in Design
文化のデザイン - Soft Impact of Design
atsushihomma
0
150
Emmy's Artwork
mcksmith
0
210
Ralph Penel Portfolio
ralphpenel
0
320
CULTURE DECK/Creative Director
mhand01
0
500
次世代のクリエイティブ体験!Photoshopの最新機能で新しい未来を切り開こう
connecre
0
110
2026_01_07_3DプリントはじめましたLT.pdf
hideakitakechi
0
110
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
950
2026年、デザイナーはなにに賭ける?
0b1tk
0
510
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2k
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
170
Storyboard Exercise: Chase Sequence
lynteo
1
220
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
5
4.7k
Featured
See All Featured
The Curse of the Amulet
leimatthew05
1
9.5k
Context Engineering - Making Every Token Count
addyosmani
9
730
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
170
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Unsuck your backbone
ammeep
672
58k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Test your architecture with Archunit
thirion
1
2.2k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
140
Marketing to machines
jonoalderson
1
5k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
620
Transcript
Non-Designer’s Design Keisuke Tada
ର σβΠϯײ ϩδοΫཱྗ σβΠϯٕज़
ର ඪ σβΠϯײ ϩδοΫཱྗ σβΠϯٕज़
Agenda σβΠϯͱԿ͔ͳͥσβΠϯ͕ॏཁ͔ ϏδϡΞϧσβΠϯͷجૅ ϓϨθϯςʔγϣϯࢿྉͷσβΠϯ Web σβΠϯͷτϨϯυ
What is Design?! Why is it Important?
σβΠϯ =
σβΠϯ ͔͍͍͓ͬ͜͠ΌΕ ≠
σβΠϯ ղܾͷͨΊͷखஈ =
σβΠϯ ղܾͷͨΊͷखஈ = ߟ͍͑ͯΔ͜ͱɺͬͨ͜ͱΛ! ਖ਼͘͠ɺັྗతʹ͑Δ!
ίϯςϯπ
ίϯςϯπ σβΠϯ
ίϯςϯπ σβΠϯ త! தΛΘΓ͘͢͢Δ खஈ! ݟͨΛྑ͘͢Δ
σβΠϯ
ίϯςϯπ σβΠϯ
ίϯςϯπ σβΠϯ खஈ! ݟͨΛཧ͢Δ త! த͕ચ࿅͞ΕΔ
Basics in Design
Font Sans Serif Serif ໌ே ΰγοΫ
None
Sans Serif! Serif
Color Hue Saturation Value ৭૬ ࠼ ໌
Color Tools • HUE / 360 http://hue360.herokuapp.com/ • Color Scheme
Designer 3 http://colorschemedesigner.com/ • ColorHexa http://www.colorhexa.com/
Alignment This text is flush left. Some people call it
quad left, or you can say it is left aligned. This text is flush right. Some people call it quad right, or you can say it is right aligned. This text is centered. If you are going to center text, make it obvious.
Design in Presentation Slide
ྲྀΕʼৄࡉ
ϙΠϯτΛ໌֬ʹ ! ཱͨͤΔͱ͜Ζগͳ͘ ! ίϯτϥετΛ͖ͬΓͤ͞Δʢେ͖͞ɺଠ͞ɺ৭ɺ༨നʣ ! දɺάϥϑɺਤͳͲಛʹҙ ! Օॻ͖ͳΔ͘ආ͚Δ !
ҰຕͷεϥΠυʹऩΊΔ͖༰͔ख़ྀ͢Δ
ϊΠζΛগͳ͘ ! ςΩετগͳ͘ ! ϑΥϯτ׳Ε͠·Εͨͷ͕ແ ! ΞχϝʔγϣϯΛແବʹΘͳ͍ ! ແବͳάϥσʔγϣϯɺγϟυɺઢېࢭ !
ΉΈͨΒʹͰғΘͳ͍ ! ͏৭ͷ͑Δ ! άϥϑͷෆཁͳςΩετɺઢফ͢
Web Design Trends
Flat
Circle
Blur
References • ϊϯσβΠφʔζɾσβΠϯϒοΫ http://www.amazon.co.jp/dp/4839928401 • ΘΔσβΠϯ http://tsutawarudesign.web.fc2.com/ • Hack Design
http://hackdesign.org/ қ қ