SharedStake / SharedStake-ui

SharedStake User Interface using vue.js
https://www.sharedstake.org/
GNU General Public License v3.0
16 stars 16 forks source link

Website improvements #142

Open chicoabrahem opened 1 year ago

chicoabrahem commented 1 year ago

Hey,

I have a few suggestions for improvements on the frontend side of the project.

  1. The Navigation bar should be simplified and narrowed down to the essentials. right now its just clustered and doesn't look very inviting. You can have sub navigation that still makes everything accessable. Also it makes sense because most items redirect to an external page.
  2. Move the social links to a fixed position on the right side. So they are also available while scolling down.
  3. Bring some more statistics to the first impression/landing page. This way we can promote the staked ETH etc.
  4. Give the NFTs more space. Even if its just a "sideproduct" it should have visual elements to it. Simply because visuals always work well.

These were all changes that are thought as an improvement, not a completely new website revamp. I tried to keep the changes not too big so the workload is not too heavy.

Looking forward to discussing your ideas! :)

frontendsharedstake

chimera-defi commented 1 year ago

Maybe a dropdown for BUY leading to whats described in #141 We can also do a dropdown for the NFT as i can see view on opensea/rarible/blur/

chicoabrahem commented 1 year ago

Yes, thats is exactly what I was going for. Thanks for pointing to it. I think we shoudn't add too many external links since its already mostly external right now. But usually I would agree that the NFT should have its own section, but also its "own" webpage. I think I can some up with some content or maybe passch has some input on it?

WJakub commented 1 year ago

Great shout on reducing the menu items.

As for the other tweaks:

Screenshot 2023-06-07 at 09 37 39
chicoabrahem commented 1 year ago

Great input! I agree with the CTAs. It makes sense not to cluster them too much. While I believe NFTs provide an additional aspect to staking and deserve more attention, I think your point is valid, and they should have their own section or appear when scrolling down.

Personally, I believe SharedStake is not as mainstream as Lido, which is why the use of certain statistics appeals to a niche audience. You're right that the way I presented it before might have been too clustered and too specific for "newcomers." This time, I tried to choose stats that make more sense for us as we try to advertise as a decentralized DAO.

I simplified the approach a bit, and it's still just a suggestion to increase efficiency and provide a better overview, with hopefully minimal workload. Additionally, just for fun, I quickly flipped the colors to propose a day and night mode as well (if it's not too much work). I apologize for the unclean preview, but I did it just to get an impression. frontendsharedstake_v2 frontendsharedstake_white

WJakub commented 1 year ago

@chicoabrahem thanks man, these look great! I live the light mode just as a primary design tbh, think it's more inviting and warm.

I like the way you positioned the stats here ,definitely can buy into this design more.

Maybe if you wanna play around with the stats a bit more, we can plan this work in as I think it works nicely. Also would be great to see your ideas for mobile view!

chicoabrahem commented 1 year ago

Sorry it took so long to get back to you. I was sick, but I am back now. :)

Here is my mobile approach. Not sure if we even need the stats on mobile. I thinnk it looks nice and clean and the socials are really present.

If anyone has any suggestions I can do some quick changes tomorrow. :)

Artboard 1 Artboard 2 Artboard 2-1

chicoabrahem commented 1 year ago

Oh and I forgot. Feedback for the current Testsite on Goerli. Some of it might be already addressed or fixed. All points are just cosmetics.

Rollover / Withdraw should be one Menu Item. Wrap / Unwrap should be one Menu Item.

Solcials Should have dedicated buttons and not be under "Learn". If you need the Icons, send me a DM. I just edited them all for the mobile version.

DAO should be the first item in "Learn", since its a essential part of the project. I would even argue that "DAO" could be its own menu item. but thats a different debate.

Hope this is an okay feedback and im looking forward for your input on mobile :)

chimera-defi commented 4 months ago

Thanks for all the great feedback @chicoabrahem !

Rollover / Withdraw should be one Menu Item. Wrap / Unwrap should be one Menu Item.

They go to different final urls so thats why i made them distinct. But good point, at least on mobile, its better to make it 1 each