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 https://github.com/WordPress/performance/issues/144#issuecomment-1031619957. 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

[ThierryA]

Thanks for share the progress of your concepts 😄

Is there a preference from these three directions which we should explore more next week?

I have a preference for the "Connecting the dots" concepts.

Is there a particular concept inside the direction that stands out to you? Something you prefer most and least?

"Concept 2.0" and "Sketch Ideation"

Anything you'd like us to try or make sure we avoid doing?

In an idea world, banding should try to somehow transpire the fact that it is a set of "official" WordPress Core feature plugins. With that said, we can perhaps explore using WP colors in future iterations. I wouldn't say that it is a top priority, I like the more modern "pastel" color too and as long as it doesn't come across as competing performance plugin and remains "humble/minimal" branding it should be ok.

[dainemawer]

I quite likely the folding paper direction. Though, I do agree as the project is quite tightly-coupled to WordPress Core that it should be more closely aligned with the WordPress branding in general.

[ThierryA]

Figured it would be a good idea to explain the rational of my preference. To me the "Connecting the dots" is the least shiny branding and the one we can iterate the most on to get closer to a "WordPress Core" like feel (especially given its flat nature). It is also quite modern and humber IMO, which is great! It will also be great for things like swag printing, playing with contrast etc.

[rwlands]

Thanks for the feedback so far, if anyone wanted to discuss or add any other thoughts please do and we'll start working on refined options from today. I'm happy to join todays weekly call if that helps.

It's clear from discussions that we want to stay closer to the WP brand colours - we'll iterate some versions of those.

So far we can see preference toward:

• Folding paper
• Connecting dots

(Excuse the designer labels!)

How does everyone think about refining down to just 2 options based on these routes?

[ThierryA]

Thanks Tom. More refining on the 2 options above SGTM.

I'm happy to join todays weekly call if that helps

Weekly meeting are happening on chat in the Performance Slack channel. @bethanylang let's add an agenda item to call this issue out for feedback.

[mxbclang]

@ThierryA Done!

@rwlands More details on joining the WordPress.org Slack here. Note that it requires creating a wordpress.org account first. Let me know if you have any trouble.

[omarreiss]

I like the moving form top left concept 3. I would prefer a somewhat generic and flat branding that uses WordPress color palette. I feel most of these last iterations float away from the WordPress branding a little too much for my taste.

[eclarke1]

My preference is the 'Connecting the dots' sketch ideation approach, but my preference would also be towards WordPress colour palette - this one feels more simple to me. (My second favourite is 'Moving form' sketch ideation approach but see we are trying to refine down to 2 options)

[felixarntz]

I'd prefer using the WordPress color palette as well. My preference is the "Connecting the dots" approach too, second favorite "Moving form". So I guess I'm completely on the same page as @eclarke1 here 😆

I also would much prefer that we use "flat" colors and no gradients, at least for the logo mark itself.

[rwlands]

Thanks again everyone for sharing your feedback. There's enough of a consensus for us to keep iterating towards a refined smaller set of options. We'll aim to share those with you tomorrow.

Since the latest polls/votes have come in it looks to be most preferences are with:

• Connecting the dots
• Moving form

Look forward to showing you how we progress this.

[rwlands]

Hey there, just wanted to present back the logos with the updated 'Wordpress colours' added in.

How do people feel about the colour options?

Seeing the new colours are we able to pick out preferences for the logo mark? Personally I lean towards Connecting dots - Option C and Moving form Option A,B.

Today we're going to mockup these against the banners, merch and with the word mark as well. We should be able to present final options back to you by end of the day.

[ThierryA]

Thanks for the new round of design, my preference in order:

1. Connecting the dot - A2 (I did also like the Shape of the P in the previous round which changed in this round)
2. Connecting the dot - B2
3. Moving form - A2
4. Moving form - C2

WordPress Color Palette also have the dark grey, would be great to see a variant with it (maybe grey and white for example)?

Looking forward to hear other folks thoughts and can't wait to see it along side the typography for "Performance Lab".

[adamsilverstein]

I'm also a fan of A2, I like the "P" shape and color.

[tillkruss]

I love the moving form ones 🥰

[felixarntz]

My personal favorites in order:

1. Moving form - B2
2. Connecting the dots - A2
3. Moving form - A2

[eclarke1]

I think me and @felixarntz are nearly one person 😆 ! My personal favourites are:

1. Moving form - B2
2. Connecting the dots - A2
3. Connecting the dots - B2

[mxbclang]

Favorites in order:

1. Connecting the Dots – A2
2. Moving form – B2
3. Moving form – B3

I really like the colors for the black background versions, but they don't read as "WordPress" to me, where the blue background versions do.

[tillkruss]

My personal favorites in order:

1. Moving form - B2
2. Moving form - B1
3. Moving form - B3

[sudeep510]

Hi all, I worked on a few more variations for the logo. I stuck with WordPress colors and the inspiration for this is based on the preferences and ideas shared in the above comments.

Would really appreciate your suggestions on these please and maybe we could also consider teaming up with other designs to arrive at something solid.

[ThierryA]

Thanks for sending some more variation, Sudeep! My preference out of the batch you share would be v1 (although spacing and the balance feel a bit off). The others (IMO) all have spacing/balance and look and feel flaws. Also in terms of putting the logo in different contrasts it may be challenging with the 3 color logo as such.

consider teaming up with other designs to arrive at something solid

+1, your feedback/preference and suggestion (similar to what Erik did in previous comments) on the other design iterations shared by Tom would also be super useful.

[eclarke1]

Personally I feel the new logos added here https://github.com/WordPress/performance/issues/144#issuecomment-1058314653 are drifting slightly further away from the simplistic forms shown here https://github.com/WordPress/performance/issues/144#issuecomment-1057876398

Out of all these together, I still prefer the simpler forms shown in:

1. Moving form - B2
2. Connecting the dots - A2

[swissspidy]

"Connecting the dots - A2" really caught me eye. I think it would work very well, even when changing colors depending on context. So +1 from me on that one.

[rwlands]

Thanks everyone for your input.

Looks like we've got some clear front runners:

Connecting the dots - A2 (7 votes) Moving form - B2 (5 votes)

Looking forward to showing you our final concepts.

[rwlands]

Hey all, just in time for the weekend. Wanted to share with you our final designs for the end of this week.

We wanted to start by saying we're very conscious that others have also put forward their own concepts in the thread, these have served as our inspiration - so credit to those of you.

We've selected 3 concepts and included the typographic lockup, and shown how it could come together with the banner in the WP Plugin page. Concept 3 is the 'bonus' option we wanted to include alongside the two highest voted.

Two things to note:

• We've included a strapline in the banner, as some of you mentioned showing the logo and word mark seemed a bit overkill right next to the title and icon. The Strap line should be seen as Lorem Ipsum, it's our attempt at sample copy framing the plugin. We'll leave that out of our scope.

• The banner uses shaped drawn from the logo, we've intentionally been stripped back on design or illustration because of the minimal branding we're working with and we don't want it to look like a product plugin (promising too much).

It would be great to reach a consensus on one preferred option from the three concepts next week. We'll then package up our work and share files with you so you can take it forward.

Wishing you all well.

[erikyo]

I really like the third one, but I would love it with a logo colored (and not black, may even a colored outline could be cool)! But please note, the payoff is not recommended because it cannot be translated