Colour rule for multiple buttons in a complex platform



  • I'm currently designing a CRM which includes a lot of forms and modules. I have been struggling to decide the colour rule for the buttons especially having to incorporate branding colour into the palette.

    enter image description here

    Current Scenario

    Context: Form to register New Student

    Blue

    • Usage: Main button

    • Example: 'Submit' button to submit the form

    • Issue: Blue seems more natural colour for the main button and links so I select it as the main button


    Teal (Brand colour)

    • Usage: Secondary button

    • Example: 'Upload student image' & 'Add Subject' button

    • Issue: Since blue stands out more than teal I have selected teal as the secondary button, but the secondary button appears more often than the main button.


    White

    • Usage: to pair with the main button
    • Example: 'Save as draft' button

    How do I create a rule as to when to use the colours or is it better to just use 2 colours(teal and white)? However, there are many buttons and links in the CRM, so I feel that having 3 colours can help distinguish them better. What are your thoughts?



  • Don't rely on color to differentiate between hierarchy of action types.

    Your current system relies on a single shape, with tone as the differentiating factor. This doesn't account for color blindness, screens with poor color, contrast issues and low resolution.

    What you're trying to do is to teach users about the importance levels (or consequences) of actions in the application.

    Try using shape as a factor of differentiation. Material design solves this by using 3 types, from high emphasis to low.

    enter image description here

    Contained: Use this type of button once per view. Creation of a new entity, submitting a form.

    Outline: Can be used for sub-tasks: uploading an image, changing a setting.

    Text: Can be used for 'learn more' or actions you want to deemphasize.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2