Good editing skills are important when working with photo content. While most web designers do not have a professional photographer’s skillset, having a basic knowledge of photography and photo editing are usually sufficient to fully support the visual portion of web content.
Contrast, Saturation, Temperature – These three characteristics play important roles in determining a website’s usability and its ability to engage users.
Emotion – Emotion often plays a significant role in engaging website visitors, and influencing their decision making. Color combinations can create specific types of emotion, as can B&W photography, with smart filters and effects on an image being the tools and techniques of choice.
Emotion can easily be accentuated by the careful processing of image details.
Context – A huge photo does little to enrich user perception if it doesn’t relate closely with accompanying text. Conversely, a thumbnail photo can be of little use, even if the concept behind the image-text relationship has been brilliantly conceived.
These design concepts are nice to know, but of little use unless you also know how to put them in practice. You need to have an image editor you can depend upon, and one that adapts you your skill level – like Luminar.
Emotion – Working with Photo Effects and Filters
Transforming a photo such that it will convey a certain emotion should never be a hit and miss affair. It’s primarily a matter of starting with the concept behind your website and its audience, and following a few logical steps to get the effects that accurately portray your website’s place in the world.
Take a wedding planning portfolio example. You could portray a wedding gown hanging on a rack, or a standalone bridal bouquet – or you could do this:
An example of how a simple photo effect in Luminar, the Mac image editing app, can enrich an image.
An urban, modern bike shop provides the subject for another example. Here, the photo effect used serves to underline the colors and enhance the contrast. In doing so, the visual content integrates perfectly into the theme; an active sports world.
The subtle changes introduced by these filters give this image a vintage vibe, but with different nuances.
By taking the approach of starting with the basic concept of the website and the visual world of the brand, you can achieve the following:
- Coherence – The atmosphere you wish to communicate will be present, not only in the details, but throughout the entire visual perspective.
- Usability – Users will find out from the visuals what the website is all about. They won’t have to spend time and energy to discover it.
- Productivity – By understanding what types of images will serve your design the best, your overall design effort will be more efficient, and you’ll also save time.
Contrast, Saturation, Temperature
A good image processing tool will do much of the work for you, but you must have a trained eye for detail and imagery to fully master the art of introducing subtle effects.
Contrast – This is not always as difficult as it may sound. Finding the right contrast might involve little more than lightening a dark area a bit when a lot of dark colors are involved. Or, if your design choice is minimalist and lacks contrast, experimenting with contrast, saturation, and temperature can turn a so-so image into an attention-getter.
A simple polarizing filter is sometimes all that is needed to totally liven up an image.
Saturation – Saturation is a measure of the intensity of a color in an image. Adjusting saturation levels can be a great way to add a dash or two of salt and pepper to an image. Care must be taken not to overdo it, lest you end up with an artificial-looking image.
Temperature – Each light source has its individual color that ranges from red to blue. The trick here is to find the exact amount of these to hues that will give an image a natural, attractive look. Temperature adjustments often require a certain amount time and effort on your part before you learn how to get them just right.
Size Matters
Images can be effective in moving a visitor along a path leading to a desired outcome. Image size is one means of directing visitor attention to what’s important.
Images do a great deal more than add to headers, act as buffers between segments of text, or spice up a website’s design. They can also be used to build a perception as to what you are trying to present.
Note how easily a simple portrait can be made to attract attention through the use of color splash.
The dramatic effects of a color splash can genuinely benefit a website’s design, whether it is incorporated in a header image to convey a strong statement, or in a section image to draw attention to the text. Effectiveness is in the eye of the beholder. There’s no right or wrong way, and what appeals to you will likely appeal to your web visitors as well.
Another effect that can be quite powerful, yet is simple to introduce is image cropping. Perhaps the simplest of all photo editor functions is crop photo.
These two images, which differ only in the sense that one has been cropped to give a close-up look, offer two quite different perspectives to the use. The one on the left features some contextual information (in the background), while the one on the right offers a more intimate-appearing perspective.
This article was originally published in Dzine Blog.