New layout

[leo]

I thought the current site might need an overhauled look, since it feels a bit old and packed to me. So I've decided to start designing a new one that's a lot lighter. Before continuing with those other pages and different responsive sizes, I'd like to make sure that you guys like this kind of design.

So what do you think? 😊

Important: I've uploaded a bigger size of the original so that it looks great on hight res displays. However, it should be viewed at 1280x800 to reflect the correct sizes of the elements.

[mikeal]

One thing to keep in mind, we're about to put out an updated logo that would need to be worked in. I'll post it here once the legal side of it is all finished up.

+99 from me, looks VERY nice

[evanlucas]

I really like that

[mikeal]

A few things we need to consider in the design this time, rather than just tossing it on like we did with the last design, is that there are things we tend to promote temporarily at the top level on our website:

• Major security upgrades
• Specials events the foundation puts on like Node.js Interactive

And maybe we should do a better job of promoting other stuff temporarily (last non-release blog post, recently added documentation) and want to consider working that in to the front-page design.

[danjenkins]

I was about to say the same thing @mikeal - there is the effort to make "getting started" etc easier so these should definitely be thought about here. It is nice though and we shouldn't try to overload the minimalism of the design, let alone confuse people more. Just bringing in @nodejs/documentation so that they're aware

[a0viedo]

Looks really nice!

@mikeal I like the idea of having a section for content that's not related to releases. I remember some videos were displayed on an older version of the website, what happened with that section?

[thisismyoldaccount]

@danjenkins I'm with you.

I really like the simplicity. It's awesome. However, it needs some colors imo. The color would be better by adding just a blur background imho. And making texts white.

Plus, you can decrease right section width to fit the two buttons and make some room for the left section to put some important and eye-catching features of Node.js in very short and comprehensive sentences. In that way paragraphs would be seemed shorter, not only you can use larger fonts but also people will try to read them all.

However, we shouldn't ignore this fact that putting important parts at the center of the page makes them really attractive and catches everyone's eyes at the very entrance.

[danjenkins]

And something that I'm sure is already being thought about is accessibility. I was at Chrome Dev Summit in November (?) and heard a great talk about accessibility, colour contrast etc - using the Accessibility Developer Tools extension from Google in Chrome, you can find out about how your site ranks and what it can do better.

[Knighton910]

👍 That's a good look

[thefourtheye]

I love simplicity ergo I love this as well :)

[stevemao]

@leo it doesn't hurt if you could push up your changes and do a PR (since you have already done the changes). We can start reviewing it.

I can't promise your PR will be merged soon but since a lot of people like it, it should be merged when the time comes :)

[fhemberger]

Looks nice, but the overall contrast is way too low. This is a serious issue for a11y.

[leo]

@stevemao It's just a exported Sketch artboard, not yet coded... 😊

[leo]

Here are more iterations. It looks like you'd like to add more important content to the front page, so I thought that it might be better to make some of them scrollable (not like a one-pager, pages will still be separate). They also have a bigger contrast between interaction elements and their background (so that everything is easily readable).

I'd like to focus on the first section and the elements wrapping the page. After we figured out what looks the best here, I'll add more sections.

By the way: Another thing I kept in mind while designing those next few pieces, is that beginners are probably confused when forced to choose between two different versions of node. So I thought it might be better to only let them download one version on the front page and add the rest to the separated "Downloads" page.

The following ones will transform into each other by clicking the hamburger menu. All following pages would have the menu on the right, but without the cross.

@mikeal How long will it take until the legal side of the updated logo will be finished up? Its new shape probably won't be that important for the design, but I'd like to match its colors.

@leo i like the dark version better, it also helps with a11y and people who don't visit sites that have a white background (those exist). is the 'learn more' box intended to be alerting visitors to scroll down? if so, maybe add a visual indicator, such as an arrow to show that you can scroll down.