How to make mobile "list" design does not look crowded?

Question

In order to create a list, usually I think like a developer and tried to cram everything as much as possible in a single screen so that user can see everything (or as much as possible) all at once.

Then after I tried to do a mock up for it, and let it cooldown for a couple of days, I revisited my mock up, and realized that my design looks too crammed. So I tried to redesign the screen with lots more white spaces and tried to hide further actions within a tap (a tap reveal more icons and buttons underneath). But still, I feel that the design feel crammed. I feel like the design is all text and no images, and feel flat with no focal points. But how can I improve a design that's supposedly a bland list of text? Can I get some simple hints on how to make the design does not look crammed?

Answer 1

Maybe this is my personal opinion, but most of the time when I doing very dry content / wall of text content, I'll consider some of this point in my design:

1. Give them a white space for them to breath (you excellently did it).
2. Try my best to limit the usage of border line, just put a bit like border on left only, border on top only (refer image below). too much use of it will make your site crowded and hard to focus.
3. Put color background at certain item to give them shape, instead of plain box (for example is like the 'Date' grey background as in image below)

Pardon me if my color is abit funny:

Answer 2

Some things that I have done in the past with projects similar to this:

1. Look at putting the date on one line, and making the text smaller. Given its in the same place every time, its consistent, so you could probably get away with making it a little smaller, maybe even change the colour.
2. Look at card-based user interfaces this uses separation of elements combined well with white space. There are some great examples here:
   • https://medialoot.com/blog/what-is-card-based-design-and-should-you-be-using-it/
   • https://econsultancy.com/blog/64646-15-delicious-examples-of-card-based-web-design
3. Look at line-height in the text, opening that up a little bit may just add something to it to make it look cleaner.
4. Perhaps open up the padding a little to make dividing space between elements bigger creating more space for the elements to breathe.
5. Iconography. I dont know about all the categories of the part where the '6 people joined this meeting' line of text is, but can this be summed up in an icon and number only? I would recommend this is there are only 1-2 categories that go in this space, anymore and it will likely be confusing.