Design Talk#5 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 ྑ͔ͬͨΒಡΜͰͶ