Page MenuHomePhabricator Portal: update logo for new branding guidelines
Closed, ResolvedPublic

Assigned To
Authored By
Sep 6 2016, 5:51 PM
Referenced Files
F4667376: common-mistakes.a6aa09b48e0b.png
Oct 27 2016, 5:31 PM
F4667256: pasted_file
Oct 27 2016, 4:52 PM
F4667250: pasted_file
Oct 27 2016, 4:52 PM
F4667253: pasted_file
Oct 27 2016, 4:52 PM
F4667246: pasted_file
Oct 27 2016, 4:52 PM
F4536250: portal-wikimedia-logo-black.png
Sep 29 2016, 10:08 AM
F4536146: portal-wikimedia-logo-black+black-text.png
Sep 29 2016, 10:08 AM
F4437454: Screen Shot 2016-09-06 at 11.50.21 AM.png
Sep 6 2016, 5:51 PM


Since the Foundation has announced new branding for the Wikimedia logo, we should update the portal page to reflect that new style of the logo.

This ticket is to document the change of the logo from grey to black/white as referenced in the new branding guidelines.

Current look:

wikipedia-portal-logo_grey.png (147×382 px, 17 KB)

New look:

Screen Shot 2016-09-06 at 11.50.21 AM.png (69×143 px, 4 KB)

Event Timeline

debt triaged this task as Medium priority.Sep 6 2016, 5:51 PM
debt moved this task from Backlog to What's Next on the Discovery-Portal-Sprint board.

I hope it's enough to replace the grey logo with a black logo, without the wordmark 'Wikimedia Foundation'. Currently the design doesn't leave much space for the logo + words.

Yes, we just need to replace the actual logo, and not add in the wording.

I had used that image as an indication of what the new logo looked like. :)

Change 313378 had a related patch set uploaded (by Jdrewniak):
T144834-updating wikimedia logo from grey to black

I suppose if we change the logo to black we should change the text in the footer from grey to black as well

Black with grey text

portal-wikimedia-logo-black.png (2×2 px, 327 KB)

Black with black text

portal-wikimedia-logo-black+black-text.png (2×2 px, 323 KB)

I like having the grey text in the footer and for the language picker in the search box - with the new black logo.

No problem merging it, and I am aware of the new branding guidelines, but pure black on a webpage/app is delicate isn't it?
Could we have the entire Design team review it and sign off on it, as a whole, during a Design review meeting?
I guess this change is expected, at some point, in all our products (web and apps), so it involves many people.

@JGirault your right that 'pure' black should be reconsidered for text. This'll be discussed with the design team because wikipedia itself gives little guidance ( headers for example, are #000, but body text is #252525 ) and M101 currently suggests #222 as a 'text black'.

As a result of our discussions on the new color palette M82 the copy text was defined as #222, which is also stated in M101 (carrying a copy of M82).
.footer-description-text should follow normal copy text.
.other-project-tagline should either carry #222 as well (makes sense as it is already small text) or #54595d.

In any case it feels weird to me that the link get a blue underline on :hover but the tagline text stays darkgrey. Should be blue on hover as well?!

For shared understanding, #000 is reserved for special emphasized text or :active state of elements normally carrying #222

@Jdrewniak : I can't tell whether this was approved by the design team, or if it needs changes. Either way, it seems like it should be unblocked and either ready for you to make changes or for @JGirault to merge it.

The latest rebase of the code appears to not have 'unblocked' the patch, as shown here:

as far as I know, logos are adaptable pieces and a great brand works in different contexts. here's an example of using a brand in a context.

Google's logo

pasted_file (134×349 px, 13 KB)

Google contextual "use of logo"

pasted_file (655×1 px, 52 KB)

pasted_file (512×1 px, 229 KB)

pasted_file (536×190 px, 29 KB)

You can verify this for any brand like facebook, twitter, instagram.

Just like we use "white" wikimedia mark on images which have darker background, we should be adapting the color for the context it is used in.

agree with @Volker_E cc @pau for comments?

agree with @Volker_E cc @pau for comments?

Agree. Different brands define the limits of these adaptations. For example, Mozilla indicates that "You can use any solid color for the Mozilla wordmark. Which color you choose depends on the color of the supporting design. When in doubt, please use the default charcoal color supplied above."

common-mistakes.a6aa09b48e0b.png (275×657 px, 13 KB)

In our case, it seems that not allowing even some shades of grey it would be restricting it too much since this seems a very basic way to adjust the prominence level when the brand appears with other content.

When the Discovery team had their meeting with Comms to go over all the new guidelines, they wanted us to make the WMF logo on the portal page darker and preferably the same color as listed in the guidelines document.

Are you suggesting that we keep the grey logo - or just make it a bit darker but not full black, @Pginer-WMF and @Nirzar ?

Are you suggesting that we keep the grey logo - or just make it a bit darker but not full black,

I would suggest using B-30 or B-20 from the wikimedia color palette

  • Looking at, it appears that this was done. @debt, can you confirm and close?

    Nope, it hasn't been pushed into production yet.

    It looks like we'll need to rebase it (@Jdrewniak) and then get it code reviewed (@JGirault) before it gets out during a SWAT window.

    The work has been completed in T148267 and T146231, moving to done here.

    Actually, the work done in the previous comment hasn't changed the WMF logo color, just the palettes. We'll still need to update the logo to a new, darker, color.

    debt removed a project: Patch-For-Review.

    moving to backlog until we get more time to work on portal stuff.

    Change 313378 abandoned by Jdrewniak:
    T144834-updating wikimedia logo from grey to black

    Logo is being changed to black in 384563

    Change 384563 had a related patch set uploaded (by Debt; owner: Jdrewniak):
    [wikimedia/portals@master] Replacing portal image workflow with SVGs

    Change 384563 abandoned by Jdrewniak:
    Replacing portal image workflow with SVGs

    As per @Volker's suggestion. I've split this patch into multiple commits on the following topic thread (status:open OR status:merged)

    debt claimed this task.

    Closing this out as we're taking a slightly different method now, per T144834#3718730.