React-styleguidist: Logo

[sapegin]

I’m going to make a proper site for Styleguidist after 5.x release, so a proper logo would a very nice addition.

Unfortunately I have no ideas of my own ;-£

/cc @okonet

[n1313]

For reference: https://github.com/WebAssembly/design/issues/112

[sapegin]

And one more for reference: https://github.com/okonet/react-dropzone/issues/343

[sapegin]

For some reason octopus represents in my mind idea of many components gathered together. But not cute one like on GitHub logo but evil or mischievous octopus like on a tattoo or metal band logo. Or a bit close to PostCSS logo in style.

[nhavar]

Superquick like 5 minute example that I want to play around with and do some more variations of. Sorry for the code, don't have access to upload a file anywhere at the moment. The concept is the octopus design with the tentacles being like the pages of a book/style guide. I want to take it a few steps further, but figured I'd get something out quickly just as a starting point.

[sapegin]

@nhavar Thanks! I’ve edited your comment — now it has an image ;-)

[theodorosploumis]

Hi, I could help with this if you like. I am not a logo designer but I like creating logos and graphics for open source projects. Should I proceed?

Thanks in advanced!

[sapegin]

@theodorosploumis Sure! Do you have any ideas already?

[SaraVieira]

You guys like ? @sapegin

Used a free logo that only needs credit and changed according to my idea

[SaraVieira]

[SaraVieira]

I made him more evil

[sapegin]

@SaraVieira Cool, I like it! 🐊

[SaraVieira]

Awesome! Let's get some more feedback then :)

[n1313]

a free logo that only needs credit

Where is this logo from?

[sapegin]

Yeah, I’m also interested in licensing and attribution. It may be an issue.

[SaraVieira]

I checked and here is their license: http://file000.flaticon.com/downloads/license/license .it says we can change it and use it wherever we want.

And the website:http://www.flaticon.com/free-icon/octopus_371706#term=octopus&page=1&position=6

[sapegin]

Sounds a bit complicated for a logo that can be used anywhere: http://support.flaticon.com/hc/en-us/articles/207248209-How-I-must-insert-the-attribution-

(And I actually like your version more ;–)

[SaraVieira]

It does , but I think the idea is just to put a link on the footer, or just use mine :)

[sapegin]

Maybe you can redraw it using the original as inspiration? That would solve the issue and we’d have an original logo ;-)

[okonet]

Yay for having an original logo.

I'd also spend some more time exploring the typography part. Generally, I think the logo (sign) is enough for OSS projects since it will be problematic to use on GitHub and still keep the type as text.

[SaraVieira]

Okay , most of it I already redraw , as you can see from the link there were a lot of retouches on it , it is original , not just a copy and paste so I can work a little more in it and make it more unique is that okay @sapegin @okonet ?

Maybe the typo can go , right ?

[sapegin]

Sounds good! For the text I think we need to choose I nice readable font and use it everywhere on a site.

@okonet @SaraVieira I’ll need your help with the site: especially colors, typography, etc. Will show you something soon ;-)

[SaraVieira]

Simpler version

[sapegin]

I actually liked that I don’t know what behind the legs ;-) I’d rather remove dots on the head. But that’s just option of an amateur. What @okonet would say? ;-)

[SaraVieira]

That is a fast change I can put them side by side 👍

One sec

[SaraVieira]

Comparision of with or without dots

[SaraVieira]

Some type ideas , I used raleway that is a free font and can be used on the website easily
https://fonts.google.com/specimen/Raleway

[okonet]

Some comments from me:

I'm not sure about the second row of legs and about the secondary color. Can you try drawing separate legs (octopus should have 8, right?) and different colors perhaps?

[SaraVieira]

Great feedback @okonet !

I will take a look at that as soon as I get home :)

If you want to play with it and have sketch I shared it on dropdbox: https://www.dropbox.com/s/ld2z44umba1fu3c/rs.sketch?dl=0

[okonet]

@sapegin I like those dots on the head.

Some suggestions:

• Try to add suckers to the arms
• More armssss :)
• Less evil look probably?

[sapegin]

@okonet Now I like them too ;-)

And I like the idea of extra legs — would fill empty “armpits” after removal of the “back legs”.

[SaraVieira]

https://www.dropbox.com/s/60ghwby45ah523o/Screenshot%202017-04-26%2022.40.05.png?dl=0

Is this beter ? @sapegin @okonet

[sapegin]

I think it’s a bit too busy now — maybe make legs thinner? 🐙

[okonet]

Yes, it's definitively a step back. I'd try placing arms lower.

[okonet]

We should probably match 🐙 emoji colors :)

[sapegin]

I actually like this turquoise color… but, wait, isn’t it the same as in React logo? ;-)

[sapegin]

But I like combination of turquoise and orange anyway ;-)

[SaraVieira]

Yes, the torquise is the react color 💃

My sketch skills are being put to the test here :p

[sapegin]

We’re all learning that’s why we do open source ;-)

[SaraVieira]

https://www.dropbox.com/s/hktwcx7li4ogsbb/Screenshot%202017-04-27%2010.48.35.png?dl=0

Something like this side ?

[okonet]

I was more thinking about something like this:

[SaraVieira]

I fell like the first legs are too thin, what do you think @sapegin ?

[SaraVieira]

you took his mean eyes :(

[okonet]

Sorry was just a draft :)

I've simplified the Sketch file a bit if it helps: https://www.dropbox.com/s/yozmu8h7mhh4onn/rs.sketch?dl=0

Just an idea: by looking at it, I'm wondering if arms could mimic RS letters (react-styleguidist) somehow.

[SaraVieira]

Just an idea: by looking at it, I'm wondering if arms could mimic RS (react-styleguidist) somehow.

What do you mean by this ?

[SaraVieira]

https://www.dropbox.com/s/ukvc2umjp1e4y0q/Screenshot%202017-04-27%2011.27.03.png?dl=0 I think arms like this make it look a little fuller.

And great job making this simpler :D

[SaraVieira]

[okonet]

@SaraVieira can you please upload images directly to GitHub (drag-n-drop them). Clicking links is pain and it would be great to have different versions visible in this thread without need top open separate tabs.

To the latest version: it still feels too busy to me. Can it be simplified even further?

[sapegin]

I think this one is very close but need a bit of polishing. Maybe make this inner legs more round?

[okonet]

I could polish it a bit later if @SaraVieira don't mind :)

[SaraVieira]

@okonet Of course I don't mind , use them sketch skills 🎉

[okonet]

Okay, spent some time on it tonight. Thoughts?

[sapegin]

Cooool! Super clean and he’s (or is it a girl?) smiling now :-) I also like it more in one color. (Do we want to use React color or something else?)

[okonet]

It's an evil smile, you know 😈

I think a reference to React through the color is good.

[sapegin]

Just have noticed that eyes are transparent — was that intentional?

[SaraVieira]

That looks amazing @okonet ! I think we may have a winner here 🎉

[okonet]

Eyes: no, it was not. Need to fix.

Sara: thanks to you! I would not do this if you haven't started working on it. And since It's not a competition but a collaboration you deserve same credit for it! 👏

[okonet]

And I just realized we met in Amsterdam recently 🙌

[SaraVieira]

@okonet thank you! I'm trying to improve them sketch skills, I'm a not designer but I really like to work in stuff so it's awesome I helped :D

Yes we did, I was the girl that chased you and asked if we could use lint staged with flow :p
Such a small world!

[sapegin]

Looks like everyone was at React Amsterdam except me 😢

[SaraVieira]

@sapegin I'll be in Amsterdam again from 15 to 21 of may, we should meet there :D
Ill be speaking at codemotion amsterdam

[sapegin]

@SaraVieira So far I’m going to ReactiveConf in Bratislava in October ;-)

[SaraVieira]

@sapegin Why not speak about styleguidist there ?

[sapegin]

I’m going to start from local meetups — big conferences are too scary 👨🏻‍🌾

[SaraVieira]

@sapegin My first talk was at front ends so don't fear 😃

[olegshilov]

New logo reminds me Hydra logo from Agents of S.H.I.E.L.D. series (=

[SaraVieira]

That's not even a bad thing, I'm actually impressed :p
The bad boys of atyoeguides xD

[SaraVieira]

@spagin Is the logo decided?

[okonet]

Just FIY: I'd like to polish it a bit more.

[SaraVieira]

I think maybe we should work on typography a little too since we will be working the website later

[sapegin]

That’s what I have so far, pretty drafty though ;-)

Will share the code in a few days I think so you could play with it.

[okonet]

I've spent some more time tonight. It feels that we're close to me. I made arms more plastic since the previous version felt very "robotic" to me. Also simplified everything a lot — now only using simple curves and inner shadows to make editing even simpler. Hopefully, SVG size will profit from that as well.

Decided to play with colors a bit. Can revert to the blue one if this is too much but I thought the resemblance with the 🐙 emoji wouldn't hurt.

Here is also my take on typography. I'm using https://fonts.google.com/specimen/Montserrat since it's has the Open Font License:

Feedback is appreciated!

[sapegin]

I sill prefer the blue one ;-) But I like this gradient background though ;-)

I’ve tried the Montserrat on a home page:

Any feedback?

[okonet]

Okay, back to blue.

I've tried another font for the typography: https://fonts.google.com/specimen/Bree+Serif Feels more cheerful to me.

I don't really like the Monteserrat as a main font. I think a good sans-serif or serif would fit better. Check out the pairing section on Google Fonts.

[sapegin]

@okonet Awesome! I like more curvy legs ;-) Could you send me an SVG — I’d try to put it on a main page as well as other font.

[SaraVieira]

@okonet The blue with the gradient looks amazing! Great work

@sapegin about the website I thinks it needs more spacing between the sections :/

[sapegin]

I thinks it needs more spacing between the sections :/

@SaraVieira yeah, I think you’re right ;-)

[SaraVieira]

@sapegin Are you designing this in the browser or using any software?

[okonet]

It's now official: https://github.com/styleguidist/brand 🙌

I'm closing this one.

[SaraVieira]

@okonet Holly crap! We should totally get stickers!

[sapegin]

Are you designing this in the browser or using any software?

All in the browsers, so it’s a real site already ;-)

Holly crap! We should totally get stickers!

Yes!!!

[SaraVieira]

@sapegin Ready for GH pages anytime! Awesome!