Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Talk#5 Visual Design

Design Talk#5 Visual Design

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

Yutaro Ikutani

April 11, 2018
Tweet

More Decks by Yutaro Ikutani

Other Decks in Design

Transcript

  1. Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ ۙ઀ Proximity ▸ ੔ྻ

    Alignment ▸ ڧऑ Contrast ▸ ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
  2. Visual Design ▸ Πϯϓοτɿ৘ใઃܭ ▸ ೉͔ͬͨ͠Βࠩ͠໭͓͚ͯ͠ ▸ Ξ΢τϓοτɿUI, Graphic ▸

    Θ͔Γ΍͢͞ ▸ ࢖͍΍͢͞ ▸ OSΒ͠͞ʢࣗવɺҧ࿨ײͷͳ͞ʣ ▸ ϒϥϯσΟϯά ▸ ࣮૷ͷ͠΍͢͞ɺσβΠϯͷ࠶ݱՄೳ౓Λ૬ஊ͔ͯ͠ΒFix ▸ ίϯηϓτ → ౷ҰͱΔ → ҹ৅ௐ੔ͱࡉ෦΁ͷͩ͜ΘΓ
  3. Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ 1. ۙ઀ Proximity ▸

    2. ੔ྻ Alignment ▸ 3. ڧऑ Contrast ▸ 4. ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
  4. ڧऑʢContrastʣ ҙຯͷҧ͍΍ྖҬͷҧ͍Λ໌֬Խ͢Δ ▸ ڵຯΛҾ͘ vs. ಺༰Λ͔ͬ͠Γ఻͑Δ ▸ ϏδϡΞϧ vs. ςΩετ

    ▸ ཁૉ΍৘ใϨϕϧͷҧ͍ΛࡍཱͨͤΔ ▸ ຊจͱݟग़͠ͷςΩεταΠζࠩΛେ͖͘͢Δ ▸ ຊจͱݟग़͠ͷςΩετελΠϧ΍ΧϥʔΛม͑Δ ▸ ࢹઢͷ༠ಋʢڧˠऑʣ
  5. ൓෮ʢRepetitionʣ ಉ͡ҙຯΛ࣋ͭ΋ͷ͸ಉ͡ϏδϡΞϧʹɻ ▸ ͋Δཁૉ͕܁Γฦ͞ΕΔ → Ұ؏ੑ΍౷ҰੑΛײ͡Δ ▸ ϓϩμΫτશମͰ౷ҰײΛ࣋ͨͤΔ & ཧղΛଅਐͤ͞Δ

    ▸ ʮϒϥϯυཁૉʯΛ൓෮͢Δ → ҹ৅෇͚ ▸ ܁Γฦ͠Ͱ౷ҰײΛ࡞Δ → ΞΫηϯτ͕ࡍཱͭ ▸ ౷Ұ͞Εͨମݧ = 1ͭͷαʔϏε ▸ ಥ೗ݱΕΔҟ࣭ͳମݧ → ʮʂεύϜ.. ͦͬด͡ɻʯ
  6. Further Study ▸ “visual design principles” ͰάάΔͱ͍ΖΜͳهࣄ͕ग़·͢ ▸ ΄΅ݴͬͯΔ͜ͱҰॹɻཻ౓͕ҧ͏͚ͩɻ ▸

    4ͭͩͬͨΓ10ͩͬͨΓ20ͩͬͨΓɻ ▸ Visual DesignͷϨϏϡʔΛ͢Δͱ͖ͷجຊ༻ޠʹͳΓ·͢ ▸ ͔ͬ͜Βઌ͸৭࠼ײ֮ͱϚφʔͱΞΠσΟΞͰ͢ʢ࣋࿦ʣ