Add visual differentiation between blog post cards and other cards #20

New Issue

2026-10-05T05:09:37+02:00

adam commented

2026-10-05 05:09:37 +02:00

In the original IA wireframes we'd used size to differentiate between blog post cards (the most important) and other types of cards, but masonry layouts are awkward to build in a bulletproof way and it didn't test great with users either.

Investigate a way to visually differentiate between blog post cards and other types of cards at a glance (most likely background color as a starting point). Bonus points for having an affordance for being able to tell between different types of "other types of cards" - i.e. to be able to spot all the news links or tutorials.

In the [original IA wireframes](https://ipfs-ia-scratchpad.netlify.app/blog-news.html) we'd used size to differentiate between blog post cards (the most important) and other types of cards, but masonry layouts are awkward to build in a bulletproof way and it didn't test great with users either. Investigate a way to visually differentiate between blog post cards and other types of cards at a glance (most likely background color as a starting point). Bonus points for having an affordance for being able to tell between different types of "other types of cards" - i.e. to be able to spot all the news links or tutorials.

adam closed this issue

2026-10-05 05:09:37 +02:00

adam commented

2026-10-05 05:09:39 +02:00

My suggestion would be something like this:

I am not sure about the uppercase text but it's just a suggestion. We could also change the background color depending on the type. Let me know what you think.

My suggestion would be something like this: ![image](https://user-images.githubusercontent.com/34691925/105914009-a13b3300-6025-11eb-8915-ce650b606365.png) I am not sure about the uppercase text but it's just a suggestion. We could also change the background color depending on the type. Let me know what you think.

adam commented

2026-10-05 05:09:39 +02:00

I like the idea of reversing out the text on the content type chicklet (and the border on the tag chicklets is nice too). I don't think we need the uppercase for the content type chicklet since the color makes it obviously different, but if you think the font is too much the same, maybe increase font-weight?

Could you also please use a different color card background for blog post cards? I think we're going to need some design-shop help on this soon, but in the meantime, maybe try rgba(154,212,219,0.5) (or a variant of the colors from https://github.com/ipfs-shipyard/ipfs-css that you might prefer) so we can at least see what the overall impression is with the variety of default post images and a different card background. Thanks!

don't love this color but it's an OK start

I like the idea of reversing out the text on the content type chicklet (and the border on the tag chicklets is nice too). I don't think we need the uppercase for the content type chicklet since the color makes it obviously different, but if you think the font is too much the same, maybe increase font-weight? Could you also please use a different color card background for blog post cards? I think we're going to need some design-shop help on this soon, but in the meantime, maybe try `rgba(154,212,219,0.5)` (or a variant of the colors from https://github.com/ipfs-shipyard/ipfs-css that you might prefer) so we can at least see what the overall impression is with the variety of default post images and a different card background. Thanks! ![image](https://user-images.githubusercontent.com/1507828/105919609-32dd7d00-5ff3-11eb-99ab-c0f85ae38d99.png) _don't love this color but it's an OK start_

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/ipfs-blog#20