$30 off During Our Annual Pro Sale. View Details »

Design Conceptualization

Ajith R Nayak
December 04, 2020

Design Conceptualization

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

Ajith R Nayak

December 04, 2020
Tweet

More Decks by Ajith R Nayak

Other Decks in Design

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