Graphics for laptop sticker pack about assets HOT 144 CLOSED

Vote 1

from assets.

@hallaathrad Yes - I suppose so. And there's another, more personal reason. I think semicolons look awkward and throw off the symmetry. That's just my armchair designer chiming in, though :)

from assets.

Got it, thanks!

One thing I think is important to note. Although I am well aware that it's counter-intuitive and against basic print requirements but I think it's better to handle the file in RGB.

Here's my reasoning...

Style guideline (https://haydmills.github.io/) does not define CMYK values for any of the colors, all we have is HEX. Which does not translate well all the time due to differences in gamut.

Further more, @QuincyLarson had previously requested PNG and SVG files which again do not support CMYK. The sticker I did was also submitted in RGB, with fCC green defined by style guide. I suppose the original fCC sticker was done this way, too.

Of course the printing process will eventually require CMYK conversion... but I believe it's better that we don't guess the right value independently of each other. It's better to stick with exact same HEX/RGB which will then eventually translate to an equal CMYK value during the printing process and the entire pack will look exactly the same.

Hope you catch my drift :)

from assets.

Designs are in!

from assets.

Vote 2

from assets.

Vote 3

from assets.

Vote 5

from assets.

Update!

from assets.

@QuincyLarson Understood, that way my priorities are:

• Translate the fCC (primary) green into CMYK value that will work for all stickers (and everything else in the future, of course)
• Make sure everyone involved here gets the right information about the CMYK/printing specs so the files are consistent
• Make the "sticker on laptop mockup" for all four

I can do all of these this weekend (today/tomorrow) and post results here so we can move faster from there; then if you are willing you can help me out doing it the right way :)

from assets.

@kosta-xd I've added the additional concepts, if you want to take a crack at them.

Let's Pair - Something about two people coding together - maybe something like this with an FCC function call (it's a meme from the 1980s movie "Predator")?

from assets.

@kosta-xd the core team really likes your CamperBot design.

Here's @hallaathrad's open data sticker. Please take a look and see whether you can improve upon it:

from assets.

Again a minimal open data badge concept.

from assets.

@kosta-xd @hallaathrad @Wes26 @haydmills
OK - quick update on our sticker pack.

My current thinking is that @kosta-xd's Open Data sticker (the one we're using for the shirt) is good to go.
. @kosta-xd could you put it into circular format?

As for CamperBot, me and the core team are leaning toward @Wes26's simple CamperBot head:

@Wes26 Can we update the text to say: CamperBot.cares()

That leaves the final graphic: Information Wants to be Free
It would also be a white-on-green round sticker like the others. I am not sure how we would represent it visually. Maybe we would use a visual metaphor like breaking chains?

Or maybe we should go for a more typographic approach? Who's interested in taking a crack at this?

from assets.

Had a ype-o :{ and @hallaathrad I am not sure 💯

from assets.

@hallaathrad one reason we left the semicolon off of the data.open() was because that's also a Python command (by the way, Python doesn't use terminating semicolons - neither does Ruby).

So by leaving out the semicolon we actually make it look like syntactically correct Python and Ruby as well.

from assets.

Fair enough, we're appealing for polyglot inclusiveness.
That's a different argument. I'm still biased towards JS haha

Ruby hasn't exactly gained my respect yet. Too messy here at work.

from assets.

@Wes26 @kosta-xd @haydmills @hallaathrad We are very close to being able to launch the new sticker pack.

• design the "information wants to be free" sticker
• create a nice image of all 4 stickers on a laptop like this one:
  
• create a pull request with high res .png files and .svg files to the assets repo
• update the shop and actually print the stickers

from assets.

@QuincyLarson For sure this is something that should be addressed in near future. Especially since the design tasks are shared between different people. Primary Red (#FF4025) for example is out of printing gamut so it's up to individual how will they adapt this value to CMYK - this will inevitably lead to inconsistency.

That's why I suggest we stick with RGB just for now, it's not technically correct option (for printing) but at least it's consistent and that's fairly important when you need to create a pack like this one. No one will notice if that green is 100% the same one as in style guide or wherever but they will very much notice if each of the four stickers has even a slightly different hue.

from assets.

@Wes26 beautiful! I think we've got a winner!

from assets.

Hi Quincy,

I could assume that arching the name isn't strictly by style guidelines but just a thought of creative application. Colors are more-less default but a more subtle choice might produce interesting results.

from assets.

Hi Kosta,

Excellent! I can share this with our core team. Could you make a version that uses colors from the style guide as well? We don't want to break consistency unless we absolutely have to.

My other question - could you create a version that incorporates the bonfire function call logo instead of spelling out Free Code Camp? Possibly in the eye? I'm just curious what that would look like. You could make the bot's face itself look bigger in that situation.

As it is, the single eye with the rounded head evokes Minions:

from assets.

Yes, it's kinda difficult now to avoid Minions (or sometimes Monsters Inc!) comparisons when drawing one eye only.

The bonfire function might be quite small in that scenario (bare in mind the entire label is only 5cm across) but it's worth a try. Here's a modified draft for comparison.

If this looks promising, maybe I could also add a hint of 'ears' to the sides to further differentiate it.

from assets.

@kosta-xd Wow! You work fast! I agree - this is way too small. I appreciate you
trying it. Perhaps if we made the bot a shade of gray or just white (the
entire image would be white on green) that might look better. Could you try that real quick?

from assets.

Let's try these two. The grey doesn't really work on this dark (primary) green as it makes the entire image somewhat dull. White is of course better but I am also showing you yellow as it has great contrast and differentiates the text from the image and overall makes for an attractive little image.

from assets.

@kosta-xd The core team has a positive reaction so far (it's 1 a.m. in California so not very many of them are around right now).

I personally like how the white on green version looks.

Could you try changing two things real quick:

• Could you change the text to CamperBotCares to see what that would look like (it's 14 characters instead of 12 - curious whether it will fit)
• Could you try making the smile a bit bigger (not thicker - just longer)

from assets.

It fits alright!

from assets.

You're quick! I meant "CamperBotCares"

from assets.

Sorry, still in the process of waking up.

from assets.

@kosta-xd awesome! This looks great imho. I'm going to get this in front of as many people as possible and get feedback.

from assets.

@kosta-xd For the Open Data sticker - databases are typically represented with cylinders like this:

I was thinking that could be open somehow - maybe the top could be flipped open or something? Just an idea. Again, we don't have much space, and it needs to be unambiguous. See what you can come up with :)

from assets.

@QuincyLarson I'll see what I can do; I am not much of a classic illustration guy, though, so not sure if I could pull off the top suggestion as good. But it might be worth a try.

Hope I'll have some time during weekends to go back to this. Will let you know as soon as I have something.

from assets.

@kosta-xd regarding CamperBot, several core team members were curious what it would look like if CamperBot's hands were actually dashes and brackets, like this:
-----{ CamperBotCares }-------

Could you see how this looks?

from assets.

Not so bad, I'd say. I've corrected the parentheses angles as well as few other minor details.

If I may ask for one thing only - maybe take some time to gather feedback and discuss best options to try out, to keep revisions focused. There's a lot more to be done while there's only so much free time for each ;)

from assets.

@QuincyLarson I'll have a look at it next - would this theme be something we could reuse for the t-shirt, as well?

from assets.

@kosta-xd yes - absolutely. Basically, my plan is to create simple polls and say "would you buy this for $20" and if most people answer yes, we can print it as a shirt. We are concerned with making sure everything we make is high quality, of course, but we could have dozens of different shirts. The main constraint is designs :)

from assets.

@Wes26 wow - these look amazing! I've shared them with the core team.

from assets.

These are pretty sweet @Wes26 :)

from assets.

Vote 4

from assets.

Vote 6

from assets.

Vote 7

from assets.

The last ones were kind of small I was thinking a 3-4" Maybe Red on black. or Glossy Black on Matte black.

from assets.

@CarlJKashnier we did a poll on Twitter and 2" was by far the most popular size.

from assets.

@QuincyLarson Glad you like the the designs! They were really fun to create.

from assets.

@kosta-xd Thank you, I really like your designs as well. :)

from assets.

@QuincyLarson If would would like I could create something along the lines of the image below. I am out of OK for a few days so I will work on it when I get back to green country. 👍

from assets.

@Wes26 If you are able to take on that one, I'll stick with Open Data concept for the weekend ;)

Had a lot on my plate these days... along with lots of sticking points in JavaScript course on Codecademy :D

from assets.

@kosta-xd sounds great!. Also followed you on dribbble follow me as well. I really need to post more work on it. :)

from assets.

@kosta-xd this looks amazing! Excellent work. The o in open should be lowercase. I am sharing this with the core team.

from assets.

Such talent! I'm honestly jealous.
Great work, @kosta-xd

from assets.

Thank you guys! Sorry about the 'o' thing, that will be easy to fix, though.

from assets.

Hey @QuincyLarson sorry for the late reply!!! Here is the updated version of camperBotCares()

from assets.

Random unimportant question: are we removing the ; from the function calls now?

from assets.

@Wes26 awesome! This looks sharp.
@hallaathrad We've been removing the semicolon to make it look a little cleaner. What are your thoughts on this though?

@Wes26 could you add some little stars in the background like the ones on this:

You might be able to pull the camperbot head down a little bit to make more room for them.

Keep in mind - I am not a designer, so please don't let me talk you into making something you think is aesthetically unappealing 😄

from assets.

@QuincyLarson I was actually about to add some lol.

from assets.

Looks awesome! Little nitpick: Could you make more of them x's - there's only one x and like 8 +'s

By the way, we plan to replace our existing CamperBot avatar with this on Gitter, GitHub and our forum :)

from assets.

@Wes26 Also, I was wondering whether you had any ideas for our "Information wants to be free" sticker / t-shirt asset.

from assets.

I do have some....let me sketch some ideas and ill post some concepts shortly. How does this look? Also I am super excited about camper bot on gitter! Would you like a png version of camper bot and preferably what size?

from assets.

@QuincyLarson Not sure how removing the ; makes it cleaner, but it could just be me expecting it out of habit. And that is perhaps also the expectation for many other coders: In this instance, the semicolon of emphasises the fact that it's a function call.
It's much like ? at the end of a question... you can do without it in the right contexts, but it's somewhat an expected element, and adds clarity. I do not believe it should be removed for the sake of minimalism. That takes away from the "intension".
My 2¢.

The designs do look astounding! @Wes26
You're very talented indeed.

from assets.

@hallaathrad well, we didn't use a ; in Free Code Camp's logo :)

from assets.

True. But one could argue the "fire" icon is not valid as a parameter...
Also, in the logo, we see a nuance to hint at a function call; but it's not as obvious as data.open(); which could well be actual code.

I love the by itself. But it takes some insight to understand the logo is also meant as a function call. In fact, I hadn't realised until you mentioned it to me months ago.

Not suggesting we should change the logo. At all, just in case.

from assets.

Perfectly valid personal preference. Off with those ;!!

from assets.

@QuincyLarson Regarding the size of the avatars (CamperBot) do you have a personal preference? I think
150px X 150px is pretty standard and will work well across multiple applications.

from assets.

@Wes26 GitHub defaults to 400x400. I recommend going large, and we can scale down from there as necessary.

from assets.

OK great.. also do you want to keep the gray background or go transparent so it would just show the circle with no background color? -Thanks

from assets.

@Wes26 I'm not sure whether I understand you right. You mean like the white on gray images you used on #121 (comment)?

We're planning to use all white-on-green stickers for the sticker pack.

from assets.

This is with a transparent background. The only reason I put a gray background on the others was for the white strip around the green circle to be visible. Also do we have a set of dimensions for how thick the white strip around the green circle should be? (for consistency reasons)

** hope this makes sense.

Thanks!

Wes

from assets.

@Wes26 That thickness looks right. I'm not sure how much of a border @kosta-xd used but I think we should match that.

from assets.

@QuincyLarson given the photo I match the width of @kosta-xd's white strip so it should be good to go.

@kosta-xd Would you mind doing the mock up like you did with the data.open. I figured it would be more consistent with the overall look Instead of me trying to match yours. Do you have an email address I can email the file to you?

** Also would you like an .ai file or eps?

Thanks,

Wes

from assets.

@Wes26 .ai would be great, thanks! ;)

Could you send the file(s) over to [email protected], please?

@QuincyLarson it would be great if you could also dig up a svg (or any other vector type) of the original sticker and send it over to me so I can apply it to a mockup ;)

I might make a new one as I am not sure about the image licencing on this one, better to go for a 'generic' non-branded laptop, too.

from assets.

@kosta-xd Just sent you the file 👍

from assets.

@kosta-xd I agree - since many of these assets will be printed physically, we should have CMYK values if that is standard within the printing industry.

from assets.

@kosta-xd OK - I have requested that @haydmills transfer the style guide over to Free Code Camp's GitHub repository, at which point we will be able to add RGB and CMYK values as necessary. I don't think we need to wait for this, though, before continuing with the other steps.

from assets.

@Wes26 the .ai and eps files would be great to include in our repo, just in case. I recommend you create a pull request against this freecodecamp/assets repo. That way it will be clear from the log that you were the person who contributed these assets you've worked so hard on :)

from assets.

@QuincyLarson got the invite, thank you! If you want, I can do the color mode conversion for the listed hues. After we have those nailed down, I'll resend the design for Open Data sticker in CMYK vector format and new, correct color values.

from assets.

@kosta-xd yes - that would be great. You should now have access to the repo (https://github.com/FreeCodeCamp/design-style-guide). Please let me know if I can do anything to help.

@hallaathrad do you have the original files for the Free Code Camp logo sticker you made like 6 months ago? If so, can you share them here so @kosta-xd can normalize them with the other stickers?

from assets.

@QuincyLarson I will definitely need some help as I am a complete GitHub noob :) I can make out the page content from the html code but can't figure out if I can preview the style guide page "normally" in browser. I'll try and figure out things along the way, I can read the hex codes from index.html and that's good enough for me to work on conversions.

from assets.

@kosta-xd no problem. Let me know if you need any help and want to pair. Our top priority is creating the "stickers on a laptop" asset, as I can put that up in the shop and we can start collecting orders while the stickers are printing. I talked with @Wes26 earlier and he had a pretty cool-looking asset that we can use as our 4th sticker.

from assets.

I did the color conversions for primary palette. The original RGB/HEX hues are on the top and the optimized for CMYK are at the bottom - you'll notice a change in saturation, they generally feel slightly dull.

The biggest deal here is the main (dark) green. Automatic conversion from RGB creates a messy green tone that uses all four colors which in print looks even duller than it is supposed to. I've made a manual adjustment there to match it as best as I could, hope that will help. The rest was fairly straightforward.

And here are the stickers on a mockup. I've notified @Wes26 about adapting his sticker color and border and he also got the edited file back.

Again, I'll need the original sticker in whatever vector form available to edit that one as well.

This was the best open source stock image I could find, also I thought it's kinda neat that it does look "campy" :)

from assets.

@kosta-xd here are the files for the original sticker:
FCCround.sketch.zip

from assets.

@kosta-xd these look great! Since we are planning to sell all 4 as a pack, could we create an image with all 4 of them on the same laptop as well?

from assets.

@QuincyLarson Unfortunately, that's a Sketch file, a Mac-only design software which I cannot use :)

If there's anyone here with Sketch, could you please open the file and save it as anything Adobe compatible? EPS, AI...

As for the mockup, that wouldn't really work with this particular image, the angle of laptop lid requires too much distortion of sticker image so it's difficult to read (as you can already see on campBot example). The further I push stickers to the middle the more they will distort due to perspective.

What I could do is put all four in bottom right corner and indicate somehow that it's a part of that same sticker pack. You could then advertise it on four occasions each time with a different sticker in focus.

from assets.

By the way, I am not as much in love with this particular image as much as the options out there are extremely limited as far as free stock goes, there are surely a bunch of laptops but very rarely showing from the back :)

from assets.

Would this help? @kosta-xd
FCCround.pdf

from assets.

Very much, @hallaathrad , thanks!

from assets.

@kosta-xd excellent! I'm thrilled that you've been able to normalize these colors and get the old sticker design from @hallaathrad.

At this point, I am thinking we should actually offer the sticker pack completely separate from the old sticker. So @Wes26 is working on a final sticker design and once he has that ready, we can print it. I texted with him today and he said he is actively working on this :)

from assets.

New and improved lets pair sticker. Information wants to be free is on its way!

from assets.

Hahah, this is so awesome @Wes26 ! The second one is a riot! :D

from assets.

@kosta-xd Quincy thought it would be cool to play off the original "You Son of a bitch", so he came up with what you see above. Overall its really cool.

from assets.

@Wes26 OK - so I tweeted it out: https://twitter.com/ossia/status/777926815704715264

Based on the rather mild reaction, I think we should go with @Wes26's "Let's pair it up!" wording instead, except I think it should say "Let's pair on it!" (which is a much more common expression at least here in San Francisco.

Also, if possible, the arms should be slightly larger not more muscular - just scaled to be more prominent.

from assets.

Updated.....

from assets.

@kosta-xd is it possible to reposition the laptop or sticker? #121 (comment)

The reason I ask is when the laptop is open, the sticker would be upside down. Most people put stickers on their laptops in a way that they'll be right-side up when the laptop is open.

from assets.

@QuincyLarson I did have that in mind, figured it's better to show the sticker facing the audience at the expense of realism. But sure, I can turn them upside down.

from assets.

@kosta-xd could you find an image of a laptop facing the other direction? That way we could have both realism and a good shot of the sticker :)

from assets.

@QuincyLarson As said earlier, I couldn't find one with proper copyright clearance at least ;) I can use the earlier one if you're not afraid of Apple :D

from assets.

Good day everyone! So I have been working on the 'information wants to be free' design and I have almost completed a few different designs. I really wanted to nail this one, so I looked into some alternative ways information could in fact 'want to be free'. This is an idea that is really complex.....and what I found to be a good representation of this is a thing called "mesh networking". People around the world that do not have access to the internet build diy mesh networking towers in order to access the internet on their computers and cellphones as well if I read correctly..(I am no way in any form a networking guru)... an example of this is in the picture below. If I have this completely wrong please let me know :). The Free Network Foundation is
currently working on a 'Freedom tower'. picture provided below of 'freedom tower'.

"Free Network Foundation introduction"
Here is a video of them explaining more about it here https://www.youtube.com/watch?v=YQTtRBtTZ3I

"Freedom Tower"

Article on Freedom Towers
https://commons.thefnf.org/index.php/FreedomTower

video
http://motherboard.vice.com/read/motherboard-tv-free-the-network

Another Example of a mesh network tower in a rural area

Photo in Article

Article
https://commotionwireless.net/blog/2013/12/12/building-mesh-network-rural-somaliland/

Design 1

Ok, so this is a long post.... anyways this is one of the designs I came up with and will post the other one soon.

from assets.

@kosta-xd Here are a ton of creative commons licensed images of laptops: https://www.pexels.com/search/laptop/

Here's one that jumped out to me:

https://www.pexels.com/photo/cafe-coffee-macbook-apple-26806/

Here's another, simpler one:

https://www.pexels.com/photo/silver-imac-30210/

from assets.

@Wes26 that's a cool concept. It looks like you've been doing a lot of conceptual research. Mesh networks - very cool concept!

My suggestion would be to remove the 1984, remove the exclamation point, and to make the text so it can easily be read right-side up (still circling the sticker):
"Information" along the top
(image)
"wants to be free" along the bottom

Could you create a version that looks like this?

from assets.

@QuincyLarson Let me see what I can do and I'll post shortly.

from assets.

@QuincyLarson this seems like a nifty site (stock aggregator?), thanks!

To make it easier and clear for all four stickers at once, would this one also work for you?
https://www.pexels.com/photo/apple-computer-desk-device-159886/

from assets.

@kosta-xd yes, this is a creative commons stock photo search engine. And yes, that stock photo you chose looks like it will work well.

And there's space along the bottom where you could feature each of the stickers.

from assets.