New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: New Index page for the Jest website #7265

Open
orta opened this Issue Oct 24, 2018 · 26 comments

Comments

Projects
None yet
10 participants
@orta
Copy link
Collaborator

orta commented Oct 24, 2018

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.

 

 

 

jest-web-7

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.

headline_0
headline_1
headline_2
headline_3

Here's what all the cards look like:

artboard copy 2

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:

screen shot 2018-10-24 at 12 49 14 pm

Cards

fail card pass card jest card

runs-bg runs


Assets

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

@SimenB

This comment has been minimized.

Copy link
Collaborator

SimenB commented Oct 24, 2018

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

@SimenB

This comment has been minimized.

Copy link
Collaborator

SimenB commented Oct 24, 2018

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

This comment has been minimized.

Copy link
Collaborator

orta commented Oct 24, 2018

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

This comment has been minimized.

Copy link
Collaborator

SimenB commented Oct 24, 2018

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

This comment has been minimized.

Copy link
Contributor

satya164 commented Oct 24, 2018

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

This comment has been minimized.

Copy link

bkd705 commented Oct 24, 2018

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

This comment has been minimized.

Copy link

wuweiweiwu commented Oct 24, 2018

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

@SimenB

This comment has been minimized.

Copy link
Collaborator

SimenB commented Oct 24, 2018

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

@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Oct 24, 2018

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

This comment has been minimized.

Copy link
Collaborator

orta commented Dec 29, 2018

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

This comment has been minimized.

Copy link
Contributor

montogeek commented Dec 29, 2018

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

@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Dec 29, 2018

Nope, no time constraint 👍

@montogeek

This comment has been minimized.

Copy link
Contributor

montogeek commented Dec 29, 2018

@orta Ok, I will do it

@ajwhite

This comment has been minimized.

Copy link

ajwhite commented Dec 30, 2018

@orta any opposition to using a styled component library, eg Emotion?

Would still leverage existing class names where applicable, but use styled components for some of the new pieces

@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Dec 30, 2018

I don't really have an opinion on implementation details, as long as it's easy for others to contribute and not hard to maintain that's fine with me 👍

@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Dec 30, 2018

The site went through another design review last night, with an updated color scheme - I've updated the images in the main comment above for the desktop + mobile, and included a bunch of assets so you don't have to dive into the sketch docs

@montogeek montogeek referenced this issue Dec 30, 2018

Open

[WIP] New landing page, implements #7265 #7566

4 of 4 tasks complete
@montogeek

This comment has been minimized.

Copy link
Contributor

montogeek commented Dec 30, 2018

@orta I just opened #7566, I will make those new changes on Tuesday.

@brainkim brainkim referenced this issue Dec 30, 2018

Closed

Docs: Interactive Cards #7567

7 of 7 tasks complete
@cpojer

This comment has been minimized.

Copy link
Contributor

cpojer commented Jan 2, 2019

It's amazing that people are making so much progress on this. thank you.

Here is my (highly subjective) feedback on the design:

  • The hover effect on buttons and the menu bar should be shortened or removed with the new design.
  • The gray background in the description of Jest looks really off, let's just remove it and have gray/black text on white background. Let the text stand on its own.
  • I prefer not having a background or rotation for the headers. @orta proposed (not posted here yet I think?) to have a colored block to the left of the header and using a normal font like Menlo on macOS.
  • The logo in the center card is missing a horizontal line between two of the circles. Please update it to the latest SVG which has this visual bug fixed.
@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Jan 2, 2019

I've updated the designs + assets again with all the feedback (except the logo SVG, that can be hot-fixed in #7567 )

@cpojer

This comment has been minimized.

Copy link
Contributor

cpojer commented Jan 3, 2019

Thank you! I like this a lot more. Here are some more ideas (that can be iterated on in the real PR):

  • What if we made the Jest logo and link highlight green instead of red? That way it would match with the PASS color. Otherwise, shall we pick a color other than green/yellow/red?
  • "Blazing" is probably not a great description, as it is mostly a joke and a lot of people won't understand it.
  • I would probably recommend left-aligning the headers in the selling points, and remove one of them (it looks really dense)
@cpojer

This comment has been minimized.

Copy link
Contributor

cpojer commented Jan 4, 2019

One more minor request:

  • Let's remove the underline from the version number and make the version 2px smaller in the header
@jamesgeorge007

This comment has been minimized.

Copy link
Contributor

jamesgeorge007 commented Jan 4, 2019

@cpojer Does this look good to you?

capture

@cpojer

This comment has been minimized.

Copy link
Contributor

cpojer commented Jan 4, 2019

I think the version font can be a bit smaller still.

@jamesgeorge007

This comment has been minimized.

Copy link
Contributor

jamesgeorge007 commented Jan 4, 2019

@cpojer Recduced the version font by a factor of 2px.

capture

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 4, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 4, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 4, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 5, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 5, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 6, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 6, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 8, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 8, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 9, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 9, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 12, 2019

jamesgeorge007 added a commit to jamesgeorge007/jest that referenced this issue Jan 12, 2019

orta added a commit that referenced this issue Jan 12, 2019

Navbar header fixes (#7576)
* Removed underline and adjusted the position a bit 🚧 #7265

* reduce version font #7265
@open-source-explorer

This comment has been minimized.

Copy link
Contributor

open-source-explorer commented Jan 13, 2019

@orta @SimenB I would like to know more about the bounty received as part of resolving this issue.
If I submit a PR and got it merged, am I eligible?

@orta

This comment has been minimized.

Copy link
Collaborator

orta commented Jan 13, 2019

Hi @open-source-explorer - it's pretty unlikely at this point, as we're at the final parts of getting #7566 merged, but yeah, had you found this a bit earlier that would have been it 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment