Tips For Using Images In Modern Web Design
When it comes to web design, the phrase “A picture is worth a thousand words” couldn’t be more accurate. We all understand how, in its most basic form, web design is supposed to provide an ideal platform for users to engage with and consume content. But as the web has matured, so have the tastes of its users. And, in essence, we’ve come to prefer the brevity and beauty of images over words. It’s these calls for quick and easily consumable content that have led rise to sites like Instagram and Pinterest.
But how should these trends actually affect the ways in which we design and organize our own sites? No matter how you slice the pie, at the end of the day we all need to provide detailed content for our readers, not just pretty images. Below you’ll find a few basic, but effective tips for spicing up your own sites to keep your viewers interested and engaged.
Full Screen Images
One of the major trends being utilized right now is full-screen imagery. A lot of sites are taking advantage of responsive frameworks and are making their landing pages really shine with impressive uses of photography and vector design. See Gigantic Squid’s website.
The basic concept stems from portfolio design – grab your viewer immediately with something engaging and then let their curiosity guide them to additional information. While the idea works really well for designers and photographers that can portray their work in an image, it can often be difficult for businesses outside of these specialized niches. However, this shouldn’t discourage you embracing this framework. For example, take a look at what the barbershop Blind Barber did with their website. They used the aesthetic of their physical shop to draw the viewer in.
Images With Type
Another similar, but still very effective, trend incorporates text with imagery. This approach can often expand upon the use of large scale or full screen photos to help highlight a single concept. Tinke’s site does an excellent job of this. Notice how your eyes are drawn almost immediately to their title.
When presented with an image, we naturally begin to look for some sort of subject to focus our gaze. By adding text, the designer is manipulating this inherent desire. However, this effect doesn’t work with every photo. Often times you’ll notice that photos are blurred or de-saturated. This is a common way of limiting any sort of visual distraction within the image. For example, take a look at how Diehl Group uses a black and white photo to really make their text pop.
If you find that your images don’t lend well to having text laid directly over them, a simple fix is to utilize slightly opaque boxes or design elements as a spacer between the photo and the text. Check out Supereight Studio’s website.
Images For Navigation
One usability trend that has started to gain popularity, involves using images as a form of navigation. Applications like Pinterest and Facebook have taught viewers to click on certain sized images – usually fewer than 300 pixels in width. Lots of sites have begun to embrace this style by simply limiting their typical text navigation and adding on-hover effects to their photos. Check out Revolution’s website.
This approach can often take on a unique effect if styled with color, layout and text effects. In some cases, sites will reveal significant chunks of text when images are hovered over. Berger & Fohr simply display their project titles.
Images As Texture
Finally, a quick and easy way to utilize images is by simply using them as a form of texture. Often times, designers feel the need to use images with punch and pop and forget that they can be used in subtle doses. Notice how Microarts uses wood to add depth and clarity to their site. The natural texture and tone make the content rise to the surface.
While there are trends and consistencies within web design, there’s usually not a “wrong” answer. As long as there is a balanced, unobstructed eye path and a prominent display of information, the doors are open for creativity.