4 ms·

I think there is a lot of validity to this article. But extrapolated as “general advice” would seem to replicate Bootstrap aesthetics every time. Saying, “Well

I think there is a lot of validity to this article. But extrapolated as “general advice” would seem to replicate Bootstrap aesthetics every time. Saying, “Well, you need a color for the errors, and the successes, and the warnings” will almost invariably provoke the answers “Red, Green, Yellow” in some varying shade. The net effect is we can all tell when a website is using bootstrap or lacks branding. If you are taking out the time to steer away from appearing generic and are trying to differentiate your app design and branding, I think this advice might be a subtle disservice. You can change the presentation of the message by changing the position, the font, the size, the shape, the weight. You can add icons and other visuals. (E.g. your company’s mascot making a sad face). Looking at errors and warnings handled in Google’s websites (not the generic Material UI Kit), Apple products, Slack, etcetera can be used as an example to see that “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes.

jjcm 6y ago
> “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes. It's not the only way, but it is the best way. Straying too far from semantic meanings of colors can create confusion for users that expect a certain thing. Can you imagine if your bank had a two buttons - "delete account" and "cancel", where the delete button was green and inviting and the cancel was red? Danger should be semantic if your app has any sort of high risk actions involved in it. It's fine if a game or a rss reader uses their own funky palette that shows off their brand, but any time you start handling money you should really stray away from that.
stevenhuang 6y ago
Yeah no. If a design calls for something like green colored errors then that is simply bad design. Please be unique in other ways.
- anomaloustho 6y ago
  I think it’s fair to say that “swapping” the symbolic colors with each other would be an antipattern in most cases. But here’s one scenario. Let’s assume the app in question is used for therapy or meditation[0] and its primary color is a sage green to emphasize calmness and a connection with nature. (BetterHelp is an example) In this case, red over navy green is one direction you could go in. But another direction might be a notice with a darker green background and a large white error graphic (bold exclamation marker with a circle or triangle). The header could read “Error” in bold and the error message could appear in white. To me the dark-green/white mixture would just as clear and usable as the red-over-green method. [0] Theoretical Branding - https://dribbble.com/search/Therapy https://dribbble.com/search/Therapy
tomtheelder 6y ago
As the author says: "You might also need colors to emphasize different semantic states" It's a reasonable choice to use them, but you don't necessarily need to. It is a useful example for palette building as it is a common choice to us semantic colors, and it helps to demonstrate adding colors with substantially different hues.
gregoryjjb 6y ago
The author is one of the creators of Tailwind CSS, which gives you a predefined color palate but no components, and is intentionally opposed to the Bootstrap ideas. The recognizable part of Bootstrap isn't the fact that errors are red, it's the shape of the buttons, inputs, etc., and the fact that all errors are the exact same red as other Bootstrap sites. At the end of the day "good" UI doesn't have a lot of room to be different -- it actually needs to be recognizable -- but you don't need to change much to avoid being generic. Using different shade(s) of red for errors is one way.
- probst 6y ago
  The irony is that you can now often recognize sites being designed with Tailwind the exact same way. They tend to use a certain font, they tend to slightly overuse the card metaphor with a rather specific corner radius and box shadow... When looking at this site I immediately though: aha, this guy has been using TailwindCSS to design the website... (until I realized that in fact yes, it was designed with Tailwind and the author is also the author of tailwind itself.) So I guess it's the same as bootstrap at the end of the day. Both provide you with options to customize them. Most people don't. That being said: Working with tailwind is amazing!

jjcm 6y ago

> “You need a color for errors, and a color for successes, and a color for warnings.” is not necessarily the only way to design errors, warnings, and successes. It's not the only way, but it is the best way. Straying too far from semantic meanings of colors can create confusion for users that expect a certain thing. Can you imagine if your bank had a two buttons - "delete account" and "cancel", where the delete button was green and inviting and the cancel was red? Danger should be semantic if your app has any sort of high risk actions involved in it. It's fine if a game or a rss reader uses their own funky palette that shows off their brand, but any time you start handling money you should really stray away from that.

stevenhuang 6y ago

Yeah no. If a design calls for something like green colored errors then that is simply bad design. Please be unique in other ways.

anomaloustho 6y ago
I think it’s fair to say that “swapping” the symbolic colors with each other would be an antipattern in most cases. But here’s one scenario. Let’s assume the app in question is used for therapy or meditation[0] and its primary color is a sage green to emphasize calmness and a connection with nature. (BetterHelp is an example) In this case, red over navy green is one direction you could go in. But another direction might be a notice with a darker green background and a large white error graphic (bold exclamation marker with a circle or triangle). The header could read “Error” in bold and the error message could appear in white. To me the dark-green/white mixture would just as clear and usable as the red-over-green method. [0] Theoretical Branding - https://dribbble.com/search/Therapy https://dribbble.com/search/Therapy

tomtheelder 6y ago

As the author says: "You might also need colors to emphasize different semantic states" It's a reasonable choice to use them, but you don't necessarily need to. It is a useful example for palette building as it is a common choice to us semantic colors, and it helps to demonstrate adding colors with substantially different hues.

gregoryjjb 6y ago

The author is one of the creators of Tailwind CSS, which gives you a predefined color palate but no components, and is intentionally opposed to the Bootstrap ideas. The recognizable part of Bootstrap isn't the fact that errors are red, it's the shape of the buttons, inputs, etc., and the fact that all errors are the exact same red as other Bootstrap sites. At the end of the day "good" UI doesn't have a lot of room to be different -- it actually needs to be recognizable -- but you don't need to change much to avoid being generic. Using different shade(s) of red for errors is one way.

probst 6y ago
The irony is that you can now often recognize sites being designed with Tailwind the exact same way. They tend to use a certain font, they tend to slightly overuse the card metaphor with a rather specific corner radius and box shadow... When looking at this site I immediately though: aha, this guy has been using TailwindCSS to design the website... (until I realized that in fact yes, it was designed with Tailwind and the author is also the author of tailwind itself.) So I guess it's the same as bootstrap at the end of the day. Both provide you with options to customize them. Most people don't. That being said: Working with tailwind is amazing!