search
search copied to clipboard
creativecommons
[Feature] Redesign the Card and Search Component
Problem
The current card and search component is not attractive visually and does not meet the standard of design.
Description
This feature will make the section more attractive and open to all.
Alternatives
Additional context
As a Frontend developer, the section does not meet a good standard and needs to be worked on. The goal is to make an attractive and good looking search section that will be open to all.
Implementation
- [ x] I would be interested in implementing this feature.
@Straw4yu can we work on this together? When the issue is approved of course
@possumbilities The new card component is more visually appealing because it consists of images that portray the information displayed on the cards, giving the viewers an understanding, also the images create a nice contrast to match with the newly designed footer (in black and white) giving off a simple and contrasting use of colour.
The new card component portrays a direct meaning of the information with the use of images.
I sourced for free images off the web to implement the design.
@Straw4yu your issue has been approved but requires more details to get the status ready for work:)
@ImaJin14 to avoid confusion, no it haven’t been approved. It has the ‘ticket work required’ status because it needs more explanatory details before it can be considered for approval .
When it has the ‘ready for work’ status, that’s when it can be worked on and a PR can be created.
@Straw4yu if this is to be implemented, that means we’ll need to get descriptive images for each search component?
@Straw4yu if this is to be implemented, that means we’ll need to get descriptive images for each search component?
For each search engine rather:)
@ImaJin14 Yes, for each search engine. That's why I made another clearification on the existing feature.waiting for @possumbilities for approval.
@ImaJin14 to avoid confusion, no it haven’t been approved. It has the ‘ticket work required’ status because it needs more explanatory details before it can be considered for approval .
When it has the ‘ready for work’ status, that’s when it can be worked on and a PR can be created.
Yeah that's why he is giving more details on how and what his issue is about
I'm just stating that he could work on the issue locally while awaiting for the status ready for work to push his commits:)
PS he will need to provide either SVG or PNG files for the various search engines and they have you be open source...
@ImaJin14 to avoid confusion, no it haven’t been approved. It has the ‘ticket work required’ status because it needs more explanatory details before it can be considered for approval . When it has the ‘ready for work’ status, that’s when it can be worked on and a PR can be created.
Yeah that's why he is giving more details on how and what his issue is about
I'm just stating that he could work on the issue locally while awaiting for the status ready for work to push his commits:)
PS he will need to provide either SVG or PNG files for the various search engines and they have you be open source...
@ImaJin14 Yes... each search engines will have an image file that portray the information on what the search engine does.
@Straw4yu hello, and thank you for proposing this! It's an intriguing idea.
Something I'd like all of us to discuss here in the comments is what precise images would be selected. Do you have a series in mind, keeping in mind that they would have to be images that are within our ability to use rights-wise?
As an alternative viewpoint, what are the arguments against this approach? I agree it's visually appealing in one sense, but it also requires several images to load for a user, which could impact UX and performance.
Furthermore, mixing images with text over them presents Accessibility concerns we'd have to address with readability and contrast.
The overall argument against this approach is, while appealing, it adds complexity to the UX. Anyone have thoughts on that?
I'm interested in what others have to say, please feel free to offer suggestions as contributions here in the conversation. ❤️
@possumbilities Hello, we can use images from pexels.com or other free websites that correlates with the word description inside the search engine if that would be accepted. On the issue of Load time, the load time will be faster using SVG and the contrast can easily address the issue of readabilty. Thank you.
@possumbilities first of all, about the issue of image loading, we can optimize them and make them load faster by.... using a resizable SVG image for different browsers i.e (without a fixed width and height allowing it to stretch to whatever the container allows it).... alongside using a 'viewBox' attribute to allow the content to scale properly.
- about the accessibility issue ...
The safest option might be…. avoiding using images with an irregular background altogether…
BUT THEN ALTERNATIVELY Adding an additional opacity layer between the image and the text is one option. If the text has a light color, a dark opacity layer can be used. Alternatively, if the text has a dark color, we can use a light opacity layer. If opacity layering for a whole image is too visually invasive, we can use an opacity gradient and position the text over the section with the most solid color to have a compliant contrast ratio.
TEXT BORDER AND OUTER SHADOW IS ANOTHER As this is measured against the text body and not the background like the previous technique.
If we choose to use borders for our text, it’s important to note there are two aspects to this technique: border width and border color. When it comes to border width, the contrast ratio between the border and the font body should be at least 4.5:1. Yet, if the width is 3px or greater, the minimum contrast ratio goes down to 3.0:1.
On the contrary, if we choose to use outer shadowing, shadow properties should obviously be taken into account. These are: distance, opacity, spread and size.
Distance: the value must be 0px because contrast ratio measurement is done between adjacent colors. Opacity: the transparency should be high enough for the background to be differentiated from the shadow color. Spread: the percentage should be low enough for the shadow not to be blurred. Size: the value must be set in accordance with the spread, as a 3px shadow size will not be effective as a means to achieve compliance if the spread percentage is too high.
And lastly about using image use right-wise…. They’re tons of websites like pexels.com,pixabay …that offers free stock photos and images that can be used for the project…while this is good …it’s way better to use the company’s own set of images and probably not random images found on random websites.
@possumbilities Some suggestions were made on this issue and we are awaiting your contribution on the suggestions made. Thank you.
@possumbilities Is there any review on the contributions made earlier as more details are added.
Resolved in new site merge: https://github.com/creativecommons/search/pull/206