enhancement: streamline and redesign entry page layout

[nakedfool]

Here is the rough idea of how would entry page look redesigned for the desktop, please bear in mind that all of the stuff in here is not polished to the max, every element should be enhanced, i just wanna give a layout structure.

I have envisioned that every element in the modal should be visible from the start and only scrollable area should be the entry content itself and let's go one by one here:

1. Entry page header

In the header we can place:

• author name
• entry placement and votes
• share button ( not visible in the screenshot but could appear there )
• prev and next entry navigation

Additionally, there is space for an entry title, which we can now effectively extract from the metadata. The title may show up above the author name in a larger font size.

2. Entry page sidebar

I really like this one since it has a sidebar that can be collapsed if the user wants to (you can see the arrow on the left). It's also useful because the user may choose to ignore this info, but it's still important. Therefore, i think it makes perfect sense to combine those two into a collapsable sidebar. Again, this is only a rough sketch; the final design will enhance all of this.

3. Entry page content

This is the only scrollable piece of the modal and it really makes sense for the one to be scrollable, since we can't resolve maximum height but can always set a minimum height for it. Another good approach to make this better would be to add a shadow to the end of the text when the user is going to scroll. This way, they will always know there is more to scroll (which is a great visual effect, imo).

4. Entry page voting widget

We might consider how we would like to represent the voting widget below; i was thinking that we could probably put all of the info in the input box. This is another crucial component of the modal that should always be visible. see uniswap voting widget for example:

Rather than using separate paragraphs for the wallet balance and total charge, we could include them in the input, with the wallet balance on the right and the predicted amount to be spent (total charge) on the left.

FINAL NOTE:

I'm open to hear feedback on this redesign, i really love the structure here and i'm open for any design changes, i believe this can be sharpened more and more.

[divine-economy]

LOVE this @nakedfool. some rough notes, and glad to talk it out more:

1. "Additionally, there is space for an entry title, which we can now effectively extract from the metadata. The title may show up above the author name in a larger font size."

Agreed -- let's put it at top, and would also include the "previous entry" "next entry" buttons next to it (on either side of it?) since this is the master control section

2. i'm not totally sure on the best way to display the total number of votes that an entry has, as well as its place. ideally we'd keep the same design as we have on the rest of the site, but in that case it would be an upvote button which conflicts with the voting (and means you'd get a popup in a popup), so that doesn't work. however, it could make more sense to appear next to the entry name (or in case of galleries, just at the top, since there will be no entry name), since it applies to the entry, not the author. we should also have a bullet point as well (which i think is missing in the design above) to separate it from other text. i'm open to experimentation here.

3. i would put the sidebar on the left rather than the right -- more in keeping with standard design for this to be the part the user controls whereas the main page is just content to consume

4. i think we can minimize the number of voters. so it could be "Voters" (in 24 px) and then "(4)" in 16px?

5. for the comments, i would follow the traditional reddit format of having a line pointing down from the pfp and then having the comment itself indented so it's clearly a comment by the author. otherwise it has equal weight. for example:
   . We could also think about reinserting "Comments" as a title over this, though I know we got rid of this (I don't feel strongly).

6. For the scroll, i'd incline to include a modern light white oval that appears only when you're scrolling up and down. i'd love to see what it looks like with the shadow to let you know to scroll down.

7. the minimal scroll and moving sidebar to the left both mean we need a barrier between the side bar and main text as well (and there will be many cases where there won't be a scroll anyway, so we'd need it anyhow). i'd suggest a very dark grey vertical line, similar to the horizontal line we have below the description on the contest page.

8. i think the voting design should go within the sidebar rather than within an additional horizontal bar below. for one, the sidebar should be fixed in place and the place the user goes to command the entry. for another, it avoids having a ton of fields in different directions. i would put it above the "voters" piece so it's always visible, no matter how long the sidebar is, and always pushing the user to vote.