I am designing a news site the is will list a lot of news articles in a compact space. I have tried the following 3 ways to separate the articles, and I'm wondering which is the best from a UX perspective?

Zebra: zebra

Lines: Lines

Plain: Plain

  • 1
    I don't think that there is a 'best' answer here, but the decision could be based on a number of different considerations such as the general look & feel of the website, the amount of space available, the suitability of applying the same styling similar content on other pages, etc.
    – Michael Lai
    Commented Jul 30, 2016 at 21:55
  • If you were to give the primary criteria that you're using to determine which is "best", the question may be answerable. However, right now it's primarily opinion based.
    – JohnGB
    Commented Aug 1, 2016 at 8:41

2 Answers 2


Of the options you show I would go with the 'plain'. The distinctive image in each row is likely enough to visually separate rows. The striping and lines only add noise.

(Always good to test though …)


The stripes are more for data tables when you have to follow top to bottom. Also, if not lines there needs to be clear separation between each result.

  • Yes, zebra striping helps you read across long rows in a data table. That's not necessary here. Commented Jul 30, 2016 at 23:59

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