1

I am experimenting with a masonry layout web site bringing niche news and cultural information on East Asia to a Western audience. I have chosen a masonry layout for the homepage because the site will be functioning as a microblogging platform pushing out several small updates daily (images, videos, tweets, texts, listicles, quotes). The masonry layout works fine, the only problem I have is that I am unable to come up with a non-obtrusive, minimalist design that doesn't look dull and boring at the same time. Currently, I think it pretty much does. Here is an item (representing a post or article) from the layout. enter image description here

The sans-serif font is Ubuntu and the serif is Droid Serif. The colors are black #333, gray #999 and the accent color is purple #939. Notice that the items do not have separate graphic planes or borders, i.e. they are laid out directly on the background of the page (solid white #fcfcfc). The only visual separator between the items is a 1px dotted #999 border-bottom and a few ems of white space. (see screenshot link below)

If you take a look at the whole page (no header or footer, only the main content area) you will see that it is not very spectacular.

I have checked a lot of masonry layouts but I find none that doesn't separate the posts from the background by different colors or borders (like Pinterest) and still looks amazing.

How could I tweak the typography, contrast or visual seperation of the items to make things slightly more impressing without adding too much clutter?

Improve this question
2
  • I recommend adding some well used color to add some variance
    – Zach Saucier
    Mar 5, 2015 at 14:26
  • @ZachSaucier Thank you, that's a valid point.
    – imrek
    Mar 6, 2015 at 22:20

1 Answer 1

Reset to default
2

I'm having a little trouble understanding what your main issue with the layout it, as it looks quite clean and un-cluttered to me.

The site is about "news" after all, right? So you need to display the descriptions. I think you did a very good job in this regard, your layout works well as a news summary.

A couple of observations:

  • I don't really understand the necessity for the "News" label on top of every article. You already have a Category label under the description, isn't the top title redundant?

  • I find Droid Serif a tiny bit narrow, but this might be subjective. Because the description is short, you can easily use a sans-serif there and it won't compromise the readability. Serifs are great for long text, but something you need to watch out for is font size. The smaller the font is, the more difficult it becomes to read serifs.

  • If you are worried about clutter, you could consider moving the description to an overlay on top of the image, that only shows up when you hover it:

enter image description here

Improve this answer
2
  • I highly recommend for the text to be partially visible if you are making it an overlay for the image. This is because if you don't, lots of people will assume they're just images. Codrops has some good examples of how to do this, though admittedly they're more artistic than for this purpose
    – Zach Saucier
    Mar 5, 2015 at 14:26
  • @Yisela Thanks for your response. The "News" caption is just a placeholder for several different blog sections. I decided to drop Droid Serif in favor of something more legible, maybe Noto Sans. I think I need to add more visual "flair" and colors, I am running some iterations over the design and might ask again for feedback.
    – imrek
    Mar 6, 2015 at 22:20

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.