Help needed: logo for Window.js

[joaodasilva]

Looking for a simple logo to use on the main site at windowjs.org and on GitHub.

The logo should be simple, use a few colors (like the colors on windowjs.org or similar), and suggestive of a desktop window and/or 2D programming, flat surfaces, squares/boxes, etc.

[tvortsa]

[joaodasilva]

Thanks! Both logos look cool. (A) is a bit more confusing than (B). (B) is a start!

I had something more flat in mind: without the perspective, and without rounded corners and rounded buttons.

The logo should also look alright and be recognizable in a small size e.g. as an icon in the window or a profile icon in GitHub. I think the small objects, like the rounded circles, will look a bit weird at small sizes. But would have to see an image to see how it feels.

[joaodasilva]

Here's two icons generated with https://icon.kitchen/ to give an idea of what I'm looking for.

I like a lot the material design guidelines for icons:
https://material.io/design/iconography/product-icons.html#design-principles

I just can't seem to get the layout / spacing / sizing and especially the palette right :-)

[ashusharmadev]

@joaodasilva I am not a pro, But I tried little.

[khushi200701]

Hey, tried two variations. I think a simpler logo like this would look good on a tech website.
I can change colors and other details if you like this :)

[svenfinger]

Hi, I saw your post on Open Source Design and found the idea very interesting. Here is a quick concept that I made, I hope you like it:

Logo mark

Simple and recognizable. The surrounding box is an abstracted application window. The geometric elements stand for the three interaction options of a window (close, minify, expand) and at the same time basic graphical shapes that can be easily created on the canvas. The letter "W" holds it all together. I stick to your color pink, as it works very well with the playful and modern design.

Website

I like your sidebar navigation for the content, however for an intro the messaging should be bold, and for that I would use the whole space. The examples are currently buried in the contents. Why not show them right away? I almost stick to your color palette but optimized it for legibility. The font is Rubik from Google Fonts which fits the slightly rounded and artistic overall styling.

Logo mark in GitHub

It helps to see a logo in a familiar environment to really see its impact. That’s why I placed it in the GitHub context for reference.

Process

In case you’re interested, this is the process from the initial idea to the final concept. I got the top left idea from the first comment in this discussion and applied your feedback. In smaller sizes (e.g. avatar, favicon) it was still too complex, so I abstracted it further.

[joaodasilva]

Thanks again for the contribution. The PR looks great and is live now! I've just updated the color of the octocat and compressed favicon.ico a bit better.

You're welcome to make further contributions in the future :-) Consider starting with a discussion or drop me an email to align on the expectations. Thanks!

[svenfinger]

Awesome! Sure, let’s have a chat. 😊

[VeeChukwuma]

Hello there!

I'm not a logo designer, but I'm good at UX and UI design, I could help out with redesign on the website. If you still need hands to help, then you can reach out to me at victoriastephen61@gmail.com or a comment will do.

[joaodasilva]

Hi Vee! Thanks for the offer.

The website is built from the sources with Jekyll. See the docs here: https://windowjs.org/dev/documentation

These issues are still open:

#4: build the API index at https://windowjs.org/doc/api automatically. It should be possible to generate an index for the API docs from the Typescript types files. This could be done with a node script that parses the Typescript declarations and outputs something that could be imported into Jekyll to render the API page. We could then add that step to the workflow that generates the website.

#22: I'd really like to have a better frontpage at windowjs.org :-) I really like the frontpage of eletronjs.org and wanted to have something that explains clearly what window.js is and can do. I'm sorry that this is vague and not quite a spec that can be implemented :-) It's hard to co-design over async messaging...

Both of these are a lot of work. Feel free to reach out if you make some progress and would like some early feedback!

[VeeChukwuma]

Hi Joao! I'd like to ask if there's an existing design file I could work on, for example, a figma file where the initial designs were made. Do well to forward a link if something like this exists, I'd just duplicate and make changes on my copy. Cheers!

…

On Mon, 28 Mar 2022, 20:36 Joao da Silva, ***@***.***> wrote: Hi Vee! Thanks for the offer. The website is built from the sources with Jekyll. See the docs here: https://windowjs.org/dev/documentation These issues are still open: #4 <#4>: build the API index at https://windowjs.org/doc/api automatically. It should be possible to generate an index for the API docs from the Typescript types files. This could be done with a node script that parses the Typescript declarations and outputs something that could be imported into Jekyll to render the API page. We could then add that step to the workflow that generates the website. #22 <#22>: I'd really like to have a better frontpage at windowjs.org :-) I really like the frontpage of eletronjs.org and wanted to have something that explains clearly what window.js is and can do. I'm sorry that this is vague and not quite a spec that can be implemented :-) It's hard to co-design over async messaging... Both of these are a lot of work. Feel free to reach out if you make some progress and would like some early feedback! — Reply to this email directly, view it on GitHub <#24 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOYQTOCCOJUICE3GUM57P53VCIC4LANCNFSM5LXJCCGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[joaodasilva]

The website was just hand coded directly by a programmer, as you can tell :-) There are no design sketches or figma files.

[VeeChukwuma]

Oooh, that makes it really tricky, I can design these changes by creating my own design boards, but I can't implement them, so I would need to share my design and have someone make the changes, I would like to that if that's okay with you. Hope your day is going well!🎊

…

On Tue, 29 Mar 2022, 15:40 Joao da Silva, ***@***.***> wrote: The website was just hand coded directly by a programmer, as you can tell :-) There are no design sketches or figma files. — Reply to this email directly, view it on GitHub <#24 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOYQTOHU4H2IIZ2C6HENSDLVCMI4VANCNFSM5LXJCCGQ> . You are receiving this because you commented.Message ID: ***@***.***>