Page MenuHomePhabricator

Color section: Make images and swatches clearer
Closed, ResolvedPublic

Assigned To
Authored By
Jun 6 2017, 7:20 PM
Referenced Files
F23796944: image.png
Jul 16 2018, 1:32 PM
F23306894: image.png
Jul 4 2018, 12:11 PM
F23306247: color-palette.png
Jul 4 2018, 10:40 AM
F23306282: colors-in-order.png
Jul 4 2018, 10:40 AM
F23272025: image.png
Jul 3 2018, 4:58 PM
F23271143: image.png
Jul 3 2018, 4:02 PM
F23073204: image.png
Jun 29 2018, 12:28 PM
F23073212: image.png
Jun 29 2018, 12:28 PM


Current presentation of color section overview and swatches is falling short on some points:

  • Palette overview is too big with scaled down text, doesn't help a lot on desktop and fails on mobile
  • Repeating information in overview and color swatches below

T167190 screencapture-wikimedia-github-io_before.png (7×2 px, 1 MB)

Things to consider (collected from various voices):

  • We would like to give more emphasis on our design language (“Base50“, “Accent10”, …)
  • We should get rid of RGB and HSB values as they might not provide necessary information for our audiences
  • We should provide some short introductory image showing all colors before you need to start scrolling

Event Timeline

If we aim for a summary that may still be useful we can use something along these lines:

color-summary.png (791×2 px, 157 KB)

Shows the palette, helps understand the codes and shows whether white or black text should be used in conjunction with the colors. Even at small sizes, is recognisable:

color-summary-small.png (149×460 px, 21 KB)

though I wonder if there's a way to show when the color is compliant on black and white (B30)?

What I'm missing above is

  • similarity to the rest of either the other images in the guide or the way M101 is built, as the color palette will continue to be an important part of it – or at best both &
  • the arrangement. Our self-chosen values would probably be stronger represented if the similar shades are in a matrix closer to each other?

I like, that the color group labels are not repeated and the simplicity is growing on me.

guide.jpg (387×892 px, 206 KB)

I think the squares are better :)

Or something like this:

guide2.jpg (3×1 px, 1 MB)

'Example' colors are links to 'description' colors.

T168029: Improve wikitable borders is a good example, why I'm convinced to leave RGB colors in (somehow), when needed to be used in RGBA context for developers' ease.

@Jdrewniak has prepared with a slightly different approach taken by @Nirzar.
Two things are missing, that we should add:

  • Clear indicators (headings), which meta group the color swatches (“Base”, “Accent”…) belong to
  • Still show RGB and HSB values on :hover to make extending the palette simpler for average users.

From the PR above:

T167190 Visual Style - Colors _before – WikimediaUI Style Guide 2017-07-18.png (1×1 px, 283 KB)
T167190 Visual Style - Colors _after – WikimediaUI Style Guide 2017-07-18.png (1×1 px, 219 KB)

This doesn't seem to me as a sufficient improvement. I'd rather propose to:

  • Leave in group indicator labels (like “Accent”) or put them above the swatches.
  • Move hex color below, like in current state of swatches
  • Move WCAG level indicators to bottom right.
  • Hide RGB/HSB per default and make them visible on :hover.

I'll provide an updated PR and an image here, with the ideas outlined above.

Volker_E triaged this task as Medium priority.Sep 6 2017, 10:40 PM
Volker_E raised the priority of this task from Medium to High.Jan 30 2018, 5:46 PM

I've played around with some of the color palette overview appearance options.
We have a few restrictions in space and visual importance:

  • On a normal desktop/laptop those should only give you an overview, and make clear that there's more text and in-detail for colors coming. Therefore I reduced both, width of the swatches and font size to 64x64px in immediately make clear that page continues
  • Circular swatches, which I wasn't a big fan first time I saw it, as it's a pretty singular shape in rest of style guide/widgets right now sets the overview collection better apart from the detailed swatches below. Up for discussion…
  • Accent colors have to come first
  • Base colors second
  • Utility colors are questionable if better on one row (desktop) or multiple rows, as Red also plays a stronger part than green and yellow. But for the overview it might be sufficient to put them all on one row.
  • Left out everything else, tooltip is provided to tell that ones are “Base” colors, other “Accent” colors. Details follow below. Overview should just give a feeling for all our colors. Basically the more I tried the more I went with reduction as in Pau's proposal, but even reducing further in removing the swatches group headlines in first appearance.


image.png (902×1 px, 171 KB)

Older alternatives:

image.png (830×1 px, 162 KB)

image.png (1×1 px, 180 KB)

image.png (972×1 px, 172 KB)

image.png (882×1 px, 122 KB)

@Volker_E, just out of curiosity, why are the numbers included?
At first glance it makes me wish they were Hex codes instead (of course those are available further down the page) but as this is an illustration, I'm curious what utility the numbers add.

@cmadeo From my point of view it emphasizes the systematic approach behind the color swatches choice. Putting the most important colors (Accent50, Base50 and Red50) in front and having the numbers also as cue for the right color combinations (black and white depending on hue upfront.
We could think about (pointer input only device) showing hex colors on hover.

As I mentioned earlier, I think it makes sense to simplify the color overview. I agree in making the codes the main piece of information since it is how we refer to the colors (and more details can be obtained below the page). In terms of communicating the system, the numbers being out of order makes it a bit confusing. I can see the need to highlight that 50 is the reference number, but altering the order of the items and breaking the gradient of colors may be counterproductive.

@Volker_E, thanks for the explanation, that makes sense to me now.

@Pginer-WMF Would you not emphasis the *50s at all then? As in making bigger (as alternative)? I do see it as a tad confusing, but not so much as to only see a gradient order as only way.

@Pginer-WMF Would you not emphasis the *50s at all then? As in making bigger (as alternative)? I do see it as a tad confusing, but not so much as to only see a gradient order as only way.

Emphasising the 50s makes sense, it is just that reordering adds some confusion.
I think it makes sense to explore ways to emphasising (size, external circle, text in bold, etc.).
Not emphasising the 50s can also be an option if we don't find a clear and non-distracting way to do so.

Updated proposal (order kept):

image.png (1×1 px, 210 KB)

And full page (without above alternation of overview swatches):

image.png (6×2 px, 1 MB)

I illustrated two proposals where the order of the colors is not altered:

A) Emphasise the 50s
An outer circle is used to emphasise the representative colors of each group (50s) to explain a bit their role in the system of colors.

color-palette.png (902×1 px, 193 KB)

B) Just show the colors
Show the palette with colors making a natural gradient and numbers following their order. No emphasis is made on the 50s. It does not try to explain too much about the system for the sake of simplicity.

colors-in-order.png (902×1 px, 171 KB)

…and a last one from me:
A1) Increase 50s size slightly to provide (only) a subtle emphasis, which is not using :focus visual treatment in a new context:

image.png (964×1 px, 175 KB)

In a conversation @Nirzar yesterday provided two more proposed changes:

  1. The overview palette should probably be more of a mood board and (does) not (have to) include all colors – with that it also doesn't make sense to include the color numbers
  2. The color names should be lowercased (“base90”, “accent50”, “red10”), foremost in the example for aesthetically reasons on the swatches. I think that is worth the attempt, it could also have resulted from German language background to start with uppercase letter…

Another update with the overview palette not showing the shortened color titles only giving a mood – overthrowing my own earlier take in T167190#4394683
I've tried several ways to reduce the number but nothing makes a real nice overview, as we also shouldn't repeat the mood representation of “Visual Style” the third time.

image.png (1×1 px, 186 KB)

I'd suggest to go with that for now, decide on point 2. above and implement a possible reduction in a next step in order to resolve the outstanding bad representation of the colors on mobile promptly.

Volker_E closed this task as Resolved.EditedJul 17 2018, 7:04 PM
Volker_E claimed this task.
Volker_E moved this task from Needs Review/Feedback to Done on the Wikimedia Design Style Guide board.
Volker_E removed a project: Patch-For-Review.

Design made in today's Design Review meeting to stay with uppercase start color names in both, swatches and textual contents by help of majority of English native speakers.

Task finally resolved by