How do I handle white space in cards with varying amounts of information?

Question

I'm creating this page to display books I've read/reviewed, but I'm not sure how to handle the different amounts of information that each card has. Most cards will not have a review so there ends up being a lot of white space, but I'd also like to show some of the review in each card that has one.

I've thought about trying to fill the cards that have no reviews with lines, like the first window on this page, but that feels like it might be weird or noisy?

The easy thing here would be to make a single column list of books in a different style, but I like how this feels more browsable.

Also, the sidebar is very much a work in progress, and the minimal styling is generally in line with the rest of my website.

Here's another example with none of the filler. It feels too empty to me, but what do you think?

Answer 1

In these cases, although the excess white area exists, the perceiver tends to place the vision in the center of those framed empty spaces, which further accentuates the lack of content:

To counteract this effect you should try to direct perception towards the edges, for example by using a more balanced distribution of elements:

Or force perception towards elements with content, opaque the voids, in other words, "dirtying" the empty area with a slightly darker color or a subtle background texture:

Answer 2

Consistency is an important UX heuristic, and it helps lend visual harmony to a set of similar objects.

It's helpful to ask: What's the job each of these cards? It seems like you want to be able to quickly browse what you've read, find a particular book, and remember what you thought about it.

As you're finding out - trying to put the entire review on a card is leading to wildly inconsistent visuals.

But without content, some of your cards are looking too blank. How do you solve giant discrepancies in content amount?

Well, I think showing a picture of each book's cover will speed up the task of finding a book, because we don't always remember exactly what a book was called, but we usually remember the book as a visual product. I know you're aiming for minimalism, but you can still achieve clean layouts with consistent book cover visuals and lightly-designed cards.

Under the picture of the book, you can add the title, star rating, and a brief, truncated intro of the review. To read the whole review, simply tap the book, and open the side panel you're working on.

Here's a nice example by designer Davide Galbiati: