Page MenuHomePhabricator

Wikipedia.org Portal: update logo for new branding guidelines
Closed, ResolvedPublic

Description

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:

New look:


Details

Related Gerrit Patches:

Event Timeline

debt created this task.Sep 6 2016, 5:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 6 2016, 5:51 PM
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.

debt added a comment.Sep 23 2016, 5:41 PM

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

https://gerrit.wikimedia.org/r/313378

Jdrewniak added a comment.EditedSep 29 2016, 10:08 AM

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

Black with black text

debt added a comment.Sep 29 2016, 4:19 PM

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'.

Volker_E added a comment.EditedOct 11 2016, 9:38 PM

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.

debt added a comment.Oct 27 2016, 3:30 PM

The latest rebase of the code appears to not have 'unblocked' the patch, as shown here: https://gerrit.wikimedia.org/r/#/c/313378/

Nirzar added a subscriber: pau.EditedOct 27 2016, 4:52 PM

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

Google contextual "use of logo"



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."

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.

debt added a comment.Oct 27 2016, 5:53 PM

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 ?

Nirzar added a comment.EditedOct 27 2016, 5:55 PM

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 wikipedia.org, it appears that this was done. @debt, can you confirm and close?

    debt added a comment.Nov 11 2016, 12:10 AM

    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.

    debt moved this task from Done to What's Next on the Discovery-Portal-Sprint board.Jan 4 2017, 9:25 PM

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

    Volker_E moved this task from Incoming to In Development on the Design board.Jan 5 2017, 6:12 PM
    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

    Reason:
    Logo is being changed to black in 384563

    https://gerrit.wikimedia.org/r/313378

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

    https://gerrit.wikimedia.org/r/384563

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

    Reason:
    As per @Volker's suggestion. I've split this patch into multiple commits on the following topic thread

    https://gerrit.wikimedia.org/r/#/q/topic:new-svg-sprites (status:open OR status:merged)

    https://gerrit.wikimedia.org/r/384563

    debt closed this task as Resolved.Nov 21 2017, 6:25 PM
    debt claimed this task.

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