Site Showcase

[calcsam]

One of the most powerful demonstrations of Gatsby is clicking around sites, for example on the current showcase list and seeing how fast they are.

Following up on the heels of the recently merged in package library, we should add a site showcase to gatsbyjs.org to do this in a more powerful way, including:

• screenshots (powered by gatsby-transformer-screenshot)
• link to source (when available)
• site category (blog / company site / portfolio / e-commerce / etc)

[shannonbux]

Pain points according to interviews on this topic (see attached PDF for full quotes): (and @fk would be curious to meet together sometime to discuss how to solve these problems through effective design!)

• People sometimes don't know what starters or Gatsby sites exist
• One interviewee installed several starters that were disappointingly ugly, and he wishes the documentation was more thorough so he knew what he was getting into.
• Some starters are outdated
• People often learn what's possible to build and how to build it by looking at src code for other starters / sites.

Potential benefits of bringing a site / starter showcase (also based on interviews):

• Persuading more people to use Gatsby: People will have confidence that they can imitate what's already been built if they see it and can look at the src code. It would also be cool to have a way of demonstrating that the development experience was awesome. Stories of how quickly they built the sites, or how big the team was, etc. Just to give ppl more motivation and confidence that they can repeat the same process and have a successful result.
• More highly functional Gatsby sites out in the world: Many people learn how to build things by looking at src code for other sites. The more sites they can explore the code for, the more likely they are to learn how to build equally functioning sites.
• Ways of showing not only finished results but also development experience of Gatsby: People want a showcase of how quickly you can create a site
• A way of showing how plugins perform, since many plugins have a visual or performance result that can only be fully experienced by seeing it in practice

Starters.pdf

[gillkyle]

This is awesome! I'd be interested in hearing thoughts from @fk in what kind of format/layout something like this might have.

Are there any examples of sites that do something similar (where inspiration is maybe being drawn from)? I kind of imagine using gatsby-transformer-screenshot and some grid or list of sites, maybe akin to how Netlify displays previews of sites in it's dashboard view of sites you've published.

I agree with the pain points brought up in a lot of those bullets that these could help solve too, when I read through the docs I knew the starters would get a site up and running fast but I didn't find a ton that I loved from a design standpoint, though that also gave me the flexibility to go make exactly what I wanted and structure my project accordingly. I also think seeing how the plugins perform would be awesome, the gatsby-image demo really piqued my interest the first time I saw it and it was one of the big reasons I started experimenting with the package.

[LekoArts]

Are there any examples of sites that do something similar (where inspiration is maybe being drawn from)? I kind of imagine using gatsby-transformer-screenshot and some grid or list of sites, maybe akin to how Netlify displays previews of sites in it's dashboard view of sites you've published.

There are a ton of "inspiration" websites out there, one of them would be cssdesignawards.

I'd like the idea to search through the starters/showcase with the help of tags, e.g. looking for examples on how to used styled-components. Or the site category Shannon mentioned.

I didn't find a ton that I loved from a design standpoint, though that also gave me the flexibility to go make exactly what I wanted and structure my project accordingly.

Design is subjective to some point but I also find it hard to find the right balance between being open enough for extensions but also "opinionated" enough to target the overall design idea. I don't want the users of my starters to have to completely change everything but rather add their things here and there 👍

I also think seeing how the plugins perform would be awesome, the gatsby-image demo really piqued my interest the first time I saw it and it was one of the big reasons I started experimenting with the package.

Totally agree that examples are important. From what I've seen all starters have a example site but not all plugins have one. That would be also something to improve on. On that note: These examples should use and showcase every option, also the advanced ones. I hate documentations with just only examples for easy things...

[shannonbux]

@gillkyle thanks for the additional perspective! and @LekoArts thanks for the suggestions and can you explain more about this, like an example of what you mean?

On that note: These examples should use and showcase every option, also the advanced ones. I hate documentations with just only examples for easy things...

[gillkyle]

Yeah, well said @LekoArts.

I threw a handful of showcase websites I found in a Google doc (including CSSDesignAwards 👍): https://docs.google.com/document/d/1AiP-SR-gM9nAqw-9I4t9QSv9WISjztzbu7HnaF528uY/edit?usp=sharing

It seems like in almost every case there's a landscape view of the site above the fold in some sort of card format in these showcases. However, I think a lot of these examples are all about design and are trying to be more visual, whereas the gatsby starters are more about the functional parts you can piece together more than the design, so you can give whoever's using it a little more flexibility like @LekoArts brought up.

Makes me think that maybe these examples are better suited towards displaying already made gatsby sites, but because showing a screenshot of a barebones starter site doesn't show you all the cool plugins operating under the hood more details about it would be beneficial.

[LekoArts]

and can you explain more about this, like an example of what you mean?

gatsby-plugin-sharp would be a positive example. Its documentation shows extensive options but nearly everyone is covered in the example site. A bad example site would only showcase the resize ("easy things") but leave out the more advanced options or more advanced ways to connect it with other things in the ecosystem.

I think a lot of these examples are all about design and are trying to be more visual, whereas the gatsby starters are more about the functional parts you can piece together more than the design, so you can give whoever's using it a little more flexibility like @LekoArts brought up.

I have to comment back: Well said!
Right now - for me - starters are not themes. Themes are all about the design, starters more about a specific "tech stack", more about the combination of things or using specific plugins for usecases (like my "portfolio" starters). Sure, I try to make my sites as beautiful as possible, but in some cases the styling part didn't get much attention on starters.

[shannonbux]

@gillkyle thanks for that list of examples! I'm attaching some initial wireframes to this comment that a group of us sketched for record keeping.

And @LekoArts Thanks for that clarification. Very insightful and I think @fk would agree that starters aren't always very visually appealing, and sometimes don't need to be, so the way we present starters vs. example sites vs. themes will be different.

Google Analytics details

The starter page is the 3rd highest visited page on Gatsbyjs.org. So even though some starters might not be super visually appealing, I think making that page more catchy with a few "featured" starters or something could help with drop off, because...

When people land on the starters page, 2/3 of them drop off. The 1/3 that stays most commonly go next to these pages (in order): docs, deploy gatsby, homepage, plugins, awesome gatsby.

If people start at another page, like the homepage, and then go to starters, about 1/3 of them drop off, and the 2/3 that stay go to the same pages as above although also the tutorial and building with components are in the mix of top pages.

To me, this means that the starters page is pretty much not giving a huge percentage of people what they're looking for. And a lot of people are not finding the Awesome Gatsby page (it's not in our top viewed pages, which is the closest thing we have to a site showcase.

Priorities

Because of the google analytics above and this whole discussion, this is what I think we ought to do:

1. Create a site showcase first, because the design is transferrable to starters and themes.
2. Make the site showcase more discoverable than Awesome Gatsby page.
3. Use the site showcase design to redesign the starter page or the way people find starters. Actually we might need to use something like Full Story and usability testing, or ask on Twitter, or all of the above, to figure out why the starter page has such huge drop off.
4. Eventually, all these designs could grow into a theme library (far in the future).

Wireframes

From research it seems that a starter and/or theme library ought to prioritize this info (wondering how it will be different for a site showcase--maybe the first two are most relevant for now?):

• category of the site
• tools the site uses (plugins, libraries, CSS solution, etc.)
• activity (when updated)
• Gatsby version
• popularity
• description of site by author
• reviews (mostly applies to starters/themes)

Screenshots of wireframes

[KyleAMathews]

starters aren't always very visually appealing

This doesn't seem to me to be an argument for showing or not showing screenshots of the starters. Visually appealing or not, the screenshot is important information — if people want a starter that is pretty, they'll go straight to starters that are, if they don't care or are judging based on tech then a starter that's plain might be more appealing because they know there's not a ton of stuff they have to delete before they can get going.

Either way, the screenshot is helpful.

[shannonbux]

Some questions @Thatotherperson and I came up with:

• How many sites should we start out with? I'm thinking maybe something radically small, like 5--10 sites. Or 50 at the most. Because then we can curate the selection and even interview the people behind the sites for newsletter/case studies, etc. Argument for pulling in more than 50: sheer numbers could be impressive.
• How should we choose them? We could just pull in all sites built on Gatsby. There might be some weird or ugly ones in there. OR, we could curate a selection with the 44 Gatsby sites in the top 500k sites. We could use those and then have the community submit their sites too so we can choose another several that are awesome.
• How could we expand the site showcase going forward? I'd say we create a submission process that we review once per quarter and accept like 5 or 10 new sites. Then these could be people that we interview for newsletter/podcast purposes too!

[KyleAMathews]

How many sites should we start out with?

I don't see any reason to limit the number of sites we show. We should definitely show on the initial screen the most "impressive" sites but the more the merrier IMO. Move all the existing showcase sites over and keep encouraging people to add their sites. Everyone likes to show off the work they've done. I don't think "weird" or "ugly" sites are a negative site. People will see plenty of "beautiful" ones so they'll know the tool can do both. Let's encourage everyone to build things and share them.

How could we expand the site showcase going forward

My thought is we'd have a YAML file that people would PR their site onto — similar to the existing process. We'd have some required fields and automatically validate the site(s) they add against that.

[fk]

(Edit: Updated with latest version, minor edits for clarity, and the link to the Sketch source — edits in italic.)

Hey y'all! Here's a first shot at mocking up the Site Showcase UI — "Desktop HD" only for now.
I haven't invested much thought in IA design for now — this becomes quite obvious in the "Filter and Refine" sidebar. More on that later.

v1

Have to run, so let me break down the better things real quick:

• The "Showcase Header/Navigation" bar should become sticky when reaching the top of the viewport. We could do the same for the sidebar.
• The "Featured Sites" icon is used on a showcase site card to indicate if a site was/is "Featured".
• Analog to that, the "GitHub" icon represents a site with a public source. (What if the site source is hosted on BitBucket or GitLab? ;-) Maybe a more generic icon – "Code" or a "Package"?)
• The "Blog" feather icon (see "Mike Johnston for Colorado") should indicate that there's a dedicated article/case study available in the Gatsby Blog, and links there. (Wondering if we should also allow referencing an external link, e.g. to a Medium article?)
• The "Featured Sites" section is thought to be a horizontal scroller. First I had one big card ("The State of European Tech") and four regular-sized cards next to that, but then decided to give using the big format consistently a shot. I still like that a few hours later ;-). This format makes adding a short description easy, and also a "bullet point" style navigation to browse among multiple images.
• The "Filter & Refine" sidebar doesn't need to be initially/constantly visible on Desktop but could appear when clicking "Filter" in the "Site Showcase Header/Navigation". It shows collapsible sections, checkboxes, item counts, and touches on various possible taxonomies. I think defining those is the main job that we have to do to finally get productive. That said, adding combination filters (via checkboxes) might be too much for the initial version, but I guess that also depends on how we facilitate search and filtering in general. Maybe algolia has a nice solution for that?
• A "Submit your Site" CTA to encourage people to add their own blazing fast website to the Showcase.
• We could "Sort" by date added, and alphabetically.

Will add a link to the Sketch source when I'm back at the keyboard. ✌️
Here it is: https://www.dropbox.com/s/mjvuaaugmbdtr5q/gatsbyjs.org%3Ashowcase.sketch?dl=0
You'll need the "Futura PT" and "Spectral" fonts to properly edit this … :-/ … at least the latter is open source (https://fonts.google.com/specimen/Spectral); Futura PT is available on Typekit.

[shannonbux]

Looks awesome, @fk! Wondering how to make horizontal scrolling action discoverable with the featured sites and then make it clear that sites below are vertical scroll.

re: convo with @KyleAMathews and @calcsam Here's how we can select initial sites to showcase:

1. Pull from current "Awesome Gatsby" showcase
2. Manually select others we like
3. Create submission form (I see Flo is already thinking of that)

[jlengstorf]

Can we make this a Google Sheet and just build the showcase from that? This would allow us to periodically rebuild the site showcase with no manual steps because the Google Form would populate our data source automatically.

[KyleAMathews]

@jlengstorf my thought was we use a yaml file — that's pretty easy for people to edit + we can validate new entries on travis.

Google form => google sheet would be fun but then the data wouldn't be editable by the person who submitted the data or anyone else in the community.