Design Talk#5 Visual Design

Slide 1

Slide 1 text

VISUAL DESIGN @ikutani41 2018/4/11 Design Talk#5

Slide 2

Slide 2 text

Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ ۙ઀ Proximity ▸ ੔ྻ Alignment ▸ ڧऑ Contrast ▸ ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ

Slide 3

Slide 3 text

σβΠϯ޻ఔͷ͓͞Β͍ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA ίϯηϓτɾτϯϚφ

Slide 4

Slide 4 text

Visual Design ▸ Πϯϓοτɿ৘ใઃܭ ▸ ೉͔ͬͨ͠Βࠩ͠໭͓͚ͯ͠ ▸ Ξ΢τϓοτɿUI, Graphic ▸ Θ͔Γ΍͢͞ ▸ ࢖͍΍͢͞ ▸ OSΒ͠͞ʢࣗવɺҧ࿨ײͷͳ͞ʣ ▸ ϒϥϯσΟϯά ▸ ࣮૷ͷ͠΍͢͞ɺσβΠϯͷ࠶ݱՄೳ౓Λ૬ஊ͔ͯ͠ΒFix ▸ ίϯηϓτ → ౷ҰͱΔ → ҹ৅ௐ੔ͱࡉ෦΁ͷͩ͜ΘΓ

Slide 5

Slide 5 text

σβΠϯͱ͸ ࢥߟͷදݱํ๏Ͱ͋Δ

Slide 6

Slide 6 text

Index ▸ σβΠϯ޻ఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ 1. ۙ઀ Proximity ▸ 2. ੔ྻ Alignment ▸ 3. ڧऑ Contrast ▸ 4. ൓෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ

Slide 7

Slide 7 text

ۙ઀ Proximity

Slide 8

Slide 8 text

Do & Don’t

Slide 9

Slide 9 text

ۙ઀ʢProximityʣ ʮۙ͞ɾ༨നʯͰ৘ใઃܭΛදݱ ▸ Ґஔతʹ͍ۙΦϒδΣΫτʹରͯ͠ɺਓ͕ؒײ͡Δ͜ͱ ▸ ؔ࿈ੑ͕͋Δ΋ͷ ▸ ಉ͡άϧʔϓʹଐ͢Δ΋ͷ ▸ ۙ͞Λදݱ͢Δͱɺࣗવͱʮ༨നʯ͕ੜ·ΕΔ ▸ άϧʔϐϯά΍֊૚ߏ଄Λදݱ͢Δ ▸ ۙ઀ͷӨڹͰɺҙਤ͠ͳ͍άϧʔϐϯάදݱ͕ੜ·Ε͕ͪ

Slide 10

Slide 10 text

੔ྻ Alignment

Slide 11

Slide 11 text

Do & Don’t

Slide 12

Slide 12 text

੔ྻʢAlignmentʣ ʮ໨ʹݟ͑ͳ͍ઢʯΛҙࣝ͢Δ ▸ ΦϒδΣΫτ΍ྖҬͷڥքઢ ▸ ੔ྻͷج४ͱͳΔʮઢʯ ▸ ʮΨΠυʯΛҾ͍ͯ࡞ۀ͢Δ ▸ ࣗવͱݟ͑Δ ▸ 1pxͰ΋ζϨͨΒμϝ ▸ ἧ͍ͬͯͳ͍ = ಛผͳҙຯɾҙਤΛ࣋ͭ

Slide 13

Slide 13 text

ΨΠυ͸ݟ͑·͔͢

Slide 14

Slide 14 text

ΨΠυ͸ݟ͑·͔͢

Slide 15

Slide 15 text

Further Study ϖΠϞ AndroidͰར༻͍ͯ͠ΔList Components

Slide 16

Slide 16 text

ڧऑ Contrast

Slide 17

Slide 17 text

Do & Don’t

Slide 18

Slide 18 text

ڧऑʢContrastʣ ҙຯͷҧ͍΍ྖҬͷҧ͍Λ໌֬Խ͢Δ ▸ ڵຯΛҾ͘ vs. ಺༰Λ͔ͬ͠Γ఻͑Δ ▸ ϏδϡΞϧ vs. ςΩετ ▸ ཁૉ΍৘ใϨϕϧͷҧ͍ΛࡍཱͨͤΔ ▸ ຊจͱݟग़͠ͷςΩεταΠζࠩΛେ͖͘͢Δ ▸ ຊจͱݟग़͠ͷςΩετελΠϧ΍ΧϥʔΛม͑Δ ▸ ࢹઢͷ༠ಋʢڧˠऑʣ

Slide 19

Slide 19 text

൓෮ Repetition

Slide 20

Slide 20 text

Do & Don’t

Slide 21

Slide 21 text

൓෮ʢRepetitionʣ ಉ͡ҙຯΛ࣋ͭ΋ͷ͸ಉ͡ϏδϡΞϧʹɻ ▸ ͋Δཁૉ͕܁Γฦ͞ΕΔ → Ұ؏ੑ΍౷ҰੑΛײ͡Δ ▸ ϓϩμΫτશମͰ౷ҰײΛ࣋ͨͤΔ & ཧղΛଅਐͤ͞Δ ▸ ʮϒϥϯυཁૉʯΛ൓෮͢Δ → ҹ৅෇͚ ▸ ܁Γฦ͠Ͱ౷ҰײΛ࡞Δ → ΞΫηϯτ͕ࡍཱͭ ▸ ౷Ұ͞Εͨମݧ = 1ͭͷαʔϏε ▸ ಥ೗ݱΕΔҟ࣭ͳମݧ → ʮʂεύϜ.. ͦͬด͡ɻʯ

Slide 22

Slide 22 text

Further Study ▸ “visual design principles” ͰάάΔͱ͍ΖΜͳهࣄ͕ग़·͢ ▸ ΄΅ݴͬͯΔ͜ͱҰॹɻཻ౓͕ҧ͏͚ͩɻ ▸ 4ͭͩͬͨΓ10ͩͬͨΓ20ͩͬͨΓɻ ▸ Visual DesignͷϨϏϡʔΛ͢Δͱ͖ͷجຊ༻ޠʹͳΓ·͢ ▸ ͔ͬ͜Βઌ͸৭࠼ײ֮ͱϚφʔͱΞΠσΟΞͰ͢ʢ࣋࿦ʣ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text