Advertisement


Are dotted pictures a new trend in Web Design?


Question

I've noticed lately that some of the websites I visit regularly are adopting a new and bizarre trend in Web Design: "the dotted pictures". Not sure what to call it. It looks as if a pattern of regularly-spaced dots was deliberately layered on top of all thumbnails, or sometimes it's a light grid pattern instead of dots, but the end look is similar. It looks like a dithered picture somewhat.

I personally find the effect terrible and at first I thought my browser image rendering was at fault, but I tried 3 different browsers and I can still see the pattern. Looks like it was intended.

Actually, one of the websites that used to do that went back to regular pictures. It was a newspaper website and I suspect they got a bunch of calls asking why their pics were all messed up and reversed the decision after a few months.

Has anyone heard or seen this before?

Example link: http://www.linkedin.com/today/se/editorspicks

2012/08/21
1
8
8/21/2012 2:21:00 PM

Accepted Answer

In the past, I've seen this effect used to enhance a feature of the image. The link you posted seems to be doing it needlessly.

See http://demo.grandpixels.com/?theme=linguini

The text on the main slider images really pops because the grid/dot style overlay darkens and blurs the image slightly, making the white text seem even more white and clear.

The images on my link look great, and the overlay image serves a pretty clear purpose, and that's to enhance the message of the text; something it does quite well.

enter image description here

Without the grid overlay, the white text would blend into the cheese behind.
They needed a style that will work for any image behind, light or dark, and for the text to not lose it's impact when displayed over any background image.

Your linkedin example shows how it shouldn't be used.
More often than not, Graphic Design is a science more than an art, and effects such as this shouldn't be used because "they look good", they should be used because a clear purpose has been defined for it's use, and it's use is justified in the context of the page.

2012/08/21
13
8/21/2012 2:32:00 PM

The pattern overlay is a useful design tool and it can serve a few purposes. As previously mentioned, it can help visually separate graphic elements on the page, but it also helps hide imperfections/jpeg compression artifacts in lower-res images that are being oversampled to fill an HD (1920 x 1080) display.

I will sometimes use a pattern overlay to unify the appearance of a collection of images. If I have 6 images that are shot really well and 3 images that are not so good, putting a pattern overlay on them helps even them out and make the transition between the good and bad images less dramatic.

Here is an example where I think the pattern overlay works pretty well although I bet you will have a hard time trying to convince the original photographer that it's an improvement. :) http://goo.gl/d0OYOO

2014/01/06