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.

[sstopfer]

I'll meet the designer this week to brief her and get this going. One question for the group; considering this will get published on social media and the banner will show each time, I think this is an opportunity to "sell" it better.

Having the same banner for all plugins is okay, but we should probably add a tagline; something applicable to Performance lab in general.

That way, if a user encounters it the first time around, the messaging isn't the ONLY think that is supposed to attract the user. For those who are familiar, it will be more easily recognizable.

The simple blue background looks a bit like a placeholder image. What do you think about adding a tagline? And does the Performance Lab already have one?

[joemcgill]

Good question, @sstopfer.

Having the same banner for all plugins is okay, but we should probably add a tagline; something applicable to Performance lab in general.

Primarily, these assets are used on the Plugin pages themselves, (e.g., https://wordpress.org/plugins/performance-lab/) and inside the WordPress plugins screen as folks are searching for plugins. And will be shown along with the short description for the plugin, so creating taglines are probably unnecessary.

The primary goals for new assets, in my opinion, are summarized by Adam above:

• 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

In addition, it would be great if we were able to easily generate assets for new plugins based on this system.

[westonruter]

The banner image is shown:

1. On the WordPress Plugin Directory page.
2. In the lightbox for getting more details for a plugin in the admin.
3. On social media when a plugin's directory URL is shared.

Directory Page	Lightbox in Admin	Social Media

Given the banner is used consistently in all three scenarios, I think it should have some meaningful content (again centered in the safe region). If we use the same for each plugin, which will make it easier for us in the future, it could just say "Performance Lab".

[westonruter]

Punting from 3.1.0 to n.e.x.t (3.2.0). Normally this would be on June 17th, but given that WCEU is immediately prior to this, I think it makes sense to do a mid-cycle release, perhaps June 10th (or even the week prior).

[sstopfer]

We're happy to share the first concept for our plugin assets update. This includes a couple of icons options for different plugins as you will be able to see below.

The mockups are based on the idea that the icon should represent the plugin, and the "P" (as the Performance Lab logo) should be smaller and strategically placed in a top corner to inform the users the plugin is a part of the Performance Lab brand.

While we are waiting on the second concept/proposal, let us know what you think. Do you like the style? Should the be position of the icon and the logo be inverse? Curious about your feedback.

[westonruter]

This is great! I think this is the correct positioning.

[joemcgill]

These are looking really good. @sstopfer could you find out if these icons are from some specific set that we should standardize on or if each are custom? It might be worth considering using the WordPress icon set for consistency and ease of use.

[sstopfer]

@joemcgill Good point, I'll check and let you know.

[westonruter]

Please make sure that "Image Prioritizer" (#1088) is included as one of the created icons.

[westonruter]

Reminder that these assets are needed in the next couple weeks for WCEU.

[sstopfer]

Here is the second concept for our plugin assets update. The idea is still the same, referenced throughout the thread above, where the icon should represent the plugin, and the "P" (as the Performance Lab logo) should be smaller and strategically placed in a top corner to inform the users the plugin is a part of the Performance Lab brand.

The main difference is that, this time around, the icons used to describe the plugins are not based on the Performance Lab logo style, but give a more recognizable UI feeling.

Which one do you prefer?

[westonruter]

@sstopfer I like the second set more. Are these using the the WordPress icon set? Whatever can reuse assets so they don't have to be created from scratch for each new plugin.

[sstopfer]

@westonruter Not exactly. We’re creating branding for these plugins, which are more logos than UI icons. This library doesn’t include every possible icon, and in order to communicate the difference between the plugins, we are creating our own unique icons. However, this second concept is incorporating already familiar WP UI icons as elements of the logo, where possible. For example, the second set (which would be used for the Performant Translations) uses the language icon, which is a WP UI icon, inside a bubble (which is the custom part of the logo).

[adamsilverstein]

+1 to style 2 from me, looks good!

[joemcgill]

I prefer style 2 as well—particularly that they incorporate already familiar iconography from WP.