Design Presentation: Node.js Website Design Direction Proposal

[amiller-gh]

@nodejs/community-committee I'm excited to finally show off the first public look at an updated design direction proposal from our website redesign explorations!

Design by committee sucks, so I've been trying hard to give this small team breathing room to run their early iterations. But finally, after working closely with these amazing couple of designers, we think some significant design elements, and their foundational principles, are finally mature enough to shop around, get group feedback on, and hopefully build a consensus with this group to move forward with.

If we get CommComm sign-off on this as a general visual direction, we can finally begin some more high-iteration content development, and hopefully have new design element concepts rolling out for review every two to four weeks, including high-fidelity mocks for our Website Redesign team to execute on!

The system will obviously continue to evolve over the buildout process, but I consider a vote-of-confidence (not an official vote, its just an expression 😉), and constructive feedback from this group as required for us to move forward.

In the slide deck, I'll go over:

1. Design goals and communication vision
2. A new Node.js Mascot proposal (!!!)
3. Two Badge and Sticker visual design options.
4. What next steps look like if we like this general direction.

So excited to finally get this out! See y'all tomorrow morning 🎉

[obensource]

@amiller-gh thanks a million for sharing all of this great work at the CommComm meeting today. Super exciting! 👏👏👏

I have one last thought about the mascot that I'd like to explore with everyone ❤️:

Do we even need a mascot? Node hasn’t had an official mascot to date, and I think there is power in the abstraction of not having one. Quite honestly, while looking at the proposed mascot today–it somehow felt like it cheapens Node as an entity and 'shrinks' (or constrains my perception) of what it even is.

I'm of the opinion that our current logo is awesome enough, and captures the idea that this is an environment/ecosystem on which everyone can build their own identities.

[keywordnew]

Commenting specifically on the badges and related visual design, I think those would go a long way towards giving teams an identity and something to be excited about 👏🏽

[obensource]

@chowdhurian completely agree, everything else here is wonderful and will foster more inclusivity. The only thing I'm really concerned about is attaching something to the identity of Node.js (or in this case, 'tacking' something onto it). Imho – it's a bit too much.

[MylesBorins]

ping @nodejs/tsc who may have some opinions here... also added to our agenda

I would love to see us continue with the rocket turtle 😇

[amiller-gh]

@MylesBorins, I was going to progressively expand the circle of folks looped in as we build out the design framework proposal – I've found design work works best when you slowly pull in more and more folks! 🙂 I want to avoid a dogpile – let us go through another design iteration (will be faster turnaround this time!) and come to the TSC soon after the holidays with a more robust pitch, after integrating the feedback from CommComm. We'll slowly build consensus around look and feel as we go.

Re: Final call on mascot / no-mascot – certainly something we'll get to figure out moving forward 😁 Regardless of final state, the mascot work already done was great to pin down a personality and feel for the new visual communication style. We have a good direction to head in for this next iteration of the design work.

I think if we can do it right, a mascot will be a great supplement to the already strong Node.js brand. However, since it is a supplement, it will be used sparingly in the real world and on the site (a la GIthub's Octocat, NPM's wombat, Astro for Salesforce). However, I got my biggest want from this first touch-base meeting – I wanted to ensure the general emotional direction of this work is in the right vein, so as we continue to codify the color palette, build out the UI elements, flesh out the illustration styleguides, and experiment with other stylistic choices, we always trend towards "better" with each iteration. This was a great round of feedback!

I'm going to propose these as next steps:

• We iterate on a second design deck, looping in today's feedback from CommComm (with even more content this time, ex: sample web pages, more marketing samples, and badge iterations)
• Present the updates to CommComm Jan. 24th to hear thoughts.
• Iterate again and present to TSC early Feb. 13th to grow the circle of design input.

That sound like a good timeline? We have a lot of actionable advice and would love to get it in before taking another prezo pass 🙂

[rvagg]

design input

Are you sure you want that? You should just get sign-off from @nodejs/website and ship it.

[WaleedAshraf]

@amiller-gh Hi,
Thats great. Can you share/email link to the presentation?
I missed the meeting and it is also not on youtube yet.

[mhdawson]

Sorry I did not get this setup for this week. Can you make the meeting on Jan 2nd.

[amiller-gh]

@mhdawson, see comment above :) Would love the chance to bring this to the Feb. 13th meeting after a bit more iteration. @WaleedAshraf, I have the video saved locally on my laptop – will be uploading it soon, I'm sorry for the delay!

[mhdawson]

@amiller-gh ok, just remind me before that meeting and we'll make sure to have it on the agenda.