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.

[C-NikhilKarthik]

Sure @possumbilities.

[C-NikhilKarthik]

@possumbilities @TimidRobot Hello!, This is a rough visual representation of the plan i am going for, we can add more details when required.
Please provide some feedback so that i can improve this design.
I will also share the figma link if you require it.

[C-NikhilKarthik]

@possumbilities Hello, can you please tell me if the above provided design is good enough? If yes can i start working on implementation of this proposed idea?

[possumbilities]

@C-NikhilKarthik Hi! it's definitely headed a better direction, I'd again point you back to Vocabulary to see how it does buttons and various elements to build from. It's good a starting WF, but it would need more fidelity from here that's aligned with Vocabulary before code implementation could begin.

I'd suggest you take this as a wireframe and try to incorporate specific UI elements from Vocabulary visually into it so it would be closer in execution to the final implementation you are seeking and then we can continue the conversation from there.

[C-NikhilKarthik]

Hello @possumbilities , I agree that the website should have a look that is more aligned with the highly suggested Vocabulary.
But can i follow the above mentioned theme for selecting the languages and downloading the resources the respective languages? I have created a wireframe that looks very much like the vocabulary PostHorizontal Cards, and used the Default select from the same.

[vivitt]

Hi! I have been looking into this issue, and even though it is tagged as requiring work, I think this is the best place to share a mockup I created in case it is useful for anyone working on it.

One important thing to note is that currently, the Resource name is displayed inside an h2, and I think changing it to an h1 will improve site accessibility.