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? :blush:

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.

[ghost]

+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]

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

[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.

[ghost]

@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.

[leo]

@sup I really like the dark version, too! Not many sites on today's web are dark. The "learn more" thingy is intended to be a clickable button that scrolls down to the next section (only on the last one it's meant to forward the user to a different page). :blush:

[thefourtheye]

I like all of them :( Wish I could switch between them. But I like the dark version the most.

[eljefedelrodeodeljefe]

@leo definitely don't omit the download thing, also not the multi-version part, since those are the most important informations for professional users and users in general. Don't mind too much on newcomers.

Also I was thinking whether the "What is Node.js" Section could be just one item of a rotating gallery, where more LTS info, amongst others, could be scrubbed though.

[joshmanders]

Beautiful work @leo!

[wonderdogone]

Dark version.. Looks good

[rvagg]

@nodejs/website FYI if you ever want to set up a temporary subdomain to host WIP changes that you're not comfortable pushing to master then open an issue on nodejs/build with the details of the domain name and the branch here that you want built and we can make it happen fairly easily. Same setup as we have now is preferred but if you want to change the build procedure then let us know what that is so we can update the build script. Anything more than static hosting is going to be tricky, so simple is preferred obviously.

[stevemao]

Thanks @rvagg , I suggest to name it "nightly" (the same as nodejs nightly).

[leo]

@stevemao :+1:

[Fishrock123]

Does this use the same colors? It's pretty hard to read on white imo.

Also how does it scale to mobile?

[leo]

@Fishrock123 Are you talking about the dark version? No, it's using lighter text colors than the versions with a light background. If you're talking about the initial version: It uses slightly different colours than the current site (I still need the new logo to find out which colours are the best).

Also how does it scale to mobile?

I haven't yet thought about those other responsive sizes, since I'd like to make sure that we all agree on one of the above layouts. So if the dark version stays the community's favourite, I'll make more sizes of that layout.

However, I think that it might be a better order to continue with those other sections below the first one and then start with more sizes.

[joepie91]

The typical accessibility concerns apply, of course - I don't know whether they're a problem in this proposed design, but figured it's better to be safe than sorry. I might as well highlight them, since they are overlooked a lot in the design community as of late:

• Don't do scroll-jacking. Just leave the browser's scrolling functionality untouched.
• Don't require JavaScript to view the site. It's a website, not an app.
• Ensure that it doesn't become a "mobile-only" site - it should 'feel and handle' like a first-class design on any device, so avoid global swiping mechanics and such.

[leo]

@joepie91 Thanks! That's exactly what I'll keep in mind. If I'll be chosen to code it, too, it will of course be mobile-first, completely responsive and free of such techniques.

[phillipj]

Really love the simplicity in those sketches @leo!

Got any thoughts about what's going to appear when clicking these question marks?

[stevemao]

I believe when you hover over them, say LTS, it'll say "Mature and Dependable".

[fhemberger]

What about mobile users, which don't have :hover?

[stevemao]

Probably display it below the buttons.

[leo]

@stevemao Exactly. Thanks for the explanation! It might even show links to the API docs, to the changelog and to other related downloads of this version.

Also glad that you like it, @phillipj. :blush:

[leo]

Is the logo ready?

[bentinata]

@leo Yep, along with the new color schemes.

https://drive.google.com/folderview?id=0B2SAGsHi4DjIcHB0cTZZcXFZNG8&usp=sharing

[leo]

@bentinata Perfect, thanks! :metal:

[arifcakiroglu]

Looks good

[preco21]

I think this is even better for simple :+1:

[saadq]

I really like the dark version as well, it inspired me to start making a theme for Sublime Text based on it:

[detailyang]

@leo good design and simplicity :grinning:

[leo]

Thank you all for your feedback on this! I'm sorry that I haven't added this to the issue earlier, but I'm currently in the process of discussing this a little further with some members of the technical steering commitee because I'd like to start off in a completely separate repo within which I could use the issue tracker to ask the community for feedback on the design.

This simply ensures enough creative freedom and space to create more than just a copy of the current site with some slightly different styles.

After we've fully finished it, we'll start with the code (either by forking the current site or writing a new structure and copying over the contents). Of course we'll definitely merge both the old and the new site later, so that we don't loose old contributions. But that's something for later!

I'll let you know as soon as there's more information on this.

[bnb]

@leo: I've been thinking about re-working the site generally in the past couple days, and I just found this. Would you be able to give a status update? Simply if it's still in development or if it's been dropped would be great. If it hasn't been dropped, I would very much like to start working on it with you, if you're accepting help at the moment.

[leo]

@bnb Not yet. But I'm sure I'll receive the final answer that will allow us to make some real progress on this in the next few days.

Since I haven't yet announced anything: No, it's not in development either. Besides of that, developing it would be the last step to happen on this. Like I said it above, design would be first... :blush:

[bnb]

@leo In that case, I'd still be up for helping to design before developing! Please, do alert me if and when there's a start to designing it.

[leo]

@bnb Alright. Will do! :blush:

[raphaelokon]

Has this design be evaluated against any UX metrics, user needs (target user group[s] data, stakeholders etc.)? Just asking because the ☰ hamburger icon is clearly an UX anti-pattern (tho a very adopted one).

[refack]

@fhemberger maybe it would be useful to track all the tasks/issues relating to the redesign into a project or a milestone?

[fhemberger]

@refack Great idea, just created a project: https://github.com/nodejs/nodejs.org/projects/1 I'll add all design related issue in a first rough backlog.

[fhemberger]

Closing this issue due to lack of activity. There are other issues which address detailed needs, let's focus to come up with solutions for these first.