Update standalone plugin assets

[joemcgill]

Bug Description

Following #1101, the icon and banner for some feature plugins no longer match the names. Specifically, "WebP Uploads" was renamed "Modern Image Formats" and "Dominant Color Images" was renamed "Image Placeholders".

For Discussion

We could create new assets using the previous practice of using the first two letters of the plugin name, but this also could be a good time to rethink the design strategy for these assets. To consider:

• Should we use icons that are not "alpha" based at all, so that changing a feature name doesn't require new assets?
• Should we keep using the current "alpha" strategy, but make them based on feature initials, rather than first two letters (e.g., Auto-Sizes becomes "AS" instead of "AU"?
• Should we use a generic icon that can be applied to all features so we don't have to create assets each time we want to create a new feature plugin?

Steps to reproduce

Visit the WP.org plugin pages:

• https://wordpress.org/plugins/dominant-color-images/
• https://wordpress.org/plugins/webp-uploads/

Screenshots

[westonruter]

• Should we use a generic icon that can be applied to all features so we don't have to create assets each time we want to create a new feature plugin?

+1 Yes, I think this makes the most sense. And then the banner image can include this same icon, and instead of repeating the 2-letter abbreviation of the standalone plugin, it can instead mention "Performance Lab". This will enhance the connection between the standalone plugin and the Performance Lab plugin.

[ThierryA]

Should we use a generic icon that can be applied to all features so we don't have to create assets each time we want to create a new feature plugin?

+1 to something generic (could be a simple recognisable shape for example). Do you have something in mind?

[westonruter]

Could we re-use relevant icons from Dashicons or Genericons?

[joemcgill]

Do you have something in mind?

@ThierryA — one option would just be to use the Performance Lab (P) for all plugins that we publish under the Performance Lab program. What do you think?

[westonruter]

The banner images also don't work in all contexts. For example, when sharing the URL to Speculation Rules in Google Chat, the "SP" in the Speculative Loading plugin's banner is cropped so you just see a part of the "P":

Slack doesn't have this problem though:

Perhaps safer to center any significant design element in the banner. (Also omit the small abbreviation in the corner.) If we go with "P" as the icon, then the banner could have centered "Performance Lab".

[ThierryA]

Do we want unique for every plugin or one for all? I would refrain from using just the P of PL as it may be confusing, what about using and AI generates for simple flat white shapes (kinda QR but only with a combination of 2 - 5 shapes) which we can use to add to the blue BG. This way it is still unique, easy to create and feature/plugin name agnostic.

[joemcgill]

Do we want unique for every plugin or one for all?

I think using the same icon for all of our plugins would be fine and removes the need to come up with new assets for each plugin and makes it obvious that all of these plugins are part of the same collection, but I don't feel strongly about it. If we have a good strategy for easily creating custom assets for each plugin that is unique, I think that would be fine too, we should just refrain from tying the icon to the name of the plugin.

[westonruter]

Also, since the Performance features screen now no longer shows the icons, there is less of a concern that they are going to be redundant. The only place they'll see the icon is on the WordPress plugin directory when looking at an individual plugin.

Instead of just "P" what about "PL" for the icon? And then the banner can just have "Performance Lab" centered on the blue background, without the additional "PL" in the bottom right corner.

[ThierryA]

Instead of just "P" what about "PL" for the icon? And then the banner can just have "Performance Lab" centered on the blue background, without the additional "PL" in the bottom right corner.

I think this solution would be the least convenient and appropriate given that the initial purpose of decoupling the PL into standalone plugin and the potential confusion between the main PL plugin and the standalone plugins. Using the branding colors is good though, no confusion but a good reference to the project overall.
My vote would be either for a single re-usable abstract shapes (ala QR code) or unique to each plugins.

[joemcgill]

I think a single, reusable abstract would essentially become a new "logo" for the performance team, and I don't think going through a whole branding exercise is necessary as a first step to updating the current plugin assets. However, as a next step we could try to source a few options to evaluate based on our current assets.

Personally, I still think that the standalone P (representing "Performance") or a the P paired with an appropriate icon that relates to each feature would work. Here's a very rough example of what that might look like.

Alternately, I'd propose we stick with the same lettering style we already have and use "WPP" to represent WordPress Performance. This could also either be a standalone mark used on all plugins or a mark that gets paired with an icon for each feature.

Jetpack is doing something similar with their suite of plugins to add a small JP login to each plugin icon.

[westonruter]

My vote would be either for a single re-usable abstract shapes (ala QR code) or unique to each plugins.

@ThierryA So like core does with a commenter's avatar when no Gravatar is available?

IMO, while these are visually distinctive (normally) they have no semantic value. I think i9t would be better to have at least something identifiable about the plugin in the icon.

Personally, I still think that the standalone P (representing "Performance") or a the P paired with an appropriate icon that relates to each feature would work. Here's a very rough example of what that might look like.

@joemcgill I really like that idea. Also nice precedence with Jetpack.

[adamsilverstein]

The Jetpack example is great, thanks @joemcgill! I like that direction, either with the P in a small circle like the Jetpack logo example or large like your mock.

Summarizing, I feel we agreed on:

• Some common branding: eg color or the "P" for Performance across all the plugins
• A unique icon for each plugin
• Abstract icons so names can change and icon doesn't need to change

[westonruter]

And for the banner, to reuse the same "Performance Lab" banner consistently across all the plugins? In this way, the icon and name would be distinct, but the banner would remain the same. Or should the banner be custom for each plugin as it is now? Just to reiterate that the current banners don't work in all cases. Apparently the WordPress.org banner is being used as the "social preview" in Google Chat and also Twitter:

And also Facebook:

Compare with the actual banner:

So the "S" in the "SP" of Speculative Loading is getting cut off. So in practice the banner is already "P" for many. It seems the WordPress.org banner should be designed with a "safe region" that is centered with 2:1 aspect ratio, the same as GitHub's social preview template:

[joemcgill]

Today during our weekly Performance Team chat, I asked @eclarke1 if we could get some mockups of some of these ideas created to make a decision a bit easier (link). She thinks the designer who has helped with our other logos may be able to help with this next week. I say we follow up on this once Em has had the chance to check in with them.

[ThierryA]

@ThierryA So like core does with a commenter's avatar when no Gravatar is available?

That was the idea, yes. However the path that you are all exploring sounds great, it is definitely going towards a good solution IMO 👍

Looking forward to seeing the options the designer comes back with.