Fix roadmap cards readability

Joystream / joystream-org

https://www.joystream.org

9 stars 39 forks source link

Fix roadmap cards readability #751

Closed bedeho closed 10 months ago

bedeho commented 11 months ago

I find it in general quite hard to read the milestone cards, as there is a lot of text and it is quite small.

Screenshot 2023-12-16 at 13 44 55

I suggest we

increase card title
increase card body text

I also see that on mobile, the lack of text clipping is making cards basically unreadable, like this

Screenshot 2023-12-16 at 13 47 46

We need to somehow solve htis, so its easy to scroll through on mobile and just get the general idea of the differnt milestones, perhaps only rleying on title, and then if someone wants to read the details, they can clik a read more or something to get an overlay with full text. Thats just one way to solve it.

msmadeline commented 11 months ago

@bedeho Hello! I already designed some sollutions for this problem. Personally I think verion 2 is the best as it It provides user accessibility without overwhelming the entire card. Let me know what you think. For the desktop cards I just increased the text size.

➡Figma page (mobile exploration): https://www.figma.com/file/Q4mBIcKaFr8aUyv2ZWAXJY/Roadmap?type=design&node-id=697-50585&mode=design&t=JQjcx85gO1AXBWyG-4

➡Figma page (desktop): https://www.figma.com/file/Q4mBIcKaFr8aUyv2ZWAXJY/Roadmap?type=design&node-id=1-2829&mode=design&t=JQjcx85gO1AXBWyG-4

bedeho commented 11 months ago

I think version 3 for mobile is best, as the button is much more visible in that case.
I assume the "read more" cards will be scrollable when opened in the overlay? if so this needs to be described somewhere.
I really can't detect any changes in text sizes, can you go further, also consider making card titles bold or something. Perhaps you could show some variations just of a single card.
Can we also make the middle section wider, so the cards have more horizontal space for the content, that way they don't need to be so tall to fit the text.

msmadeline commented 10 months ago

Hey @bedeho I implemented your feedback.

➡figma link: https://www.figma.com/file/Q4mBIcKaFr8aUyv2ZWAXJY/Roadmap?type=design&node-id=1-2829&mode=design&t=Poh3K2w00lQhVcSw-4

➡I also did 2 varaints of a single card: https://www.figma.com/file/Q4mBIcKaFr8aUyv2ZWAXJY/Roadmap?type=design&node-id=745-8199&mode=design&t=Poh3K2w00lQhVcSw-4

bedeho commented 10 months ago

Great job!

bedeho commented 10 months ago

This i ready for implementatino when you have time @DzhideX