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
560
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Non-Designer's Design
Keisuke Tada
May 13, 2013
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
400
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
15k
Tablet View of COOKPAD Website
tdksk
0
250
Other Decks in Design
See All in Design
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
3
590
Saving_the_King_-_Storyboard.pdf
terencebasart
0
280
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
1.7k
開発・制作におけるUI・UXデザインの重要性について~UI・UXデザインってなんだろう~
yamasaku
0
190
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
ayumidesign
0
190
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.4k
ポートフォリオ_あやの
ngyenmazt1412
0
1.1k
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
510
CULTURE DECK/Frontend Engineer
mhand01
0
1.6k
Where Imagination Ends AI Begins
r5ni4
0
340
Signull 団体説明資料
signull
0
780
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
380
Featured
See All Featured
Scaling GitHub
holman
464
140k
A Modern Web Designer's Workflow
chriscoyier
698
190k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
660
Between Models and Reality
mayunak
4
400
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
380
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
Building the Perfect Custom Keyboard
takai
2
850
Raft: Consensus for Rubyists
vanstee
141
7.6k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
440
Ethics towards AI in product and experience design
skipperchong
2
350
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
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/ қ қ