I’ve been wanting to directly get involved with an open source project for a while now.
Recently I’ve been working on this ticket for the atomic project. I admit to not fully comprehending what the project itself does (beyond being related to managing containers). As with most things free and open source-related: just because I don’t know exactly what it is doesn’t mean I’m not benefiting from it in some way.
My first attempt is the following beaker:
There are lots of issues here. Mostly, I failed to follow any of the stylistic norms used for badges (because I was legitimately unaware of them). Otherwise, it’s a nice enough beaker. The background in this (and the next) is a nearly illegible grid of the Atomic logo, which I like very much but it proves impractical for the purpose of badges as they’re displayed at small sizes. This would eventually find it’s way out of the design. Thanks to riecatnor for beginning the feedback:
Hey! great start :)
The concept works, the artwork just needs a little work to meet the badge guidelines. Make your beaker a bit more stylized. Take out the bubbles, and little lines. Make the stroke thicker, at least 1.5 but probably closer to 3. Examples: http://www.clipartbest.com/cliparts/di7/o86/di7o86MkT.svg http://www.clipartbest.com/cliparts/MTL/RKr/MTLRKrGTa.png
Try making the bottom of the beaker a little bit less wide, so you can center it more.
New beaker. Thicker lines. Better centered. This is not thrilling (and I like it less), but the design is better from a will display at small sizes standpoint. duffy hit on some of the more important thigs with the following:
Hi Kyle! A few more tweaks for the artwork:
The badge shape isn’t really square so when you center stuff in it, you kind of gotta nudge it down a bit and left a bit so it looks “centered.” Might want to try that with the beaker?
Is the background supposed to be clouds? It didn’t read to me and from the backlog it looks like that was the intention? I like the idea of the beaker in the clouds or spouting clouds but I think they should probably be drawn and in the foreground.
I would make the atomic logo bigger - scale down the measurement hashes on the right and scale the logo up as much as you can. The badges are often displayed at half the size and I’m worried the logo won’t read at all at 50% (and it being an atomic badge I think we want the logo to be the main element that stands out.)
Might want to go with a flat grey (or even dark grey) gradient in the background - go darker and then the clouds you add will pop more?
Just some ideas.
Good ideas all.
- I needed to center within the odd shape.
- I should get back to clouds.
- The logo matters (especially at small sizes).
- Make it pop.
It’s at this point that I play with these elements and directives.
I quickly realized that “beaker” and “clouds” and “logo” was a lot to ask for a small badge. Also, cloud was just better as a metaphor for the Atomic team’s work, and it provided the opportunity to enlarge the atomic logo. Of this set, the following is my favorite iteration by far.
The arrows feel right. They take care of some negative space issues, provide movement and pop, and feel positive. duffy, again, provides useful feedback:
Hey Kyle!
So in terms of what most closely matches the badge style, the second and third from the left do. But I do like your favorite, just a few more small tweaks I think to get it to match the style:
The thick outlines around objects is sort of a hallmark of the fedora badges style. What I’d suggest is a thick white gray outline around the cloud, and have the dashed outline on top (and thicken it so it’s the same thickness) so you get the idea of it being dashed without losing the badge style.
I think the lines of the arrows should be thicker.
The negative space on the bottom right is a little off… i think the arrow head placement of the bottom center arrow might be a bit off too. What i’d suggest is swapping the bottom center and bottom right arrows, and maybe adding some more (could be at 50% transparency so they drop to the background) in that lower right area so the negative space doesn’t seem to be a big hole.
I would push the cloud down a little bit and scale it and the atomic logo up as much as possible while maintaining space for the arrows. (this is the same concern about the atomic logo being readable.)
You might want to up the contrast between the cloud white and the grey background. Just a smidge. They are a little too low contrast right now adn i’m worried at smaller sizes it’ll just all look the same gray.
Hope this helps!
So:
- Use badge style (i.e. Use thicker outlines)
- Center and Balance elements
- The logo matters (i.e. bigger, center)
- More contrast (for small sizes)
That led to the following (I don’t like this one).
Thankfully, mleonova had some helpful comments:
Hi Kyle!
This looks pretty good! I like the upward and forward movement the artwork projects. We reviewed your design in the badges meeting today and came up with a couple suggestions:
- there seems to be no need for transparencies. How would you feel about getting rid of them?
- the dark grey bg is not something we have in our badges guidelines. Riecatnor and I suggest blue - it makes sense for a cloud to be in the sky, doesn’t it?
- what is the black dotted outline? Does it stand for something?
Thanks! Would love to see those changes made!
I’m still waiting for feedback, but I actually like this one.