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
3
530
Non-Designer's Design
Keisuke Tada
May 13, 2013
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
360
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
14k
Tablet View of COOKPAD Website
tdksk
0
230
Other Decks in Design
See All in Design
#Dubois Challenge 2025: Economics
ajstarks
0
130
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
330
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
DC Style Redesign
mcduckyart
0
130
harutaka Vision Deck
zenkigenforrecruit
0
150
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
「デザイン」を信じるには
iflection
0
280
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Writing Fast Ruby
sferik
628
62k
RailsConf 2023
tenderlove
30
1.1k
Why Our Code Smells
bkeepers
PRO
336
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Scaling GitHub
holman
460
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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/ қ қ