Citrus: Color codes

You might remember the hoopla around OpenOffice.org’s new mimetype icons, which, in contrast to previous versions, lacked color differentiation. The reasoning behind this was to gain independence from MS Office color coding (which actually most open-source office suites do not conform to) and to promote ODF as a whole with a unified brand. While the intentions were good, they made working with ODF files painful (because you had to squint in order to decipher the filetype), were adopted only by OpenOffice.org (so much for unification), and probably did more to drive people away from ODF than strengthen its brand. Lesson to learn: It’s never good to sacrifice on usability, especially when this is done only to differentiate yourself from a comptetitor.

This episode got me thinking though: Would usability improve if there was a general color scheme for all icons? And I tried it — there was even a short post about that on November 2010. I think it worked pretty well, and so I actually tried to make a more general color scheme. Here’s the result:

You can see traces of it in mockups, and there’ll be more along the way. It’s not very refined yet, and not well-tested — obviously, the lightness will need to change depending on context: if the background is black or white. But it does sort of conform to the current mime type color scheme of LibO (except for Base) and, if anyone wants to implement it, it does have potential to become a standard color scheme.

What do you think?

4 thoughts on “Citrus: Color codes

  1. I thinkit’s quit difficult to see any difference between 2 consecutive items (frame and image, for example).

    Regards

    1. You’re right, and that is something to work on.
      The reason I put the same hue on several items instead of having a unique hue for each item is that the toolbar looked funky when the Text and Paragraph toolbars had different hues. And so I put the same hue on those items and just changed the lightness a little. I carried that metaphor toward the other things. For example, a page is primarily a container for Paragraphs, which is primarily a container for text, so these all have one hue. In the same spirit, a Slides and Frames should be containers primarily for visual stuff. By visual stuff, I mean simple shapes (yellow) or complex bitmap images (orange) or video (red). So I took the “mean” color and made Slides and Frames orange.

      I agree, though, that the colors need to be finetuned. I might work on that, if I find the time :).

Leave a comment