Design improvements

[glauber-sampaio]

Hey all!

I'm a huge fan of the work you're all doing.

This was my first week at HEN and by using the platform almost every second I thought of some quick wins related the UX.

I have a background in graphic and UI design so my comments are based on work experience. But don't read it as "the right thing to do", it's mostly suggestions and recommendations to maximize the overall experience for beginners like me.

General comments

1) Grid and spacing

The platform should evoke confidence and that's why I changed the spacing to be wider, taking all the space available. This way we can bring more work per scroll as we can also showcase the variety of styles of HEN’s community on the homepage, for example.

2) The navigation bar

The question I always do about hamburger menus on large sizes: why should we hide a few items inside a hamburger icon?

The experience now makes me hit the button every time I want to edit the profile, mint and objkt or manage assets. Why don't we display those items right away? Based on those questions I proposed the menu to be completely visible including the MINT button as the main action once you're synced.

3) Typography

I don't have any problem with the current monospaced choice, but it "can be a better choice" to use the IBM Plex, as it was designed by highly experienced typographers/designers and some curvers and shapes feels sexier. More info: https://www.ibm.com/plex/

In this PR you'll find

• In order to make this PR relatively small, I've updated the grid for main pages, such as Search (home), Profile and Galleries.

  • The other pages keep the 50% width layout for now.
  • I made small tweaks on Container and Padding components so the page looks consistent all the time.

• Main Navigation

  • I renamed the items to be respectively:
    • home
    • galleries
    • profile
    • edit
    • sync/unsync
    • mint
  • On mobile the hamburger icon is available to toggle the menu visibility, as in the current version.

• Home page

  • When you click on a tag below the search input, the gets updated so you know you're seeing items of the selected option.

Well, that's it. I hope this helps to improve the overall experience HEN’s community.

Let me know how this can be improved.

Best,
@Glauber.

[crzypatchwork]

ty for the commit, I was thinking that we could try the IBM Flex. if there are other suggestions they are welcome also. the idea for the feed is interesting but I'm unsure still on how other views are gonna look (profiles, tags).