Design Conceptualization

I talked about introducing a design-language to a product that I've been working on lately.

Transcript

1. Design
   
   
   Conceptualization
   Think Design. Know Design
   @ajithrnayak
   

   View Slide

2. Design Systems
   

   View Slide

3. Polaris by Shopify Material Design by Google Atlassian Design
   

   View Slide

4. How we look like and why
   Brand Guide
   Mission
   Personality
   Promise
   principles
   

   View Slide

5. User is king Useful
   ✈ Accessible Desirable
   Design
   
   
   principles
   This system's using rigorous research into
   users’ needs and desires, laser-focused on
   real people. Inclusive, it’s designed and built
   to be accessible to all, regardless of ability
   or situation.
   Mobile-
   f
   i
   rst and usable on all devices.
   Built for non tech savvy people, colour blind
   people, possibly handicapped. Some
   training may be provided for the
   handicapped.
   Giving all the products a beautiful edge,
   whether they are back-o
   f
   f
   i
   ce or client facing
   products.
   

   View Slide

6. Design
   
   
   Style Guide
   Visual Identity Elements
   Icons
   Interface Components
   Interface States
   Headings
   Ultimate source of truth
   Faster iterations & progress
   code in sync
   

   View Slide

7. visual elements
   Style
   Colours Typography Iconography Illustrations
   Aa
   

   View Slide

8. Hola
   Namaste
   Hello
   Colors
   

   View Slide

9. Colors
   

   View Slide

10. Color Palette
    

    View Slide

11. Color Palette
    

    View Slide

12. 60-30-10
    

    View Slide

13. Every color sends a message
    

    View Slide

14. DON’T USE BLACK
    White has 100% colour brightness, and black has 0%
    
    
    Such a disparity creates intense light levels that
    
    
    Overstimulate the eyes
    ”
    

    View Slide

15. Typography
    behind the words mountains
    Far Far Away, Behind The Words Mountains, Far From
    
    
    The Countries Nevada
    Written by: Ghost Writer
    

    View Slide

16. Typography
    

    View Slide

17. Typeface
    Serif, Sans Serif, Script, Mono, Slab etc
    Font Family
    Open Sans, Roboto, Lato, Nunito etc
    

    View Slide

18. HIG - Apple Material Design
    

    View Slide

19. Iconography
    

    View Slide

20. Iconography
    

    View Slide

21. Icon Style
    Variations Size Color
    16px | 24px | 32px
    

    View Slide

22. Illustrations
    

    View Slide

23. View Slide

24. Layout
    behind the words mountains
    Far Far Away, Behind The Words Mountains, Far From
    
    
    The Countries Nevada
    Written by: Ghost Writer
    12px
    12px
    20px
    8px
    12px
    20px
    

    View Slide

25. Think Design
    Use proper type hierarchy
    Use proper color contrast
    Compose better layouts
    Use colors e
    f
    f
    i
    ciently
    Use uniform icons
    Use better shadows
    

    View Slide

26. Muchas Gracias
    

    View Slide