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戦略:チャットコマースにおけるテイラーメイド事例
ikutani41
0
11
生成AIが切り拓く 'New' DX
ikutani41
0
440
生成AIが切り拓く新時代のDXとデータ活用
ikutani41
0
4
AIプロダクトに関わるデザイナーの新たな役割 ~ Design of Intelligent Software.
ikutani41
1
360
What's MNTSQ? | CareersDeck
ikutani41
2
200k
Ethereum blockchain & Tokens
ikutani41
0
180
Think on User Accounts @ikutani41
ikutani41
4
280
Design Talk#3 Information Architecture 2/2
ikutani41
0
1k
Design Talk#2 Information Architecture 1/2
ikutani41
2
1.7k
Other Decks in Design
See All in Design
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
100
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
140
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.1k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.4k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
180
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
300
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
310
portfolio_YumiYasuda
yum0418
0
220
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
190
クライアントワークにおける UXリサーチの実践
kozotaira
0
600
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
320
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
240
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.3k
Making Projects Easy
brettharned
116
6.1k
How to Ace a Technical Interview
jacobian
276
23k
Designing for humans not robots
tammielis
252
25k
For a Future-Friendly Web
brad_frost
176
9.7k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Building an army of robots
kneath
304
45k
Gamification - CAS2011
davidbonilla
81
5.2k
Navigating Team Friction
lara
184
15k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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 ྑ͔ͬͨΒಡΜͰͶ