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 · 129 comments
Closed

Gatsby logo/branding #408

cusspvz opened this issue Aug 27, 2016 · 129 comments
Projects

Comments

@cusspvz
Copy link

@cusspvz cusspvz 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
Copy link
Contributor

@KyleAMathews KyleAMathews commented Aug 27, 2016

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

@Greg-Johns
Copy link

@Greg-Johns Greg-Johns 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link

@renatorib renatorib commented Sep 1, 2016

gatsby-black

gatsby-black-dashed

gatsby-colored-2

gatsby-colored

My contribution 💃

@cusspvz
Copy link
Author

@cusspvz cusspvz 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
Copy link

@MoOx MoOx 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
Copy link

@renatorib renatorib commented Sep 2, 2016

@MoOx why? Are colors.

@KyleAMathews
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@SachaG SachaG 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
Copy link
Contributor

@SachaG SachaG 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
Copy link
Author

@cusspvz cusspvz 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@SachaG SachaG 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
Copy link
Contributor

@KyleAMathews KyleAMathews commented Sep 7, 2016

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

@cusspvz
Copy link
Author

@cusspvz cusspvz 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
Copy link
Contributor

@SachaG SachaG 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
Copy link
Contributor

@KyleAMathews KyleAMathews commented Sep 9, 2016

@SachaG nice!

Which fonts are those?

@SachaG
Copy link
Contributor

@SachaG SachaG commented Sep 10, 2016

It's Futura Bold.

@stereobooster
Copy link

@stereobooster stereobooster 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@rgbkrk rgbkrk commented Sep 28, 2016

@SachaG Love that simple G for the square logo!

@KyleAMathews
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@davad davad commented Sep 28, 2016

@SachaG Wow, love that logo.

@SachaG
Copy link
Contributor

@SachaG SachaG commented Sep 29, 2016

OK, I'll work on something :)

@SachaG
Copy link
Contributor

@SachaG SachaG 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
Copy link
Contributor

@SachaG SachaG commented Sep 29, 2016

@KyleAMathews
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@SachaG SachaG 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
Copy link

@f0rr0 f0rr0 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.

@ArchieHicklin
Copy link

@ArchieHicklin ArchieHicklin 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
Copy link
Contributor

@SachaG SachaG 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link

@ckhowell ckhowell 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
Copy link

@ryandeussing ryandeussing 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
Copy link

@ArchieHicklin ArchieHicklin 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link

@YoungElPaso YoungElPaso 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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
Copy link

@benzai benzai 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
Copy link
Contributor

@KyleAMathews KyleAMathews 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)

@XelaAl
Copy link

@XelaAl XelaAl commented Oct 7, 2021

I'm currently looking for a good logo maker. I've already surfed the Internet and found a guide on how to choose it https://www.webbuildersguide.com/best-logo-maker/. Also, I noticed that most people recommend using Wix Logo Maker, Hatchful, or Themeisle Logo Maker. But I haven't checked Gatsby out. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet