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
Design Talk#5 Visual Design
Search
Yutaro Ikutani
April 11, 2018
Design
0
210
Design Talk#5 Visual Design
Design Talk#5 @AnyPay, Inc.
"Visual Design"
Yutaro Ikutani
April 11, 2018
Tweet
Share
More Decks by Yutaro Ikutani
See All by Yutaro Ikutani
生成AIが切り拓く 'New' DX
ikutani41
0
370
AIプロダクトに関わるデザイナーの新たな役割 ~ Design of Intelligent Software.
ikutani41
1
340
What's MNTSQ? | CareersDeck
ikutani41
2
190k
Ethereum blockchain & Tokens
ikutani41
0
170
Think on User Accounts @ikutani41
ikutani41
4
270
Design Talk#3 Information Architecture 2/2
ikutani41
0
960
Design Talk#2 Information Architecture 1/2
ikutani41
2
1.6k
Design Talk#1 ノンデザイナーに読んでほしいデザイン話
ikutani41
2
790
PM & UI/UX Designer になった2つの転機
ikutani41
3
4.4k
Other Decks in Design
See All in Design
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.5k
Du Bois Challenge 2024 Recap
ajstarks
1
130
我做了一個詐騙網站...嗎?
crboy
1
130
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
740
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
580
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.2k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.6k
User Experience Design für Entwickler
joergneumann
4
950
Baby Bear Genius
yvonnehsuanho
PRO
0
630
Первая беседа о Карте реализации историй
ashapiro
0
180
Minuto de Aventura
olgastoryboard
0
130
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
200
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Designing with Data
zakiwarfel
98
5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
KATA
mclloyd
27
13k
Making Projects Easy
brettharned
113
5.8k
4 Signs Your Business is Dying
shpigford
179
21k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Done Done
chrislema
180
16k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
The Language of Interfaces
destraynor
153
23k
A designer walks into a library…
pauljervisheath
201
24k
Transcript
VISUAL DESIGN @ikutani41 2018/4/11 Design Talk#5
Index ▸ σβΠϯఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ ۙ Proximity ▸ ྻ
Alignment ▸ ڧऑ Contrast ▸ ෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
σβΠϯఔͷ͓͞Β͍ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA
ίϯηϓτɾτϯϚφ
Visual Design ▸ Πϯϓοτɿใઃܭ ▸ ͔ͬͨ͠Β͓͚ࠩͯ͠͠ ▸ ΞτϓοτɿUI, Graphic ▸
Θ͔Γ͢͞ ▸ ͍͢͞ ▸ OSΒ͠͞ʢࣗવɺҧײͷͳ͞ʣ ▸ ϒϥϯσΟϯά ▸ ࣮ͷ͢͠͞ɺσβΠϯͷ࠶ݱՄೳΛ૬ஊ͔ͯ͠ΒFix ▸ ίϯηϓτ → ౷ҰͱΔ → ҹௐͱࡉ෦ͷͩ͜ΘΓ
σβΠϯͱ ࢥߟͷදݱํ๏Ͱ͋Δ
Index ▸ σβΠϯఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ 1. ۙ Proximity ▸
2. ྻ Alignment ▸ 3. ڧऑ Contrast ▸ 4. ෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
ۙ Proximity
Do & Don’t
ۙʢProximityʣ ʮۙ͞ɾ༨നʯͰใઃܭΛදݱ ▸ Ґஔతʹ͍ۙΦϒδΣΫτʹରͯ͠ɺਓ͕ؒײ͡Δ͜ͱ ▸ ؔ࿈ੑ͕͋Δͷ ▸ ಉ͡άϧʔϓʹଐ͢Δͷ ▸ ۙ͞Λදݱ͢Δͱɺࣗવͱʮ༨നʯ͕ੜ·ΕΔ
▸ άϧʔϐϯά֊ߏΛදݱ͢Δ ▸ ۙͷӨڹͰɺҙਤ͠ͳ͍άϧʔϐϯάදݱ͕ੜ·Ε͕ͪ
ྻ Alignment
Do & Don’t
ྻʢAlignmentʣ ʮʹݟ͑ͳ͍ઢʯΛҙࣝ͢Δ ▸ ΦϒδΣΫτྖҬͷڥքઢ ▸ ྻͷج४ͱͳΔʮઢʯ ▸ ʮΨΠυʯΛҾ͍ͯ࡞ۀ͢Δ ▸ ࣗવͱݟ͑Δ
▸ 1pxͰζϨͨΒμϝ ▸ ἧ͍ͬͯͳ͍ = ಛผͳҙຯɾҙਤΛ࣋ͭ
ΨΠυݟ͑·͔͢
ΨΠυݟ͑·͔͢
Further Study ϖΠϞ AndroidͰར༻͍ͯ͠ΔList Components
ڧऑ Contrast
Do & Don’t
ڧऑʢContrastʣ ҙຯͷҧ͍ྖҬͷҧ͍Λ໌֬Խ͢Δ ▸ ڵຯΛҾ͘ vs. ༰Λ͔ͬ͠Γ͑Δ ▸ ϏδϡΞϧ vs. ςΩετ
▸ ཁૉใϨϕϧͷҧ͍ΛࡍཱͨͤΔ ▸ ຊจͱݟग़͠ͷςΩεταΠζࠩΛେ͖͘͢Δ ▸ ຊจͱݟग़͠ͷςΩετελΠϧΧϥʔΛม͑Δ ▸ ࢹઢͷ༠ಋʢڧˠऑʣ
෮ Repetition
Do & Don’t
෮ʢRepetitionʣ ಉ͡ҙຯΛ࣋ͭͷಉ͡ϏδϡΞϧʹɻ ▸ ͋Δཁૉ͕܁Γฦ͞ΕΔ → Ұ؏ੑ౷ҰੑΛײ͡Δ ▸ ϓϩμΫτશମͰ౷ҰײΛ࣋ͨͤΔ & ཧղΛଅਐͤ͞Δ
▸ ʮϒϥϯυཁૉʯΛ෮͢Δ → ҹ͚ ▸ ܁Γฦ͠Ͱ౷ҰײΛ࡞Δ → ΞΫηϯτ͕ࡍཱͭ ▸ ౷Ұ͞Εͨମݧ = 1ͭͷαʔϏε ▸ ಥݱΕΔҟ࣭ͳମݧ → ʮʂεύϜ.. ͦͬด͡ɻʯ
Further Study ▸ “visual design principles” ͰάάΔͱ͍ΖΜͳهࣄ͕ग़·͢ ▸ ΄΅ݴͬͯΔ͜ͱҰॹɻཻ͕ҧ͏͚ͩɻ ▸
4ͭͩͬͨΓ10ͩͬͨΓ20ͩͬͨΓɻ ▸ Visual DesignͷϨϏϡʔΛ͢Δͱ͖ͷجຊ༻ޠʹͳΓ·͢ ▸ ͔ͬ͜Βઌ৭࠼ײ֮ͱϚφʔͱΞΠσΟΞͰ͢ʢ࣋ʣ
@ikutani41 2018/3/28 Thank you! VISUAL DESIGN
Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ