Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Revisit detail page header layout - Starter Showcase #6710

Closed
shannonbux opened this issue Jul 24, 2018 · 16 comments
Closed

Revisit detail page header layout - Starter Showcase #6710

shannonbux opened this issue Jul 24, 2018 · 16 comments

Comments

@shannonbux
Copy link
Contributor

@fk can provide design
@shannonbux shannonbux mentioned this issue Jul 24, 2018
Closed
6 tasks
@fk
Copy link
Contributor

fk commented Jul 25, 2018

Ref. #6098 (comment). I'll provide a design that handles both use cases.

@shannonbux
Copy link
Contributor Author

@fk do we need this issue and #6098?

@swyxio
Copy link
Contributor

swyxio commented Jul 26, 2018

alright i'll wait for this

@fk fk mentioned this issue Jul 30, 2018
Closed
@fk
Copy link
Contributor

fk commented Jul 31, 2018

@shannonbux Let's keep one for starter and one for site showcase.

@fk fk changed the title Move “visit site” and social sharing button above screenshot - Starter Showcase Revisit detail page header layout - Starter Showcase Jul 31, 2018
@fk
Copy link
Contributor

fk commented Jul 31, 2018

I took a stab at bringing site and starter showcase headers for detail/modal pages closer to each other yesterday (these only show the relevant bits, not the whole page layout):

https://www.figma.com/file/SDk6oSBkddeq1tBYQuPHr9Pd/gatsbyjs.org%3Ashowcase.v3?node-id=52%3A3941

bildschirmfoto 2018-07-31 um 18 22 19

  • add a "(Back to) All Starters/All Showcase Sites" link (as discussed in Add prev/next links to detail page - starter showcase #6711 (comment) ff)
  • move the Starter Showcase author link below the starter title to avoid conflicts with the "(Back to) All…" links, and to get rid of one the main differences that currently exists between the two headers
  • prevent the "Visit site"/"Visit demo" and "Share" menu buttons from conflicting with the site screenshot on detail pages for screens larger than mobile (as discussed in [www/showcase] Revisit detail page header layout #6098 ff)
  • move the "GitHub stars" count and icon below the starter title
  • revisited the design of the "Try this starter on" links/buttons (repl.it, CodeSandbox, Netlify)
    • introduced a dropdown for smaller screens, thinking we can also use that for the "Share" menu links
  • tried orange for the primary button on detail pages

Should we open a new issue to discuss the changes?

@fk fk mentioned this issue Jul 31, 2018
Closed
@shannonbux
Copy link
Contributor Author

I love these @fk! Especially the desktop versions. And with the mobile versions you've solved a lot of tricky problems elegantly. I only have a couple comments:

  • The mobile detail:starter drop-down menu to "try this starter on..." confused me for some reason. Just thinking outloud, I think it's because I'd expect some sort of button to push after selecting something from the dropdown. I'd be nervous that as I'm scrolling, I could accidentally initiate an action I didn't mean to just through scrolling with my thumb.
  • I noticed the "visit this site" and social sharing button are on the screenshots on mobile views. It's tricky to know where else to put them since there is less space, and yet it still seems worth trying because of the potential for people to confuse the buttons as part of the site :)

If opening a new issue and closing this one would help you stay organized or if you can think of other reasons to do it, go ahead!

@fk
Copy link
Contributor

fk commented Jul 31, 2018

If opening a new issue and closing this one would help you stay organized or if you can think of other reasons to do it, go ahead!

Generally I think it could help if would separate feature discussion from implementation -- as both #6710 and #6098 already contain a bit of discussion, let's move along with this as it is. I'll pay attention to this for new stuff though.

Good to hear that you like the changes! 👍

The mobile detail:starter drop-down menu to "try this starter on..." confused me for some reason. Just thinking outloud, I think it's because I'd expect some sort of button to push after selecting something from the dropdown. I'd be nervous that as I'm scrolling, I could accidentally initiate an action I didn't mean to just through scrolling with my thumb.

IMO that's not only an issue with the links in the dropdown, but also with any other link on the page. Phones do a good job at distinguishing between "tap" and "scroll" usually. I really don't know how to solve this problem in a different way other than using a dropdown (which is not too costly to implement, at least for what we need in this specific case) or a "bottom sheet" (a little more costly, see e.g. https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet). FWIW I really like the "bottom sheet" pattern and would prefer that on mobile.

I noticed the "visit this site" and social sharing button are on the screenshots on mobile views. It's tricky to know where else to put them since there is less space, and yet it still seems worth trying because of the potential for people to confuse the buttons as part of the site :)

We def. can put them elsewhere, but would lose some vertical space. I think you make a valid point here and streamlining the implementation wouldn't be a bad thing, either. Let me add another set of designs to try!

@fk
Copy link
Contributor

fk commented Jul 31, 2018

Here's a shot at moving "Visit site/starter" and "Share" menu buttons away from the screenshot on mobile:

image

(also available in Figma at https://www.figma.com/file/SDk6oSBkddeq1tBYQuPHr9Pd/gatsbyjs.org%3Ashowcase.v3?node-id=52%3A3941)

The only thing we'd lose this way is the explicit site URL for the "Site Showcase" card ("2017.stateofeuropeantech.com"); I think that's perfectly OK. For the starter I demoed the truncation of the "builder" name ("By greglobinski-longnam...") and removed the "Built" from "Built by" to gain a little more horizontal space. Button text could be 1px vigger.

@fk fk mentioned this issue Aug 1, 2018
Closed
@shannonbux
Copy link
Contributor Author

shannonbux commented Aug 7, 2018 via email

@amberleyromo
Copy link
Contributor

update: @fk is creating updated mockups from more recent discussion

@fk
Copy link
Contributor

fk commented Aug 30, 2018 •
edited
Loading

Welcome to round 3 of mockups for this 🙄😁 🎉
But why?

Chatting with @amberleyromo about this issue and the latest mockups, Amberley pointed out some things missing in the consolidated designs shown earlier in this thread.
More importantly, we discussed how to handle the differences in between mobile and desktop designs in terms of implementation, and realized that some of the decisions made for those designs unneccesary complicated the implementation without having a real benefit for the user.

Without further ado, here's the updated shots (please visit the source on Figma if you're having problems seeing the details):

bildschirmfoto 2018-08-30 um 18 10 50

These do…

  • not pull the "Back to Overview" ("All Starters/Sites") links to the left for desktop screens anymore—instead we stick to a "linear", easily scanable layout for desktop, too
  • adjust the Starter's "GitHub stars" count styles to get rid of the almost-illegible yellow, and darken the count number text color
  • honor the "GitHub stars" count in the mobile designs—where they were missing before
  • move all meta data that (we assume) is not super important below the screenshot
  • consistently group the "Visit Demo/Site" and the "Share" link buttons—no more special treatment for the button opening the "Share" menu for desktop screens
  • consistently place the "Visit+Share" button group aligned to the right of the screenshot—we felt this makes them stand out more, and nicely balances out the weight of the left hand side
  • reshuffle the "primary meta row" below the title so that the "by John Doe" author credit is consistently followed by the "Visit/Share" button group
  • move all other important meta to preceed the "author credit/Visit+Share button group"—this makes it easier to facilitate the different designs for mobile and desktop
  • give "Category" and "Added/Updated" their own rows on mobile to make implementation easier
  • don't overload the user with too much meta information—move the second row of meta below the screenshot consistently for mobile and desktop; not too attached to that change, but I want to suggest testing this—that said, the design/layout adjustments proposed here should make moving that row before the screenshot for desktop easy
  • removed all those subtle horizontal and vertical lines separating the different meta rows and "columns"

@shannonbux Do you think the updated designs hold up to the earlier versions?
Anything I missed @amberleyromo?

@amberleyromo
Copy link
Contributor

@fk

removed all those subtle horizontal and vertical lines separating the different meta rows and "columns"

Subtle horizontal lines still in the mobile view (which I think makes sense) Intentional?

@fk
Copy link
Contributor

fk commented Aug 30, 2018 via email

@fk fk unassigned swyxio Aug 31, 2018
@amberleyromo amberleyromo mentioned this issue Aug 31, 2018
Closed
@shannonbux shannonbux mentioned this issue Aug 31, 2018
Closed
@amberleyromo
Copy link
Contributor

@shannonbux all comments addressed in figma -- started on #7731. Can we close this one out?

@shannonbux
Copy link
Contributor Author

closing and starting on #7731 thanks @fk and @amberleyromo !

@fk
Copy link
Contributor

fk commented Sep 5, 2018

👍

@amberleyromo amberleyromo mentioned this issue Sep 26, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@fk @amberleyromo @swyxio @shannonbux