I’m designing a page with a lot of beautiful pictures of different places. I’m wondering how I can use some sort of filter on the pictures or how to format the container to give the page a consistent feel. Please note that these pictures will be user generated and thus I’m not sure what will come about.
Here is an example of what I’m working with:
Should I add a border to the container? Or desaturate the pictures? All in all, I need a filter to put on pictures or a method to format the picture container to give the dynamic pictures a flat feel.
I don’t believe you should be thinking about unifying the images. There’s not much you can do in that aspect, because there’s not algorithm good enough to generate the same output from very different pictures… or if there is, it would just consume too many resources.
What I would do, instead, is working on the containers. If you move the attention away from the pictures themselves, and maybe into the space between elements, the colors or the texts, you can live with not-so-pretty images. For example (done in a hurry):
Making the images smaller, and the containers the same height can go a long way. In this case I used the same text for all of them, but you could have a fixed height (say, 3 lines of text) and add a “read more” or similar for the rest. Or you could have boxes with different heights, but with enough negative space between them to separate them visually.
In my opinion, the problem with the gallery is that is looks quite different from the rest of the site. It looks busy and dark, and the images plus the black and the shadows and the transparency just don’t go that well with the web styles.