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
Keisuke Tada
May 13, 2013
Design
550
3
Share
Non-Designer's Design
Keisuke Tada
May 13, 2013
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
390
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
15k
Tablet View of COOKPAD Website
tdksk
0
240
Other Decks in Design
See All in Design
設計と制作 意図を形に表す / Design and Making: Intent Made Form
usagimaru
3
1.4k
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
4
210
mount_company_profile
mount_inc
0
5.9k
CULTURE DECK/Frontend Engineer
mhand01
0
1.1k
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
280
チームをデザイン対象にする / Design for your team
kaminashi
1
1k
文化のデザイン - Soft Impact of Design
atsushihomma
0
170
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
190
Diverse Design Team Deck
diverse
0
1.2k
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.2k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
240
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
0
200
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
140
Docker and Python
trallard
47
3.8k
Un-Boring Meetings
codingconduct
0
250
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
53k
Balancing Empowerment & Direction
lara
5
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Evolving SEO for Evolving Search Engines
ryanjones
0
170
Leo the Paperboy
mayatellez
5
1.6k
How GitHub (no longer) Works
holman
316
150k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
450
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
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/ қ қ