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
380
AIプロダクトに関わるデザイナーの新たな役割 ~ Design of Intelligent Software.
ikutani41
1
340
What's MNTSQ? | CareersDeck
ikutani41
2
200k
Ethereum blockchain & Tokens
ikutani41
0
170
Think on User Accounts @ikutani41
ikutani41
4
280
Design Talk#3 Information Architecture 2/2
ikutani41
0
970
Design Talk#2 Information Architecture 1/2
ikutani41
2
1.6k
Design Talk#1 ノンデザイナーに読んでほしいデザイン話
ikutani41
2
800
PM & UI/UX Designer になった2つの転機
ikutani41
3
4.4k
Other Decks in Design
See All in Design
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
190
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
470
Design System for training program
mct
0
130
(第1回) アーキテクト・テックリード育成講座
masakaya
0
100
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
890
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Making Projects Easy
brettharned
115
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
KATA
mclloyd
29
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Automating Front-end Workflow
addyosmani
1366
200k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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 ྑ͔ͬͨΒಡΜͰͶ