Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby logo/branding #408

Closed
cusspvz opened this issue Aug 27, 2016 · 128 comments

Comments

Projects
@cusspvz
Copy link
Member

commented Aug 27, 2016

Gatsby is awesome!

Has been a while that I'm familiar with the project and I think it needs an equivalent awesome logo. Today I've seen this on Hacker News and I think it could be a nice spark for this discussion.

@KyleAMathews do you have any ideas in mind?

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Aug 27, 2016

Oh good find! Just posted something there. Please upvote everyone!

@Greg-Johns

This comment has been minimized.

Copy link

commented Aug 29, 2016

Just started playing with Gatsby and it looks great. I've been wanting something to easily write static files in other formats besides just markdown. Here's a pen I did a while back with some type styling around "the Great Gatsby" if it helps spur the process. http://codepen.io/Gajit/pen/Qyjpoy

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2016

Cool logo!

I don't think I want any reference to the actual book though. There's only a loose connection between the book and the project. I just picked it caused I like the name + it was open on NPM :-)

@renatorib

This comment has been minimized.

Copy link

commented Sep 1, 2016

gatsby-black

gatsby-black-dashed

gatsby-colored-2

gatsby-colored

My contribution 💃

@cusspvz

This comment has been minimized.

Copy link
Member Author

commented Sep 2, 2016

Just a note: @renatorib I like the way you smashed the colors into the last one, 70's style. :D

@MoOx

This comment has been minimized.

Copy link

commented Sep 2, 2016

My 2 cents: try to not be to close to Phenomic colors https://phenomic.io/ (which is another React/webpack static website generator)

@renatorib

This comment has been minimized.

Copy link

commented Sep 2, 2016

@MoOx why? Are colors.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 2, 2016

@renatorib those are great! Let's turn this thread into a logo thread — let's get a bunch of ideas and then pick one for the coming website, social properties etc.

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 6, 2016

I'm not great at logo design myself but I'd be happy to get things going, and provide some feedback. @KyleAMathews what do you think the logo should evoke? Any other project logos that you like?

@renatorib although I think the lettering logo you made looks great, maybe we want to stay away from the book and the retro theme? Also I don't know how readable the lettering would be at smaller sizes?

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 6, 2016

Without directly referencing the book or the movie, maybe there's elements we could take from the movie's visual design?

http://rockingodshouse.com/site/wp-content/uploads/2013/05/the-great-gatsby-2012.jpg

Also whatever we end up with, it'd be great to have something that's easily usable as a favicon/icon/square logo.

@cusspvz

This comment has been minimized.

Copy link
Member Author

commented Sep 6, 2016

@SachaG I like this from the movie design:
captura de ecra 2016-09-06 as 12 36 50

Inspite it may look-a-like a freemansory symbol.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2016

@SachaG I haven't thought much about it yet... don't have much experience with logos either. Will chime in when I've thought things through but in the meantime everyone feel free to work through ideas.

Right now I don't have strong feels for or against drawing inspiration from the book/movie. I didn't pick the name because of them per se so we don't necessarily need to hold to its aesthetic but that being said Art Deco is cool and choosing it as our aesthetic would simplify picking fonts, designs, etc. And people would enjoy the association between our name and the logo/design.

https://fonts.google.com/specimen/Poiret+One for example is a really nice art deco style font that's on Google Fonts. We could use that for our headers and perhaps logos.

Some other fonts that fit into the Art Deco mold:

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2016

Ok, got into the spirit of things a bit :-)

Here's Andes:
screen shot 2016-09-06 at 7 43 48 pm

Poiret One:
screen shot 2016-09-06 at 7 45 22 pm

Anisette:
screen shot 2016-09-06 at 7 46 03 pm

Futura bold italic:
screen shot 2016-09-06 at 7 46 32 pm

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2016

Looking at the other open-source static site generators, a lot of them use their initials as an icon (H for Hexo, MM for Middleman, etc.). So maybe we should do something around the "G"? So an art-deco G monogram of some kind?

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 7, 2016

Yeah, that could work. Try some stuff and throw up some samples!

@cusspvz

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2016

@KyleAMathews I like the Poiret One font style. I also the G of it beautiful as a standalone lettering (for the icon).

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2016

Here's an early idea:

https://d3vv6lp55qjaqc.cloudfront.net/items/442M2i0h1z052a460S3h/gatsby-logo.png?X-CloudApp-Visitor-Id=43642&v=cedc5c6c

Let me know what you think!

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2016

@SachaG nice!

Which fonts are those?

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2016

It's Futura Bold.

@stereobooster

This comment has been minimized.

Copy link

commented Sep 20, 2016

Do not aim at low hanging fruits: yes of course book and movie is obvious association. But what in common in tool and movie? One way to get to logo is to start from moto.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2016

Brandon Grotesque is another great option for a font — inspired by Futura and other geometric-style fonts popular in the 20s-30s. One of the more popular web fonts right now. Would be great for headers or body on site.

https://typekit.com/fonts/brandon-grotesque

@rgbkrk

This comment has been minimized.

Copy link
Member

commented Sep 28, 2016

@SachaG Love that simple G for the square logo!

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2016

@rgbkrk agreed ❤️

@SachaG you have a bit of time to play with the design? I was thinking a good place to try out your design would be our Twitter avatar which is currently quite hideous. What do you think about taking your monogram and colorizing it a bit and I'll put it up on Twitter? I'm going to start on the website this week so will be playing around with some design ideas that I'll share.

@davad

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2016

@SachaG Wow, love that logo.

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

OK, I'll work on something :)

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

Did you have any specific color in mind? How about something like this?

https://d3vv6lp55qjaqc.cloudfront.net/items/2U1S0G3P0E0Y3s2N431D/gatsby-1.jpg?X-CloudApp-Visitor-Id=43642&v=cdc164d5

Edit: cropped PNG version here: https://cl.ly/hboi

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

Trying colors similar to the movie could be nice. This page has good stuff
http://vintagedancer.com/1920s/fabrics-and-colors/
On Wed, Sep 28, 2016 at 6:41 PM Sacha Greif notifications@github.com
wrote:

SVG:


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#408 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh3Dmlxhhi5oymDM46nXELO_EpgBkks5quxdRgaJpZM4JuuKY
.

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

I thought about it but I figured it might be better to the clean, modern "JS library" aesthetic (https://facebook.github.io/react/, http://horizon.io/, etc.) rather than go all-out on the retro style.

Although I guess maybe a mix of browns/pinks/oranges could work if it's not too heavy? In fact I'm using a similar color scheme on http://stateofjs.com

@f0rr0

This comment has been minimized.

Copy link

commented Sep 29, 2016

Just my two cents here. I think @SachaG is right with the clean aesthetic. Gatsby should fit in well with other parts of the ecosystem (namely React, Webpack and GraphQL). In any case, if we were to go with a vintage look, then a more retro looking font would make more sense.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Nov 19, 2016

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Nov 19, 2016

Another open source didot is Computer Modern Serif (designed for Tex and used all over in math/scientific papers) http://checkmyworking.com/cm-web-fonts/

@zablogic

This comment has been minimized.

Copy link

commented Jan 10, 2017

Hi all! Here is another contribution to the Gatsby logo. (Handwritten/calligraphed in Illustrator)
It's just a draft and needs some tuning. Let me know what you think

gatsby_logo_draft01

@KyleAMathews KyleAMathews changed the title Gatsby needs a logo? Gatsby logo/branding Jan 27, 2017

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

Hey folks, as part of working towards a major new release (alpha 11) that'll be rolling up my last ~2 months of work, I've taken another crack at playing with the typography/colors of the website. Would love to hear what you think!

https://unist-graphql--gatsbyjs.netlify.com/docs/old-readme/

I'm fairly happy now with the typography. Been using https://www.typographychecklist.com/ lately on some client sites and the author frowns on using Futura as a body font. So I moved that to be the header font and used for the body font TeX Gyre Schola — an open source revival of Century Schoolbook — a modern serif from the early 20th century that pairs nicely with Futura. https://www.fontsquirrel.com/fonts/TeX-Gyre-Schola

While I'm kinda competent now at typography, I'm just fooling around with colors. I used http://davidjohnstone.net/pages/cubehelix-gradient-picker#23,8,1.11,1.12,1,0.1,0.95 to pick different colors but I'd love someone else to take a crack at picking colors for the various elements.

screen shot 2017-01-26 at 7 00 55 pm

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

If you want to play with the site, checkout the unist-graphql branch. The typography & colors are defined in https://github.com/gatsbyjs/gatsby/blob/unist-graphql/www/utils/typography.js

@KyleAMathews KyleAMathews referenced this issue Feb 9, 2017

Closed

1.0 roadmap #419

@radubrehar

This comment has been minimized.

Copy link

commented Feb 25, 2017

Is renaming considered? :)
I don't know about you, but to me Gatsby is oftentimes hard to spell right without thinking too much. I have a name idea - will throw it in if renaming is an option.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2017

@KyleAMathews KyleAMathews referenced this issue Apr 12, 2017

Closed

Admin GUI #623

@YoungElPaso

This comment has been minimized.

Copy link

commented Apr 13, 2017

Could I suggest more line-spacing for the typo? Or maybe just more white-space generally? Seems a little cramped.

Still taking logo suggestions? If so, here's a 'modern' approach, based on notion of cmd-line etc.

screenshot from 2017-04-13 15 54 53

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Apr 13, 2017

@YoungElPaso what are you referring to? The website?

@ArchieHicklin

This comment has been minimized.

Copy link

commented Apr 14, 2017

Everyone's had some great submissions and I'm onto my third production Gatsby site so I'm so thankful for the work @KyleAMathews has done. 🎉

My suggestion for the site (without redesigning everything) would be to strip it right back. The site is superb so far but there's something a bit off. I feel like (rightly so) everyone was looking to incorporate Gatsby into this art deco theme with the logo and identity.

I think that's superb and I love @SachaG 's logo. But I also feel that along the way the website identity has now become tied to the logo. Although this sounds rational I don't think it is.

Kyle has said himself that Gatsby was chosen as a name mostly because of the fact it wasn't taken in npm. It's a dope name but I think what's missing is that the website identity should represent why people are using Gatsby. The site is a showcase for the product.

Gatsby is minimal, it's quick to develop with and it's lightening fast. You can show Gatsby to a non-tech person and they will understand why it's used (I speak from experience of actually having done this! Try this with other frameworks lol...)

Apologies in advance because I know this will be an unpopular suggestion but I would ditch most of the colour. Focus on the text (this is why most people will be visiting the site) and the cleanest, clearest way to display that.

I would switch to:

White backgrounds, separating any segments with 1px borders rather than color changes, and then one solid black for h titles, one grey for paragraphs or inactive navs and then one strong bolder orange for active elements, buttons and the logo.

Sorry for the blue and lack of orange - I was doing this quickly in Chrome dev tools.

Also - should probs use an SVG for the logo rather than a png when it's officially launched - no need for visitors to cache it.

gatsbysite2

@SachaG

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2017

Nice. Personally I'm attached to the logo, but as far as the colors as concerned I could go either way.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2017

@ArchieHicklin interesting! I'm not attached to the colors/fonts/art deco identity per se but I do really want Gatsby to have a strong and unique identity. My worry about "stripping things back" is it's too easy to fall back into some sort of generic minimalistic look & feel that'd look simple and nice but would look like everything else out there...

Would you like to do a quick PR exploring more what you're thinking?

Also Futura isn't a great body font so either keep what I'm using or pick another font that goes well with Futura and is more readable for lots of text.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Apr 14, 2017

I guess, thinking a bit more, I'd be a bit cautious about moving away from Art Deco. Gatsby is a very well known name and lots of people associate it with this style. So we get a big boost by associating ourselves with these design ideas as well. There's lots of good things about the 20s that we can associate ourselves with e.g. it was a time of confidence and rapid technological growth, etc. Soaring skyscrapers were new as well as cars, airplanes, etc. Lots of interesting motifs we can use on the website and example sites.

I totally agree that there is something "off" about the site still. I'm only a passable designer so I can get things pretty good but my design intuition fails me for the last 15-20%.

@ckhowell

This comment has been minimized.

Copy link

commented Apr 14, 2017

I think @ArchieHicklin has stayed true to what a user wants, a clean well designed site focusing on content rather than brand. @ArchieHicklin site is easy to read, digest and navigate. Users going to the site are there for information and not to get a 1920's art deco vibe.

@ryandeussing

This comment has been minimized.

Copy link

commented Apr 14, 2017

I'd like to suggest an approach that creates room for distinctive design on the landing/branding page(s) while maintaining a sense of simplicity and subtlety in the docs (where function really trumps form).

This is not my idea, I'm lifting it from this site that I think strikes a great balance: https://www.atlassian.com/git (branding)
https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud (docs)

Specifically I prefer the use of color in these code-blocks (https://cloud.githubusercontent.com/assets/71047/18999381/1ed78c30-86f2-11e6-8bcf-f06862b1fd10.png) to the more pervasive approach in the current design.

(I'm re-doing my personal site in Gatsby now, very excited for 1.0 and using it for client projects 👍 )

@ArchieHicklin

This comment has been minimized.

Copy link

commented Apr 15, 2017

@KyleAMathews You've hit the nail on the head!

Definitely keep the motifs - a great way to do that would be to utilise strong iconography with this 1920's style, or even better, modern iconography that uses the 1920s components you mentioned as a way to illustrate Gatsby's selling points (ie Early Ford Model cars to act as a visual motif for precache, 20's skyscraper development/architecture as a visual motif for building with components etc.)

I'd say if that's the direction you want to go - then go all out and make it clear that that is the design motif. I don't feel the current beige and type combo doesn't give that vibe at all although I may be wrong.

@eliwilliamson was spot on with the illustration as a visual element, but I stick to my original suggestion of pulling back and choosing one color to go with while adding clean illustrations to the documentation and homepage to really give it some emotion.

I don't think this is far off with what @ryandeussing was suggesting with the Atlassian links? It's clean and uses icons to add humanism to the documentation.

screen shot 2017-04-15 at 16 20 20

Perhaps we could look to do the same but with 1920's themed icons instead?

With regards to typography - Futura PT can look good when kerned and spaced correctly https://www.ableton.com/en/help/ but I agree it doesn't look good as a body font unless you really use it correctly.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Apr 17, 2017

I'm not tied to the current design at all. I don't consider myself a great designer. I'd love to see more concrete design proposals e.g. create a PR changing the design. My only requirement is that we work towards a unique and cohesive brand and there's tie-ins to existing design ideas around "Gatsby" and NYC of the 1920s.

We're getting close to a 1.0 release so if a few people want to step up and own this, the time is now!

@YoungElPaso

This comment has been minimized.

Copy link

commented Apr 21, 2017

Good discussion! You know what's a good symbol you more design oriented people might wanna consider, for say iconography or whatever, and from The Great Gatsby, but not art-deco: the green light.

https://s-media-cache-ak0.pinimg.com/originals/b6/c2/ef/b6c2ef876f35a8e15842327ecd0cfa40.jpg

Just throwing that out there as something to consider for color, branding, icon or whatever.

Here's a super quick sketch. Trying to keep a couple ideas in mind: clean, minimal, 20's vibes, scale-able. Not sure I covered all of those but, trying to keep it loose.

screenshot from 2017-04-21 13 16 35

NB: got the bulb icon from https://www.autodraw.com - super nice resource for sketching things out.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2017

Hey everyone! Just finished a big revision of gatsbyjs's design! Check it out at gatsbyjs.org. Made a follow up issue to discuss @SachaG's proposal for the frontpage design + other remaining work to "launch" gatsbyjs.org

Would love all your thoughts! #1173

@benzai

This comment has been minimized.

Copy link

commented Aug 3, 2017

Hey guys, I discovered Gatsby a few days ago and have been learning to build my own website with it. Gatsby has been super awesome so far. I wanted to say: The Gatsby brand and website design (and JS framework of course) is absolutely top notch, I love it!! Thanks for the great work! 🙏🙏🙏

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Nov 29, 2017

Ok, initial branding + logo work is done. Great work team :-) Archiving this (working on cleaning up issues) but feel free to create new issues to discuss further work you're interested in helping out with.

P.S. go check out @fk's t-shirt design!! #1500 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.