0

I am currently designing a new range of applications for a customer in HR. The goal is to provide all different core applications like planning, contracting,... as a separate software as a service application, much like Atlassian or Google provides their applications to users. Each application will have its own name, logo and colour. I have started designing each application with a different full colour gradient background (see picture). There would be 5 to maximum 10 different applications with each another gradient background. The client likes it but I'm not sure though this is a good path to take. I haven't really seen any other products do this. Maybe it's best to have just a coloured background for the menu and keep the rest plain white (like the second example in the picture). I feel like I'm missing some important points which prove the case that a full coloured background is maybe not such a good idea, like every user has a different calibration and would experience the colours differently. I could use some advise from other designers out there.

The picture shows the same application but with different colours, just to make my point. Of course the application itself will differ.

Thanks alot!

different colour backgrounds on app UI

1
  • Regarding "I haven't really seen any other products do this" – Microsoft Office follows a similar approach. Word, Excel, PowerPoint, etc. have the same design language, but with a different accent color: blue, green, and orange, respectively.
    – fri
    Dec 30, 2021 at 19:16

1 Answer 1

1

A gradient is a double-edged sword and not that hard to control. The formula is simple:

  • YES when the gradient contributes to the final result of the product
  • NOT when it's a gimmick

The second case not only adds nothing to the design, it makes it worse.


  • The captures seem to be of applications of habitual use and quite profuse in graphic elements. I would try a maximum cleaning at the UI level. Any background, gradient, pattern, or color, is visual noise unless it's something very subtle. Even pure white can be a perceptual drawback.
  • Part of the application components are color-coded so that the user identifies them more easily. Any surrounding color is perceptually influencing this end in a negative way. In the bottom image it's clearly visible: the fifth and seventh objects, light green and gray, are better perceived on a white background than on the green gradient. The best thing is to avoid any colored background, especially if these backgrounds change from one application to another. See simultaneous contrast.

enter image description here

  • Superimposing shapes to a gradient gives depth, but it depends on the case, not the desired one. A shape with a color similar to one of the gradient components will be interpreted as semi-transparent. If it's necessary to obtain this effect it's welcome, otherwise it is unnecessary noise.

transparency

  • If multiple repeating color shapes are placed along the color change of a gradient, they will appear different in color. See simultaneous contrast.

simultaneous

Conclusion:

I would avoid the gradient background. But on the other hand I would try to let the user know at all times in which application is in a clearer way. As the interfaces are now, the change is too subtle. If the idea is that the colors are as subtle as possible, look for an element that helps an effective identification. A color code is always useful as long as it's easily and immediately interpreted.

enter image description here

1
  • 1
    Thanks for the clear feedback! It has been really helpful! In the meantime, I have also thought this thing through and concluded not to go with the coloured backgrounds, due to some of the reasons you mentioned. You're right, it would only be unnecessary visual load and keeping things on a white background actually keeps focus. Making the user clear which application she's using will be done not only through the subtle menu background but also with buttons and links in different colours. All the rest will follow a consistent design system. Thanks again!
    – continuous
    Dec 30, 2021 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.