Design Talk#5 Visual Design

Design Talk#5 @AnyPay, Inc.
"Visual Design"

Transcript

1. VISUAL DESIGN @ikutani41 2018/4/11 Design Talk#5
2. Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ ۙ઀ Proximity ▸ ੔ྻ Alignment ▸ ڧऑ Contrast ▸ ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
3. σβΠϯ޻ఔͷ͓͞Β͍ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA ίϯηϓτɾτϯϚφ
4. Visual Design ▸ Πϯϓοτɿ৘ใઃܭ ▸ ೉͔ͬͨ͠Βࠩ͠໭͓͚ͯ͠ ▸ Ξ΢τϓοτɿUI, Graphic ▸ Θ͔Γ΍͢͞ ▸ ࢖͍΍͢͞ ▸ OSΒ͠͞ʢࣗવɺҧ࿨ײͷͳ͞ʣ ▸ ϒϥϯσΟϯά ▸ ࣮૷ͷ͠΍͢͞ɺσβΠϯͷ࠶ݱՄೳ౓Λ૬ஊ͔ͯ͠ΒFix ▸ ίϯηϓτ → ౷ҰͱΔ → ҹ৅ௐ੔ͱࡉ෦΁ͷͩ͜ΘΓ
5. σβΠϯͱ͸ ࢥߟͷදݱํ๏Ͱ͋Δ
6. Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ 1. ۙ઀ Proximity ▸ 2. ੔ྻ Alignment ▸ 3. ڧऑ Contrast ▸ 4. ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
7. ۙ઀ Proximity
8. Do & Don’t
9. ۙ઀ʢProximityʣ ʮۙ͞ɾ༨നʯͰ৘ใઃܭΛදݱ ▸ Ґஔతʹ͍ۙΦϒδΣΫτʹରͯ͠ɺਓ͕ؒײ͡Δ͜ͱ ▸ ؔ࿈ੑ͕͋Δ΋ͷ ▸ ಉ͡άϧʔϓʹଐ͢Δ΋ͷ ▸ ۙ͞Λදݱ͢Δͱɺࣗવͱʮ༨നʯ͕ੜ·ΕΔ ▸ άϧʔϐϯά΍֊૚ߏ଄Λදݱ͢Δ ▸ ۙ઀ͷӨڹͰɺҙਤ͠ͳ͍άϧʔϐϯάදݱ͕ੜ·Ε͕ͪ
10. ੔ྻ Alignment
11. Do & Don’t
12. ੔ྻʢAlignmentʣ ʮ໨ʹݟ͑ͳ͍ઢʯΛҙࣝ͢Δ ▸ ΦϒδΣΫτ΍ྖҬͷڥքઢ ▸ ੔ྻͷج४ͱͳΔʮઢʯ ▸ ʮΨΠυʯΛҾ͍ͯ࡞ۀ͢Δ ▸ ࣗવͱݟ͑Δ ▸ 1pxͰ΋ζϨͨΒμϝ ▸ ἧ͍ͬͯͳ͍ = ಛผͳҙຯɾҙਤΛ࣋ͭ
13. ΨΠυ͸ݟ͑·͔͢
14. ΨΠυ͸ݟ͑·͔͢
15. Further Study ϖΠϞ AndroidͰར༻͍ͯ͠ΔList Components
16. ڧऑ Contrast
17. Do & Don’t
18. ڧऑʢContrastʣ ҙຯͷҧ͍΍ྖҬͷҧ͍Λ໌֬Խ͢Δ ▸ ڵຯΛҾ͘ vs. ಺༰Λ͔ͬ͠Γ఻͑Δ ▸ ϏδϡΞϧ vs. ςΩετ ▸ ཁૉ΍৘ใϨϕϧͷҧ͍ΛࡍཱͨͤΔ ▸ ຊจͱݟग़͠ͷςΩεταΠζࠩΛେ͖͘͢Δ ▸ ຊจͱݟग़͠ͷςΩετελΠϧ΍ΧϥʔΛม͑Δ ▸ ࢹઢͷ༠ಋʢڧˠऑʣ
19. ൓෮ Repetition
20. Do & Don’t
21. ൓෮ʢRepetitionʣ ಉ͡ҙຯΛ࣋ͭ΋ͷ͸ಉ͡ϏδϡΞϧʹɻ ▸ ͋Δཁૉ͕܁Γฦ͞ΕΔ → Ұ؏ੑ΍౷ҰੑΛײ͡Δ ▸ ϓϩμΫτશମͰ౷ҰײΛ࣋ͨͤΔ & ཧղΛଅਐͤ͞Δ ▸ ʮϒϥϯυཁૉʯΛ൓෮͢Δ → ҹ৅෇͚ ▸ ܁Γฦ͠Ͱ౷ҰײΛ࡞Δ → ΞΫηϯτ͕ࡍཱͭ ▸ ౷Ұ͞Εͨମݧ = 1ͭͷαʔϏε ▸ ಥ೗ݱΕΔҟ࣭ͳମݧ → ʮʂεύϜ.. ͦͬด͡ɻʯ
22. Further Study ▸ “visual design principles” ͰάάΔͱ͍ΖΜͳهࣄ͕ग़·͢ ▸ ΄΅ݴͬͯΔ͜ͱҰॹɻཻ౓͕ҧ͏͚ͩɻ ▸ 4ͭͩͬͨΓ10ͩͬͨΓ20ͩͬͨΓɻ ▸ Visual DesignͷϨϏϡʔΛ͢Δͱ͖ͷجຊ༻ޠʹͳΓ·͢ ▸ ͔ͬ͜Βઌ͸৭࠼ײ֮ͱϚφʔͱΞΠσΟΞͰ͢ʢ࣋࿦ʣ
23. @ikutani41 2018/3/28 Thank you! VISUAL DESIGN
24. Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ