Improve the UI/UX design of any Resource page

[C-NikhilKarthik]

Problem

The Design of the Resouce page ( which can be navigated to by clicking any of the thunbnails ) is very basic .

Resolution

The above stated problem can be solved by adding more description of the resource , improving the frontend ( by grouping them up in a card/box ) , tweaking the color palette of the page and adding some basic animations using gsap , aos (animation-on-scroll) or using keyframes.

Implementation

• I would be interested in implementing this feature.

[possumbilities]

@C-NikhilKarthik Thank you for this contribution! ❤️

I agree that an upgrade in UX is important, but would point you to Vocabulary our current Design System, and the Open Source website which utilizes it. All CC sites will be moving toward Vocabulary.

I'd urge you to look through those resources and outline specific improvements that would bring this project inline with the current Design System.

Speaking specifically to add animation, that's not necessarily within the scope of this project in most circumstances. Any animation would be the subtle use-cases that Vocabulary enables, and otherwise we'd hope to avoid to keep things simple, stable, and Accessible.

Moving to ticket work required for now.

[aaryahjolia]

@possumbilities Agree to use Vocabulary design system in this project, But Can we reproduce the same design with CSS in this project?

PS: As I'm proficient in ReactJS and not VueJS, I can make exact appearance with CSS in this repository but it would be difficult for me to integrate vocabulary component in resource page. Can we go ahead with CSS only?

[C-NikhilKarthik]

@possumbilities Hello, I tried to run the vocabulary repo locally but i was unable to do so, could you please guide me about how I could view the design of the components provided by creative Commons. The setup guidelines provided in the readme.md file says to run npm run serve
But there are no scripts in the package.json file.

[possumbilities]

Hi all! I should have been more clear, that's entirely on me.

Vocabulary is a design system which means it exists first as a visual language, and second as a code implementation. The visual language is worth utilizing and borrowing from or even rewriting anew, as the current code implementation is not in a usable/stable state, as outlined in its README.md.

🚧 Notice 09.19.22: This repository is currently unstable, the Vocabulary project as a whole is undergoing major changes

Anyone wanting to implement Vocabulary can read its documentation, and also view the Creative Commons Open Source website (which utilizes the visual language of Vocabulary) for guidance. But I would not at all recommend you try to incorporate the current codebase of Vocabulary at this time :)

[C-NikhilKarthik]

Hello @possumbilities After going through the resources you provided,I have an idea of grouping all the details into a card component (PostHorizontal / PostVideoHorizontal) provided in the vocabulary, with an image, desciption, the download (and repository button / links) distributed in the description section of the card. Incase of downloading the pdf files in a specific language or rendering in the different assets we can create another section which can filter to select the required type of assets / language (this filter could also include a show all to display all the resources available). This entire section can be placed right after the Title of the Resouce (title in the card) to make it look more easy to access and more well organized.

I will provide the prototype of this design ,if required ,within a day.

[C-NikhilKarthik]

@possumbilities Should i provide more description or better improvements, so that i can start working on it?

[possumbilities]

@C-NikhilKarthik Hi! I think some measure of visual representation here might be helpful in illustrating what you are planning on going for. It doesn't necessarily have to be high fidelity, but since we're talking about the overall approach to the UX/UI we'd need some kind of wireframe at a minimum to discuss and build from (if not a higher fidelity mockup).

[C-NikhilKarthik]

@possumbilities Hi! would a figma or framer design be enough for showcasing the changes i want to implement or display?

[possumbilities]

@C-NikhilKarthik Either, but I'd suggest you upload them as still images here so that for the future they remain easily documented.