Design a new logo

[rowanmanning]

We've decided we need a new logo. A brief is outlined below and we'll discuss ideas here.

---

Pa11y Logo Brief

We need a logo that encompasses the Pa11y projects.

Requirements

Requirements for the logo, using MoSCoW (must = non-negotiable requirement, should = important but not a deal-breaker, could = nice to have).

• Must be recognisable, and differentiate itself from other tools
• Must be accessible
• Must be inclusive (e.g. not be an obvious white dude)
• Must work at small sizes (and also as a square for avatars etc)
• Must be reproducible as an SVG
• Should not focus too much on one kind of disability (e.g. blindness)
• Could support a secondary line of text. E.g. Pa11y logo + "dashboard"
• Could nod to the old logo in terms of colours

  Existing Logos

Partly for inspiration, partly to make sure ours isn't too similar.

• The A11Y Project: Black circle with a white a11y man in it
• a11y: A11Y written with little circles
• HTML CodeSniffer: A checkmark
• Chrome Accessibility Tools: The a11y man in an orange cog
• Wave: their little "W" on a green circle
• HTML5 Accessibility: A big orange 5 with "a11y" underneath
• JAWS: A shark that's speaking
• Orca: An orca with a cane
• Apple: Blue circle with a white a11y man in it

  Word Association

A list of words that come to mind when you think of accessibility/Pa11y/a11y:

Open, Inclusive, Senses, Helpful, Supportive, Friend, Sidekick, Buddy, Helper, Partner, Equality, Jeremy Corbyn, Person, Human, Happiness, Diversity, FABULOUS, Universal, Fairness, Care Bears

[andrewmee]

I've had a play with this, starting with Rockwell and tweaking it to make it a little friendlier and quirkier, and to echo the 1 character form in the capital P to be used as a logomark:

(third option is my proposal, just showing where it came from in the top two lines)

From here we could build the brand around the Rockwell font on the website and any other material also.

[alexkilgour]

Here is another idea we have been working up. It tries to retain the existing colours to create a "P" mark, with a subtle incorporation of "11" from Pa11y.

[alexkilgour]

We also tried closing the space between the 1's to try and make it clearer that it was a "P"

[alexkilgour]

I am going to try and iterate on this idea to try and make it less "tall and thin"

[onishiweb]

Was toying round with the idea at lunch and finally figured out how to make it in Sketch. Takes on a bit of an emoji/cutesy approach but I think it fits quite well with some of the related words. Does need an awful lot of refining though (blame my terrible Sketch skills).

[rowanmanning]

@onishiweb: I like where you're going with the smily face :) definitely says "friendly". Thickening up the lines and a bit more uniformity would make it work better at smaller sizes I reckon, if anyone fancies trying that

[onishiweb]

Yep was thinking that too, I also don't like the harsh cut off at the ends of the "P" path, just couldn't find a way to sort that out in Sketch this time. Might spend some more time on it later this week, but if anyone wants to improve on it feel free.

[andrewmee]

I've made an attempt refining @howlingmad's fabulous P to close up the gap at the top but still keep a distinctive 1-shape. Also shortening and widening it to be more square;

[alexkilgour]

I really like it. The only thing that jars for me is the top shadow. The shadow wouldn't cast like that, so doesn't look natural.

[alexkilgour]

maybe something like this? Sorry, I put the other shadow back! but i do like it, I think it gives a more 3d feel. I think if you remove it then you cannot have the yellow on red without removing the other shadow. it makes one bit look flat. You need the two shadows to show they are different 'objects', to give it the ribbon effect (imo obviously)

[rowanmanning]

I like it (the one Mee posted). This is gonna sound really fluffy (feel free to disagree) but the only thing I'm not keen on is how angular it is. Was trying to think if there's a way to round some corners or make it a little less sharp. Essentially, it doesn't quite say "Care Bears" to me yet 😂

[andrewmee]

I like the sharpness of it. It makes it look strong, sharp, and modern. I can imagine that symbol on a pa11y-superhero's cape. Or their sidekick's?

[alexkilgour]

After consultation around the office, the consensus was on this version

As it most clearly represents the P and the 11.

[rowanmanning]

That's the one I like most so far :)

[perryharlock]

A few of the above options with some roundedness for extra care bear :-)

[perryharlock]

Or....really round...for ultimate care bear

[rowanmanning]

The smaller amount of rounding I think could work. Deffo not keen on the super round Care Bear version though, is it just me or does it look like it might fall over? 😄

[perryharlock]

Yeah I concur Mr Manning. Not a big fan of the mega rounded version. But worth seeing it....

[alexkilgour]

Posting two versions of the logo. Square and rounded. Vote on your favourite via reactions!

[alexkilgour]

[alexkilgour]

[rowanmanning]

An update on this, we're currently going with a slightly modified version from the two that were voted on. The curved variant got the most votes both here and on Twitter, but a change was suggested by @tdhooper – we've removed the inner curves:

Side-by-side for comparison:

[rowanmanning]

@howlingmad: I've been doing some contrast checking with Sim Daltonism, I think we're mostly OK but there are a few types of colour-blindness where the warning/error colours are really similar. With Monochromacy, the blue and red are also very similar.

Before we completely settle on these colours, is it worth seeing if these easy to fix? If not then I think we're OK as it's still an identifiable logo, we may just need to ensure that we clearly label things when these colours are used to highlight errors/warnings/notices :)

[rowanmanning]

Closing this, as we now have a new logo and have put it everywhere. Thanks for the work on this everyone!