@marthadimeoColor in Context
Color is contextual. Color exists, not as an isolated element, but rather, as part of a larger context. To that end, it’s important to be mindful of this design principle when retouching and color-correcting photographs for web page design.
Placement & Juxtaposition
A recent project for the website MelodyTheArtist.com provides a perfect example to illustrate the idea of “color in context” and how the editing decisions for any one photograph can change based on the placement on the page and the juxtaposition of other photos in the layout. Let me show you what I mean.
Four images are used on the homepage as navigational elements. Previously, I had performed imaging work on all of the images, perfecting the color of each for its initial intended use.
The still life, landscape, and house portrait were color-corrected to make print reproductions of the original paintings. Meticulous work was done to ensure the color in the print reproductions accurately represented the colors in the original piece of art.
The “Now Open” image, a portrait of the artist, had been used in an email promotion. The photo was nicely designed with its complementary color palette of yellow and violet. The only color correction required was a slight adjustment to the skin tones to remove a red color cast.
Website Design
Separately, the color of each image was pleasing. In the case of the paintings, the photographs are excellent representations of the original artwork. However, that assessment changed when the images were placed together in the layout for the homepage of the site.
For the website, the images could no longer be evaluated solely on their individual merits. They needed to be reviewed as a group, in the sequence pictured above, and in the context of the entire page design.
What is the visual linkage, the rhythm between the images? Is there a common color palette? Is the viewer’s eye directed from one image to the next? Is there unity that creates a pleasing and cohesive design? For the most effective page design, color evaluation now needed to be framed around these questions.
The first three images share a common color palette. Although very different in subject matter, the palette of warm oranges and yellows, and soft blues and greens create visual linkage. The image that lacked unity in the sequence, that halted the viewer’s eye, was the “Now Open” photo. With the cool yellow of the sign, and the strong contrast of color created by the complementary color palette, it is extremely demanding and inharmonious in relation to the other images.
Creating Rhythm & Harmony
It was clear what needed to be done. The color range of the “Now Open” image needed to be compressed. The range needed to be nudged away from the complementary extremes. Instead of a contrast of color, it needed to move towards a gradation of color. By gradating color, the palette of the image would be closer to the palette of the other three images.
Three color editing moves accomplished the task. First, the cool yellow of the sign was made warmer. The color was moved towards the oranges in the still life painting. And the blue lettering of the sign towards the blue of the vessel in that painting.
Next the violet elements—the hydrangeas and woman’s top—were moved towards green and muted blue, complementing the greens and soft blue tones in the other three images.
By lowering the color contrast, the “Now Open” image is no longer demanding, no longer screaming for attention. The decibel level of the colors was lowered. As you can see in the Before/After comparison above, the sequence now looks balanced. They hold together as a group. There is a rhythm and harmony allowing the viewer’s eye to gently move from one image to the next.
A Well-Considered Color Editing Process
Color harmony does not happen accidentally. But rather, it must be well-considered and implemented through a color editing process. As this example illustrates, for an effective design, color editing decisions made with a color strategy, and in the context of the entire layout, creates a pathway to success.
To evaluate each image on its own, as separate from its placement on the page, will often lead to a false assessment. The overall design may suffer, simply because the demands of each image are too strong and the viewer becomes conflicted about where to look.
But, when color evaluation is informed by viewing the entire layout, allowing one aspect to dominate, and adjusting accordingly, the end result can remove barriers. This harmonizing of color creates a visual flow for the viewer to absorb the entire page with ease. The result is a more harmonious and cohesive design.
End Result — The Homepage Design
Notice the dominant warm glow that pervades the adjusted color layout of the homepage. By subordinating conflicting color differences, the whole of the page is emphasized and becomes greater than its individual parts. In this way, color has rescued the design and the viewer has a pleasant experience.
Words & Color Editing: Martha DiMeo/The ChromaQueen
Image Copyrights Belong to The Respective Image Owners
© Martha DiMeo 2020
More On the Art of Flawless Art Reproductions
View the Art Reproduction portfolio to see the process of creating art reproductions that precisely match the original art.
Meet the Artist
Interested in learning more about the artist and paintings featured in this article? Visit these links.
Read More Print & Web Page Design Articles >