Our plan is to create a unified logo with the following requirements:
- Retains the stop sign and the ABP letters within
- Improve scalability
- Use an open source font
Getting into more detail
As you can imagine, it’s very challenging to redesign a logo that is already very prominent, especially if you don’t want to confuse some of the over 60 million users that we have. This project is not a project which started yesterday. The idea to create a new logo is more than a year old. Since then, I created lots of different variants in some quite minutes, which, for example, didn’t include the ABP label. However, we quickly figured out that we can’t make such a huge leaps in so short a time. Some requirements evolved after creating initial drafts. The idea was to create a logo which has the stop sign and the ABP letters in it. An additional goal was to improve the scalability and similarity between the icon and logo. Using an open source font in our product is IMO now overdue since it is not that difficult to use custom fonts on websites anymore.
Long story short. I created an image which shows you the differences between the current and the two new logo suggestions. You may ask yourself: Why two new logos? Thats a good question . I created a very flat logo at first, but it was too radical for some people. Therefore, I then created a not so flat designed one. At the moment, the idea is to use the flat one for print products and the one with gradients for display purposes.
Logo comparison (click to enlarge image)
Some words about the “logo comparison” image and the comparison itself:
One goal was to improve scalability. This means that we want avoid a huge visual difference between logo and icon (our smallest icon is 16x16 Px [used in Firefox, Safari and Internet Explorer]). Therefore it was necessary to reduce the level of detail in the logo itself. You can see that there are 9 elements or effects in the old version, 6 in the display version and 4 in the print version.
The font that I used is Source Sans Pro. It’s the first open source font made by Adobe, and I’m really satisfied with it, especially when using it to develop user interfaces (you will see a lot of new features with this font soon ).
In the old version, the ABP letters are arranged very randomly. You will not see metrical or optical alignments there. The letter P is visually far away from the B and also too close to the border of the stop sign. This results in a very right aligned ABP label.
Since I’m a mathematics fan, I first tried metrical alignments but saw very quickly that the letter A, with it’s line from the bottom left to the top of the A, makes the label look visually left aligned. Therefore, I tried to align the letters so that they look visually centered. I used different letter spacings to ensure that the perceived distance between the letters are very similar (I would appreciate your feedback about this). The distance of the letter A to the left border of the stop sign is a bit more than the space between the letter P and the right border of the stop sign in order to avoid the metrical problem described above.
To meet these requirements, color is very important of course. At some point, I decided to use #CD0000 because I wanted to have a recognisable red with a big contrast in combination with the white ABP label. This color was not chosen randomly. I used the WCAG 2.0 contrast ratio formula (You can find an easy calculator for this here) to ensure an acceptable contrast in our future user interfaces / websites . You need to think of it, for example, in the context of developing a website or tools for color blind people (or are there conditions other than color blindness that you mean by ‘color deficits’?). Since there are also a lot of people with color deficits out there, it is of course one of our goals to ensure that most of the people out there can experience our tools and websites without big limitations. The color #CD0000 fulfills all the important WCAG 2 requirements except the WCAG 2 AAA ones. But this isn’t bad because the WCAG 2 AAA requirements include a font which is smaller than 18pt. The ABP icon needs to be scaled down to a size of approx. 34x34px to reach the 18pt font in the ABP label. Therefore, I implemented a dark dropshadow to fulfill also the WCAG 2 AAA requirements. This dark shadow has the color value #8f0000. If you use the WCAG calculator and put #8f0000 as the background color and #FFFFFF as the foreground color you will see that we fulfill all WCAG 2 requirements.
Another open question is which color should be used for print purposes in the CMYK color model. One option would be to use C:0 M:100 Y:100 K:20. If you have any suggestions about this please let me know. Otherwise, I would test some variants in the print shop to reach the #CD0000 as best as possible.
Effects and everything else
I don’t want to talk much about the effects in the new logo suggestions because you could talk about it for hours. You can see the main facts in the comparison image to get an overview. The most important thing to keep in mind is that we try to simplify the logo to reach our goals. Therefore, we need to find a balance between effects and simplicity.
How can you support us?
I’d appreciate any feedback related to the logo from a variety of user groups, including developers, designers, ABP users or just people that are interested in creating something together.
If you want to play around with the logo you can do this with the
- ABP Logo Overview Photoshop file
- Please download the font Source Sans Pro first
- Let me know if you need other files
I created an overview of the ABP logo with variants that are needed for different known purposes. It also includes the color palette and the font variants that I used for the logo and icon.
ABP Logo Overview Photoshop file (click to enlarge image)
Last but not least, you have the chance to vote on whether or not you think the logo is ready to implement or if it still needs some improvements.