search

jon-lipstate / opm

Odin Package Manager
https://pkg-odin.org
9 stars 2 forks source link

Website redesign suggestions #12

Open hrszpuk opened 1 year ago

hrszpuk commented 1 year ago

Hey, I've created a new issue because I actually went back over the navbar design I created and realised it doesn't really fit the purpose of the website very well. In paricular, having a search bar in the navbar leaves a lot of questions as to what to put on the home page...

I've remade the design as full pages this time. I've also included more pages that I think could be improved.

Home/search page

This would be the first page visitors see when visiting the website. Front and centre is the search bar which, at least for most people, I believe would be the primary use of the site. The original navbar design (#11) had a register button in the navbar, this has been removed as the website uses GitHub OAuth to login. I've cropped the image so it appears more zoomed in and lowered the darkness on the image so it is more clear.

Home page logged out: image

Home page logged in: image

Home page logged in with account drop down: image

Browse page

This page is a basic list of all the packages in the registry. There are search options on the left hand-side that facilitate more advanced search features. Some of these search option will have to be reviewed as having options such as download count and recently updated both available at the same time is ambiguous to how exactly the packages should be sorted? (need a second opinion really)

Browse page: image

Docs page

This is more of a nitpick, you do have some documentation for OPM, but it is on the relevant GitHub READMEs for each project. Would probably be better if a brief installation and user guide to using OPM were available on the website.

Docs page: image

Manage page

This page would have the same purpose as the current "Manage packages" page. I've simplified the page a lot, and instead of a toggle button to unlock package deletion I think a popup "Are you sure?" dialog box would be a cleaner option.

Manage page: image

All images above are just suggestions/examples of how a redesign could look. Any relevant feedback on the designs would be much appreciated. These are just desktop example, I might make some mobile examples soon?

Figma page: https://www.figma.com/community/file/1259589976065997434

hrszpuk commented 1 year ago

Forgot to make package page, if you like this redesign I'll look into remaking it in a similar style 👍🏼.

jon-lipstate commented 1 year ago

It's generally very nice.

On the browse page I think I would prefer to stack the filters and modifiers box to maximize results viewing width. They could be folded when not in use.

In general if there is material to fill the page I like the contents 80vw or so, limited to a 1600px max (?) for ultrawides.

hrszpuk commented 1 year ago

It's generally very nice.

On the browse page I think I would prefer to stack the filters and modifiers box to maximize results viewing width. They could be folded when not in use.

In general if there is material to fill the page I like the contents 80vw or so, limited to a 1600px max (?) for ultrawides.

Ah, I'll look into refactoring them so the widths are ~80wv then. Stacking the filter box makes sense if we're going wider :+1:. I know you're moving right now, so I'm also looking into how I might implement them in Sveltekit (I'm not very familiar with Svelte in general to be honest 😅) so you don't have your hands full haha.