RFC: New Index page for the Jest website

[orta]

Note: This issue has a bounty on our Open Collective - see #7265 (comment)

and this WIP PR: #7566

It is just for the single index page on https://jestjs.io, which is powered by Docusaurus and if you want to see what an example PR would look like see prettier/prettier#3718

---

OK, a primer before we get to pretty pictures - I'm looking for someone to implement this, but it's pretty well spec'd out. Only a few more cases of lorem ipsum, and I want to re-create all screenshots after ( #7241 ) . Nothing that should block implementation.

My aims with the redesign:

• Highlight Jest's awesome terminal UI (bigger images, more of them)
• Decouple Jest from being the "React testing tool" (the current site mentions react in half of the sections)
• Consistent messaging
• BE COOL, because Jest is cool

Alright, step one, a new Jest logo. I think the foot is cool, and I think it should stick around (I re-use it in the designs) but I also like the simplicity of this idea:

What if we take the runtime symbols Jest uses to indicate how things are going?

Then re-use that symbology:

Pow.

I know, it's a tad underwhelming but It fits, really well. It can work in the terminal during the jest launching scene, it connects to all of the existing messaging people see every day, is simple and recognizable. I think both are useful.

 

 

 

Alright, the site, like with the prettier redesign prettier/prettier#3669 is aimed is to fit naturally in the docusaurus framework. I aimed to extend the Jest as joker metaphor by using cards + deck metaphor.

 

 

 

Highlights:

Mobile Version

Link

Mostly the same, without the splits. I feel like the slanted titles work much better here ( less space, so they stand out more) and tie the identity together.

Headline

The top of the site should animate, the cards flip from the front to the back. They all start off as "RUNS" (e.g. the back) then progressively flip to either "PASS" or "FAIL" - like a good flaky test suite. Maybe clicking on a red could spin to the back ("RUNS"), then flip back to a PASS after a second.

Here's what all the cards look like:

Bonus points - I'd love to see the "RUNS" animating in a circle (to indicate activity)

Grid

I used a 960 grid width, 12 sections, and only used the inner 10 for desktop:

Cards

---

Assets

• Sketch file with all drafts, alternative ideas etc.
• History: 0, 1, 2, 3, 5

I can definitely create a bunch of assets if whoever is working on this isn't used to working with Sketch files directly 👍

[SimenB]

omg, this is soooo good! I absolutely love it!!

[SimenB]

What do you think about an embedded code sandbox somewhere in here? Maybe with a tab for a node app and a tab for a react app? Should in theory work nicely due to https://hackernoon.com/codesandbox-containers-5864a8f26715, right?

[orta]

I love the idea of having a runtime environment to run tests!

It might be worth having that added after this, as I feel like the repl.it and codesandbox embeds have tricky interfaces ( you can see examples for codesandbox and repl.it ) when trying to do a quick embed.

Something more like a "Jest cookbook" showcasing a bunch of "how do I mock a class from this import" kinda questions with repls (and the ability to explain to folks how to use it makes sense

[SimenB]

Something more like a "Jest cookbook" showcasing a bunch of "how do I mock a class from this import" kinda questions with repls (and the ability to explain to folks how to use it makes sense

🥇

[satya164]

Looks great! Some feedback:

1. Maybe a different color from the muddy yellow-green? IMO the color isn't very pleasant to look at.
2. Would be nice to have a bit more padding and larger line height. It looks kinda crowded otherwise.
3. Maybe the cards would look better with more subtle border?

[bkd705]

Love this, and would be happy to help implement this!

My only feedback is the titles on the features (blazing fast, etc) and the sponsor section, I don't think those have a high enough contrast ratio to be accessible.

Maybe look at using a darker red over top, or darkening up the red background?

[wuweiweiwu]

I'll have a branch out soon! Ill do preview deployments using surge or netlify

[SimenB]

Awesome! We have netlify set up, so just opening up a PR should be enough 🙂

[orta]

Maybe a different color from the muddy yellow-green

The yellow here is a hue shift from the green and red, I'd rather not break that design patterns. That said, I like that yellow (and use it in my terminal), it's got a good sandy colour 👍

Would be nice to have a bit more padding and larger line height...

Padding I'm pretty fine with, but I agree on the line heights for body text, I'm happy to tweak those in CSS towards the end though - thanks!

I don't think those have a high enough contrast ratio to be accessible

I agree on this, dang, I was trying to lower their visual precedence so the above the fold content had a nice visual hierarchy (and you weren't dragged down too quickly).

Will see if I can figure another way to do it.

[orta]

Hey folks, to get this moving forwards - we've decided to put a $599 bounty on this issue from our OpenCollective account.

If you're interested in doing some Open Source good-will and get paid for it, we're looking to have this index look and feel good on both desktop + mobile and I'll help you get it over any final design hurdles.

To get the bounty you would need to submit an expense via OpenCollective, here's their FAQ

[montogeek]

@orta Is there a time constraint? I could do it, but not full time.
Edit: I would take me a week or less.

[orta]

Nope, no time constraint 👍