Logo improvements 2014

Various discussions related to Adblock Plus development
Post Reply

The logo…

Poll ended at Fri Nov 21, 2014 3:08 pm

… is ready to publish
5
100%
… needs minor improvements (please give us more detailed feedback if you choose this option)
0
No votes
… needs a lot of improvements (please give us more detailed feedback if you choose this option)
0
No votes
 
Total votes: 5

sven
Posts: 5
Joined: Tue Oct 21, 2014 3:52 pm
Location: Cologne

Logo improvements 2014

Post by sven »

Quote from the blogpost: Time to unify - We’ve improved our icon and logo
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.

Image
Logo comparison (click to enlarge image)

Some words about the “logo comparison” image and the comparison itself:

In general
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.

Font
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.

Color
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
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.

Image
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.
MSI

Re: Logo improvements 2014

Post by MSI »

I overall prefer the old Adblock Plus logo. Maybe the old ABP logo with the font misalignment issue fixed?
prl99
Posts: 1
Joined: Tue Oct 11, 2016 1:51 am

Re: Logo improvements 2014

Post by prl99 »

This might not be the best place to comment but this article mentioned color blindness. I was helping my father-in-law unblock a website (uses Firefox on Windows7) and since he has issues seeing red and green (see both as gray) I was wondering if there was a simple way to add a preference to Adblock Plus to blink the icon slowly or put an "X" through it when blocking is white-listed. Maybe the preference could give some alternatives. Thanks.
lewisje
Posts: 2743
Joined: Mon Jun 14, 2010 12:07 pm

Re: Logo improvements 2014

Post by lewisje »

Another good idea is to shift the colors a bit: Make the ordinary icon's base color #ff4500 (orangered) and the unblocked icon's base #00baff (its complement), or something close to them (desaturated a bit, to allow for highlights).

I know that FiveThirtyEight had a similar color scheme in its 2014 US Senate projection (#ff2700 vs. #008fd5), although for this year, it went back to the standard red-vs.-blue map.

Because of branding issues, this color-change ought to be hidden behind a preference (the way "color-blind friendly" schemes often are).
There's a buzzin' in my brain I really can't explain; I think about it before they make me go to bed.
User avatar
greiner
ABP Developer
Posts: 899
Joined: Mon Sep 03, 2012 5:29 pm
Location: Cologne, Germany

Re: Logo improvements 2014

Post by greiner »

Interesting, sounds worth investigating so I created a ticket in our issue tracker for it (see https://issues.adblockplus.org/ticket/4793).
Post Reply