search

pugjs / pug

Pug – robust, elegant, feature rich template engine for Node.js
https://pugjs.org
21.66k stars 1.95k forks source link

Jade's official icon? #1882

Closed cloud-walker closed 9 years ago

cloud-walker commented 9 years ago

Hi, i'm a fan of jade

I'm in progress with my sublime-text theme project: sliver.

I'm a about to write down the sidebar icons, and I've noticed that there is no official jade icon...

I know is not a big issue, but I was wondering if it was planned...

Thanks in advance!

ForbesLindesay commented 9 years ago

Our official logo is http://jade-lang.com/logos/JadeBlack.svg but I would love us to have more of an icon style logo. It just requires someone with some design skill picking it up. I'm definitely happy to take suggestions :)

cloud-walker commented 9 years ago

I'm not a professional designer, but I think at something like the ruby-lang icon, just to offer my opinion...

I'll try something if I get the chance :)

TimothyGu commented 9 years ago

I would recommend using the "j" in the logo.

How is your subl theme going to look like? If it's monochrome I would recommend using the JadeBlack.svg, but if not you might have some luck using the logo on http://jade-lang.com/ (which is PNG unfortunately; I didn't get the chance of drawing it in Inkscape yet).

See #1785 and #1809.

GarthDB commented 9 years ago

@ForbesLindesay I'd like to help out with some branding. I'm a long time fan of both Jade and Stylus and I think they could both use a refresh. The logo should reflect the amazing flexibility of this project.

I started a while ago on some branding ideas and I've posted them to Pixelapse. I actually ordered some of the rabbit stickers to see how they looked, and I'm pretty happy with them.

Let me know if this is something you'd like me to keep working on.

GarthDB commented 9 years ago

Probably doesn't hurt to post a screenshot in here: image

ghost commented 9 years ago

Please, not rabbits. :)

How about the stone with this amazing color? Or some code oriented icons.

Let me know if you need help. I am not a logo designer but an educated media designer with little experience in logos and the right tools.

GarthDB commented 9 years ago

@greasan you don't like the rabbit?

The idea behind d, e, and f is to be like an east asian seal. There are some great parts to using this metaphor:

I went with the rabbit because of chinese zodiac - it was the animal for 2011, but technically Jade was started in 2010 so maybe we should look at using the tiger if we wanted to go with that.

Here's a photo of the stickers I made: img_8584

TimothyGu commented 9 years ago

I really like the shape of the rabbit, but the mixing of color between green and red looks kinda odd. You might also want to consider keeping our current wordmark. Jade is supposed to be an elegant language, and I think the movements of rabbits are at least more elegant than those of tigers.

Full disclosure: I was born in the year of the rabbit so I have naturally inclined to use rabbit :)

GarthDB commented 9 years ago

@greasan I steered away from the code metaphors because they are a bit obvious, and not really a trend with frontend tools. Most are a bit playful or geometric. Flat and minimal are definitely in style. Here's a comparison of a few common tool logos:

Sass

image with it's iconic glasses image

Bourbon

image

Jekyll

image

Grunt

image

Ember

image

Foundation

image

Bower

image

GarthDB commented 9 years ago

@TimothyGu The mixing I'm using is a blend mode and a common printing technique. http://blog.spoongraphics.co.uk/articles/showcase-of-designs-made-with-cool-overprint-effects

GarthDB commented 9 years ago

It could actually be created using two stamps.

GarthDB commented 9 years ago

Another nice logo using a blend mode for IFTTT: image

ForbesLindesay commented 9 years ago

I think d and e are my personal favourites. Bunnies are far more cute and loveable than tigers, so I'm fine with the bunny personally. I wonder if it shouldn't have more hard/clean/straight lines to match the minimalism that the language is aiming for? Branding really isn't my thing though, so I'm happy to go with what other people think.

GarthDB commented 9 years ago

@ForbesLindesay we can have a clean icon mark that we can use in different cases. If we lose the rough edges it might lose the seal imagery a bit, but I could be wrong. I'll make the change and we can take a look.

jbnicolai commented 9 years ago

Wow, loving the icons you drew up, @GarthDB. I'm torn between C, E and F, but I think E is my favorite :)

GarthDB commented 9 years ago

Thanks @jbnicolai. I think those are my favorites as well. I really like E but for things like a website header, D's typeface might be more readable, and it's a bit stronger.

ForbesLindesay commented 9 years ago

My inclination was to go with D for the website header and README header, but use E for the twitter profile (which currently has the most garish shade of green I've ever seen as it's profile pic), stickers to hand out at conferences, the favicon and anywhere else that requires a square icon. I really like the idea of how we could gradually scale that, reducing detail for smaller sizes (e.g. the favicon probably wouldn't need the "jade" text and could just be the red stamp with the bunny in it.

jbnicolai commented 9 years ago

@ForbesLindesay Completely agree!

GarthDB commented 9 years ago

@ForbesLindesay Here's a simplified path for the stamp. It smoothes out some of the rough edges, but still leaves the feeling of a stamp.

image

GarthDB commented 9 years ago

I could smooth out the bottom even a bit more, give me a second.

GarthDB commented 9 years ago

ok - here's a super smooth path @ForbesLindesay image

GarthDB commented 9 years ago

Let me know what you think. If you don't have any more changes I can start putting together the formats you might need and a cohesive design for jade-lang.com

GarthDB commented 9 years ago

Also the source artwork is on Pixelapse if anyone wants to download and play with it.

ForbesLindesay commented 9 years ago

My slight OCD makes me want to join up the little gap in the bottom and smooth off the chunk that's taken out of the right hand side. It might remove some of the character of the image though, which would be a shame, and I have no idea what other people would prefer. Maybe we could try and A-B test a few options :smile:

ForbesLindesay commented 9 years ago

Really appreciate all the work you're putting into this. I'm really happy to be told that other people prefer the rougher edges if that's the case.

GarthDB commented 9 years ago

I'll play with that a bit tomorrow.

Don't stare at it too long, it'll start to look weird to you after awhile :)

ForbesLindesay commented 9 years ago

I wish I could look at it with fresh eyes, the more I stare the less sure I am as to what I authentically think.

GarthDB commented 9 years ago

I'll do some a,b,c comparisons and it'll help nail down what you prefer. It's easiest to tell a note is off when it's in the context of correct notes.

GarthDB commented 9 years ago

Here are some options: jade_branding_options_option 1 jade_branding_options_option 2 jade_branding_options_option 3 jade_branding_options_option 4

And an animated gif, because they are fun: jade_branding_options

GarthDB commented 9 years ago

On the spectrum, option 1 is closest to an actual seal mark: image

While option 4 is the cleanest.

GarthDB commented 9 years ago

I posted the options on dribbble as well and it was rebounded it. I really like it.

ForbesLindesay commented 9 years ago

I'm now leaning more towards option 1. I think smoothing it out strips too much of the character away. @jbnicolai @TimothyGu Do either of you have any opinions on this?

GarthDB commented 9 years ago

The rebound I posted above is like 1.5 :)

ForbesLindesay commented 9 years ago

I think 1.5 may be preferable to 1

ForbesLindesay commented 9 years ago

Are we ok to use that in terms of licensing?

GarthDB commented 9 years ago

Yup. We can have Jasmine turn it over.

TimothyGu commented 9 years ago

I'm OK with everything from 1-2.

GarthDB commented 9 years ago

1.5 I thought I would post the 1.5 mentioned above.

ForbesLindesay commented 9 years ago

Lets settle on 1.5. I can't wait to get the website re-branded and finally give Twitter a proper icon :)

TimothyGu commented 9 years ago

Sounds good.

GarthDB commented 9 years ago

excellent - I would make one change. It smoothes out just a parts of the rabbit does this work?

I'm putting together the social media images. Also where is the repo for jade-lang.com? There's a gh-pages on the main repo, but it's an older site.

jade_branding_final

TimothyGu commented 9 years ago

@GarthDB no it's the current one.

GarthDB commented 9 years ago

oh I'm sorry, I had an old fork. I'll update with the main repo now.

jbnicolai commented 9 years ago

@ForbesLindesay @GarthDB I'm all for 1.5 as well!

ForbesLindesay commented 9 years ago

Looks awesome. The source code for the website lives in the docs folder of the master branch. It's a node.js website that we automatically build and push to gh-pages after each release.

GarthDB commented 9 years ago

Ok. I'm working on a pull request with just the bare minimum to incorporate the new branding. I'll take some more time to work through some more cohesive design. I'll make sure to discuss the work openly.

Here is a zip with twitter avatar and GitHub gravatar options.

I think we should be able to close this issue. I'll open new issues for new needs and work.

GarthDB commented 9 years ago

Let me know when the new avatars get posted, I'd love to tweet about it.

GarthDB commented 9 years ago

@cloud-walker back to your original question, here are the new official logos in svg format. Jade Jade Jade

ForbesLindesay commented 9 years ago

Awesome, twitter profile photo is published. Any thoughts on cover photo/colour?

GarthDB commented 9 years ago

Yes, but they are just sketches for now. I'll flesh them out a bit with the website design.

— Sent from Mailbox

On Fri, Apr 10, 2015 at 6:13 PM, Forbes Lindesay notifications@github.com wrote:

Awesome, twitter profile photo is published. Any thoughts on cover photo/colour?

Reply to this email directly or view it on GitHub: https://github.com/jadejs/jade/issues/1882#issuecomment-91725454