Eslint: Update logo

[nzakas]

What we'd like to do is evolve our current logo. This is what it looks like today:

The website adds the text "ESLint" to the right of the logo.

While we generally like the logo, it seems like it's time for a refresh (I'm think of a refresh along the lines described in this Node.js issue). What we're looking for:

1. An iteration on the existing logo - so not a complete redesign
2. Still using one or more shades of purple
3. Typography to go with the logo
4. Something that works well with black-and-white, 3-4 colors, as well as full color

Our goal is to have a logo that is fit for use on stickers, tshirts, the website, and more.

Note: we are a team of volunteers with no budget who donate our time to the project, and as such, this is a request for a donyof your design skills for the project. We will happily give you credit for your work.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[SamuelEnglard]

What was the thinking behind the original design?

[Hacklemore]

@SamuelEnglard you took the words out of my mouth. :)

It would also be good to know what you would want the refreshed logo to represent. What's missing from the current design that you would like to see in the new one?

[nzakas]

I was trying to see where the original conversations took place, and all I could dig up was this:
https://github.com/eslint/eslint/issues/477

I can't seem to find much of the reasoning behind the current logo. IIRC, the inspiration for the original design was gears, as ESLint would be a vital cog in your build system.

For me, personally, I think the current logo looks a bit "young," which was nice when ESLint was also young. But I feel like ESLint is stable and mature and the logo should reflect that evolution from a side project to something that major companies around the world are relying on for code quality.

We also never really had any formal typography associated with the logo, it was just kind of crammed together on the website, so getting that nailed down will make it easier to use for the aforementioned stickers, tshirts, and whatnot.

[lo1tuma]

@nzakas A comment in the issue you mentioned links to the eslint-ui-concept repo which has a small explanation of the concept behind the logo and also mentions typography and colors.

[nzakas]

@lo1tuma thanks!

[ilyavolodin]

I would love to see an attempt to bring a counter-color into logo and design. Purple is fine, but purple + blue is a bit bleak and depression for my personal taste. Maybe yellow or red to spice it up a bit. (But this is my personal opinion which might not align with the rest of the team).

[omerbalyali]

Hi everyone,

I worked on some alternative logo designs to discuss for new ESLint Branding.

Noah Collins's original logo includes a outer hexagon which is rotated 18deg to make it feel like "to be corrected" and the inner hexagon is the correct one, which symbolizes the linted code. While this is a good analogy, I think logo should feel more "stable"; the whole form should symbolize the linted code, which is without errors.

First 5 alternative is a derivative of the original logo, while the last 2 is kind of different. The rationale behind the last 2 is the different part of the codes fit each other so perfectly that it creates a new, unified form: hexagon / cube. Also the parts in this form is composed of 6 L letters, short for Linting. (ESLint has 6 characters)

My personal favourite is the 1st one, it really looks slick. Other than the 1st, last logo also looks good but I think using a outlined logo with many detail may impair the unified form. (Regarding it will be used on many different medium; web pages, badges, tshirts, stickers...)

I choose DIN Next Pro - Bold font over 12 alternatives. (DIN looks more elegant and appropriate than the others, so I didn't include them in examples below.)

I'm open to feedback, so feel free to suggest anything. (Form, font, color etc.)

You can also see them through this Dropbox link: https://www.dropbox.com/s/8zm3p3azxpgrpj5/eslint-logos.png?dl=0

[SamuelEnglard]

I like 1 and 2

[ilyavolodin]

Visually, I find 2 and 6 most interesting. But I think in both of them the idea of hexagon is a bit lost. While in general, I'm not sure hexagon carries over the idea of linting all that well, it is a logo that people have been seeing for that last two years, and are probably used to.

[jacobp100]

Crude mockup I did in 5 minutes. Nothing is aligned correctly, so don’t look too closely.

[nzakas]

@omerbalyali 1 and 2 jumped out at me as nice, and I also see what @ilyavolodin likes about 6. Only thing with six is that is looks (to me) like a 3D cutout block (maybe that was intentional?).

@jacobp100 I think that's a bit too far from where we are right now, but thanks for taking the time.

[omerbalyali]

@ilyavolodin 4 alternative fonts. (DIN Medium instead of DIN Bold)

(I used the first logo as an example)

[omerbalyali]

DIN Bold and Medium.

[SamuelEnglard]

Just a thought but what if the inner hex was #CAD133?

[omerbalyali]

@SamuelEnglard Exact hex doesn't look good, it's very low-contrast on white background, but the top right color below is similar.

[ilyavolodin]

Active Grotesk looks the best to me. By it seems like something is off with kerning on that font. S looks too bunched up and too big, comparing to the rest of the letters. Can we try it with some popular fonts? Roboto, Aller, Helvetica Neue or something? Even though those are heavily overused, they still look pretty nice.

[nzakas]

I like the idea of a different color in the middle, can you try a lighter shade of purple?

[SamuelEnglard]

@nzakas I think a non purple color in the middle is better for contrast

[omerbalyali]

Bottom-left is the most appropriate shade from these 4. It has enough contrast even in smaller size, like website header. Keep in mind that it surely looks different when used with other components and colors (like buttons, other sections with background etc.) So right now we can choose to "use purple", and we can tweak the shade of the color later.

[nzakas]

@SamuelEnglard could be, easier to tell when you look at it. I'm not thinking it's too bad.

[nzakas]

Had a thought: I wonder if the outer purple color is too dark? Could we try some options with lighter shades of purple?

[juanmnl]

A quick draft!
(@nzakas Thanks for Eslint! :D)

Font: Fira Code

Draft#1

Draft#2

[juanmnl]

Draft#3

[ilyavolodin]

Thanks @juanmnl I'm not sure that's the right direction. It's too abstract for me, and doesn't really convey the idea, I think. Also not a huge fan of the font, looks a bit out of place too.

[jacobp100]

My vote's for @omerbalyali. Or the current logo. The current logo is still very good and recognisable.

[juanmnl]

Good to know @ilyavolodin :D
Just to break a bit the abstraction (why i made them like that):
The first draft is the (node) hexagon with the edges protected/wrapped (by eslint). The second is a little variation of the same idea, without the top and bottom hard edges, so it seems like a protective case for the hexagon. And the third is by taking the js logo (square) as 2D, the node hexagon (perspective cube) as 3D and eslint could be the 4D (fourth dimension).

Anyways, thanks for the feedback. I hope i can propose something different when i have more time.

Cheers!

[nzakas]

@omerbalyali are you interested in finishing up your design?

[jacobp100]

I might be interested in doing HTML and CSS.

[omerbalyali]

Top-left one is the previous dark color, the other 3 is lighter shades. (More blue than purple)
Which one do you think is appropriate? I can add more purple to the blue to make it indigo if you find it too much blue. What do you think?

[nzakas]

I'd like to see more purple, kind of like the purple Heroku uses: https://www.heroku.com/

[nzakas]

@omerbalyali I think we all agree on the general direction. Instead of going back and forth with color tweaking, would you be willing to send me the .ai file? That way I can continue to tweak and we can get some resolution to this.

[omerbalyali]

@nzakas I'm just working on the logo and the website.

Here is the .ai file you can use: https://www.dropbox.com/s/3l7oth0q4lo95zi/ESLint-Logo-22.3.2016.ai?dl=1

Now it looks like the attached image, idk if that's what you're thinking.

[nzakas]

:+1: I like the purple background color. I think the two purples on the white background may be too close together because it looks a bit like an optical illusion to me that they may or may not be different. I think we can probably get away with using just one color purple for both the inner and outer pieces.

[omerbalyali]

@nzakas I like the color too. Two different purple guides the focus to the inner hexagon and it looks like a box at least I see that way, is that the optical illusion you're seeing?

[omerbalyali]

All the corners of two hexagons are maybe too harsh on the eye, so I rounded the outer hexagon a little bit and I think that way it looks better when the logo is smaller (and bigger). What do you think?

.ai file: https://www.dropbox.com/s/qqiy5b5tnjqjtwg/ESLint-Logo-22.3.2016-2.ai?dl=0

[nzakas]

Hmm, I think I like the sharp corners better. What do others think?

Definitely think this is the right purple.

[michaelficarra]

I like the two-tone version but with the more rounded outer corners.

[IanVS]

I like the sharper corners. Rounded-off nuts are not fun to deal with up here in the rust belt.

[kaicataldo]

I prefer the sharper corners too - looks more consistent to me with the rest of the logo

[nzakas]

Okay, let's go with the sharp corners.

The only other thing I'd like to get some thoughts on is the color of the middle hexagon. In the last example, it's the same as the outer hexagon. After playing around a bit and looking back up in this thread, it does seem like having the inner hexagon a different color could be nice.

@omerbalyali do you have time to put up a few examples where the inner hexagon is a different color? Some of the colors I've played around with are:

1. 71B3FF
2. 9797E2
3. 88ACE2

I do think staying in the blue-purple range would be best.

[nzakas]

Here are those three colors:

I kind of like the middle one, though maybe a more vibrant purple would be better?

[platinumazure]

I like the middle one (though also with a more vibrant purple) or the bottom one. The top one feels a little violently eye-popping to me.

[nzakas]

This one is a bit brighter.

[kaicataldo]

I like middle one, followed by the most recent one!

[kaicataldo]

Actually, flip that. The most recent one is my favorite. They both look nice though 😄

[platinumazure]

I like the most recent one. I'd be curious to see what happened if a little more red were added to it though? (Just a little red, not a lot. I'm not asking for pink here-- was more just hoping that a hint of red would make it look a little more stately without being obnoxious)

[ilyavolodin]

Last one is the best out of provided options (I think), but I personally prefer single-tone one to begin with. @omerbalyali if you are going to be tweaking the logo again in the near future, would you mind working a bit on kerning? Right now E and S are just hanging in the air for me, spacing between L and i is too much, and between i and n too little (personal opinion, I'm by no means an expert).

[nzakas]

Hmm yeah...looking back over, I think I actually like the single-tone the best, too. Might be easiest to just start with that rather than continuing to play with the second tone.

@ilyavolodin not sure I'm seeing what you're seeing with the letters, especially because "L" and "i" look pretty tight to me. There's actually less space between "L" and "i" then there is between "i" and "n". The one thing that I semi-see is that maybe there's too much space between the logo and the "E"? Maybe that's what you meant by "hanging in the air"?

[nzakas]

BTW, I'd like to get this wrapped up early next week. It's been two months, it's time to move onto other things. So let's get to something we are generally happy with by, let's say, Wednesday.

[omerbalyali]

@ilyavolodin @nzakas "L" and "i" can be a little closer, because L has many space so it doesn't have to be mathematically correct. I intentionally make the space between ES and Lint little more to read it as ES Lint (I am reading as e-s lint, is that right?) I'm tweaking the kerning.

I'm trying different purple tones for the inner hex. I will upload alternatives with the right kerning.

@nzakas I agree, also we have time to tweak the logo until website is finished. (Before the logo get spread to the wild - blogposts etc.)

[omerbalyali]

Kerning tweaked. ESLint text is slightly closer to the hexagon. (space is half width of the inner hexagon)

[platinumazure]

@omerbalyali I think we treat it as one work in most cases, no need for space between S and L. (@nzakas correct me if I'm wrong)

[nzakas]

@omerbalyali it should read as a single word "ESLint".

[alberto]

Sorry I'm late to the party, but given the vertical hexagon seem to be a trend in js land and also for stickers, maybe we could consider it, too.

[nzakas]

@alberto a bit too late for such a drastic change. Let's focus on refining the latest.

[alberto]

I understand, but since you mentioned stickers in your first comment I wanted to mention it.

[ilyavolodin]

@omerbalyali Thanks. I think kerning looks better now. At least it doesn't look to me like E is going to fall of at any moment:-)

[nzakas]

@alberto it's still a hexagon. :) I'm sure people would recognize it even if rotated a bit.

I think the the top two are my faves, the single tone and 8080F2.

[kaicataldo]

8080F2 is my favorite! Thanks @omerbalyali for your work on this :smile:

[nzakas]

Okay, I'm going to make an executive decision and say we'll go with #8080F2 as the official logo (we can always tweak later if necessary).

@omerbalyali can you share a .ai file with that one and the white-on-purple version?

[nzakas]

@omerbalyali sorry to ping you again, but can you upload the final file when you get a second?

[omerbalyali]

@nzakas This is the final logo .ai file.

I made really small changes to the icon. I'm attaching an image file that shows the geometric blueprint of the new icon. (Inner hexagon and the space around it slightly changed to snap to the rectangle boxes, which are proportionally located inside the outer-big hexagon)

Also I'm preparing a Brand Guideline for the logo, including colors, proportions, etc. Right now it's perfectly safe to use the .ai file attached to this message.

Note that, ESLint text is not 100% black. (H:0, S:0, B: 10% or #1a1a1a)

ESLint-Logo-Final.ai.zip

[nzakas]

@omerbalyali thanks! In order to file a trademark with the logo, we need you sign something saying you grant us the rights to use the logo. Can you contact me at Nicholas (at) nczconsulting (dot) com?

[alberto]

I assume we already have everything we needed, so I'm closing this. Thanks @omerbalyali and everyone else who participated!