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

SVG Icon Design Guide

RIDI
July 18, 2019

SVG Icon Design Guide

RIDI Design System - Icon Design Guide

RIDI

July 18, 2019
Tweet

More Decks by RIDI

Other Decks in Design

Transcript

  1. RIDI Design System
    SVG ICON
    DESIGN GUIDE
    UX Design, Oh Namkyung

    View Slide

  2. ৵ ೞ೙ ই੉௑ਸ ݢ੷..?

    ৈ۞ ஹನք౟о ੓חؘ..

    View Slide

  3. ઁо ই੉௑ী
    ૘଱੉ ੓঻חؘਃ.

    View Slide

  4. View Slide

  5. 15

    View Slide

  6. 4
    *
    White
    Black
    Blue
    Deep Blue
    15

    View Slide

  7. ؊੉࢚ ੉ۧѱ ࢓ ࣽ হয!

    View Slide


  8. Icon Font۽ ઁ੘ೞৈ ࢎਊ
    Ӓٺ… ੉ѱ ౟۪٘৓যਃ

    View Slide

  9. font୊ۢ ׮ܙ ࣻ ੓׮.
    font୊ۢ߆ী ޅ ׮ܘ׮.
    ઁ੘ೞח Ҕ݃׮ ௼ӝ৬ ৈߔ੉ ׮ܰ׮.
    ಕ੉૑ ۽٬੉ ו۰૑ݶ ☐۽ ࠁৈ૓׮.
    ৈ۞ݺ੉ زदী ߡ੹ ҙܻೞӝী
    ਊ੉ೞ૑ ঋ׮.
    ױ੼
    ੢੼

    View Slide

  10. ইפ ই૒ب ॳҊ ҅द֎;

    View Slide

  11. ޷উ೧ਃ….
    ಞೞ੗Ҋ ೮؍ Ѫ੉….
    ۨѢदо غ঻ҵਃ.

    View Slide

  12. View Slide

  13. য়! Ӓېب ܻ٣ח
    icon font ীࢲ SVG۽ ੹ജ ઺

    View Slide

  14. ӒܻҊ ই૒ب ୒࢑ೞ૑ ޅೠ icon font

    View Slide

  15. View Slide

  16. View Slide

  17. ੿׹਷ Arrow8

    View Slide

  18. ী…?

    View Slide

  19. close_3
    close_2
    close_1
    coin_2
    coin_bold
    coin_1

    View Slide

  20. close_2
    close_3
    close_1
    coin_2
    coin_bold
    coin_1

    View Slide

  21. ౣܿহ੉ ߭ఠੋؘ..
    ٣૑ణ ೂചۄפ..
    ੗Ӗ੗Ӗ

    View Slide

  22. ੉ઁח ઁо ই੉௑ী
    ૘଱੉ ੓঻חؘਃ੓যਃ.

    View Slide

  23. ৵ ੉۠ ޙઁо ࢤ҂חо

    View Slide

  24. ੹୓੸ੋ о੉٘о হ਺

    View Slide

  25. झாੌ झఋੌ ੉ܴ

    View Slide

  26. 24 x 24 Grid, 20 x 20 Work Area

    View Slide

  27. Square Keyline

    View Slide

  28. Circle Keyline

    View Slide

  29. Horizontal Rectangle Keyline

    View Slide

  30. Vertical Rectangle Keyline

    View Slide

  31. Style Guide - Stroke

    View Slide

  32. ଼੢ী ୶о
    ଼੢ী ୶о
    ଼੢ী ୶о
    1px stroke
    2px stroke
    3px stroke
    Default

    View Slide

  33. Style Guide - Radius

    View Slide

  34. Style Guide - Cutting

    View Slide

  35. Style Guide - Alignment

    View Slide

  36. ղࢲ੤

    ਘनрݽ਺
    ੉੹ ই੉௑ ৔৉
    Layout Guide

    View Slide

  37. ղࢲ੤

    ਘनрݽ਺
    Layout Guide - Touch target

    View Slide

  38. Plus
    Delete
    Naming Convention

    View Slide

  39. TtsDisabled
    HeartFilled
    Naming Convention

    View Slide

  40. PlusLight
    Plus
    PlusBold
    Naming Convention

    View Slide

  41. View Slide

  42. View Slide

  43. ই੉௑ ਤਗ੢

    View Slide

  44. ੉ઁ թ਷ ੌ

    View Slide

  45. Version Control

    View Slide

  46. APP Icons
    PAPER Icons

    View Slide

  47. Thank You
    UX Design, Oh Namkyung

    View Slide