: Styling/Layout advice on an Isotope/Masonry website 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
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.
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?
More posts by @Welton168
1 Comments
Sorted by latest first Latest Oldest Best
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:
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.