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 :)

[dainemawer]

Spitballed a couple of ideas this morning:

Logomark with 3D Element

Logon 1

Logon 1 with Illustration

Logon 2

Logon 3

Logon 4

[felixarntz]

@dainemawer Awesome! I personally like your "Logon 1" and "Logon 4", but curious to hear what others think. A few general points of feedback:

• I'm not sure we should include a tagline like you have throughout. It would require discussion on what it should be, but most importantly it makes me think too much of this as marketing a product, which this plugin isn't really. If we want to include some sort of tagline, I'd even prefer something less "catchy" and more descriptive/objective, e.g. "Feature plugins to boost performance" (probably there's something better though).
• In any case, for the banner, I think a version with some sort of illustration looks more appealing than just the logo part on white.
• We'll also need a square image for the plugin icon - which I assume we could just take which ever logo (just the logo without the text) that we decide on.

[jeffpaul]

In general I tend to shy away from text within the banner (or icon) graphics as they are inherently not translatable, so you could end up with a fr.wordpress.org/plugins/slug with the readme in French but the text on the banner in English.

[felixarntz]

Good point @jeffpaul, yeah that's another reason to not include a tagline. I think the plugin name would be the only exception to that, since it doesn't (or at least shouldn't) get translated anyway.

[javiercasares]

Like the Logon 4.

[mxbclang]

I also like 1 and 4, slightly leaning toward 4!

[dainemawer]

Duly noted all :)

• @felixarntz - happy to take the tagline out. I noticed JetPack Boost had one, so thats where I got the inspiration from.
• I can play with some kind of illustration / treatment once we decide on a direction, totally agreed.
• Noted on the plugin icon and all that - theres good documentation around this all.

[adamsilverstein]

I like 1 & 4 as well, I like how 1 has a round outline/shape which will work well at small sizes (icon).

[AymenLoukil]

I like logon 4

[erikyo]

The lightning bolt might be a bit of an overused icon (caching, amp...) but i want to give my contribution too. It might be nice to add the lightning emoji in the name of the plugin like "Performance ⚡"

@dainemawer - I played with your first design adding a triangle to create the shape of the lightning bolt and then overlapped the trapeziums above to give it the a folded look. Honestly I like the material design I don't know had catched that 😅. in any case, to do it right you should make a paper model or a small study on the shape because, as @adamsilverstein said, it must be recognisable even when reduced to a 32x32 icon.

In addition, I wanted to draw attention to the most appropriate palette/colours to use. I think that turquoise or red or orange/yellow (which I used) are perfect to express the meaning of this plugin. But unfortunately they are colours that have little contrast on bright colors and probably using them on a white background does not make them shine. With the colour I have chosen the complementary is the electric violet which is not bad, also because it is a plugin "to go fast" and must have a certain vivacity...

[sudeep510]

Hi Everyone,

Wanted to contribute with a few ideas I tried out today, hope I’m not too late..
Would love to hear your thoughts on this

Here are a few Logo ideas, a bit of play with the P and L letters

Logo 1

Logo 2

Logo 3

And here are a few Banners - tried using more performance-related elements to help convey the purpose

Banner 1

Banner 2

Banner 3

Banner 4

[javiercasares]

The lightning bolt might be a bit of an overused icon (caching, amp...) but i want to give my contribution too. It might be nice to add the lightning emoji in the name of the plugin like "Performance ⚡"

Like it a lot :)

[ThierryA]

Thanks all for sharing ideas, great to see some discussions happening. I will add my two cents.

Before jumping into designs, I would suggest to brainstorm a bit further some "brand principals" such as:

• What we want the branding to transpire?
• What we don't want the branding to transpire?
• Some descriptive words about the look and feel we are after?
• Somethings else?

Something to take in consideration is that we are not building a "competitive product" (which is very difference from existing performance plugins). With that in mind, my suggestions would be the following:

1. The look and feel should be subtle and humble
2. It should try to somehow transpire the fact that it is a set of WordPress Core feature plugins, so fairly WordPressy like styling
3. The branding should not come across as yet another new competing performance plugin nor should it come across as "selling"

Regarding timeline, I think we should allow ourselves to take the time we need, without overthinking it indeed. We could totally rollout v1 without branding (for example for the XML Sitemap feature plugin we never had branding)

As another point of reference, the REST API feature plugin didn't have branding for a while and eventually came up with something but fairly subtle.

Would love to hear more thoughts :)

[felixarntz]

+1 to @ThierryA's feedback. The branding shouldn't invoke the impression that you activate this plugin and your WordPress site will be fast. Stating that would be overselling it, and the purpose of this plugin is explicitly not that - of course we aim to improve performance in the WordPress ecosystem, but the plugin is a collection of performance-focused "feature plugins" for WordPress core. The plugin is not going to be a suite of all crucial performance features you need to make your site fast - that's where the existing performance plugins have their market, and the Performance Lab plugin should indeed not falsely raise an impression of wanting to compete with them. It's a feature plugin collection, which also makes it somewhat of a beta testing plugin.

I also recommend we look at previous feature plugins to come up with some simple branding, like the REST API feature plugin. Potentially we could have some nice type of "lab icon" and just the "Performance Lab" title next to it. What I'd strongly recommend against is having any kind of tagline. It makes our plugin seem like it's a product that wants to sell the user on something.

I would say we should focus our branding on the "lab" part to the same degree we focus on the "performance" part of the plugin name - most of the proposals so far focus on "performance", but not the "lab" aspect of it.

[erikyo]

Sorry, I didn't catch that at all... I prepared a new sketch with a flask icon that imho gives the idea of the laboratory, to which I added the lightning bolt icon (so that the logo contains both concepts).
I made it this way to be as minimalist as the wp rest api banner, what do you think?

edit: if someone want "fork" the design here you are (font used Montserrat)

[JustinyAhin]

I mostly agree with I generally agree with @ThierryA's points above. Because it's a feature plugin, which will eventually end up in Core, we should keep the branding simple. So IMO, an icon with the plugin name next to it will do.

For the icon itself, we could either go with the initials of the plugin, like @dainemawer's proposal 4 or @sudeep510's proposal 1.

[sudeep510]

Hi Everyone,

After going through the inputs provided here, have attempted another version to be in line with the thoughts conveyed for the branding we would like to opt for.

Here are the ideas behind these designs:

• The thought behind this logo variation was to keep it simple and focus more on associating with a “Labs” element and continue playing with the letter P for performance
• As the plugin will eventually be a part of WordPress core, first preference has been given to using WordPress colors. However, an alternate version with different colors too has been showcased.
• As we don’t wish to add any tagline and convey any wrong promises, have kept the banner simple and subtle. Apart from having the logo and the plugin name close together, I have added some extra elements so that the design doesn’t look too plain.

Main Logo

Banner variation 05

Banner variation 06

Banner variation 07

Banner variation 08

For ease of viewing - if anyone would like to view all the variations I shared together along with more information about the design properties, you can check out the Figma file here

[dainemawer]

Some further simplifications and plugin logos.

Logo 1

Logo 4

New Idea

[felixarntz]

@sudeep510 I personally like your first main logo variation from #144 (comment). One question there: What is the shade of blue you're using there? Could you maybe create a version that uses the exact same blue that the WordPress logo uses? I'd be curious to see a version like that.

For the banner variation, maybe something like your banner variation 7, but I think we should keep it even simpler and not display the plugin name on it, since it won't be accessible, and the name will be showed in another place next to the banner anyway. I think that text could simply be removed from the banner. For reference, see other feature plugins like https://wordpress.org/plugins/shiny-updates/ that also don't have any title in their banner.

[sudeep510]

Hi @felixarntz The black and blue version of the logo is already using colors from WordPress branding. Here are a few more variations:

With WordPress logo colors:

With WordPress brand colors:

For the banner, I have removed the title and kept it simple. I have kept the colors as they were. I will change the color based on the above logo variation that we go with.

Let me know your thoughts.

[erikyo]

@sudeep510 my suggestion is to move the center of the cruet to make it perfectly aligned with the center. Something like this... what do you think? (first-your version with P internal circles shape reduced, second your version with alembic circle shape expanded, third is the proposal with the centered cruet)

[sudeep510]

Thanks @erikyo for the suggestions. I will make the changes before sharing the final design files, once the design is approved.

[ThierryA]

Great to see proposals flowing on this issue, thanks to everyone involved so far. A few other folks have showed interest in contributing to the branding exercise so I encouraged them to chime in this issue and also have the opportunity share their creative approach/questions, design etc. as well.

[rwlands]

Thanks @ThierryA and hey everyone. Myself and a couple colleagues are designers and we're keen to collaborate and see how we can contribute to the community. We've been looking at your concepts and taken some inspiration for our own explorations. We should have some concepts to share in the next couple days. We'd love to take your feedback and see if we can help with creative input.

[rwlands]

Hi Everyone,

So this week we focused on exploration, getting some inspiration and settling on three distinct directions we take the branding in. Next week we want to refine down to our best ideas and take on your feedback so we can take a bit more of an exploration for colour / wordmark and how the logo would work on the plugins page and other uses.

We wanted to show you work in progress and check if we're getting closer to something that could work.

Any feedback would be appreciated, I suppose we'd be keen to hear from you:

1. Is there a preference from these three directions which we should explore more next week?
2. Is there a particular concept inside the direction that stands out to you? Something you prefer most and least?
3. Anything you'd like us to try or make sure we avoid doing?

There will be more opportunity to give feedback and select between more polished options next week.

Cheers,
Tom

[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 👍

[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 #144 (comment) 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.