User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I making a web service prototype and design, this service designed for internal use (something like CRM). Main branding color of our company is Red (like #d50000). But red is almost always used for warnings and danger messages.
It is possible to use this color for links and main buttons, like "Ok", "Sand", "Submit"(CTA buttons)? Any ideas of how to don't break common affordance of colors? Or how to identify warning and danger messages instead of red.
I think you should carefully measure the extent of your UI, including elements, reaction of those elements to user interaction, usability in general, goals of your app, and so on. One thing that strikes me from your description is this part:
It is possible to use this color for links and main buttons, like "Ok", "Sand", "Submit"(CTA buttons)?
It's very important that you differentiate between an ok button (usually found in a dialog, and generally a bad ux choice), a submit button and a CTA button, not to mention an error message! They're very different things and require different treatments. Not only color, but copy (specially copy!)
Gmail (as mentioned in another answer) is a perfect example of the use of red in a button. This is because they want you to quickly see that button which is the most important in their app. You'll notice that button AND ONLY THAT BUTTON uses that color. You'll see links and a gmail dropdown using that color, but as long as buttons go, that is the only element, and it quickly stands out.
However, this is not appropriate for every case. In their case, they have a multi color logo so the button doesn't conflict with their logo and branding colors. In your case, the branding is red. So, common affordances like error messages aside, you should AVOID red and choose an accent. See your described scenario:
As you can see, everything has the same hierarchy, it's almost impossible to do a quick scan of elements. And here's why: you don't have an accent color, a concept that comes from architecture and furniture and is adopted by design. Google Material Color Guidelines recommends this:
Limit your selection of colors by choosing three hues from the primary palette and one accent color from the secondary palette.
so we go to Gmail and... voila!
Since Google Material isn't the alpha and omega of design, you can easily use something like this:
you'll notice the green for buttons. This green is the exact opposite to your shade of red, but you could choose anything, of course.
Or, of course, we can follow Material guidelines:
There are many approaches to this. The important part is that you choose an ACCENT, therefore using red is not a good choice, despite affordance considerations
In UI design we do see the use of red for warning, delete and errors commonly. But red is not always a color which tells people to keep away. Red can be effectively used to grab the user's attention.
An example is how Google uses red for almost all the buttons they want the user to notice or take action.
If you're going to use red for buttons on your UI, you will want to,
Here are a few stack exchange answers that may help you:
When is red the right color for a button?
Should “dangerous” buttons be big and red or small and inconspicuous?
Make your warning colors not red. A contrasting color can have the same effect. In my case, I have a site that also has red in their logo but #ff4500 (orangered) stands out. Context, in this case, helps when general images are red.
If you are someone like me and prefer to keep all the buttons in the app have same style then having a red button is going to trouble you sooner or later. We need to keep the scalability of the app in mind as well, and the fact that in future there might be someone else working on the code. In that case it will be going to be troublesome to have different colored buttons.
If it was me designing the look & feel, I would have gone for different shades of red in the background instead to keep the color palette similar to the logo. We don't need to use the primary color too much in a design. You can always use the red to draw attention to a section. but just don't overdo it with red in the background.
It is much easier to make your colours have meaning when you have a larger palette to work with.
Your call-to-action buttons aren't going to stand out if they are the same colour as everything else on the site.
You also need to consider how the site will look to people with colour blindness. The best tool for this is http://paletton.com/ (build up your colour scheme and then click on vision simulation at the bottom right of the screen to see how your colour scheme will look to people with different forms of colour blindness)
For accessibility to colour-blind people, you should never use colour alone to convey meaning
