Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Branding / Logotype #92

Closed
bryanveloso opened this issue Jan 3, 2014 · 37 comments
Closed

Branding / Logotype #92

bryanveloso opened this issue Jan 3, 2014 · 37 comments
Labels
frontend The Docusaurus app serving the docs site
Milestone

Comments

@bryanveloso
Copy link

Recruitment Pitch

design | needed

The following was written by @whit537, not @bryanveloso.

Shields is an effort to standardize metadata badges across open-source projects. See the README for an overview. From a technical standpoint, we have a number of implementations that are now collected under the badges GitHub organization, and we're hashing out how to proceed.

On this ticket we are working on the brand identity for Shields (and trying to figure out how open-source design is supposed to work 🐑). Our proposed process is:

  1. Get a bunch of mocks on the table.
  2. Discuss mocks in light of our project definition.
  3. Select a single design direction.
  4. Iterate from there to completion.

If you'd like to participate, please post mocks as inline images in comments to this ticket.

Thanks! :-)


Original Description

from @bryanveloso

Took a shot at this. A bit abstract, but I believe it gets the point across:

shields

@ghost ghost assigned bryanveloso Jan 3, 2014
@chadwhitacre
Copy link
Contributor

"Oh God, yes." That's the first thing I said when I saw that you had stepped forward with this (notification email).

Doesn't grab me. The typography feels perfunctory. What is the logo doing? "Maze." What does it look like as a favicon? I'm trying to relate to it in terms of closed spaces and open. Fundamentally open, but with the NW and SE quadrants closed(?). I'm looking for multiple disjoint services brought together under a harmonious singular presentation. I'm seeing the multiplicity in the three x two sections; struggling with the whole. The two middle third sections pop for me. I see a rotated parallelism between left and right, black and green.

^^^ Impressions (under the influence of the Gittip retreat).

Happy to sit with this and revisit for a second impression.

@nathany
Copy link
Contributor

nathany commented Jan 4, 2014

I think it looks pretty cool, but then there's all that meaning stuff. Perhaps it can be simplified?

@chadwhitacre
Copy link
Contributor

simplified

In a word.

@bryanveloso
Copy link
Author

Second impression would be nice. I must admit that it started out simple and went more complex, so I'll see what I can do there.

@olivierlacan
Copy link
Member

Considering the word "Shields" is inspired by the The Shield, I enjoyed the similarlity:
image

That said it doesn't seem to help understand the purpose of this project.

It feels like this abstract logo is begging to incorporate a stylized version of a shield badge, right in the middle of the logo itself.

I don't think the mark should include ".IO". That doesn't seem relevant.

Thanks a lot for your work @bryanveloso. 😃

@nathany
Copy link
Contributor

nathany commented Jan 4, 2014

What are the themes that our branding could convey?

Stability? Consistency? Informative?

@bryanveloso
Copy link
Author

It feels like this abstract logo is begging to incorporate a stylized version of a shield badge, right in the middle of the logo itself.

Yep, that.

Feel free to talk about the themes and I'll go from there.

@chadwhitacre
Copy link
Contributor

Considering the word "Shields" is inspired by The Shield, I enjoyed the similarity:

Hah! That helps me relate, I didn't know that. :-)

What are the themes that our branding could convey?

On our last call, we identified our mission as "to provide user-friendly metadata about open-source projects." What I hear @olivierlacan saying as I review that call is that we want users to quickly grok the status of a project: "Oh! I understand, this is good quality ... this is poor quality." That seems to reinforce "simplicity," and also to suggest "quality."

Shields is a quick glance, not a deep dive. And yet we're pervasive: part of the value is that we look the same everywhere. The more projects that use Shields badges, the more we all become habituated to them, and the more value there is in other services also using Shields badges (so there is, in fact, a network effect at play here).

@chadwhitacre
Copy link
Contributor

@bryanveloso On the logo, I do think it could be simpler. On the wordmark, I want to back off my "perfunctory" adjective. Especially if we drop the ".io" and with #92 (comment), I can feel good about the heavy all-caps. I feel like I was too harsh, sorry. 😞

!m @bryanveloso

@cummingsrob
Copy link

Commenting to attach myself to this effort. I would love to see a narrative or program of requirements before we throw out sketches. It doesn't have to be complicated, just what we're out to convey...

Simplicity
Quality
...?

@nathany
Copy link
Contributor

nathany commented Jan 8, 2014

“A legible & concise status badge solution for third-party codebase services.”

@chadwhitacre
Copy link
Contributor

@alrra had started on visual design for gh-badges (cf. #94), and I've invited him here.

@nathany
Copy link
Contributor

nathany commented Jan 8, 2014

In addition to the website and favicons, etc., the logo designed here could be our new Gravatar at: https://github.com/badges

@ackerdev
Copy link

ackerdev commented Jan 8, 2014

I like the general shape of the shield but I agree that the "maze" look to it is strange. I also don't feel like the font and shield style really work well together. I'd definitely drop the .IO, try something else for the inside styling of the shield, and possibly pick a font that suits that styling.

@bryanveloso
Copy link
Author

I believe the point's been made about the current design not working. Please place the focus on the narrative. I'm honestly also getting concerned about a design-by-committee situation happening around this.

@olivierlacan
Copy link
Member

@bryanveloso Agreed. That said, in this open forum you're bound to receive more feedback than necessary. Ultimately it's up to you to decide if that makes sense with the goals we've established.

If the goals aren't clear enough, we can improve the specification document and we can refine the story of Shields.

@bryanveloso
Copy link
Author

@olivierlacan — This arena is definitely a different animal. Improving that document will serve best for the cause. The better the story, the better I can work around it.

@chadwhitacre
Copy link
Contributor

Open collaboration on a visual design is a new experience for me. Has anyone done this before? How do we make this a fun and productive experience for everyone and avoid design-by-committee?

One idea I'm having is that it might help to have an abundance of sketches at this stage. On the technical side of Shields, we now have a super-abundance of implementations:

screen shot 2014-01-08 at 4 17 08 pm

Yes, this is chaotic and somewhat wasteful of effort, but I think that might simply be how open collaboration works. We're moving forward much faster these past couple days on the technical side, because we have so many options on the table and people invested in working together to evaluate the options and find the best solution together.

Perhaps a similar process would help on the design side? If we had half a dozen design sketches on the table from different people, I think we could have a much more productive conversation at this stage than simply all of us ganging up on @bryanveloso, which is what it feels like to me right now.

@alrra Want to give us a sketch? Any other takers? :-)

@cummingsrob
Copy link

I'm interested in submitting. I just need to get around to actually
producing something... ;-)

On Wed, Jan 8, 2014 at 4:23 PM, Chad Whitacre [email protected]:

Open collaboration on a visual design is a new experience for me. Has
anyone done this before? How do we make this a fun and productive
experience for everyone and avoid design-by-committee?

One idea I'm having is that it might help to have an abundance of sketches
at this stage. On the technical side of Shields, we now have a
super-abundance of implementations:

[image: screen shot 2014-01-08 at 4 17 08 pm]https://f.cloud.github.com/assets/134455/1872672/433f977e-78aa-11e3-92ee-89a4b9883a28.png

Yes, this is chaotic and somewhat wasteful of effort, but I think that
might simply be how open collaboration works. We're moving forward much
faster these past couple days on the technical side, because we have so
many options on the table and people invested in working together to
evaluate the options and find the best solution together.

Perhaps a similar process would help on the design side? If we had half a
dozen design sketches on the table from different people, I think we could
have a much more productive conversation at this stage than simply all of
us ganging up on @bryanveloso https://github.com/bryanveloso, which is
what it feels like to me right now.

@alrra https://github.com/alrra Want to give us a sketch? Any other
takers? :-)


Reply to this email directly or view it on GitHubhttps://github.com//issues/92#issuecomment-31879349
.

@chadwhitacre
Copy link
Contributor

Okay, I've reworked the description for this ticket and have put out a call on Twitter. Please RT? :-)

@robwierzbowski
Copy link

Your branding should be just like a badge, with the left side saying "shields" and the right saying "io". A special color for the right side could make it distinguishable from production badges.

Simple, concise, easy to update/keep in line without a designer because it's the same process/base styling as the badges.

An alternate would be a line work badge, no shading, single color. E.g. Blue text in the arrangement described above, but instead of a three dimensional background there is a simple outline of the badge and a line at the color break point.

Sorry no mocks, sent from my phone.

@chadwhitacre
Copy link
Contributor

Reworked the description further, into a "Recruitment Pitch" (tried to make it clear that it wasn't @bryanveloso speaking), and seeded Twitter (one, two).

@chadwhitacre
Copy link
Contributor

@robwierzbowski Paste a mock when you get home! :D

@chadwhitacre
Copy link
Contributor

You too, @cummingsrob! :-)

@timoxley
Copy link

timoxley commented Jan 9, 2014

@robwierzbowski +1

@ctrlaltjustine
Copy link

Someone said they needed design help?

@robwierzbowski
Copy link

I'll mock something up this weekend. Or @timoxley, if you want to run with it, please do.

@nathany
Copy link
Contributor

nathany commented Jan 9, 2014

A logo competition? 😄

@robwierzbowski
Copy link

:). Probably a better idea to identify good ideas, prototype, choose
direction, and iterate.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

On Thu, Jan 9, 2014 at 11:50 AM, Nathan Youngman
[email protected]:

A logo competition?


Reply to this email directly or view it on GitHubhttps://github.com//issues/92#issuecomment-31952017
.

@chadwhitacre
Copy link
Contributor

@saltinejustine Thanks for stopping by! :-) In general, we're trying to figure out how open design works. Specifically here we're looking for design sketches and ideas and brainstorms for the http://shields.io/ brand. See the README for general background.

@chadwhitacre
Copy link
Contributor

Probably a better idea to identify good ideas, prototype, choose direction, and iterate.

Agreed. "Competition" suggests itself, but probably isn't the best framing. Logo party? :-)

@chadwhitacre chadwhitacre mentioned this issue Jan 10, 2014
@chadwhitacre
Copy link
Contributor

Entries from an anonymous admirer:

shieldsio_dnd

shieldsio_minwext

@espadrine
Copy link
Member

Here's an entry I made.

Shields IO

Some relevant points:

  • It is SVG → flexible size, easy to hack
  • It uses Open Sans as a reminder of the font that badges used
  • The shape of the logo is made to look like a badge

Full disclosure, I was strongly inspired from the work of the anonymous admirer, and it shows.

@chadwhitacre
Copy link
Contributor

Had a convo about this thread w/ @bryanveloso on Twitter. I think we're thinking that this thread should be mothballed, and the matter taken up either in a new issue or on Dribbble.

@olivierlacan
Copy link
Member

Funny enough this design has never matched better than now:

@olivierlacan
Copy link
Member

@bryanveloso Did you keep the source files around for this?

@paulmelnikow paulmelnikow added frontend The Docusaurus app serving the docs site and removed website labels Apr 17, 2017
@paulmelnikow
Copy link
Member

@bryanveloso If you've got these files around, hit me up!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend The Docusaurus app serving the docs site
Projects
None yet
Development

No branches or pull requests