search

openmainframeproject / software-discovery-tool

Software Discovery Tool
Apache License 2.0
32 stars 40 forks source link

Better UI is required for the SDT website #120

Open aashish-khatri opened 1 year ago

aashish-khatri commented 1 year ago

I've looked at the deployed version of the SDT; I think right now, it looks a little bland; we can improve the UI by adding some CSS features to improve the experience of the website. I would like to know your thoughts on this. @pleia2 @arshPratap

arshPratap commented 1 year ago

Excellent idea @aashish-khatri . I had some work on the front end last year for the mentorship part but was not able to complete it.. It would be a good task for you. I am assigning the issue to you but I would like you to add a check list of tasks to this issue to make it more specific

pleia2 commented 1 year ago

I agree! A few improvements were made in 2021, but I really would love to see more progress made. Unfortunately I have zero experience with UI design (or any design!) so I haven't been able to prioritize this. Happy to see someone else take a look.

How do you want to approach this? Do you want to do some image-based mock-ups first? Or just throw some new CSS at it that we can try out?

aashish-khatri commented 1 year ago

Yeah, I think I've some ideas on how we want this website to look. Here are some ideas:

  1. Home Page: We can create a home page with some content like the open mainframe project's vision for the software discovery tool. The page will have the following components:
    • the open mainframe project's logo and software discovery tool logo.
    • navigation bar with documentation and other links.
    • search bar for the packages with the OS options we want to search the package for.
    • footer section with about, blogs, contact, and support icons.
  2. Search list page: It will display all the packages with their names and details. We can add a sorting feature based on popularity, optimality, quality, etc. This is the starting idea we can think of, I was thinking of creating some mock-ups, and I looked at some similar package registry websites. It'll take some time, but I think we can make it aesthetically pleasing.
maheshkasabe commented 1 year ago

well this is what i've come up with, i know this needs a lot of improvement but yaa i just came up with an idea!

https:https://www.figma.com/file/NyrkFGHQABPDF7N4DwXlRn/SDT?type=design&node-id=0%3A1&t=G3f5KHOmw9wlJcvt-1//www.figma.com/file/NyrkFGHQABPDF7N4DwXlRn/SDT?type=design&node-id=0%3A1&t=G3f5KHOmw9wlJcvt-1

IMG_20230524_231001

aashish-khatri commented 1 year ago

Hi @maheshkasabe, I think it's a nice mock-up, but I was thinking of the layout with minimal elements and more subtle pages. Like other modern designs of package managers like npm, yarn websites. They have more homogeneity in their colour palette themes and smooth transition between sections. But it's a good start.

maheshkasabe commented 1 year ago

Thanks @aashish-khatri for the feedback i think i'll come up with a more minimal design next time! but for now i think i will work on this only to make it more minimal! please add anything else if you have!

arshPratap commented 1 year ago

@maheshkasabe thanks for your work but I want to see @aashish-khatri 's work on this too as he is currently assigned on this

aashish-khatri commented 1 year ago

I was thinking along the lines of something like this, https://www.figma.com/file/honJeXgg8gj24IudSlQSNf/lfx-mockup?type=design&node-id=202%3A3&t=2Jch2xGcpE7SYapf-1

This is only an initial mockup. I've designed the hero section. Other sections, like the footer and middle section, are yet to be designed. Some modifications are also pending. PTAL, and let me know your thoughts on this. @arshPratap @pleia2 P.S: Desktop 1 is the mockup. Other things are just starting materials.

pleia2 commented 1 year ago

This is coming together nicely.

As discussed earlier I have the following suggestions to speed up implementation:

We'll also need to make design allowances for the fact that we have a lot of check boxes, so some thought will need to go into that, perhaps starting with separating out z/OS and Linux.

The footer should probably be rethought, since we're not a company, we're just a tiny project :smile: and we'll probably want out disclaimer from the current site to go there, but I'm not sure if we'll include much else.

As far as overall design and images are concerned, whatever we use on the site we'll need to make sure they are licensed for any use (including commercial), without attribution. That means we can't use site templates or pull code from other sites without thinking about it. Think of this as an opportunity to make our site really distinctive, while also trying to pull in the modern feel we currently lack.

We'll also want to make sure all the distribution logos are used in the correct way (many have usage guidelines) and we're using the current branding, Fedora for instance: https://fedoraproject.org/wiki/Logo