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
540
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
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.5k
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
1k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
6.3k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
2k
Correspondence:共に生成していく過程
akiramotomura
0
170
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
1
430
チームをデザイン対象にする / Design for your team
kaminashi
0
250
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
120
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
270
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.5k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
1.2k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
2.9k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
170
Docker and Python
trallard
47
3.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
74
エンジニアに許された特別な時間の終わり
watany
106
220k
How to Ace a Technical Interview
jacobian
281
24k
WENDY [Excerpt]
tessaabrams
9
35k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
200
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
130
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/ қ қ