Gatsby logo/branding #408
Comments
|
Oh good find! Just posted something there. Please upvote everyone! |
|
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 |
|
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 :-) |
|
My contribution 💃 |
|
Just a note: @renatorib I like the way you smashed the colors into the last one, 70's style. :D |
|
My 2 cents: try to not be to close to Phenomic colors https://phenomic.io/ (which is another React/webpack static website generator) |
|
@MoOx why? Are colors. |
|
@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. |
|
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? |
|
Without directly referencing the book or the movie, maybe there's elements we could take from the movie's visual design? Also whatever we end up with, it'd be great to have something that's easily usable as a favicon/icon/square logo. |
|
@SachaG I like this from the movie design: Inspite it may look-a-like a freemansory symbol. |
|
@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: |
|
Ok, got into the spirit of things a bit :-) Here's Andes: Poiret One: Anisette: Futura bold italic: |
|
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? |
|
Yeah, that could work. Try some stuff and throw up some samples! |
|
@KyleAMathews I like the Poiret One font style. I also the |
|
Here's an early idea: Let me know what you think! |
|
@SachaG nice! Which fonts are those? |
|
It's Futura Bold. |
|
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. |
|
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. |
|
@SachaG Love that simple G for the square logo! |
|
@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. |
|
@SachaG Wow, love that logo. |
|
OK, I'll work on something :) |
|
Did you have any specific color in mind? How about something like this? Edit: cropped PNG version here: https://cl.ly/hboi |
|
Trying colors similar to the movie could be nice. This page has good stuff
|
|
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 |
|
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. |
|
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%. |
|
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. |
|
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) 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 👍 ) |
|
@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.
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. |
|
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! |
|
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.
NB: got the bulb icon from https://www.autodraw.com - super nice resource for sketching things out. |
|
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! 🙏🙏🙏 |
|
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) |
|
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. |
and others
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?
The text was updated successfully, but these errors were encountered: