Scribd Logo
Upload

Welcome to Scribd!

    • 57 views

    Color Usage in UI Design

    Uploaded by

    Fethulmubin
    The document discusses 10 core principles of color usage in UI design: hierarchy, the 60-30-10 rule, inclusivity, meaning, limiting color, state, consistency and context. It provides examples and explanations for each principle.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Color Usage in UI Design

    Uploaded by

    Fethulmubin
    57 views9 pages
    The document discusses 10 core principles of color usage in UI design: hierarchy, the 60-30-10 rule, inclusivity, meaning, limiting color, state, consistency and context. It provides examples and explanations for each principle.

    Original Description:

    About UI/UX design short and precise notes

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses 10 core principles of color usage in UI design: hierarchy, the 60-30-10 rule, inclusivity, meaning, limiting color, state, consistency and context. It provides examples and explanations for each principle.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    57 views9 pages

    Color Usage in UI Design

    Uploaded by

    Fethulmubin
    The document discusses 10 core principles of color usage in UI design: hierarchy, the 60-30-10 rule, inclusivity, meaning, limiting color, state, consistency and context. It provides examples and explanations for each principle.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 9

    Hamad Tanveer

    10 Core Principles

    Color Usage
    in UI Design

    264653 2A9D8F E9C46A F4A261 E76F51


    Hamad Tanveer Tutorial

    Hierarchy

    Color contrast and weight indicate importance,

    guiding user focus. Tints denote levels of significance.

    Bold content grabs attention first.

    This Text Is

    Important.
    This text is less important

    but it still matters

    Most Important

    02 Swipe
    Hamad Tanveer Tutorial

    The 60-30-10 rule

    The 60-30-10 rule is a theory for making color

    palettes that are aesthetically pleasing and

    acceptably balanced.

    Post Method

    Auto Post

    Post Remainder

    60%
    When to Post

    Mar 24, 12:30 Am

    Mar 25, 10:30 Pm

    Smart Link 30%

    10%

    03 Swipe
    Hamad Tanveer Tutorial

    Inclusivity

    This involves using high-contrast colors,

    avoiding color-dependent information and

    complying with accessibility standards.

    Your Roomies Your Roomies

    Courtney Henry Courtney Henry

    Viet Nam Viet Nam

    Jenny Wilson Jenny Wilson

    Algeria Algeria

    Brooklyn Simmons Brooklyn Simmons

    Åland Islands Åland Islands

    Other Matches Other Matches

    Gary $500 Sassa $500 City Gary $500 Sassa $500 City

    04 Swipe
    Hamad Tanveer Tutorial

    Meaning

    By understanding the psychology of color, we

    can utilize brand colors that resonate with our

    target audience.

    Red Courage Love Danger Power

    Yellow Happiness Caution Positivity Fancy

    Blue Trust Calmness Stability Faith

    Green Health Nature Safety Money

    Orange Friendliness Energy Creativity

    Purple Royalty Luxury Spirituality

    White Purity Virtue Sterile Plain

    Black Power Elegance Death Fear

    05 Swipe
    Hamad Tanveer Tutorial

    Limit color

    By limiting the use of color, the areas that do

    receive color receive more attention, such as

    text, images, and elements like buttons.

    Search Mail

    Empty inbox

    No emails left to read

    06 Swipe
    Hamad Tanveer Tutorial

    State

    Color can provide information about the

    state of an app, its components, and

    elements.

    NORMAL NORMAL WARNING!

    PRESSED PRESSED CAUTION!

    DISABLED DISABLED SUCCESS!

    07 Swipe
    Hamad Tanveer Tutorial

    Consistency & context

    Color usage in an interface should be

    consistent, so colors always mean the same

    thing even when the context changes.

    Favourites

    Page not found


    You don’t have f iles Something went wrong.

    You’ll f ind your f iles here!

    Try Again

    Upload File

    08 Swipe

    You might also like