gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

Gatsby t-shirt design contest #1500

Closed KyleAMathews closed 5 years ago

KyleAMathews commented 7 years ago

Who wants to design a Gatsby t-shirt!?!

We have $1240 available on OpenCollective that seems like it needs turned into t-shirts :-)

But to do that we need a design. So please submit some designs! If you submit the design that gets picked, I'll send you 3 t-shirts.

I'm also going to send t-shirts to all the 1.0 contributors.

What's the best t-shirt printing place these days? Ideally they'd be a print on-demand place so people could buy Gatsby shirts for themselves.

chiedo commented 7 years ago

Heck yeah!!! I'm a Large :)

secretfader commented 7 years ago

When balancing quality with simplicity and availability, it seems like most folks are choosing teespring.com these days. I've had a couple of their shirts and been pleasantly surprised.

sebastienfi commented 7 years ago

image

fk commented 6 years ago

Together with @yisela 🙏 I spent some time last week expanding my little "butler" guy that I drew earlier this year into a complete character:

image

The darker blue for the illustration is "Gatsby" from @ArchieHicklin's suggested palette refresh. If the details hold up at that size (which they should looking at some of my old screenprinted shirts), I'd suggest printing it like this:

mockup

Alternatively we could place the guy in front of the whole "Gatsby" wordmark – not necessarily in front of the "G" though – here's a quick mockup:

image

For that variant I'd like to change the colors – the full wordmark in cyan doesn't sit right with me.

I'm also still thinking about adding a reference to the 1.0 version somehow – something like „Gatsby v1.0 PR Limbo Contest Winner“ – only that my illustration doesn‘t fit that line. Any ideas?

SachaG commented 6 years ago

Could we add the "G" monogram somewhere in there somehow? Also maybe we want to keep the number of colors down to save on printing costs, so I'd suggest getting rid of the cyan.

jquense commented 6 years ago

Super cool!

fk commented 6 years ago

@SachaG Yes, I had the monogram in there (in the background) at the beginning, but it has been a while since then – and I cannot remember why I chose to remove it. Will give that another shot tonight. Also will add a version with the current palette.

@jquense Thank you! 🤗

fk commented 6 years ago

1 2 image

SachaG commented 6 years ago

I don't think this works, you can't really make out the monogram… I don't want to seem like I'm arguing for it just because it's my design, so maybe it's ok if the shirts don't feature it :)

chiedo commented 6 years ago

I could see there being two different types of shirts. One with the monogram. One with the butler guy

fk commented 6 years ago

@SachaG Yeah, I agree – what I posted doesn't really work. I have two more ideas pairing "skating butler" with the monogram, but didn't find the time yet to take a shot at those … argh, can't believe it's been 12 days since your response :-/

I don't want to seem like I'm arguing for it just because it's my design, so maybe it's ok if the shirts don't feature it :)

No worries! It's a Gatsby shirt, so why wouldn't it feature the brand? :) (even though in this particular case one could argue that the marketing aspect may not be as important as in others)

@chiedo Of course (if that works out in terms of printing costs)! Btw. how did you plan on picking the final design @KyleAMathews?

rdela commented 6 years ago

Hello Gatsby hive mind 🐝🧠

I have some tee designs for you. Background…

@KyleAMathews on twitter:

@bvaughn @gatsbyjs @opencollective Ah! Didn't know you did graphic design @ school! More t-shirt stuff. Really happy with our logo (thanks @SachaG!) My thinking is more t-shirt designs the better so if you'd like to design something, do it! @fk is doing some designs as well.

tweet:

Yeah!! Actually I'd love both. Simple plus fancy. Maybe a few fancy in multiple directions.

Sacha tweet:

I think a simple purple shirt with the white logo in the middle would work great! Or, you could also do something more fancy like we did for the @­DiscoverMeteor t-shirt: http://www.discovermeteor.com/tshirt if you find a good concept.

tweet:

If you want to go the fancy route, I could imagine some kind of geometric mandala-like pattern with the G in the center: https://dribbble.com/shots/2467671-Yogi-Yak

tweet

More inspiration: https://dribbble.com/shots/2641903-100-Vector-Mandala-Ornaments/attachments/529413 :)

me on twitter (img):

uses https://commons.wikimedia.org/wiki/File:Mandala_52.svg …more inspiration https://commons.wikimedia.org/wiki/File:Chenrezing_Mandala.svg / https://commons.wikimedia.org/wiki/Category:SVG_mandalas

Mandala_52 inspired version

 

Sacha response:

Nice! I feel like I’d probably remove the circle that goes through the center of the outer circles? Seems like it’s cutting the design in two

So here two completely redrawn symmetrical versions, each minus the bisecting middle circle.

encased: gatsby-mandala-redraw

 

and open: gatsby-mandala-redraw-inner

 

I am also super into the Figma Sacha posted on twitter with Gatsby/React/GraphQL mashup. I would be willing to clean that up in Illustrator and add it into the mix.

Also messing around in Figma, I got to what I think is an earlier version with GQL logo at actual size I got to by hiding layers? Interesting shape but maybe emphasizes GraphQL too much having it larger?

Maybe printing Sacha’s original design with current typography (or not!) would be cool as well?

early idea

 

I also took a crack at simplifying fk + @yisela’s skater butler a bit, we have dashing monochrome:

fk-skater-butler

 

and princely purple:

fk-skater-butler-744c9e

 

cc @chiedo @sebastienfi @redmega @hmeissner @rafacm @mlukaszczyk @flexzuu @belazer @jquense @shannonbux

SachaG commented 6 years ago

Nice work :) Going back to the Mandala idea, it could be cool to integrate the React and GraphQL logos in there too somehow?

KyleAMathews commented 6 years ago

Btw. how did you plan on picking the final design @KyleAMathews?

Why stop at one :-D

My thought has been that we need a solid basic t-shirt with our logo + name but then past there, the sky's the limit! It'd be fun to have a demo Gatsby ecommerce store in the future where all of this is for sale. There's a lot of on-demand t-shirt printers now so it'd be no work to have multiple designs available. As long as the designs are original, fun, etc. we could keep adding them. Something like how Google keeps doing new things with their logo. Also our butler could learn all sorts of new skills and visit lots of fun places. E.g. I just was imagining the butler on a deeply cratered moon landscape in a spacesuit holding a big Gatsby flag :-)

rdela commented 6 years ago

Houston, the butler has landed. 👨🏻‍🚀🚩🌕

Going back to the Mandala idea, it could be cool to integrate the React and GraphQL logos in there too somehow?

reactsbyql-1600

reactsbyql-cutout-1600

reactsbyql-outline-1600

Glad you asked, tidied up the circle mandala some too

gatsby-mandala-redraw-2-inner-1200

gatsby-mandala-redraw-2-1200

fk commented 6 years ago

Btw. how did you plan on picking the final design @KyleAMathews?

Why stop at one :-D

👍 I was refering to the initial idea/post in this issue, but I can totally follow all you're saying! So we need to find an online printer with a decent API (and prices/quality) and a Gatsby shop, and can settle the quest for that one design? ;-)

rdela commented 6 years ago

So we just need to get Snipcart hooked up to something like Printful?

Printful - Custom Shirts

Printful - The complete breakdown of ecommerce platforms for drop shipping

rdela commented 6 years ago

Using Printful – Anvil 980 Lightweight Fashion Short Sleeve T-Shirt with Tear Away Label

anvil-980-cigr-la-ch-skater-butler

anvil-980-cigr-la-ch-reaactsbyql-2

rdela commented 6 years ago

OGatsby version too

anvil-980-cigr-la-ch-ogatsby

chiedo commented 6 years ago

I like the OGatsby versions the best. Also I know a guy who can do the shirts for $10/shirt. Not sure what shipping would be... If you can't find a price that low elsewhere, let me know.

rdela commented 6 years ago

Thanks @chiedo so OGatsby advances @SachaG do you have thoughts about size and placment/orientations on this or ReactsbyQL design, or shirt/ink color combos? I liked all of the original treatments you came up with in the logo issue linked above, I can embed here with Printful color strip or you could pick some?

rdela commented 6 years ago

@fk @yisela what do you think of Printful shirt fabric color and ink combinations for Butler? I like dark shirts so picked those but will mock up whatever you want or please feel free to if you would rather do it yourselves!

rdela commented 6 years ago

Think we should definitely print some version of both OGatsby and Skater Butler, probably one color designs for simplicity and to keep costs down. Plus I like the design challenge.

If there is a version of the mandala/ReactsbyQL design that we like enough add that to the mix.

Have a subset of color choices for shirt to keep people from making clashing choices, possibly different ink color choices based on shirt

Print on demand services have all kinds of stuff we could make beyond shirts, but I think shirts and stickers would be a great start. @KyleAMathews have you made stickers yet? Did you have any t-shirt print on demand services in mind? Should I ask Snipcart people if they already integrate with any or are in the process?

KyleAMathews commented 6 years ago

Yeah, I'm thinking we start with a straightforward design like your OGatsby + Skater Butler. Then add more as people come up with great designs.

No stickers yet but we should definitely have those as well :-D

I don't have any strong opinions about on demand printing — I've looked at a few but it's not something I have experience with. So reports on people's experience would be great.

@chiedo cheaper is nice but time is in even shorter supply — so someone that'll handle logistics & shipping is essential. What I'd really like to do is to email all the contributors with a coupon code for a free shirt and they go pick the shirt they want and their address and we don't have to do anything beyond that.

KyleAMathews commented 6 years ago

We're also up to $2,874 now for our open collective budget haha :-)

chiedo commented 6 years ago

Hahaha I understand that! Fair enough. Lol!

--

Chiedo [chay-dough]

CHIEDO LABS: Fast Communication. Rock-solid Apps. Amazing Websites.

FounderBy30: Transforming Entrepreneurs Under 30 Into Extraordinary Founders.

James Madison University 2013

Aletheia Church

On Mon, Dec 18, 2017 at 2:48 PM, Kyle Mathews notifications@github.com wrote:

We're also up to $2,874 now for our open collective budget haha :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-352538071, or mute the thread https://github.com/notifications/unsubscribe-auth/ACDokLSGbIm1sSx8QwQbHnsglDyKE1lmks5tBsF_gaJpZM4OXoj2 .

SachaG commented 6 years ago

We definitely need some combo of white/purple for the colors. I'd say either white logo on purple background, or the opposite if they don't have purple shirts. Also it might look better with the Gatsby name under the logo? This way the G would be centered.

rdela commented 6 years ago

Had a hunch about centering idea, agree and thanks @SachaG

New color set coming up

what do people think of https://printaura.com/api/ vs https://www.printful.com/docs https://twitter.com/snipcart/status/942872407399981056

SachaG commented 6 years ago

For the Discover Meteor tshirt I set up a Gumroad + Threadbird implementation that worked well. Sadly Threadbird don't do logistics anymore (at least I don't think so) but I still recommend Gumroad as an easy way of collecting payment (Printful has an integration apparently). Also don't underestimate the power of services like Zapier or IFTTT when it comes to connecting things together, we might not even need to write any glue code.

Redmega commented 6 years ago

I like the idea of a grey or darkgrey T_shirt, purple OGatsby logo centered in the front, chest height, with gatsby.js text in small lettering on the back, right below the collar (collar? What do you call that part on a T-shirt?)

I have a similar shirt from New Relic, it says data nerd. across the chest, and on the back it has the New relic name and logo in small form. It's a very simple design and it works.

I'm not a fan of white tshirts because they tend to get dirtier way faster than they ought to.

fk commented 6 years ago

@rdela Regarding dark tees and the skater butler – sorry for coming back with such delay. By all means feel free to do stuff with the design! Sorry for not providing the sources yet – those would make that much easier, right now it's a little unfair. :-/

Related-unrelated: Maybe we need s/th like http://logo.pizza/diamond-snake 😍 for that shop? ;-)

I might give a "butler-on-dark-background" a shot, no time currently for that :-( … kinda like to see how using the shirt color as outline color for the illustration will turn out tho!

shannonbux commented 6 years ago

definitely like the heather grey with purple butler idea. Or dark charcoal background with purple (or white logo with some purple accents). If it were more easily available, I'd say a light heather purple shirt/hoodie with Gatsby purple logo would look amazing.

On Wed, Dec 20, 2017 at 4:48 PM, Florian Kissling notifications@github.com wrote:

@rdela https://github.com/rdela Regarding dark tees and the skater butler https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-352520463 – sorry for coming back with such delay. By all means feel free to do stuff with the design! Sorry for not providing the sources yet – those would make that much easier, right now it's a little unfair. :-/

Related-unrelated: Maybe we need s/th like http://logo.pizza/diamond-snake 😍 for that shop? ;-)

  • I think the olive/black combo works in terms of contrast, but it personally reminds me too much of an army shirt… ;-) (I feel the same way about the "OGatsby" logo in those colors btw.) – but that's a matter of taste as you said, and not much of an issue with print-on-demand I guess … Hold on, wondering if the other color combos might be a printing issue actually. It's been a while since I last printed stuff, but I think screen printing still might need more than one layer for white-on-black/bright-on-dark colors, and I have no idea how that works with the direct printing stuff/how good the latter is today. At least back in the days printing white-on-black came with a price tag.
  • The grey-ish/purple variant surprised me positively, I kind of like them even if I don't want to. :-D Also makes me wonder about a purple butler on heather grey (maybe even with white … 😛 ).
  • Brown/beige is a good example of why I think we need a bright color for the character's face if we want to print that on a dark background. That's also one of the reasons why I went with the white shirt for now btw.

I might give a "butler-on-dark-background" a shot, no time currently for that :-( … kinda like to see how using the shirt color as outline color for the illustration will turn out tho!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-353225478, or mute the thread https://github.com/notifications/unsubscribe-auth/Ae9o2miSpXs30P34Zb7KY6SCHJhdbD2Uks5tCar1gaJpZM4OXoj2 .

fk commented 6 years ago

Hello again! I felt the "OGatsby" logomark and -type sizes needed a little balancing and ended up with https://github.com/gatsbyjs/gatsby/issues/3363. Would love if y'all could take a look!

rdela commented 6 years ago

@fk:

Btw., OT: I recently remembered the "Gatsby mandala" idea and noticed that there are a bunch of nicely looking tutorials on YouTube: https://www.youtube.com/results?search_query=mandala+illustrator https://github.com/gatsbyjs/gatsby/issues/3363#issuecomment-360245071 / [brand] Gatsby logo definition

rdela commented 6 years ago

OK revisiting https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-352224447

Printful - Custom Shirts Choose from different models and brands, from apparel made in the USA or worldwide.

Filtered search for color: purple

Bella + Canvas 3413 Triblend Short Sleeve T-Shirt with Tear Away Label Purple Triblend img Purple Triblend img link

Anvil 980 Lightweight Fashion Short Sleeve T-Shirt with Tear Away Label Anv Heather Purple img Anv Heather Purple img link

American Apparel 2001 Fine Jersey Short Sleeve Men T-Shirt AA Purple img AA Purple img link

Rest are Ladies cut and I think ones above qualify as unisex but wholeheartedly defer to @shannonbux and any other contributors (in hopes they will wear one if/when we make them) whether they are interested in other cuts not pictured in this comment.

rdela commented 6 years ago

Oh there is a (unisex?) tank too kinda ❤️it lol

Gildan 2200 Ultra Cotton Tank Top Purple Gil img Purple Gil img link

rdela commented 6 years ago

lineup with hastily placed gatsby-vertical-negative.svg *see https://github.com/gatsbyjs/gatsby/issues/3363#issuecomment-360194796

purps-lineup

rdela commented 6 years ago

as I feared, the tank is my favorite lol

rdela commented 6 years ago

and checkout-wise think @SachaG has it https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-352614400

For the Discover Meteor tshirt I set up a Gumroad + Threadbird implementation that worked well. Sadly Threadbird don't do logistics anymore (at least I don't think so) but I still recommend Gumroad as an easy way of collecting payment (Printful has an integration* apparently). Also don't underestimate the power of services like Zapier or IFTTT when it comes to connecting things together, we might not even need to write any glue code.

más links

SachaG commented 6 years ago

Looking at the shirts, I think I'd probably prefer a version with just the logo and no "Gatsby" personally.

Or else some kind of illustration like we talked about. Maybe the skateboard butler could be carrying a tray with the "G" on top? Although that might turn him into more of a waiter…

But I feel like having the name makes it less cool somehow. I prefer my tech tshirts to be a bit more cryptic ;)

https://mercantile.wordpress.org/wp-content/uploads/2015/10/wapuu_kids_t-hm.png

vs

https://mercantile.wordpress.org/wp-content/uploads/2015/10/wpadminback_1024x1024.png

rdela commented 6 years ago

@SachaG @fk using gatsby-monogram-negative.svg

purps-lineup-monogram

rdela commented 6 years ago

@SachaG @fk skater in #f5f3f7, formerly brandLighter, now ui.light: hsla(270, 20%, 96%, 1) https://github.com/gatsbyjs/gatsby/pull/3639#issue-290278998

purps-lineup-skater-f5f3f7

fk commented 6 years ago

@rdela Nice! @SachaG Totally following you!

Also made some, will post them in individual comments.

fk commented 6 years ago

"Skating butler" on "Heather Grey" NextLevel 3600 – click the image for full view:

next-level-3600-3

fk commented 6 years ago

"Skating butler" on "White" NextLevel 3600:

next-level-3600-3-white

fk commented 6 years ago

Horizontal logo treatment "nametag"-style on "Heater Grey" NextLevel 3600:

next-level-3600-3-logo-horizontal

fk commented 6 years ago

Horizontal logo treatment "nametag"-style on "Natural" NextLevel 3600:

next-level-3600-3-logo-horizontal-natural

fk commented 6 years ago

Monogram and slightly adapted "Tutorial" icon (from the mobile navigation) on "Heater Grey" NextLevel 3600:

next-level-3600-3-monogram tutorial-icon

fk commented 6 years ago

Monogram and slightly adapted "Tutorial" icon (from the mobile navigation) on "White" NextLevel 3600:

next-level-3600-3-monogram tutorial-icon-natural

fk commented 6 years ago

Monogram and slightly adapted "Tutorial" icon (from the mobile navigation) on "Natural" NextLevel 3600:

next-level-3600-3-monogram tutorial-icon-natural