Gatsby: 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.

[KyleAMathews]

@fk really beautiful work!

[calcsam]

• 1 to @KyleAMathews's point about using a version-controlled file.

@fk this looks awesome! It's hard to identify which part looks the best because it's the combination of all the little details that making it amazing.

[fk]

Thanks guys! 🤗 👍

Wondering how to make horizontal scrolling action discoverable with the featured sites and then make it clear that sites below are vertical scroll.

@shannonbux Google and e.g. Airbnb use horizontal scrolling a lot for mobile/smaller screens, so I hope that our audience is familiar enough with the general concept. We just need to ensure that there's always a part of the "next" card visible ("Deliveroo.Design" in the mock).

Laptop Touchpad (MacBook and the like) users should be able to scroll not only vertically but horizontally as well with a gesture, and it's also possible with an Apple "Magic Mouse". We can't forget the users with a classic "vertical mousewheel" mouse though. Maybe it's best to show a scrollbar for devices that do not support touch, but only show that scrollbar when the mouse is hovering the "Featured Sites" container.

That said, I'm not _suuuuuper_ attached to the horizontal scroller — but it is a very nice pattern for mobile, and has the great benefit of making the content below that section discoverable without having to scroll through n cards (vertically). It also helps to clearly separate the long-ish list of "regular" showcase items from the featured ones.

[fk]

PS: The second version of the mock now uses "Spectral" for the featured card descriptions, places "Featured" and "Github source" icons next to each other horizontally instead of vertically, and adds a "Built by…" line to the featured items.

[fk]

Here's a quick shot at the mobile version — maybe we want "real" cards here (with a border and subtle box-shadow):

Also threw in a first version of an icon for the mobile navigation.
Braindump:

• I thought dropping the "Sort" button here and move the sort into the "Filter" panel.
• Visual weight/balance of the mobile navigation icons is a bit off since I added the "Plugins" icon.
• Purple headlines for "Featured Sites" and "All x Sites" might be too much.
• Cards in "Featured Sites" are 300px wide, cards in "All x Sites" are 320px…

[fk]

Here's a stub at showcase.yaml: https://gist.github.com/fk/5ec0dbdaeb7f4e1839c99b18cbd42332

• The first item, "The State of European Tech 2017", might be a good example for a manual extension of the data for a site from the current Showcase in the README.
• "ReactJS.org" is its minimal counterpart.
• The "excessive" 😅 example …
  
  
  
  • primarily is me exploring possible categories — I think we should pre-define and curate these — I'm quite happy with those.
  
  
  • tags is something I decided not to touch for now — we might not need them at all
  
  
  • technology is an attempt to extract the bulk of existing (source) plugins and transformers to slightly more human-readable versions … there's _a lot_! 😁 The thought behind that originally was to transform information from the Showcase Site's package.json, but I guess a more sane approach is to implement a proper search here — the package name should already contain what people are possibly searching for.
  
  

FWIW, I started trying to (way too late) find parent categories for (source) plugins and transformers, but eventually dropped that for now:

- Analytics/Tracking
  - Google Analytics
  - Yandex Metrika
  ...
- Comments
  - Talkyard
- CSS (~Frontend/UI?)
  - Emotion
  - Glamor
  - PostCSS
  - Sass/Scss
  - styled-components
  - styled-jsx
  - styletron
  ...
- eCommerce
   - Shopify
   - Snipcart
- (Headless) CMS
   - Contentful
   - DatoCMS
   - Drupal
   - GraphCMS
   - NetlifyCMS
   - WordPress
- Markdown
- React replacements
  - Preact
  - Nerv
- Search
  - Algolia
  - Elasticlunr

[shannonbux]

@fk this is looking amazing! Today I'll come up with a list of possible categories for plugins (from some UX research) that could possibly also help with categories for the site showcase.

I tend to agree with you that the purple titles might be a bit much on mobile, since there is limited space anyway. Hopefully the discoverability of swiping will speak for itself, so people just focus on the sites and don't have to bother with words??

As far as placing sorting within the filter icon, I tend to think they are distinct and ought to be separated visually. To save space, we could do what some designs do and hide them until after someone has already searched for something. UX designers tend to like that stripped down / minimal design and developers like to see their options for filtering and sorting up front :)

[shannonbux]

@ThatOtherPerson what else do you need in order to start working on this? I'm hopelessly new to development so just tell me if we're missing crucial steps here!

[shannonbux]

@fk! @ThatOtherPerson and I are starting a googlesheet to fill with showcase data according to the examples in your .yaml file! Do you have ideas of how to get the "date updated" date easily? Also we're thinking of getting the description from either meta data for google searches or the "About Us" page on each site, depending on which is available / a better description. Any other ideas for how to get the description?

Also, @KyleAMathews and @calcsam David and I determined that we'll need some tips on how to easily search for which plugins each site uses and which version of Gatsby it's using.

[KyleAMathews]

how to easily search for which plugins each site uses and which version of Gatsby it's using.

I think this can wait for a follow-up PR. It'll be really valuable but it's always better to ship a simple/small version of the final vision first. Basically what we'll do though is any site that has a link to a GitHub repo (so it's open source), we can go to that repo, and look at their package.json file to see what version of Gatsby & which plugins they're using.

[shannonbux]

Ideas from a conversation with @davidluhr today (thanks, David! And feel free to clarify/add stuff here):

• What is the clickable tap target pointing to? Is the whole card clickable, or just the site's title? Where does the click link us to (the original site or Gatsby details page). We concluded it probably makes sense for the click to take users to the Gatsby details page, yet clicking on the site title (especially with the icon next to it) could lead them to think they're going to the original site. Coming up with a way to make sure they know they're clicking to see more details is key.
• Having two ways to view all featured sites and view all sites below and two ways to view filters could be a bit confusing (I think @fk you already anticipated this).
• The CTA to "Submit your own plugin" Could be more prominent and might be useful at the top (for those who come to the page looking for a way to submit) AND at the bottom (for those who feel inspired to submit after they've looked around a while)
• The side-scrolling probably ought to stop after a set # of sites, and then either have a "View all" card OR nothing, so that people just start scrolling down.

[davidluhr]

@shannonbux You're most welcome! Very excited to see this project coming to life.

A couple other thoughts from looking at the mockup:

• The "Showcase Header/Navigation" feels disassociated from the list of all Showcase Sites that these controls are tied to. I'd expect filtering, searching, and sorting to affect the list of 236 sites in real-time, but I'd miss these controls if I had already scrolled down to look at the full list. I think moving the controls between the heading "All 236 (blazing fast) Showcase Sites" and the grid of actual sites would provide more clarity around what content these controls will affect.
• To add to the above point regarding the "Submit your site" CTA, I think this could use more visual affordance. This page gets users super excited about what's possible with Gatsby, but also encourages people to build great things in the hopes of getting featured. A dedicated section appealing to the "Want to get featured? Submit your site!" call-to-action feels useful here, as one of my first questions was how/where are submissions handled, and I missed the text link at the top of the page (I was too busy staring at all the awesome sites!).
• I was confused by the feather icon and had no idea what it signified. I see that on mobile there's more correlation with the blog, but this context is lost on larger devices. I think that for this main showcase page, it doesn't add any helpful disclosure or interest to a particular showcase site. If the plan is to always bring users to a detail page within Gatsby before linking out to the live site (which I think is a strong pattern), then maybe we hold off on indicating/linking to an associated blog post/case study until this point (it could look nice with other detailed taxonomy on the details page).
• In my conversation with @shannonbux and @KyleAMathews, we discussed how the list of all sites might be ordered by default, and talked about potentially basing it off of recent popularity in terms of pageviews. With this, I think it'd be helpful to have some micro text that mentions how the list is sorted. If we move the filter/search/sort controls into this section, we can indicate the current sort state next to the control.

Looking great so far!

[fk]

@shannonbux @davidluhr Great thoughts and feedback! 🙏 🤗

---

Re: @shannonbux

Do you have ideas of how to get the "date updated" date easily?

It would be updated (and only exist) once an existing showcase site has been updated manually. I mainly threw it in because it adds another sort criteria. Didn't put too much thought in it :-/, but figured it's an easy thing to add.

What is the clickable tap target pointing to?

Oh man, I didn't do my homework regarding the detail view; TBH I didn't think we'd need one for version one. Looks like I focused a little too much on the available content for the sites in the showcase that _do not have their source available_ (so that we can look into package.json and compile information based on that), and didn't even think of generating a description automatically for those. We (potentially) _do_ have the README content for the open sourced sites, so … I will mock up a detail view (x2 — one with lots, and one with very little information). 😃

I personally dislike having to click through to the detail view just to get to click the link to the site, so I would suggest

• clicking anywhere on the card goes to the detail view and
• offering a dedicated button to directly open the site from the card view.

That said I can see some advantages for forcing the user to visit the detail view before being able to access the link to the site, so not very attached to add one more button to the card.

Probably stating the obvious: A card's category labels are clickable, too, and result in a filter being set (and the view updating accordingly).

The side-scrolling probably ought to stop after a set # of sites, and then either have a "View all" card OR nothing, so that people just start scrolling down.

👍 I thought of a "View all" that would set filters to just show the featured sites. The "All 236 sites" headline would change to "x _featured_ sites" and we'd have a button to remove/reset filters…somewhere. ;-)

Having two ways to view all featured sites and view all sites below and two ways to view filters could be a bit confusing (I think @fk you already anticipated this).

As I understand it, there's three :-) ways of viewing all featured sites:

• By clicking on "View all" next to the "Featured Sites" headline.
• By scrolling to the end of the "Featured Sites" list and clicking "View all" there.
• By setting a filter in the sidebar.

I don't think this is _too_ confusing, but I completely agree that my mock wasn't thought through in terms of filtering (I think I even might have mentioned that when posting the mockups). @davidluhr has a great suggestion on moving the "Showcase header/navigation" below the "Featured Sites" block. I'll share more of my thoughts when addressing his comment.

---

Re: @davidluhr

The "Showcase Header/Navigation" feels disassociated from the list of all Showcase Sites that these controls are tied to. I'd expect filtering, searching, and sorting to affect the list of 236 sites in real-time, but I'd miss these controls if I had already scrolled down to look at the full list. I think moving the controls between the heading "All 236 (blazing fast) Showcase Sites" and the grid of actual sites would provide more clarity around what content these controls will affect.

Totally agree! 🤦‍♂️ 👍 👍👍
What are your thoughts about persistently showing the filter sidebar for ~desktop and up?
Should we give the list of sites more room and only show the filter menu "on demand" (when the user clicks the "Filter" button), essentially treating the desktop UI the same as we would do for mobile?

I strongly suspect our filters (at least partly) not to be mutually exclusive at some point, which IMO would speak for making the filter sidebar persistent as soon as screen size allows it.

Sidenote: For mobile we need to convey that the list of sites is filtered once a filter has been set. Airbnb does that by simply changing the color of the "

I was confused by the feather icon and had no idea what it signified. […] I think that for this main showcase page, it doesn't add any helpful disclosure or interest to a particular showcase site.

Agreed!

[…] I think it'd be helpful to have some micro text that mentions how the list is sorted. If we move the filter/search/sort controls into this section, we can indicate the current sort state next to the control.

---

Both of you addressed the "Submit your own site" CTA:

The CTA to "Submit your own plugin" Could be more prominent and might be useful at the top (for those who come to the page looking for a way to submit) AND at the bottom (for those who feel inspired to submit after they've looked around a while)

To add to the above point regarding the "Submit your site" CTA, I think this could use more visual affordance. […] A dedicated section appealing to the "Want to get featured? Submit your site!" call-to-action feels useful here […]

👍 Agree with both, leaning towards @davidluhr's suggestion to give that CTA a sedicated section on the page — let's unclutter the UI and make that CTA more prominent.

[fk]

Here's a quick shot at the "View all Featured Sites" card:

[fk]

A first shot at the detail view for Desktop — mobile up next:

[calcsam]

Ooh, these are nice Flo :)

On Wed, Apr 11, 2018 at 7:53 AM, Florian Kissling [e-mail]
wrote:

A first shot at the detail view for Desktop — still missing a close button
for the modal 😬— that and mobile up next:

[image: site showcase desktop detail view]
https://user-images.githubusercontent.com/21834/38624573-ad690e74-3da8-11e8-878a-9c37d4ef9111.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-380481506,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEL3W9yGfk2PWR7Blo2jw_uq_kH5vlzpks5tnhjugaJpZM4SfWNe
.

[davidluhr]

@fk This is looking amazing! I really like the visual reward of reaching the end of the scrollable featured sites with the View All card.

The details modal looks great too. The ability to tap the arrow to go back/forth between sites is awesome for those who want to binge on all the showcases. My only thought is what happens if a user arrives at this page directly? Being in a modal might be a little confusing since they don't have the context of opening it from a main page.

Instagram address this by conditionally showing the modal only if the user opened it from a grid of images:

Otherwise, if the user navigates directly to the URL, a full page is shown with global navigation:

This "standalone" version would probably be a common use case for people sharing their featured site with their network. Some navigation/CTA to visit the showcase page from this standalone version might be a good idea to keep users engaged in this content area.

What do you think?

[KyleAMathews]

Definitely agree about not loading the modal if you visit a URL directly. That's what we do on gatsbygram and we can use the same pattern https://gatsbygram.gatsbyjs.org/1677771511187112561/

[shannonbux]

These look awesome, @fk! And great points David and Kyle about how to
handle the modal thing. @ThatOtherPerson is working hard on coding and will
reach out to Florian for any more clarification on design. I'll spend next
Mon/Tues (after workshops) getting all the data ready! We're getting closer!

On Wed, Apr 11, 2018 at 1:30 PM, Kyle Mathews [e-mail]
wrote:

Definitely agree about not loading the modal if you visit a URL directly.
That's what we do on gatsbygram and we can use the same pattern
https://gatsbygram.gatsbyjs.org/1677771511187112561/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-380585663,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2uKokEFHhZ-BzLrqoj8jZPkL-UsUks5tnmfjgaJpZM4SfWNe
.

[fk]

Fully agree (again ;-)) @davidluhr!
Thanks for taking the time to comment so thoroughly!

Shame on me again :-) — I implied that we'd have a "permalink page" along with the modal … probably because I'm a little too familiar with that pattern.

Your comment made me realize that it makes total sense to mock this up, too, to get things defined. I agree we should have a clear link back to the showcase home page. Also we probably want to show links to the previous/next site below the content here, etc. … Will mock it up!

[fk]

@shannonbux @KyleAMathews Dang, had the tab open with David's answer and submitted mine w/o refreshing — just saw your comments.

@KyleAMathews Actually was thinking about http://gatsbygram.com/ :-D
@shannonbux @ThatOtherPerson 🙌 💪

[fk]

Just updated the mock in https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-380481506 to contain a close button for the modal. Not sure if I like it being so close to the "Featured Site" label/link, however I like the proximity to the modal itself (as opposed to place it in the upper right corner of the window).

Also here's a first shot at a Desktop "Permalink Page":

I'm also not sure if I really like the whole sidebar treatment here or not 😁 — but I thought why not try something at least a _little_ different for a change. Easy to revert to a more traditional approach.
The "Previous Featured Sites" only appear for "featured" sites.

[fk]

First shots at the detail view modal for mobile:

I decided to place "Category/Technology/Date" at the bottom for now, but I can see different approaches — e.g. trade places with explicit URL and "Built by", sit with the other meta information below the site image on top but be initially collapsed, putting description and Category/Technology/Date in collapsible containers with the description expanded and Category/Technology/Date sticking to the bottom of the viewport … ;-)

Here's that bottom part:

[fk]

Picking up from https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-379012628, here's an update to the "Showcase" home page for "Desktop HD":

• More prominent "Submit your Site" CTA in the header of the "Featured Sites" block, picking up the copy suggested by @davidluhr. After playing around a little with a dedicated section placed in between "Featured Sites" and the list of all Showcase sites, I felt that was a bit too heavy and somewhat distracting. TBH I'm still not happy with that thing… 🙃
• Moves "Search" and "Sort" down to the header of the "All Showcase Sites" list and drops the "Filter" button in favor of the sidebar with ~the same headline.
• Removed the "feather" icon.

[shannonbux]

These are looking great @fk!
I really like the big images (put.io and GraphCMS) at the bottom of the
detailed desktop view with the "previous" and "next" arrow buttons.

• Re: sidebar: I think the sidebar could be fine as long as it is
  horizontally aligned in a pleasing way with the title of the site and
  screenshot. It could be visually nice to place all that info below the
  screenshot, although I'm a fan of keeping all that relevant info "above the
  fold" so people don't have to scroll to see it.
• I like the more prominent "submit your site" button although I wondered
  if it is two buttons (White and purple)

On Wed, Apr 11, 2018 at 6:36 PM, Florian Kissling [e-mail]
wrote:

Picking up from #4392 (comment)
https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-379012628,
here's an update to the "Showcase" home page for "Desktop HD":

[image: desktop hd rinse 2]
https://user-images.githubusercontent.com/21834/38651581-526f50b4-3e02-11e8-9572-84359876bf62.png

• More prominent "Submit your Site" CTA in the header of the "Featured
  Sites" block, picking up the copy suggested by @davidluhr
  https://github.com/davidluhr. After playing around a little with a
  dedicated section placed in between "Featured Sites" and the list of all
  Showcase sites, I felt that was a bit too heavy and somewhat distracting.
  TBH I'm still not happy with that thing… 🙃
• Moves "Search" and "Sort" down to the header of the "All Showcase
  Sites" list and drops the "Filter" button in favor of the sidebar with ~the
  same headline.
• Removed the "feather" icon.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-380646846,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2ryDiQ6wKhqiriLnXtRwNwNFK1Zvks5tnq-XgaJpZM4SfWNe
.

[shannonbux]

Some UX process notes that I'd love feedback on. I will turn the User story / MVP drawing into a checklist at the top of this issue.

[shannonbux]

I didn't know whether to add this to top or as new comment or start new issue. Lmk your ideas on where to put this list and if you agree with it:

@fk @ThatOtherPerson
MVP (minimum viable product)
Users should be able to:

• [x] See screenshots (Landing page)
• [x] See source code (Site detail page)
• [x] Share sites by copying the URL
• [x] Filter by category
• [x] Search

Not strictly MVP but seems like we're gonna do it anyway

• [x] Submit their own site to the showcase through yaml file (Shannon writes the instructions)
• [x] See featured sites

Phase 2
Users ought to be able to:

• [ ] Sort by date added (won't matter until ppl start submitting sites)
• [ ] click on a category name from the modal to filter by that category
• [ ] Share sites with a social media / URL copy button in a modal
• [ ] visit a personal page for creators of sites (see all sites they have submitted)

Problems to fix:

• [ ] there are no descriptions and dates added to most sites, so see if @KyleAMathews or someone else can write a script to contact them and ask them to add it or pull the dates automatically?
• [ ] --difficult to preserve state here, so table this, see if @sw-yx figures it out in starter showase, possibly put in gatsby-link--When I click from the modal view to the site URL or src code and then use back arrow, I go to the permalink page. I would have expected to go back to the modal view.
• [ ] looks like screenshot isn't rendering non-roman characters, like this one in Japanese: https://5b1ac9153672df15a1c3b201--gatsbyjs.netlify.com/showcase/www-yuuniworks-com/

Very cool, not necessary right away
It'd be awesome if users could:

• [ ] For non-developers, have a CTA where they can hire someone to build them a Gatsby site / ask for demo, etc. (could be on upper menu, in which case it would not belong to site showcase)
• [ ] See case studies related to sites
• [ ] See a list of the site's dependencies
• [ ] Sort by date updated for sites with open src code
• [ ] See the performance of each site in action (GIFs, performance metrics, data on traffic improvement after the site switched to Gatsby,etc.)
• [ ] See a list of all sites that use a particular plugin (this would be a change to the plugin library, probably)
• [ ] Sign up to get notifications or updates when new sites are added (or just sign up for the newsletter?)
• [ ] Be guided to the tutorials if they want to build sites like the ones they are seeing

[shannonbux]

Great question from @ThatOtherPerson about what if we don't have certain pieces of metadata for a particular site? For example, if there is no source code available, we'd want to make sure that the site creator can still add the URL later (some of them probably have a github URL that we just don't know about). As far as from a design standpoint, I'm not sure what the best practice is. Would it be hard to just leave that area blank if there's no data to populate it (I guess the disadvantage here is what if there is a case study but no source code? A blank space above the case study icon and line would look wierd)? Another option is to leave the icon and text and just have them greyed out and clearly not clickable. I want to ask Florian what he thinks @fk

[fk]

As far as from a design standpoint, I'm not sure what the best practice is. Would it be hard to just leave that area blank if there's no data to populate it

I think it's perfectly fine to just omit meta information that we do not have for a site. If a site doesn't have its source code available, we just don't show the corresponding icon and label — not hard to implement at all.

For example, if there is no source code available, we'd want to make sure that the site creator can still add the URL later (some of them probably have a github URL that we just don't know about).

We could encourage people to add information on e.g. the "Built by" by including a CTA along the lines of "Created this site? Claim your credits!". We'd "just" need to make sure to verify this information somehow… :-/

[LekoArts]

We'd "just" need to make sure to verify this information somehow… :-/

To verify at least that someone has access to the FTP/server/repo you could use a file with random name and content. Like Google does it with its Webmaster Tools

[fk]

Apologies for the super slow updates here from my side.
FWIW I built a prototype of the mobile version showing

• fixed Showcase navigation bar with
  
  
  
  • filter menu
  
  
  • sort dropdown
  
  
• Showcase site detail view

You can see it at https://invis.io/T9H9LRCG8Z5#/292717380_Index

[shannonbux]

Wow, @fk! Looks great! I love the filter layout and the animations are just what I would expect. Very smooth and comfortable. Also the State of European tech screenshot is so spectacular, it makes the showcase look amazing. That is another awesome thing about this showcase; not only is the showcase really beautiful in and of itself, it will also show off the design work of hundreds of designers because the screenshots will be so awesome!

In the detail view, what list do the "prev" and "next" sites belong to? Featured sites, alphabetical list, etc.? I wasn't sure.

[davidluhr]

@fk Prototype is awesome! One small thing I noticed is on the detail page, the top link to "Showcase" has a right-pointing arrow, which is a little confusing. In this case, should the arrow be on the left to point "back" to the full site showcase page?

[fk]

One small thing I noticed is on the detail page, the top link to "Showcase" has a right-pointing arrow, which is a little confusing. In this case, should the arrow be on the left to point "back" to the full site showcase page?

@davidluhr Good call, updated! 🙏

[fk]

Here's an updated "Desktop" modal view that removes its sidebar.

It does to take into account that we possibly have

• none or only a relatively short site "description" and
• an undefined number of taxonomy terms ("Category", "Technology" and/or "Tags") associated with a site.

Going horizontally avoids ugly whitespace in case either the description or taxonomy content is very long while their counterpart in sidebar or the main column isn't.

It also adds a thumbnail and title to the "show next site" arrow right to the modal, pulls the "close modal" button into the modal, and abandons the purple overlay background color.
What do you think?

[fk]

In the detail view, what list do the "prev" and "next" sites belong to? Featured sites, alphabetical list, etc.? I wasn't sure.

@shannonbux That's another good question that I've been wondering about myself while working on the new modal view as well as as preparing the "Mobile" prototype.

The "Featured Sites" section on the "Showcase" index page makes things a bit more complicated than they need to be. If we want to keep it, I'd suggest the following:

1) When viewing the details for a site listed in the "Featured Sites" section on the "Showcase" index page, the previous/next links IMO should show the previous/next site from the "Featured Sites" section list — at least that's what I'd expect as a user. That said, we would need to decide wether to allow browsing through _all_ sites in the "Featured" category, or just the sites listed in the "Featured Sites" section (e.g. ten), and show the "View all featured Sites" card as last item (e.g. after the tenth item). Clearly leaning towards the latter here.
2) When viewing the details for a site listed in the "All Sites in Showcase" section, previous/next should show the previous/next site in the list, reflect the current filter and sort settings.

[shannonbux]

Ok I agree with those ways of determining which sites are previous/next.

The modal looks excellent to,@fk!

On Mon, Apr 30, 2018 at 10:45 AM Florian Kissling [e-mail]
wrote:

In the detail view, what list do the "prev" and "next" sites belong to?
Featured sites, alphabetical list, etc.? I wasn't sure.

@shannonbux https://github.com/shannonbux That's another good question
that I've been wondering about myself while working on the new modal view
as well as as preparing the "Mobile" prototype.

The "Featured Sites" section on the "Showcase" index page makes things a
bit more complicated than they need to be. If we want to keep it, I'd
suggest the following:

1. When viewing the details for a site listed in the "Featured Sites"
   section on the "Showcase" index page, the previous/next links IMO should
   show the previous/next site from the "Featured Sites" section list — at
   least that's what I'd expect as a user. That said, we would need to decide
   wether to allow browsing through all sites in the "Featured"
   category, or just the sites listed in the "Featured Sites" section (e.g.
   ten), and show the "View all featured Sites" card as last item (e.g. after
   the tenth item). Clearly leaning towards the latter here.
2. When viewing the details for a site listed in the "All Sites in
   Showcase" section, previous/next should show the previous/next site in the
   list, reflect the current filter and sort settings.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/4392#issuecomment-385457091,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2kK23GCpIeqlDbvJiiZ-GHXCJuIbks5ttz-lgaJpZM4SfWNe
.

[fk]

@shannonbux 👍 , will follow up with a matching detail view for Desktop!

[fk]

Here's the updated detail view for Desktop:

Updated Sketch file: https://www.dropbox.com/s/9vzatfift5oz69b/gatsbyjs.org%3Ashowcase.v2.sketch

[sw-yx]

hello im new here - it looks like the design is more or less done and just waiting for some dev time? has anyone started on this? (also I don't have sketch so this is gonna be tricky)

[daydream05]

Would also love to help with the development of this!

[shannonbux]

@sw-yx did you see that @ThatOtherPerson referenced this issue and has built most of the functionality? We would love for your feedback and help!

[sw-yx]

just saw! nice job!

[shannonbux]

Closed and moved next phases to Issue #5927