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
520
Non-Designer's Design
Keisuke Tada
May 13, 2013
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
320
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
12k
Tablet View of COOKPAD Website
tdksk
0
220
Other Decks in Design
See All in Design
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
32
20k
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
160
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
570
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
250
富山デザイン勉強会_インフォグラフィックが上手に描けるコツ.pdf
keita_yoshikawa
1
130
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
200
root 会社紹介資料 / We are hiring.
root_recruit
1
12k
Pizza Trail v2
jerfusart
0
110
Tataki Ryu
olgastoryboard
0
120
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
11k
Breaking News on the Web
souvikdg
0
660
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Into the Great Unknown - MozCon
thekraken
29
1.4k
RailsConf 2023
tenderlove
28
810
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Designing the Hi-DPI Web
ddemaree
278
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Documentation Writing (for coders)
carmenintech
65
4.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
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/ қ қ