Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
how about some examples? –  Dan Hanly Aug 21 '12 at 14:20
    
Sorry I meant to post one, I just updated my question. –  md1337 Aug 21 '12 at 14:21
3  
No, it's not a new trend. –  DA01 Aug 21 '12 at 16:57
1  
Worth noting that it can cause distracting moire effects when the image is scaled, e.g. on a smartphone browser. –  e100 Aug 23 '12 at 10:24
1  
I dont see it... –  Alex Nov 21 '12 at 11:25
show 1 more comment

6 Answers 6

up vote 11 down vote accepted

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.

share|improve this answer
    
Great tip about how the grid overlay helps the text stand out from the picture. –  jhocking Aug 21 '12 at 15:10
    
I can see the use in limited cases as in your example. Otherwise it's just a gimmick. I just got really curious as I started seeing this on more and more websites lately and I think there is some kind of trend building up. Hopefully it will die off just as quickly. As a friendly side-note I find your technical implementation of it sub-optimal, it's quite slow because you use a repeated 2x2 background and it puts a lot of strain on the browser to render. I would increase the overlay size considerably and you will notice a huge improvement in page scroll response. –  md1337 Aug 21 '12 at 16:53
    
Cheers. However, it's not mine, I just found it on the web ;) –  Dan Hanly Aug 21 '12 at 17:14
add comment

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

share|improve this answer
add comment

After looking at the code on the website, there is a .png that is set to repeat over the image. The image can be found at: http://grandpixels.com/linguini/wp-content/themes/linguini1.7/images/bg-overlay-pattern.png

Hope this helps...

share|improve this answer
add comment

The effect actually comes from the earlier days of web-optimization.

The dotted effect would be applied to images which were compressed so much that they began artifacting. The "dotted grid" would hide these artifacts and make the image seem less compressed.

It then spread as a normal effect, and as Daniel says, it can make or break an image. If it's used right (as with most other effects) you can get great results.

share|improve this answer
add comment

I think in the case of your example, it was done to obscure the images slightly.

I also think it is a throwback to previous styles.

share|improve this answer
add comment

I can't tell if it's a trend or not. But if it is – and my interpretation matches the idended effect (referring to your Linkedin Editor's Pick example), I think it's an interesting concept that might just hold some weight, not just fluff.

Quite possibly, this could be a bit of a stretch, but to me, it looks like what they might be trying to achieve is to signal that this image leads to content/articles that resides elsewhere (i.e. outside material; not within the current site). Almost as if you're kind of 'peeking' through a small window, into some other place – adding depth (another layer) which, from a usability point of view might actually prove potential in certain contexts.

I'll admit I'm not sure of the execution in the example you gave; the effect doesn't work optimally on half of the images (primary problem being that this concept doesn't pan out equally well on images not being photos).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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