Performance Lab: Branding

[dainemawer]

Performance Lab: Branding

As briefly discussed in our Weekly Performance Meeting from 1st February 2022

@felixarntz brought up an item with regards to design some assets for the "Performance Lab" plugin. As we're no stranger to opinion in the WP community, it would be great to get everyones ideas / thoughts / opinions in terms of what they would like to see in terms of creative options.

Some initial ideas / inspiration from my side:

1. Jetpack Boost has a nice feel to it: https://wordpress.org/plugins/jetpack-boost/ - I also like the fact that it has a catch phrase.
2. Coincidently, this Dribbble Shot: https://dribbble.com/shots/16485339-Axelerated-Software kinda incorporates the JetPack logo, with WordPress.org colours which is actually really nice.
3. We could also go with some a bit more 3D: https://dribbble.com/shots/17317377-Athens-Medica - 3D is trending quite wildly across the web at the moment, with more skeumorphic design making a come back.

Considering this plugin will eventually land up in core, I think retain the default WordPress.org colours is a must, with a nice logon / monogram could be quite effective.

Lets get the discussion going :)

[mxbclang]

I honestly can't decide if I like 1 or 2 better! I think I'm leaning slightly toward 2.

[felixarntz]

@rwlands Thank you for these iterations!

My personal favorite is concept 2, followed by concept 1.

One general point of feedback that would apply to either: For the banner design, it would be great if we could remove the text there entirely and leave it to containing only shapes and the logo mark. Putting text in the banners is discouraged for accessibility reasons (it's impossible to put an alternative text for the image), and it's worth noting that the banner always appears next to the plugin name, so the context would be clear.

Regarding the banner in concept 2 specifically, I see that one doesn't contain the logo mark - maybe it's better like that since in that design the logo is not some form of a "P", but if the consensus ends up being concept 2, I'd be curious to see an alternative version of the banner that also includes the logo (e.g. like in the other two banner designs).

[ThierryA]

I have a strong preference for concept 1 (and 3). I can see how we could do cool stuff/variation with the "P" branding like the the outline in concept 3, nice for swag, banners etc. and personally feel that the dot/bubble branding is very common. I also think that concept 2 icon will be more challenging to use in various context, for example on a white (or other color) bg unlike the P concepts which will be more versatile due to it single tone.

For some reason at some point we lost the concept.2.0 variation of the P.

What I would love to see (if possible indeed) is: concept 1, 2, 3 and concept.2.0 (all with the blue color palette) without text on the banner to be able to compare apple with apple

Then, it would also be great to put concept 1, 2, 3 and concept.2.0 in various contrast, for example white icon on WP dark grey, blue icon on white bg and/or else to give an idea of what it looks like when it is used beyond the plugin page (even better on some sticker, t-shirt, banners or what ever but I understand this may be stretching the ask).

[dainemawer]

I quite like Concept 2 - I think its stronger in visual communication around "performance". Both "P" concepts to me don't really tie back to WordPress all that much, except for the colours. The "experimental" bubbles, to me, feel like an addition to Dashicons, which I think is a nice coincidence :)

[rwlands]

Thanks for the feedback all. No clear stand out amongst the options yet. Options 2 is slightly ahead of option 1. So we could take those forward into the final exploration.

@ThierryA in response to your request we've shown concept 2.0 now as well. we should try narrow our vote between option 1,3,concept 2.0 - for second place.

Although many WP plugins do use EN text in their banners, we can appreciate the translation and accessibility concerns. We've left open the space in the banner for either illustration or the word mark. If that needs more work we can keep that out of scope until we've selected the logo / word mark option.

To keep the ball rolling we'll spend today mocking up the final use cases and await any feedback. Thanks again for sparing your time to take a look.

[mxbclang]

I still prefer concept 2, but if we're committed to using a "P," I like concept 1 best.

[ThierryA]

Thanks for putting these 4 concepts together, my vote in order:

1. Concept 1
2. Concept 3
3. Concept 4
4. Concept 2

@bethanylang I suggest to socialize the latest iteration during the meeting today to get as many vote as possible.

[swissspidy]

I also think that bubbles like in concept 2 are rather common, so my vote is for concept 1 still.

1. Concept 1
2. Concept 4
3. Concept 3
4. Concept 2

[jeffpaul]

Too many cooks in the kitchen here, let's rely on a core committer's opinion and just ship Concept 1 so the released plugin at least has some design on the respective WP.org page.

[pbearne]

Concept 1 Concept 4 Concept 3 Concept 2

[jamesozzie]

Great work all. My own preferences:

• Concept 1
• Concept 4
• Concept 3
• Concept 2

[tillkruss]

• Concept 1
• Concept 2
• Concept 4
• Concept 3

[felixarntz]

1. Concept 1
2. Concept 2
3. Concept 4
4. Concept 3

[zero4281]

1. Concept 1
2. Concept 2
3. Concept 4
4. Concept 3

[adamsilverstein]

I like Concept 1 the most!

[mitogh]

Concept 1 has my vote as well :+1:

[dainemawer]

1. Concept 2
2. Concept 1
3. Concept 4
4. Concept 3

[rwlands]

Thanks everyone the votes are in! and we've got enough to determine so we'll close votes.

We're excited to share the finished concept soon, hopefully today or tomorrow.

[rwlands]

Hey everyone - we wanted to share the final work on the brand in some more detail.

Our mech mockups are limited to a couple of examples at the moment, maybe someone wants to try their hand at their own merch? We might add a few more next week.

We've opened up a Figma file which includes the assets and guidelines to the identity we designed: Click here

You can view the guidelines online through this prototype: Click here

[mitogh]

Thanks @rwlands looks like the file is not being shared or does not exist:

Either this file doesn’t exist or you don’t have permission to view it. Ask the file owner to verify the link and/or update permissions.

When opening the file, or maybe I need an account to view the file?

[ThierryA]

Thanks @rwlands, at the moment I am also getting an error when opening the links. Looking forward to seeing it though 😊 Feel free to share it as images to this issue as well as "preview" for those who are not clicking on the links.

[jeffpaul]

@rwlands on top of fixing the Figma link access, posting the images here or a direct link to them so we can get them added to the plugin would be great. To confirm, the filename/size requirements are:

• banner-772x250.png
• banner-1544x500.png
• icon-128x128.png
• icon-256x256.png
• icon.svg

Similarly, a 1280×640px designed image would be ideal to add to this GitHub repo for cases where someone shares this repo on social that a custom OpenGraph image will be used instead of the generically created GitHub one.

[rwlands]

Hi all,

So the issue with Figma access should be resolved now.

Have uploaded a zip file to wetransfer with all the asset requests @jeffpaul The brand guidelines are also in added as PDF. https://we.tl/t-46rY8rzTal

Thanks a lot all for your feedback to get us here.

[ThierryA]

Edit: oops seems like Tom beat me to it by 2 mins lol, thanks Tom!

Figma files "Brand Guidelines" and "Design Assets" appear to be working now. What an amazing result (IMO), super grateful for your contributions @rwlands and co 🙏 .

posting the images here or a direct link to them so we can get them added to the plugin would be great

I extracted the following from the figma files, is that what you were expecting @jeffpaul ?

Banner 1880x608 (png)

Banner 772x250 (png)

Banner 1544x500 (png)

Icon 256x256 (png)

Icon 128x128 (png)

Icon 256x256 (svg)

Also loving the swag exploration (I will try to organize some for WCEU, I will float a request form) 🎉

[jeffpaul]

@rwlands I'm seeing the banner files are one pixel too tall (e.g. 772x251 instead of 772x250) and while I could trim the files I'd hate to trim from somewhere you might choose not to, so hoping you could check out the banner images and trim them down to match 1544x500 and 772x250 perhaps?

[rwlands]

@jeffpaul Let me sort that out and reshare. @jeffpaul I'll point you to the zip file with all the assets - https://we.tl/t-46rY8rzTal (these are the correct source rather than those added as well by Thierry). For quick use, I've added the banner here.

[jeffpaul]

@rwlands the banner images in that ZIP still seem to show as 1544x501 (instead of 1544x500) and 772x251 (instead of 772x250). Perhaps you shared the wrong link or forgot to update the new PNG files with trimmed dimensions in that ZIP?

[felixarntz]

@rwlands Confirming that I also see the banner images from your latest ZIP in https://github.com/WordPress/performance/issues/144#issuecomment-1066577374 being 1px too tall. Also, the other banner size which is supposed to be 1880x608 is entirely different, that image is actually 2706x876.

[jeffpaul]

For what its worth I'm unaware of any need for a 1880x608 or 2706x876 banner image so its possible those could be removed.

[rwlands]

Looks like there was a transparent line of pixels causing the issue. Updated here - https://we.tl/t-HGznK6Gb6V

[felixarntz]

Thanks @rwlands, these look all good to me, dimensions are fixed now. 🎉

Will open a PR to include the banner and icon here so that they will be deployed to wordpress.org alongside the next release.

[felixarntz]

See #231 for the PR adding these assets for deployment to wordpress.org.

[felixarntz]

Fixed via #231 - we now have branding for our plugin, which will be deployed to the wordpress.org repository on Monday with the 1.0.0-beta.2 release! 🎉

Kudos again to @rwlands and all the other contributors who helped make this happen.