secret
Last active

Bower logo

  • Download Gist
bower-logo.md
Markdown

In addition to awesome docs #228, Bower deserves a proper logo. See below for sketches. I'm curious if you think any of these are worth me putting more effort into.


Take a look at Yeoman right now.

Screen Shot 2013-02-19 at 4 43 10 PM

The other two entities have awesome logos. Bower's got to represent.

Background

@fat introduced me to Bower by showing me this video: The Vogelkop Bowerbird: Nature's Great Seducer. Bower gets its name from the Bower bird, a line of birds who build structures to seduce their mates. As you'll see in the video, the Vogelkop is the most creative in its collection of treasures. It will stash leaves, bottle caps, berries, dung balls, mushroom heads, etc. This is essentially what Bower the project does - putting together a treasure trove of lots of goodies.

The Vogelkop is the best collector bowerbird, but for visuals, I've been drawing the Flame Bowerbird, with its striking red/yellow/green plumage.

Dancers on Fire

YouTube has a whole Smithsonian show just on the Flame Bowerbird Dancers on Fire. Watch 26:33 for a male in 'full twerk', seducing a female. He's presenting a blue leaf, and doing this one-wing swivel move.

Mood

I see Bower as approachable and practical. It works as a lil' helper. It's friendly.

Sketches

Studying the flame bowerbird.

bower sketch

bower sketch

bower sketch

Illustration

bower sketch

bower sketch

Bower sketch

bower sketch

The good ones

Mascot

good bower sketch

This is more of a traditional mascot. That's a blue leaf in its beak. It's doing the seduction twerk.

Geometric B

geometric bower

Geometric representation of a flame bower bird. It's cute cause it's a B. It's simple so it can be reduced to tiny sizes like avatars and favicons. With that B shape, we could do stuff like

bower with a bird b


2nd revisions

Tuesday, March 19, 2013

When we last left off 3 weeks ago, I started taking the Mascot illustration into Illustrator. Here's where that ended up:

bower illustrator

After speaking with a colleague, we concurred it wasn't quite it. While it was certainly a cute bird, there was too much detail and the feet were weird. Ideally, this logo should be the sort of imagery that you can slap on your laptop. It should fit right in there between an Octocat and the Twitter logo.

So I went back to paper, with the task of simplifying the forms.

bower revision 1

Feet removed. Wing detail simplified.

bower revision 2

Extending the body. Giving the torso more shape so it feels like the bird is swiveling around. The head is elevated above the body for more distinct silhouette.

But still, there's something missing from the above illustration. Per Erin, it feels 'embryonic'. Showing the other wing tip might resolve this.

I'm feeling pretty good with the way things are heading. We'll have a logo soon enough.


Vectoring simplified sketch

Bower working vector logo

Here's where I've taken it. This is working for me. But it's not quite 100% perfect

@isaacdurazo was awesome enough to reach out and offer his superb illustration skills. He'll be seeing the logo through to the finish. I'm really looking forward to what he comes up with.

Finalizing

Isaac @ Bocoup collaborated in finishing the logo. Here's where we landed. This image illustrates all the iterations and small tweaks that come with designing a logo mark.

Bower logo iterations

Isaac did a great job of unifying the colors and simplifying the forms. I brought Isaac's contributions into the previous stroked treatment.

It looks rad.

Bower

As a bonus, I've cleaned up all the control points in the illustrator file. In SVG, this illustration is 5KB.

bower-logo.svg
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<g id="leaf">
<path fill="#00ACEE" d="M434.625,63.496c-67.822,0-118.399,71.68-95.018,123.167C435.596,186.664,396.518,98.058,434.625,63.496z"
/>
</g>
<path id="body" fill="#FFCC2F" d="M456.534,256.992c0-22.79-108.627-34.129-169.139-37.663
c-60.511-3.533-281.592,38.389-255.42,93.813c26.173,55.426,92.581,114.358,167.313,114.358c38.716,0,83.584-27.284,86.053-77.38
C330.121,335.163,456.534,334.371,456.534,256.992z"/>
<path id="wing_tip" fill="#2BAF2B" d="M400.981,272.143c7.02,7.104-15.222,26.295-34.606,17.262
c8.731,19.688-29.676,36.064-48.336,22.026c1.998,15.865-36.122,24.996-48.285,7.292c3.136,8.441,5.757,14.898,8.229,20.209
c-0.029-0.09-0.046-0.149-0.046-0.149c6.324,8.279,14.929,14.939,52.394,14.939c57.727,0,150.97-43.849,150.97-76.039
c0-26.643-9.992-29.14-27.196-27.198c-17.208,1.942-107.17,11.291-126.306,7.534C338.182,260.229,390.54,270.259,400.981,272.143z"
/>
<path id="head" fill="#EF5734" d="M198.51,48.82c-110.382,0-221.179,109.721-168.451,261.056
c35.817,21.53,83.576,12.995,94.278,1.532c16.178,5.171,30.612,7.347,43.513,7.347c67.047,0,124.34-71.235,124.34-160.257
C292.189,67.196,231.93,48.82,198.51,48.82z"/>
<path id="eye_rim" fill="#FFCC2F" d="M153.308,146.522c0,24.632,19.969,44.603,44.603,44.603c24.633,0,44.603-19.971,44.603-44.603
c0-24.633-19.97-44.603-44.603-44.603C173.277,101.92,153.308,121.89,153.308,146.522z"/>
<path id="eye" fill="#543729" d="M171.207,146.522c0,14.747,11.956,26.704,26.704,26.704c14.748,0,26.703-11.957,26.703-26.704
c0-14.748-11.955-26.704-26.703-26.704C183.163,119.819,171.207,131.774,171.207,146.522z"/>
<ellipse id="pupil_highlight" fill="#FFFFFF" cx="197.91" cy="134.674" rx="15.56" ry="9.675"/>
<path id="beak" fill="#CECECE" d="M289.401,123.675c-20.275,11.807-19.604,50.03-10.595,68.681
c17.445-6.466,41.752-19.291,45.527-21.585c3.773-2.293-2.088-10.989,12.559-10.989c20.315,0,38.684,6.348,43.956,8.634
C377.511,161.547,335.758,123.675,289.401,123.675z"/>
<path id="outline" fill="#543729" d="M502.214,250.797c-26.335-25.305-158.017-41.1-199.568-45.698
c2.014-4.754,3.726-9.669,5.142-14.731c5.665-2.481,11.776-4.789,18.101-6.716c0.77,2.272,4.397,10.98,6.465,15.112
c83.553,2.305,87.844-62.09,91.24-79.732c3.323-17.25,3.154-33.917,31.812-64.388C412.709,42.201,351.31,73.928,330.742,121.15
c-7.728-2.896-15.474-5.035-23.136-6.357c-5.488-22.146-34.077-83.845-109.097-83.845c-48.585,0-97.581,20.063-134.421,55.045
c-19.852,18.85-35.445,41.234-46.344,66.53C5.97,179.851,0,209.94,0,241.957C0,353.462,76.126,451.18,119.139,451.18
c18.784,0,34.943-14.067,38.736-26.675c3.181,8.645,12.938,35.522,16.142,42.364c4.737,10.117,26.642,18.872,36.229,8.373
c12.326,6.849,34.943,10.973,47.27-7.289c23.739,5.022,44.728-9.135,45.184-26.026c11.649-0.622,17.363-16.978,14.819-30.001
c-1.875-9.591-21.904-44-29.719-55.877c15.468,12.58,54.644,16.142,59.401,0.008c24.936,19.571,63.797,9.301,66.879-6.619
c30.301,7.874,65.054-9.417,59.348-30.359C522.102,315.711,515.872,263.921,502.214,250.797z M375.456,164.958
c-12.821-5.033-29.084-8.217-40.482-8.217c-16.164,0-26.009,9.16-41.218,9.16c-3.193,0-10.812,0.016-16.926-2.162
c4.021,4.217,9.025,6.505,18.725,6.505c5.793,0,17.263-2.958,26.553-5.752c0.129,1.956,0.334,3.898,0.61,5.826
c-17.402,4.161-35.664,15.231-40.949,18.105c-11.755-25.958-1.65-50.505,7.697-61.837
C331.331,126.686,365.144,155.433,375.456,164.958z M393.557,163.001l-6.406-5.979c-6.575-6.159-13.43-11.731-20.469-16.678
c10.483-20.801,23.658-43.514,40.298-57.565c-18.314,7.381-36.397,29.445-47.089,53.03c-5.448-3.464-10.98-6.554-16.561-9.255
c14.913-31.834,49.568-58.42,87.762-60.497C405.509,89.257,415.114,135.563,393.557,163.001z M341.006,184.7
c-2.821-6.114-5.677-16.27-5.328-22.239c4.753-0.112,13.868,1.67,15.335,2.016c-0.557,2.803-0.855,8.944-0.866,9.739
c0.903-1.556,3.41-6.922,4.43-9.029c9.127,1.744,21.126,4.659,28.161,7.938C374.478,178.473,360.439,184.293,341.006,184.7z
M283.971,112.911c-33.381,33.832-20.199,76.63-8.046,95.976c-17.29,28.761-51.28,48.437-90.765,57.389
c44.328,0,70.397-11.409,85.563-22.586c9.677-7.131,14.928-14.17,17.608-18.088c65.72,4.251,169.783,25.423,179.935,32.281
c4.074,2.753,8.278,8.842,8.895,14.668c-49.387-6.914-138.407-14.188-161.719-15.424c16.549,2.347,137.241,25.202,158.163,30.552
c-6.368,10.384-20.872,17.715-42.733,12.621c11.812,16.093-11.125,35.399-43.071,24.766c7.032,15.799-21.413,30.021-53.741,13.555
c0.411,15.805-40.105,17.626-56.123,0.162c0.306,2.082,2.207,6.066,3.028,7.809c-5.162,46.15-42.961,74.783-81.677,74.783
c-94.794,0-177.375-76.989-177.375-179.417c0-108.292,80.03-189.096,176.597-189.096
C253.842,52.861,278.836,96.412,283.971,112.911z"/>
</g>
</svg>

<3 this logo. It's so desandro!

Hi Desandro I like the direction this is taking but I think the graphic element should be separate from the name. I was responsible for the Grunt logo and would love to help you work on the Bower branding

It's looking good :)

I like the mascotte with the blue leaf (of Twitter bird i think?), but i am not a big fan of the geometric representation.

I really like the Mascot with the seductive twerk

+1 for the mascot with the blue leaf. I found the other one too geometric.

Oh hi. I really like the geometric ones, but agree with @isaacdurazo that the graphic element should be separate from the name.

I like the "B" one as a logo (square is good), but I agree that it maybe looks too much like a "P" when presented with a yellow wing. What does it it look like with a green wing next to "OWER"?

Very nice, well done.

Love this, you're right about the wing. Maybe you can just use a small line on the left side that suggests the other wing?

I really like the revision from March 19th. Nice work, sir!

What, you don't like Copperplate? :)

I love the direction. Are you going to try and mimic any of the geometric symmetry from Twitter logo? http://www.underconsideration.com/brandnew/archives/twitter_gives_you_the_bird.php

What's the rationale for the geometric theme? This isn't resonating with the name "Bower" for me, or the homage to Twitter's bird. Though, anything is better than Copperplate. Not to be "that guy" but I'd love another direction to choose from. :)

Perhaps the Bowerbird could have a rakishly cocked eyebrow? It's trying to seduce us, after all.

Also: I like the possible implication that the Bowerbird has killed the Twitter bird to procure that blue feather.

@neagle It's a blue leaf. The bowerbird is a lover, not a fighter!

<armchair graphic designer>

I wonder if the two lines-of-sight created by the head/leaf and wing pointing in different directions could be improved by having them converge?

Something like this: http://o.aolcdn.com/hss/storage/fss/7bb4504adaa5125852048648b6ead10f/bower-wing-curl.jpg (excuse the Photoshop hatchet job)

</armchair graphic designer>

Thanks for the feedback!

Re: aligning with Twitter branding - That thing in the bird's mouth is a leaf, not a feather. If you watch videos about bower birds, they tend to present blue leaves. I realize the shape is very feather-y, right now, I need to make it more leaf-y.

The leaf will be Twitter Blue, but that's about it for aligning it with Twitter branding. The Twitter brand guidelines encourage other brands to use their own unique branding. Even though this project very much a part of Twitter, we like to keep our branding just for Twitter. I'm already stepping close by using a bird with one wing.

@artzstudio the rationale for the geometric illustration was to do something different than another friggin bird. At Twitter, everything is a bird.

@neagle Oh man, that cocked eyebrow may actually make it in. Good one.

Heading in a good direction. Simplify (some more), IMO! We should see how this works at smaller sizes too. Keep up the great work Dave!

I really like the direction this is going.

Nice work Dave!

Looking great Dave — is there a word mark also?

Logotype will be the next thing. I'll be attacking that along with the docs redesign

Love the logo. Thanks for taking the time to document your process, it's very helpful!

Looks great! Funny, when it popped up in my twitterfeed, I also thought the Bowerbird had eaten the Twitter-bird...

Also, I love the "BOWER" type, but I think the 'B' looks messy. It's neither a bird or a 'B'. Great work overall, though.

@desandro It looks so good. Great work on it!

great work! :+1:
thanx for sharing the SVG

David, I enjoyed seeing the creative process, and learning about the story behind the logo. I think extending the body, simplifying the design, and saturating the color, made a big difference! Credit to @isaacdurazo also, I was not aware that it was a blue leaf the bower bird is holding. I always thought it was a feather too, and maybe there was some connection with Twitter, now I know! Thanks for sharing, and keep up the great work!

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.