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 :+1:

[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

[bnb]

@thewazir I think one thing to consider is navigation. If you look at those sites, you'll notice none of them have a particularly large set of documentation. Express has a minimized accordion-style navigation, but that completely goes away on mobile. Does anybody have good ideas for this? I remember seeing a multi-tiered menu on Codrops...

[bnb]

Found it: Article | Demo

[vjk2005]

@bnb that's a very neat solution to the problem :+1: Couple that with HTML5's History API and we have a strong UI foundation for mobile.

[Fishrock123]

@bnb @vjk2005 I've implemented something similar before, technically it shouldn't be too hard.

[mikeal]

@vjk2005 would you be willing to work on designing the new website and helping us implemented it?

We'd like to use the design/brand work you've done but we need help getting it all up and running :)

[bnb]

I didn't know @vjk2005 was the creator of that Behance project. It would be fantastic to have him help design the site!

[vjk2005]

@mikeal absolutely! count me in : )

@bnb thank you : )

[therebelrobot]

:dancers: does a little dance to have @vjk2005 onboard :dancers:

Thanks for the help!

[oskwazir]

@vjk2005 I today realized that binary JS t-shirt I wear was designed by you. Looking forward to your work on this.

[vjk2005]

@therebelrobot thanks for letting me! ✶bro-hug✶

@thewazir that one's my personal favourite, glad you like it too : )

[mikeal]

@vjk2005 awesome! as soon as you've got a design for the website using your awesome brand treatment just let us know. I'm going to bring this all up in the TC meeting on wednesday so that we can rubber stamp the logo. In the meantime can I get avatar images for social media?

This a great list of all the assets we need and the sizes http://postcron.com/en/blog/social-media-image-dimensions-sizes/

[mikeal]

Oh, this is a much simpler and to the point list :) http://jeffberezny.com/2013/02/12/the-ridiculously-exhaustive-social-media-dimensions-blueprint-infographic/

[vjk2005]

@mikeal once I'm done with the assets, should I just link them here or is there a place I should check it into?

[mikeal]

we should make them generally accessible, maybe just send them as a pull request in to this repository. @therebelrobot what would be the place to put those assets?

[therebelrobot]

Assets can get really big, we really don't want them in the repo unless we want to sit for half an hour downloading a fresh copy. I would say put it in a location you're familiar with, @vjk2005, and somewhere we can review them, behance could be a good place for them, but I'm not exactly in the design realm professionally. Then just link it to a github issue for review/comment/vote. Once we have the assets solidified, then we can optimize what we need for the repo and get them pushed in.

[mikeal]

Actually, @vjk2005 for right now you can just drag and drop them in to issue comments right here. Once we've solidified and compressed them we can figure out the best place to put them for wider distribution :)

[therebelrobot]

+1 to that @mikeal

[bnb]

Would having a separate repo for them be appropriate? That way people can go to a single place that's dedicated to it and not have to try to find it in the website stuff/repo? That would also solve the problem of downloading the assets every time one updates their local repo.

[therebelrobot]

That's an idea. Depends on how many assets there are before we start implementing it. Though having a repo with high-res assets would be nice to have.

[oskwazir]

I like the idea of having a repo for assets. Keeping everything within Github should make it easier for people to contribute.

[mikeal]

We'll shove them in an evangelism repo eventually but for now let's just post them here. The simplest thing is usually the best. We over-optimized the logo stuff and created a repo way too early and everyone just ignored it and kept using the issue thread :)

[vjk2005]

While working on the avatars, I had this idea to make the avatars more useful. I'm calling the concept "Dashavatars". Will upload some concept art soon along with the regular avatars.

[bnb]

@vjk2005 Looking forward to it! Sounds awesome.

[mikeal]

@vjk2005 any update? I'm so excited!

[paazmaya]

The new design should take good care of situation when a certain texts are much longer and shorter than expected. Currently this concern can be seen with the footer menu, due to the max-width: 640px rule. On English is is just nice, but French and Finnish suffer a bit...

[snostorm]

For sure we're going to have to give any proposed designs the i18n shakedown early on to make sure they structure well for a variety of text lengths. +1 to @paazmaya here.

I wouldn't mind hijacking the current Issue summary with a "to-do list" style list of objectives and to resources we're calling out on this thread but not necessarily linking to clearly (the proposed brand, etc.) Or, we can create a new Issue to actually start the process in a more organized way once the graphics start to roll in.

[vjk2005]

@mikeal sorry about the wait, was exploring some design options : )

Here’s my “Dashavatar” concept proposal. I’m showcasing its use on Twitter but the same concept can be applied to other social networks.

Will post the avatar and Twitter cover photo next : )

[bnb]

@vjk2005 Love it. Is there a tool that already exists that can update these automatically?

[bnb]

@bnb @vjk2005 Pretty sure this can be done with IFTTT, given there is an RSS (or ATOM?) feed of the releases.

[vjk2005]

@bnb afaik there’s no tool to do this out-of-the box but assuming there is interest in the concept and it gets green-lighted into production, I’m planning to build the app myself using io.js and the Twitter, GitHub APIs. We can host it on the iojs.org server as an internal app with a small admin web UI containing some basic override controls to handle edge cases.

Btw, we can use GIFs dashavatars to display even more information like daily commits, top contributor of the month etc. Didn’t have the time to fit that into the presentation but I’m planning to present a mockup soon : )

[tzmartin]

@vjk2005 Twitter API supports it: https://dev.twitter.com/rest/reference/post/account/update_profile_image. Doesn't appear GitHub API does. Seems fairly straightforward to implement. I like the idea and have thought of implementing something similar.

[vjk2005]

@tzmartin since the GitHub avatar will remain untouched, lack of API support isn’t a deal-breaker. The idea is to _pull_ out GitHub info and _publish_ that into social media avatars so followers can get at-a-glance updates without having to visit the website or repository.

As an example, to get the current version number tacked on to the io.js Twitter handle, GitHub repository API endpoint can be used to get the latest version and then pushed onto Twitter using the Twitter API.

It’s possible to get more creative like GIF dashavatars with top collaborator twitter avatars flashing by and so on, if we decide to go all out : )

[therebelrobot]

While I love the idea of dashavatars, and encourage continuing work on it, I think it's a little off topic for what we want this thread to be. @vjk2005 @bnb, could you move this discussion either to a new thread in iojs/website or iojs/evangelism? I'd like to keep this thread focused on the new visual design for iojs.org, as we are in desperate need of a finished design before revamping the build process.

@iojs/website should we have more designers working on a design pass for this? Perhaps pull in @rggGit (from https://github.com/iojs/io.js/issues/37#issuecomment-65891088) or @julianlloyd (from https://github.com/iojs/io.js/issues/37#issuecomment-66590212) or @alevizio (from https://github.com/iojs/io.js/issues/37#issuecomment-66732480) to assist @vjk2005 with this? We want to make sure we're making good progress on this, and maybe a team of a few designers looking at it may be best for everyone.

[mikeal]

Perhaps the best way to move forward is to create the assets for social media first. Once that's finished we'll be pretty confident that the branding is flexible enough. Then we can move on to the website design.

@vjk2005 We have an evangelism repository now: https://github.com/iojs/evangelism could you start sending pull requests for these assets, include the dashavatars, and we'll start using them :)

[vjk2005]

@therebelrobot sure thing! I’ve started to put new stuff into the evangelism repo (thanks @mikeal) and will continue future discussions over there : )

[alevizio]

Hi Guys, I love to participate! But don't you think it's important to decide on a logo and then start from small to big? For example, close the identity and start working on all the social aspects needed. Then build up a wireframe having everything in mind for the landing page. After that we can work on all the details, animations, illustrations, etc

I think we're in need of some big decisions to advance forward with the identity aspect. It's just an opinion :dancer:

[mikeal]

@alevizio we're starting with the hexa-rocketship logo and seeing how it works for all the various social sites. That's a good way to prove out that it's versatile enough to base the rest of the design on :)

[alevizio]

@mikeal Awesome!