Website Visual Design

[bnb]

The website could use a better design. There's nothing inherently wrong with the current visual design, but it could be designed in a better way.

Giving the site a visual style, including making the io/Jupiter logo prominent, would really benefit the views of io.js to a wider audience that isn't as inherently involved in the JS/Node community as the current base.

I think the most important issue with this is where is the design going to come from? I'm a designer, but by no means a great one. I'm sure there are plenty of designers who would jump at the opportunity to design the site for io.js. Presenting it to them is the hardest part--if you word it right, they'll be all over the project; If you word it wrong, there won't be interest. I'd be willing to help write and distribute a call for design.

I know Designer News is definitely a good place to go to post a call, as is Twitter, if you can get some designers to retweet it.

What does everybody think about all this?

[mikeal]

We actually need a full brand treatment, along with resources for the build and all the social media sites. We already caved on the whole "logo per release" thing because it's just too damn hard to manage.

[mikeal]

this should be a consideration https://www.behance.net/gallery/23269525/IOJS-logo-concept

[snostorm]

@bnb 100% agree. The project is still very young (io.js itself, let alone the web efforts). We deliberately decided to table going too fancy on design until we had a good build process in place which supported our internationalization goals.

Now that we've finally got a lot of that merged (just this week) I'll bring it up again in the next WG meeting so we can decide on some actionable next steps.

[mikeal]

Just to get it kicked off a bit, the visual design assets we'll need is:

• standard color scheme
• website design
• design template and guilelines for faq, es6, and api docs.
• favicon
• windows installer assets (there's more than on thing here)
• svg and png versions of multiple logo variations so the community can build on it
• image that can be squarely rounded for Google+ account
• image that can be perfectly squared for Twitter account
• image that works a little long for Facebook profile

I'm sure I'm forgetting some. Based on his logo treatment I think that @vjk2005 might be able to shed some light on a good direction for all this stuff and possible how his past work can help.

[bnb]

@mikeal Also: Cover photos for Twitter and Facebook, and maybe Google+ (don't know if G+ has cover photos). Multiple variations on a logo is an excellent idea, so we can represent the different Working Groups/teams/etc. and be able to distinguish them easily.

[vjk2005]

@mikeal @bnb I'd add these three sections to the site:

• Testimonials/success stories: A place to highlight stories like that of Atom Editor and node-webkit switching from Node to io. If Node's history is any indication, there's bound to be big switches coming down the line and highlighting them will be good PR.
• Modules: A neat way to pump up the io.js ecosystem is to highlight new and interesting modules right on the homepage. Apple has a lot of success in this area with their App Store landing page showcasing up and coming apps. So did Twitter when they were highlighting what app was used to push the tweet right under the tweet itself. I feel Node missed a trick there.
• Events: A map showing all the io.js events/meetups happening within the next 30 days around the world would be a good idea. (interface with meetup.com APIs)

One thing I really want to push for is a terrific mobile version of the site. Many times I wished I could load up documentation on my phone while I'm programming on my laptop. I hate switching away from my editor and want to have the docs always in view; having a first-class mobile site will solve that problem for me. I think this will be a popular feature.

To add some whimsy:

• Design a fun 404 page
• "About" page can have TC member profiles along with activity stats and graphs. Wikipedia contributors page here and here are good examples of what can be done here. The design is boring but the content is good. It can be a good space to have a (fully automated) leaderboard of sorts i.e., "Contributor of the Month" type thing pulling stats via the GitHub api.

Once there's consensus on the site content, I can start working on the wireframes.

[bnb]

@vjk2005 👍

[therebelrobot]

@bnb @mikeal @vjk2005 @snostorm +100 to all of this.

[bnb]

Something that I didn't mention in my last comment because I was unsure of the reception (though I'm pretty sure that's just me being silly): an interesting/fun/awesome humans.txt.

[vjk2005]

@bnb awesome idea, that's just the kind of whimsy I love. In the same vein, we could push stuff into the browser's dev console...

I think Mozilla has a roaring dinosaur when you open the console on their sites. Ours could be a fun ascii of "io.js" text or logo and a message asking people to contribute to the project.

[bnb]

+1 to the console message letting people know they can/should contribute to the project.

[oskwazir]

I created an issue in io.js #833 about making the api docs look better in mobile devices. I guess that discussion should happen here instead since @vjk2005 also mentioned it. There definitely is a use case for improved readability on mobile since we can't assume the only time people will look at the api docs is when they are using a large display.

Examples of mobile friendly apis:

• http://hapijs.com/api
• https://developer.spotify.com/web-api/
• http://expressjs.com/4x/api.html