Implementing dark image in light website

Question

So I have the following problem. I need to make a website for a company who does the effects on parties etc.

They have light colors (blue, gray, white) as their website-colors. But the problem is, parties are dark and so pictures of their work exist out of dark colors.

I want to implement some of those images in their website. And for sure one on the main-page.

But how do you implement a picture on a page if the colors in the picture doesn't match the colors of the page/website?

Here a small example: https://ibb.co/n2uufb

How would I implement that dark picture in the light design of the website?

Answer 1

Unless your client pays particular attention to their brand's colours and aesthetic when commissioning their photography, it's unlikely you're going to end up with a set of photos that are in harmony with everything in your design.

Like others have suggested, it's best to start by discussing a change to the site's colour palette or the emphasis of those colours. If they'll allow a change, perhaps a predominently blue palette will work better with dark photos than the light one in your example. Or flipping it around where you build a more harmonious palette to match their existing photos.

However, there's also something to be said about contrast. The use of bold, dark photos in a layout of lighter colours isn't necessarily a problem. Think of the multitudes of sites using light palettes and chock full of photos of all kinds: Light, dark, colourful, muted.

Perhaps you don't need to change anything at all.

If you do an image search for "black and white photography websites" you can see all sorts of examples of high contrast sites with a lot of white space and lighter palettes that are filled with dark photos. Like these:

http://intothedarkroom.com/blog/wp-content/uploads/2014/06/clean_photography_websites_008.jpg

https://i.pinimg.com/736x/53/08/00/530800a26e543681f49daa301bbd9255--web-design-layouts-web-layout.jpg

If you're forced to stick with the palette you have now and you don't find there's enough balance between your light and dark elements, try introducing heavier elements into your layouts using the darker colours and shades of your palette, such as:

• Text that is larger, darker or using heavier weights
• Thicker line weights in graphics
• Blocks or bars as dividers, asides, callouts
• Tinted overlays on the photos for bright text/graphic compositions

Answer 2

Layer the same venue in full daylight and in the party-time. Let there be a small slice of the night visible at the edge. Hint somehow "Move the curtain and see the party". Let hovering the mouse move the silent day off and bring the night and full sparkle into the foreground. Have an animated lightshow+music, preferably as full-screen. Moving the mouse off returns the normal silent and light scene. The same happens, if there's no activity or the page is scrolled enoughly off.

Answer 3

Put all those images in a pop-up carousel, of which the background is dark. If you can’t change the environment of the page then a pop-up gives you the opportunity for a new environment.