Better UI is required for the SDT website

[aashish-khatri]

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]

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]

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]

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]

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

[aashish-khatri]

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]

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]

@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]

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]

This is coming together nicely.

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

• The "about" link can go to the Open Mainframe Project web site, currently the link is: https://www.openmainframeproject.org/all-projects/software-discovery-tool (but this may change once the new site is launched, so we'll need to stay on top of it)
• The "blog" link should simply point to https://www.openmainframeproject.org/category/software-discovery-tool
• The "contact" link can probably just point to our README on GitHub, since that links to our mailing list and Slack, which are the best ways to communicate with the team https://github.com/openmainframeproject/software-discovery-tool#software-discovery-tool
• The "documentation" page can link to our FAQ page for now: http://sdt.openmainframeproject.org/sdt/faq

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 😄 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