Comments (15)
@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.
from cc-resource-archive.
@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?
from cc-resource-archive.
@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.
from cc-resource-archive.
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 :)
from cc-resource-archive.
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.
from cc-resource-archive.
@possumbilities Should i provide more description or better improvements, so that i can start working on it?
from cc-resource-archive.
@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).
from cc-resource-archive.
@possumbilities Hi! would a figma or framer design be enough for showcasing the changes i want to implement or display?
from cc-resource-archive.
@C-NikhilKarthik Either, but I'd suggest you upload them as still images here so that for the future they remain easily documented.
from cc-resource-archive.
Sure @possumbilities.
from cc-resource-archive.
@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.
from cc-resource-archive.
@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?
from cc-resource-archive.
@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.
from cc-resource-archive.
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.
from cc-resource-archive.
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.
from cc-resource-archive.
Related Issues (20)
- [Feature] Redesign the Thumbnaillist. HOT 3
- [Bug] Entire card is not clickable HOT 9
- [Feature] Responsive Thumbnail Boxes HOT 2
- [Bug] The CC Vocabulary is not being used HOT 1
- [Bug] The logo is not properly aligned for small devices HOT 6
- [Bug] Clicking on empty area redirecting to "https://creativecommons.org/" HOT 9
- [Bug] Gemfile out of date
- [Feature] Explore accessibility for category filters HOT 8
- [Bug] Resource Images are acting as a Link HOT 13
- [Feature] Explore CC Header is sliding upon other elements HOT 4
- [Feature] Logo should include site name per Vocabuarly design system HOT 19
- Utilize organization default community health files HOT 3
- [Bug] Overlapping Text in Languages list on Home Page HOT 5
- [Feature] "Add 'Explore CC' Button to Header of /submit Page HOT 4
- Submit a resource button HOT 1
- Enhance Navbar Onclick Functionality HOT 2
- Enhance List Behavior and Filter Functionality HOT 1
- [Bug] Enhance User Feedback on 'Submit Resource' Button HOT 2
- [Bug] Misalignment of the creative common logo on various mobile devices HOT 2
- [Feature] Include the footer in the submission and in the resource view HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cc-resource-archive.