Why I Ditched In-House Ad Management for BuySellAds

I launched The Best Designs back in 2001. It took about a year to see a decent amount of traffic, ...

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.
Screenshot

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.

Written by Luke

Luke Clum is a graphic designer and web developer who is working alongside Shutterstock Photography. He loves UI design and and is a huge proponent for building simple, minimal design structures. He also enjoys working with video and can often be found editing a host of different side projects. Beyond design, Luke is an avid hiker and alpine climber in the North Cascades. Follow him on Twitter @lukeclum                          



16 Comments

  1. Great work. I really like your effort. Keep posting inspiring ideas for web graphic designers. :) Actually i’m beginner in the line :P

  2. I often have problems with imbalance between text and images. This is a great help for our magazine design, thanks a lot.

  3. Great tips and some great design examples. I’ve always struggled on deciding whether to use imagery to set an emotional tone for a website or to use imagery to communicate your business message. Do you use a very attention grabbing photo in you design or do you show a screen cap of past work? Maybe the best option is to fall somewhere in between.

  4. These are very useful tips especially for web designers. I will suggest this information to my friends from Sydney Web Developers.

  5. Thank you for this very interesting article! I enjoyed reading this! You may visit us on Facebook and Twitter https://www.facebook.com/dcgws.internet.solutions?ref=hl https://twitter.com/dcgws Thank you! :)

  6. i found these tips very important and useful too .you have been great help to me

  7. picture tells you more about the message behind it. the right picture and composition bring you the best, the wrong one will distract it. :)

  8. We all agree with “A picture is worth a thousand words”. Today readers don’t much relied on the information inside the web. The only thing which attracts and force them to stay long is the pictures we use to deliver our massage. The other point is to how to present them i.e presentation/layout of a web. You did same with your post……forced me to stay long :)

    Thanks for Sharing
    Emma Jones, UK

  9. I totally agree with Angelica, in modern web design quality and eye catching images getting more importance and having good impression too.

  10. This is a very blog, I really appreciate the information given in this blog that is related to the creative web design.

    People today do not want designs that are not easy to understand.
    I am agree with your all tips.

    Thanks for sharing

  11. I prefer to have a full screen image in my website. That image can be a catchy thing. :)

  12. useful for web designers….thanks

  13. Making use of full-screen images can attract the attention of website visitors and inspire them to browse through the various pages of a website. This trend is catching on among website owners and is likely to dominate new website designs in the year 2013.

  14. great collection….

  15. Some unique web design examples. I’ve always struggled on deciding whether to use imagery to set an emotional tone for a website or to use imagery to communicate your business message.

  16. Great Blog, i love the information. I could use it in creating a new website, thanks a lot! :)

The Best Designs is protected by FireHost, and highly recommended for security. Read this article about why this site uses FireHost.
Create an Exceptional Website
Tweet This Share on Facebook Share on Digg Share on StumbleUpon