Gatsby: .org redesign: homepage [design] showcase section

[fk]

Design for the homepage section that teases https://www.gatsbyjs.org/showcase.

[marisamorby]

@fk

As a follow up on our conversation earlier, this work will run in parallel to the style guide work.

I'd also like to use this opportunity to try a design and comment review. So, once you feel like you're at a point you want to start the comment period, let me know and we'll make sure it gets timeboxed appropriately.

[fk]

A deliberately simple approach that doesn't list individually clickable showcase sites could look something like this:

• individual thumbnails are _not_ clickable (as opposed to what we do for plugins, starters and blog entries); thumbnails probably could be even smaller for desktop, and we could reduce the overall height of the visual to save some more vertical space
• could behave similar to the "Trusted by the Best" section on https://wordpress.org
• IMO translates well to mobile:
  

[fk]

Previous shots:

[marisamorby]

@fk: did you want to open this up for a review and comment period, as listed in issue #10152?

[fk]

Here's an update of the initial design that

• simplifies the bottom of the shape masking the screenshot composition, allowing for a little more visibility of the screenshots
• calms down the design elements a little
• adds depth to the design via a shadow behind the top "white cloud shape" and above the screenshot comp
• contains a couple of manually cropped screenshots to increase "brand visibility" — IMO this turned out to have much less effect than I thought it would
• explores how things would look with a CTA button on top of the screenshot comp (for phablet/tablet and up)

[marisamorby]

@fk
Before we open this up for a design review, I think there are a few more comments we should validate that we're accounting for. From @shannonbux recent interviews:

Site Showcase:

• They couldn’t find the source code easily on the detail pages of site showcase.
• They couldn't distinguish whether the screenshots on the detail page were "clickable" or not on site showcase.

Additionally, there is a UX problem where the relationship of sites to Gatsby is unclear to visitors. You can see the detailed issue here: https://github.com/gatsbyjs/gatsby/issues/10288

Once you feel this is accounted for in the initial design, I think we can open this up for a design review. I will defer to you to tell me when you're ready to do that, but I am happy to set it up!

[fk]

They couldn’t find the source code easily on the detail pages of site showcase.
They couldn't distinguish whether the screenshots on the detail page were "clickable" or not on site showcase.

If I get this right, those both affect the detail pages in the actual showcase, not the teaser section on the homepage (that this issue is about)?

I think we can cover #10288 for the homepage section via adjusting the copy, will give that a shot tomorrow!

[fk]

Here's both designs (initial and update) with slightly adjusted button copy accounting for #10288:

I didn't update the section _Headline_ because I'm still hoping someone has a better idea than "Showcase" ;-)

[amberleyromo]

Hey @fk -- I personally prefer not having the additional button over the graphic. I think the copy section does a fine job of communicating what the showcase is. That said, I love everything else about the updated version (calming down the design elements a bit, etc).

I think in #10288 it will be more a matter of making it clearer on the /showcase/ page itself.

[amberleyromo]

@marisamorby agree with @fk -- the issues described earlier affect the /showcase/ and /showcase/* pages, not the homepage section addition.

[marisamorby]

@fk @amberleyromo:

Since we are going to work on the lo-fi prototypes for homepage first, it would probably be best to wait on further designs or design review for the site showcase until we can do a dedicated round of research on that page.

We'll be able to do that showcase research after we are further along on the visuals for the homepage.

Does this sound okay to both of you?

[fk]

@marisamorby Sounds good!

[marisamorby]

Closing because we will update once research is done.