: Implementing dark image in light website 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)

@Ogunnowo857

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.

Vote Up Vote Down

@Caterina889

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:
intothedarkroom.com/blog/wp-content/uploads/2014/06/clean_photography_websites_008.jpg 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

Vote Up Vote Down

@Margaret771

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.

Vote Up Vote Down