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
550
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
CULTURE DECK/Frontend Engineer
mhand01
0
1.3k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
660
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
1.2k
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
120
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
kintone開発におけるライターの役割の変化〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
keroyama
0
110
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
1.2k
設計と制作 意図を形に表す / Design and Making: Intent Made Form
usagimaru
3
1.9k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
150
デザインを信じていますか
sekiguchiy
1
1.2k
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
310
2026年、デザイナーはなにに賭ける?
0b1tk
0
570
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
310
The World Runs on Bad Software
bkeepers
PRO
72
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
440
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
610
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
Into the Great Unknown - MozCon
thekraken
41
2.6k
How to Ace a Technical Interview
jacobian
281
24k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
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/ қ қ