Circuitverse: UI Improvements for Projects Page : Increase focus on simulator preview

[sal2701]

Is your feature request related to a problem? Please describe.
In the project page, the simulator is the main interest but is taking very less percentage of space. This page needs to be redesigned.

Describe the solution you'd like
One way to go would be YouTube's video layout, without the recommended videos on the side. There are other possibilities as well. Would love some design previews from which we can finalize on one.

Additional context

Current Layout

YouTube's Layout

Are you working on this? (Yes/No)
No.

Things to note

• The simulator needs to be the focus of the design.
• Majority projects don't have a detailed description. It is short.
• We have to display views, stars, username, circuit name, fork, embed buttons in a proper way.

[satu0king]

Please try and show designs before trying to make the page, so we can suggest improvements and changes.

[Kartik1397]

Hello @satu0king @sal2701, can I work on this?

[Kartik1397]

My design preview

[sal2701]

Hey @Kartik1397 Great work! You can surely work on this. A few things to consider

• The space beside the title is empty, do you think you can shift few elements there? Like the Launch, Fork, Star Button, Project Access Type, etc
• How long are you planning to keep the Title and Description? What will happen when limit is exceeded. Since there are buttons beside the description, how will it be displayed?
• Do you feel we can combine the Star button and number of Stars information? Like GitHub does it.
• The comments section seems fine so not much to do there.

[Kartik1397]

• How long are you planning to keep the Title and Description? What will happen when limit is exceeded. Since there are buttons beside the description, how will it be displayed?

If lenght of the Title and Description exceed the text will wrapped into the next line. We can see exact behavior in this screenshot.

These are the other suggested changes.

What about showing cards like these in collaboration section?

[sal2701]

@Kartik1397 Great work. Looks quite good. Few points

• Since the username and Fork, Embed, Star buttons are aligned and you could've the description span all columns.
• Yeah, the wide collaborator section looks weird, we could try the cards approach, it has been done in the 'Groups' page.
• The simulator background is completely white so is the web page. Having a darker border might give better visibility to the simulator. What do you feel?
• Also, the arrows for up-voting and down-voting seem to be misaligned. Can you fix that as well?

Apart from that everything looks good to me. What do you say @satu0king?

Cards used for Members in a Group

[Kartik1397]

Updated design
https://www.figma.com/file/jUuuEsFFzfxA7SPvb6si8L/Circuit-Verse-Project-Page?node-id=0%3A1

[abstrekt]

Updated design
https://www.figma.com/file/jUuuEsFFzfxA7SPvb6si8L/Circuit-Verse-Project-Page?node-id=0%3A1

The design seems to be really well crafted, a few minor things that can be given a thought:

• would the Show More center-aligned look better?
• Not making the unsubscribe button primary & keeping the old style?
• I think a threaded comment section would be better as well as hiding after a particular number of comments with a 'Show More'

[Kartik1397]

• would the Show More center-aligned look better?

I think left aligned Show More will be more easy to reach.

• Not making the unsubscribe button primary & keeping the old style?

Maybe, this can add inconsistency to design.

• I think a threaded comment section would be better as well as hiding after a particular number of comments with a 'Show More'

Yes, this feature can make comment section more organized.

These are my thoughts but I'm not expert at UI/UX.