SVG Icon Design Guide

RIDI Design System - Icon Design Guide

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. 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