search

GraphQLGuide / news

Hacker News for GraphQL
https://staging.graphql.news
MIT License
2 stars 2 forks source link

design #2

Open lorensr opened 6 years ago

lorensr commented 6 years ago

post design idea drawings here!

similar news sites

vulcan: https://sidebar.io/ http://huttle.co/ https://www.smarthosts.org/

non-vulcan: https://www.producthunt.com/ https://news.ycombinator.com/

graphql design exampes

https://graphql.guide/ http://graphql.org/ https://www.graphql.com/ https://summit.graphql.com/ https://www.apollographql.com/

lorensr commented 6 years ago

currently looks like:

image

lorensr commented 6 years ago

image

—@callunity

lewi-g commented 5 years ago

Landing page wireframe: https://wireframe.cc/d3mkIE

lewi-g commented 5 years ago

Mobile wireframe: https://wireframe.cc/UMhsb2

lorensr commented 5 years ago

Desktop

image

time ago

Depends on layout (eg sidebar has no dates), but I like this version of time ago:

time ago (eg 10 hours ago) is easier to read for dates that are in recent days, and then switching to dates, but i think it's good to be minimal on the front page, so maybe Mar 12th if current year, instead of whole timestamp

and at least for a while after launch, I'd like to be submitting enough links ourselves that the default front page won't have very old links.

rows

I like current item rows—any reason for moving time ago to the right or not having the comment heads on right end?

login

Button? I like Github links. Discuss if needed in #4

layout

I like the right column—rows don't need to be nearly as wide as current, see eg sidebar. It feels weird to me for search to be on the side? Usually in header or above list? I like current location, and there's plenty of room for it. For right column, in addition to newsletter signup, maybe a short description and tags & top users, like smarthost (a vulcan app, so maybe there's a component already for them, or maybe its OSS):

image

Mobile

image

current:

image

rows

I like the relative compactness of your rows, but I think width is optimistic. Both versions have image, title, and upvote on same line. I like the size of image & upvote on current, but the text feels squished. And current feels too tall—all the metadata doesn't need to be on different lines. I like Sidebar, with images on the right, but need a place for upvote:

image

comments

Your icon+45 for comments isn't as obviously clickable as the current link, which might result in people not reading comments or commenting. Problem with user next to "2 comments" is that they're both blue. Nice to have time ago between the two links.

filters

I like yours—current takes needless vertical space. Dropdowns don't need to be full width, and search isn't a common enough use case to warrant an input—your search icon that shows the input is good.

newsletter

Looks like yours is fixed? I like it as a break in the rows:

image

lorensr commented 5 years ago

img_7343

I like links in lieu of View dropdown (not obvious to user what's behind that dropdown). Thinking top selected by default. Clicking Submit Link, when you're not logged in, should just open Github OAuth. Ditto with commenting and upvoting. So maybe we don't even need a "Sign up" link in header?

For mobile, keep links instead of View. But Tags dropdown instead of tag cloud. Don't like "Topics"—feels like there should be one "topic" to an article, but like there can be multiple "tags/categories".

For newsletter subscription dropdown:

lewi-g commented 5 years ago

Desktop

time ago

I agree about submitting enough links ourselves that the default front page won’t have very old links

rows

I think we should have the item that we think most users will look for be separate from the others and grab attention. I thought the age of the links might be what users will find interesting. If you think it’s the comments, then I would swap the where time-ago and comments are in the row…. Or put them side by side on the right side of the row where they are less likely to be crowded by the title of the link.

layout

The placement of the search button is a little arbitrary.

Sidebar has their search button at the top; however, it acts more like a button that displays components with tags for the articles, an input field for the search and a calendar.

Hacker News has their search button at the very bottom. A user can search only after scrolling all the way down on either desktop or mobile.

Choosing to have the search button on the side gives the components at the top some room to breathe while also allowing users access to the search bar whenever they want. Doing a quick look at the pages I had open in my browser, https://www.apollographql.com/docs/ and https://docs.meteor.com/#/full/ both have their search fields on the left side. It doesn’t seem uncommon.

I really like the idea of having some description, tags and top users on the side column! I would be cautious about the smaller details of this column so that it doesn’t visually overpower the main column.

Mobile

rows

I agree that we can put all the metadata on the same line. HN doesn’t have any images on mobile and is able to display 11 links on pixel-2. Sidebar barely shows 3.

comments

I agree the color of time ago gives a visual break between comments and user. We can always change the color scheme if we decide we want to have them in a different order. I left them in the current order to have some continuity between the desktop version and the mobile version. If we are not going to move time ago to the center on both, I would rather change the colors so that the comments look more enticing to click.

newsletter

Sidebar had the newsletter signup come after the first day’s list of links. Since we aren’t planning to batch our links, perhaps what we can do is have the subscribe component disappear after the user has scrolled through X number of links? Or we can have it come up after a fixed number of links has been scrolled through by user?

Currently, subscribe component takes up the space of at least 1 link that we could have been showing our users. It feels like a misuse of our real estate and I would love to change that.

image

lorensr commented 5 years ago

rows

What about desktop rows as is, and matching for mobile, without these avatars?

image

search

It feels to me like it fits on top, as one of the ways to filter/change the list of items (in meteor docs/guide, it's filtering the list of chapters/sections, which is in the sidebar). But it's also probably not used much, so doesn't need to take up prime real estate. Right column under Tags?

mobile newsletter

I like the sidebar style of inline instead of an X-able box. And after a few rows.

lewi-g commented 5 years ago

rows

What about desktop rows as is, and matching for mobile, without these avatars?

image

I like it.

search

Right column under Tags?

That seems like a reasonable place to put it. If we find that it is getting more usage, we can move it to be placed above tags.

mobile newsletter

I like the sidebar style of inline instead of an X-able box. And after a few rows.

Seems good to me.

rows

Do you have any opinions about numbered vs un-numbered rows. Sidebar links aren't numbered, HN numbers their links. What do you think?

lorensr commented 5 years ago

Do you have any opinions about numbered vs un-numbered rows. Sidebar links aren't numbered, HN numbers their links. What do you think?

thinking not that useful, so not worth the mental & page space

lewi-g commented 5 years ago

Agreed.

On Thu, Oct 18, 2018 at 2:01 PM Loren ☺️ notifications@github.com wrote:

Do you have any opinions about numbered vs un-numbered rows. Sidebar links aren't numbered, HN numbers their links. What do you think?

thinking not that useful, so not worth the mental & page space

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/GraphQLGuide/news/issues/2#issuecomment-431105406, or mute the thread https://github.com/notifications/unsubscribe-auth/AYQl_av4UEw_eG3m_KKIwla44iODGMuwks5umMIBgaJpZM4QGwE3 .