search

ffoodd / a11y.css

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
https://ffoodd.github.io/a11y.css
MIT License
1.48k stars 92 forks source link

Design a logo + styleguide for the project #163

Closed ffoodd closed 8 years ago

ffoodd commented 9 years ago

Could be useful To themify Hologram + Sassdoc and to enhance the incoming twitter account.

ffoodd commented 8 years ago

First drafts for logo, any thoughts? I'm having fun but I'm not so good at designing a logo… draft-1 draft-2

christophermh44 commented 8 years ago

Prefered one: the red filled square :)

Heydon commented 8 years ago

I like the red triangular one!

On Mon, Jan 11, 2016 at 1:02 PM, Gaël Poupard notifications@github.com wrote:

First drafts for logo, any thoughts? I'm having fun but I'm not so good at designing a logo… [image: draft-1] https://cloud.githubusercontent.com/assets/2890570/12234243/d4c820aa-b86b-11e5-93b2-88810cc2ca16.png [image: draft-2] https://cloud.githubusercontent.com/assets/2890570/12234242/d4c5f596-b86b-11e5-8847-17d16094c2fc.png

— Reply to this email directly or view it on GitHub https://github.com/ffoodd/a11y.css/issues/163#issuecomment-170542330.

kaishin commented 8 years ago

Hi, I got sent here by @HugoGiraudel from twitter.

I like that this is being tackled in the open. Props!

I would probably leave color for later initially, since it will make it hard to look at the shapes and their qualities and flaws.

Color aside, the triangular shapes were a bit hard for me to understand, especially the filled ones where the triangle is cut off at the top. The rounded square (filled) looks more solid.

For the comic style eyes, I am not too sure about how obvious they are. Did you try something symmetrical? It could be worth it to experiment with reducing details and cleaning up the lines to make the artwork more obvious.

Overall good start!

ffoodd commented 8 years ago

Thanks everyone! Almost every advices are going to the red filled tries, so it'll probably be that kind of style.

@kaishin I'll try to make it cleaner and to work without colors. For now there's only @Heydon who preferred the triangle (sorry dude :D), so I'll go with rounded square. I didn't try symmetrical, I will.

The idea was to get a strong character; but I probably went too fast to the drawing :)

If you (anyone) have an idea or a recommendation, please comment :)

JulienGremillot commented 8 years ago

I'm joining the supporters of the red filled square !

ffoodd commented 8 years ago

New try, symmetrical things, straight font and in black to start: capture d ecran 2016-01-11 a 17 19 14

Two fonts tried, Fira Sans and Chalkboard. Very funny to see how much a font gives a personality to an emoji like this :)

kaishin commented 8 years ago

I think ideally the ultimate decision should be up to @ffoodd ;) Open design != Design by committee.

The rounded square with round line caps looks very clean! It'd be nice to try some colors on it and see which one make most sense for the project. Since it's about warnings yellow/orange/red are all good candidates.

It's probably worth trying the symmetry/line caps with a triangle as well. Just to give some context on how the design evolved.

ffoodd commented 8 years ago

A few more tries. The last four on bottom right are using a11y.css' messages' theme. I'm not satisfied from those tests, I'll keep going :)

Any thought welcome, as usual—and thanks @kaishin for your advices ;)

a11y-0

ffoodd commented 8 years ago

I do prefer those two: a11y 2

GaetanBt commented 8 years ago

And what about those two and the last two from your previous message with the non-symmetrical thing ?

kaishin commented 8 years ago

@ffoodd Nice choice! I liked the filled ones in general, especially those with lower contrast like the yellow one.

kaishin commented 8 years ago

By liked I mean, they look less urgent.

ffoodd commented 8 years ago

Indeed, already heard that both red color(s) and borders are way too stressful.

I think yellow or orange filled square, without borders, are for now the best choices. Green or blue ones seems conflicting the idea of warning and test.

ffoodd commented 8 years ago

Today's tries: a11y 3

Nothing sure, just exploring emojis styles.

ffoodd commented 8 years ago

I'm going with this: a11y-css

I'll need to explore a few color schemes before using it, but it begins to look good. As usual, comments are welcome :)

ffoodd commented 8 years ago

May try some secondary colors:

And remember to test for contrast : http://colorsafe.co/

Still working :)

ffoodd commented 8 years ago

SVG file :) a11y.svg.zip

ffoodd commented 8 years ago

No need for a styleguide, and logo's done :)