Design Talk#5 Visual Design

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