0

I'm designing a website under Material Design guidelines for an online media organization.

I'm designing right now a card grid where each card will include a rich media component. The page the grid will be in will be dedicated for content: articles, videos and podcasts, and each card will have one of those content types. Each rich media will be a thumbnail image for the content.

Do you see for this use case any advantages or disadvantages for having the rich media above the primary title? What about the other way around?

Below images of the two structures, taken from Material Design's documentation on card anatomy (ignore the various marks and notes on the cards, they refer to other things in the documentation):

The rich media above the primary title: material-design-card--rich-media-above-primary-title

The primary title above the rich media above: material-design-card-primary-title-above-rich-media

1 Answer 1

2

The main problem is not the location of the title or the media, the basic problem is that you are analyzing the card as an isolated element when this is not its true functionality. UX cards are designed to be used as a repeating element by its content and as a container, and this makes the visual graphic answer immediate.

The title at the top visually links with the text of the upper cards generating visual confusion by not making a well-defined partition:

enter image description here

The media at the top provides enough space and visual contrast to also be understood as a dividing element:

enter image description here

1
  • 1
    You're right about my thinking. Thanks a lot for the detailed explanation and comparison - was useful for a newbie like me, especially since Google didn't give much information about grid layout of cards while showing both options for some reason. May 5, 2021 at 20:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.