WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 5 months ago

Last modified 4 months ago

#1530 closed enhancement (fixed)

Change WordPress.org logo on the Header

Reported by: hugobaeta Owned by: obenland
Milestone: Priority: normal
Component: General Keywords: ui-feedback
Cc:

Description

I would like to update the header logo on WordPress.org sites to the new version and size it to match a bit better the safety margins in the guidelines (I'm actually taking a little out so the logo doesn't end up too small). I also improved the color by making it white (I always felt that header logo looked muddy in that gray).

Here's a comparison before and after:

https://cldup.com/_CnHu8DUrv.png

The new image dimensions (that would need to be updated in the css) are 290x46.

New files (regular and retina @2x) are attached to the ticket.

Attachments (9)

wp-header-logo.png (7.0 KB) - added by hugobaeta 2 years ago.
Regular version
wp-header-logo@2x.png (16.6 KB) - added by hugobaeta 2 years ago.
Retina version (@2x)
wporg-logo.pdf (55.3 KB) - added by hugobaeta 10 months ago.
wporg-logo-alt.pdf (55.6 KB) - added by hugobaeta 10 months ago.
wporg-logo-metrics.pdf (69.6 KB) - added by hugobaeta 10 months ago.
wporg-logo.svg (5.3 KB) - added by melchoyce 5 months ago.
wporg-logo-light.svg (5.9 KB) - added by melchoyce 5 months ago.
wporg-header-with-logo.png (73.0 KB) - added by melchoyce 5 months ago.
In context.
wporg-logo-light.2.svg (5.8 KB) - added by melchoyce 5 months ago.

Download all attachments as: .zip

Change History (31)

@hugobaeta
2 years ago

Regular version

@hugobaeta
2 years ago

Retina version (@2x)

#1 follow-up: @michaelarestad
2 years ago

The new colors are a definite improvement. The type feels a pixel or two too close to the icon (maybe that's a topic for elsewhere or it's the pixel hinting or something). Other than that, this looks good to me.

I'm wondering if it should eventually be an SVG.

#2 @hugobaeta
2 years ago

  • Type changed from defect to enhancement

#3 in reply to: ↑ 1 ; follow-up: @hugobaeta
2 years ago

Replying to michaelarestad:

The type feels a pixel or two too close to the icon

When you say type, I'm assuming you mean the menu, right? I agree, but I was trying to not touch any other elements there. If we could increase the height of the header by a few pixels, the added white space would likely look and feel great. But, yeah, that's for another ticket ;)

I'm wondering if it should eventually be an SVG.

Not sure about the technical implications of such decision, that's more up your alley. Do you want me to produce one? Does it work well at the regular 1x size?

#4 in reply to: ↑ 3 @dd32
2 years ago

Replying to hugobaeta:

Replying to michaelarestad:

The type feels a pixel or two too close to the icon

When you say type, I'm assuming you mean the menu, right?

I believe @michaelarestad was referring to the gap between the W and WordPress.org which although is set as W/20 in the metrics, feels like the edge of the W in WordPress is hovering above the outer ring of the W (to me at least).

For some reason the images on the identity page feel like they've got a larger gap than the preview in the cloudup here.

#5 in reply to: ↑ description @mattmiklic
2 years ago

Replying to hugobaeta:

I would like to update the header logo on WordPress.org sites to the new version and size it to match a bit better the safety margins in the guidelines (I'm actually taking a little out so the logo doesn't end up too small). I also improved the color by making it white (I always felt that header logo looked muddy in that gray).

Good call here. The current logo was sized based on a design that used a more compact header, with the tabs over to the right (https://cloudup.com/czKjhPIEYAS). With all the stuff going on in the header now a smaller logo feels better.

The new colors are a definite improvement. The type feels a pixel or two too close to the icon (maybe that's a topic for elsewhere or it's the pixel hinting or something). Other than that, this looks good to me.

Yeah; I think it's because of the pixel hinting. The serif on the left edge of the W is extending into the margin between the W mark and WordPress by one subpixel, which I think makes them look too close. Just shifting the text over by 0.5 to 1 pixel would probably help this.

I'm wondering if it should eventually be an SVG.

SVG would be nice. Note that there are quite a few devices out there with pixel ratios > 2, so if we only provide 1x and 2x images, they'll be scaled up for those devices. Note the blurriness in this iPhone 6s Plus screenshot of the current homepage logo. I'd go with an SVG but if not, we'd really need a 3x version of the PNG as well.

https://cldup.com/RYQ9ZQ1PqF.png

Last edited 2 years ago by mattmiklic (previous) (diff)

#6 @melchoyce
2 years ago

Yeah; I think it's because of the pixel hinting. The serif on the left edge of the W is extending into the margin between the W mark and WordPress by one subpixel, which I think makes them look too close. Just shifting the text over by 0.5 to 1 pixel would probably help this.

+1

I'm wondering if it should eventually be an SVG.

If we're replacing it now, I think we should be replacing it with an svg.

Looking really good!

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


2 years ago

#8 @ocean90
2 years ago

SVG sounds good. 👍

#9 @melchoyce
10 months ago

@hugobaeta Can you provide an SVG?

#10 follow-up: @hugobaeta
10 months ago

@melchoyce Uploaded everything I had here, let me know if this works :)

#11 in reply to: ↑ 10 @melchoyce
10 months ago

Replying to hugobaeta:

@melchoyce Uploaded everything I had here, let me know if this works :)

Thanks pal 🙌

#12 @obenland
6 months ago

@melchoyce @hugobaeta I'd love to get this in, any new on the SVG file?

@melchoyce
5 months ago

#13 @melchoyce
5 months ago

Made an svg from @hugobaeta's pdf: wporg-logo.svg

#14 @melchoyce
5 months ago

Also made a light version: wporg-logo-light.svg

@hugobaeta, can you review?

@melchoyce
5 months ago

In context.

#15 @hugobaeta
5 months ago

@melchoyce my only comment is that I'd wish the W mark wasn't muted out. That was one of my pet peeves with the current header. There's no reason for it, really. What do you think?

#16 @melchoyce
5 months ago

Yeah, I think having it all one solid color would be totally fine. How does this look? wporg-logo-light.2.svg

#17 @hugobaeta
5 months ago

Looks good to me! Thank you!

#18 @obenland
5 months ago

In 6313:

Header: Update WordPress logo

Now adheres to WP.org style guidelines, including safety margins, and uses an SVG for better scaling.

Props melchoyce, hugobaeta.
See https://make.wordpress.org/design/handbook/design-guide/wordpress-org/wordpress-org-identity/
See #1530.

#19 @hugobaeta
5 months ago

Woot Woot!! Thank you @obenland and @melchoyce for making this happen! Such happiness, much wow! :D

#20 @obenland
5 months ago

In 6315:

WPorg: Update WordPress logo.

See #1530, [6313].

#21 @obenland
5 months ago

  • Owner set to obenland
  • Resolution set to fixed
  • Status changed from new to closed

In 6316:

WPorg: Cache bust.

Fixes #1530.

#22 @obenland
4 months ago

In 6389:

Support Theme: Update wporg-header styles.

The support theme doesn't share the sass structure of most other wporg-* themes, so it needs to be updated separately.

Props chetan200891.
See #1530.
Fixes #3384.

Note: See TracTickets for help on using tickets.