Should we ask for a designer support?

[UlisesGascon]

Over the time we had commented that we want to "refresh" the website, in the past Node.js requested support from the foundation to hire a designer to refresh the website completely. Is this something that we want to explore? Do we have the resources to support this process? I assume that we need to do a great work of content curation, etc... prior to start the re-design process.

Anyway, I am creating this issue to have a common point to discuss it and track the evolution (cc: @expressjs/docs-wg @expressjs/express-tc @bjohansebas @micheleriva @AugustinMauroy)

[AugustinMauroy]

IMO before asking for a developer we need to know which website structure do we want.

[micheleriva]

@UlisesGascon, @AugustinMauroy, one of my two co-founders (@nglngl) is a designer. We can offer our help for redesigning and most importantly for facilitating any discussion around the redesign, if you find it useful

[bjohansebas]

Honestly, help like this would be very useful for the website. Having something well-defined to improve the design would be great. For example, we have several issues like #1780, #1702, #1758, and #1760 that propose changes to the current style.

Recently, we also changed the dark mode colors, and there are many things I would still like to change. However, the problem is that I am not a designer, and I don't know if the other members are either. I’m not sure how things should be structured to provide the best experience and give the website a fresh look.

Sometimes, we have had to revert certain changes, like #1668, which was reverted in #1732. Initially, it seemed like a good idea, but due to accessibility concerns, it wasn’t. Situations like this might keep happening because there isn’t a clear design guideline.

It’s also true that we’ve taken a lot of inspiration from other documentation sites, such as Node.js, Vite.js, and Electron, among others, to try and achieve a fresh style.

[nglngl]

Hi there! I really appreciate @AugustinMauroy's comment:

IMO before asking for a developer we need to know which website structure we want.

This is something where I'd like to help too. I can structure a small workshop where in 45min we can try to understand what kind of structure, style, and features you want on the website. That's part of my daily duties at Orama and I've been doing this for the past 15 years, and I'd love to contribute.

This would also give me a good direction for proposing some designs if you agree. We can sponsor the activity as Orama (we have a strong design team and of course, engineering too) so we can help both on code, design, and overall website structure.

I'm on the OpenJS Slack channel too (my full name is Angela Angelini there) and I'm happy to continue the conversation either on GitHub or Slack :)

[bjohansebas]

That sounds great! I'll ping the other members privately on Slack so they're aware of this and we can coordinate a meeting.

[crandmck]

Thanks for the offers to help @micheleriva @nglngl !

I'd like to clarify what's meant by "design," as the word is often used to mean various things. In my mind, there are three distinct areas that could fall under this rubric:

1. Visual design: The content display, layout, and typography. In other words, how a page appears and its overall UX, including responsive display and accessibility.
2. Information architecture: How topics (pages) are structured, aka content taxonomy.
3. Navigation mechanism: How the reader navigates through the topics (content) on the site.

Although related, these are separate topics and IMHO it makes most sense to address them separately.

• Item number one is what I generally think of when I hear "design."
• Item number two (info architecture) is complicated and very important, and in my mind is outside the scope of "design" per se.
• Item number three is also important but in technical documentation is almost universally implemented using a left-side navigation panel, sometimes with a right-side sub-navigation, ie. within the page. IMO, we should consider moving to a navigation mechanism like this. Currently https://expressjs.com/ uses a horizontal drop-down navigation menus, which IMO we've outgrown. Compare that to some other prominent tech docs in the JS world:
  • https://docs.angularjs.org/guide
  • https://nextjs.org/docs
  • https://svelte.dev/docs/svelte/overview - This site also has an interesting "landing page" to help new readers.

So, I want to clarify that we are discussing visual design (item one above) here.

We should also discuss items two and three, but IMO those are separate topics. IMO, item three is a solved problem and we don't need to "reinvent the wheel" but we can certainly discuss other approaches.