Web designers have become very crafty with marketing techniques. Luring page content is always good, but when it comes to grabbing your visitors attention images are the most popular form of media. They don’t require sound like demo videos and they can quickly relay important information within a matter of seconds. It may seem easy, but there are some notable techniques to building informative images on websites.

These include feature labels, close-up screenshots, price comparisons, and other minute details. Web designers can use information graphics to model new apps, software, video games, or many other products! Although most commonly you see these techniques utilized in different fields of technology.

Check out the ideas below where we offer not only tips but real-life examples of beautiful product graphics jam-packed with great info.

1. Expand on your Content

Informative images should not be used in place of good web page content. Instead use imagery to expand on your key points and illustrate them clearly for your visitors. One of the best ways to do this is building a small demo to highlight important areas of a tutorial. With a few informative graphics and screenshots it’s a lot simpler to keep your reader’s interest moving through each step.

When you try to demonstrate a software tutorial (such as Photoshop tutorial) it can be difficult to convey the message into written text. Visitors will land on your article and immediately begin to sub-consciously judge the material within a fraction of a second. Web Designer Wall has a fantastic tutorial on building CSS3 rounded images accompanied by a handy graphic. This includes some labels and a close-up shot of the effect.

On the original article page this image adds a much clearer picture into your head towards what you’ll be creating. The author has added a small demo link, but why not includes some demo images as well? You’re much more likely to draw attention with a properly-labeled demo shot.

Try to avoid adding images just for the sake of media content in your post. If you can explain your methods or reasoning without an image start here first. Only afterwards looking back over your web copy should you consider re-iterating some points in a detailed image graphic. Specifically you may find a tutorial requires more visual cues as complexity increases. Two examples could include building a website database or table dataset.

2. Highlight Notable Features

Because each piece of software/technology will have so many features it’s nearly impossible to explain every single bit. Not only this, but it’s highly unlikely your visitors will be interested reading 20+ labels on your information graphic. Stick to the most interesting features and use labels to explain a bit more in-depth.

When writing the web copy for your label content avoid dull language whenever possible. If visitors are looking at the latest version of your application they may not care much about the changes in color scheme. How will that affect their daily workflow? Instead maybe highlight what’s beneficial for them, like a new interface panel or multi-user connectivity. These should generally be abstract features which you cannot see just by “looking” at the product.

Having such a label to explain these features outright will provide the most abundant response. Visitors will feel they are being treated as intelligent, mature shoppers capable to making up their own decisions. If they really like your features this gives a bigger push towards purchasing your software or product.

Below is an example from the Mozilla Firefox update page.

You can see the designers have used dotted curvy lines to point out labels and new features. These are actually background images positioned absolutely inside a container div. Surprisingly all of the label text is also written inside HTML tags (not just one big image).

I feel this method isn’t just handy for Google crawler bots, but also mobile users who couldn’t normally experience the full webpage.

Also notice how the Panorama feature over to the left offers a small “Learn More” link. This is possibly the best practice you can get into when building information graphics! If you have alternate pages or anchors within the same page your visitors could click these links to understand more about complicated features.

Remember that informative graphics are used to easily display teasers and product features to your visitors. So although you are limited in space around the graphic you can always offer the chance to learn more on an external page.

3. Simple, Unobtrusive Labels

Labels are truly the most important aspect in creating informative product graphics. Visitors will likely need to understand different areas in your product, software, websites, mobile app, etc. Unfortunately the use of tables and bulleted lists can only go so far. When you really need to explain product features it’s important to pick out hotspots for labeling.

Apple Computers is possibly the best example of simplistic label details. You may notice these exact techniques on their graphics when looking over tablets, laptops, or the infamous iPhone. Their features and technical specs are generally the same as other big-brand computer manufacturers. Yet their graphical models are so pristine that the products are practically selling themselves.

Notice that when you break down the process it’s a lot simpler than you may think! Product graphics are just a standard part of the overall website design. Even if you’re selling fertilizer or bed sheets or trading cards you can likely put these labeling techniques to good use. And although Apple has some really simplistic informative graphics, they are not the only company to do so. Try Googling around for businesses in your niche to see if they sport any fancy info labels or teaser screens on their website.

4. Imagery with Dynamic Content

For some web developers it may not be enough to simply create a labeled graphic of your software. There may be a lot of unique features you want to go over but contain within a small portion of your webpage. It’s possible to construct a series of introductory steps leading you visitors throughout a small product demo.

Newsberry elegantly illustrates an example of this. On their home page you’ll notice a block area with a small mini-navigation underneath. They include 5 steps along the process with different screenshots and some accompanying descriptive text. Even if you have no idea what Newsberry is used for, their introductory content explains things very clearly. You are even offered a few demo links throughout the series of slides.

As you move through their content you should notice many slides contain screenshots inside a small browser window. This effect is actually very simple to mimic! You just need to find an image to use as your background imagery and re-size screenshots to fit inside. Granted this effect will not work for every product, but it’s a nice way to frame screens from a web application.

5. Clear Screenshots and Product Photos

It is possible to include all of the best labels and features for your products but still be missing out on sales. The screenshots and photos you choose for your graphic are ultimately just as important as all the finer details. On Windows and Mac OS X there are ways to take screenshots of your entire desktop with keyboard shortcuts. Using this method combined with some time in Photoshop you can accumulate very interesting feature demos.

If your product is very convoluted you should try to put together a few different images. The example above from Tweetbot’s website uses blue circles to indicate a tapping action on the app. Instead of a single screenshot with many labels consider using a small jQuery image gallery to combine 3-5 different graphics. This gives you more opportunity to focus on different perspectives of the product while visitors are offered a much richer experience.

When you snap a shot from your PC or smartphone the picture is always saved at 100% zoom. Image editors like Photoshop have the ability to re-size these, but they often lose details. So how can you fit such a graphic into your small website? One of the best techniques is magnification in which you scale the application down and create magnified sections of the most important pieces. This technique is seen more commonly in software than physical products – I’ve detailed the design process below.

6. Building a "Zoom Lens" Effect

I’ll be constructing the steps to building a magnifying glass effect in Adobe Photoshop. If you’re using another graphics editor you can most likely perform the same tasks, but menus and commands will differ.

One of the best examples of this technique is on Things for Mac app homepage. The graphic has the app scaled down small so it’ll fit perfectly onto the page, along with a small drop shadow. However over some of the important areas you’ll notice a circle with the inside content much larger. They have even added a white inner glow to appear as refracted light shining through a lens!

Bonus: "Zoom Lens" Effect Photoshop Tutorial

To start grab a screenshot you’d like to use for your graphic. I’ve taken a quick screen of the Hongkiat home page. I’m going to crop just the browser window and resize to about 700px. You should resize the width to fit within the content area of your own website. Now make a new layer on top of this background and make a circular selection while holding shift to keep it proportional. Fill with any color you’d like.

Step 1

Keeping the circle selected, change the fill % in the layers panel to 0%. Under the layer FX add a 1px-2px black stroke and a white inner glow. You can reduce the opacity for less white lighting.

Step 2

Still keeping the circle selected move onto your background layer and hit ctrl (For Mac user, it’s command or cmd key.) + c to copy. Then make a new layer above the background but below the magnifying circle and paste. You can alternatively just hit ctrl+j to duplicate a new layer with only the selection in-tact.

Hit ctrl + t to open the transform tool. Now scale out the new duplicate layer while holding shift to keep everything proportional and alt to keep the center stationary.

Step 3

Press ctrl and click on the magnifying glass layer icon to make your selection again. Note you should still be highlighting the duplicated background layer in the layers panel (the one directly under our magnifying glass) meaning it will have a light blue background.

Press Ctrl + Shift + i to invert the current selection. Now hit delete to clear out the extra garbage from our re-scaled screenshot. For a bit of added effect pull up the layer FX menu to add a small drop shadow. You can also draw a thin 1px vertical line and using the Liquify Filter (Filter > Liquify) create a small handle!

Conclusion

In order to design fantastic product graphics you must remember the basics. Visitors simply want to understand what you’re trying to sell them! The easiest way to get this information across is through a series of screenshots or a single detail graphic. Labels are merely the second piece to this puzzle, where you can outline the most important feature sets.

When you put all of these techniques together you’ll likely begin to notice the bigger picture. Downloads and purchases will skyrocket – especially if you place your graphics front-and-center on your home page. These techniques are perfect for graphic and web designers to get started in the field of product design. We have detailed a few abstract ideas, but we would love to hear your thoughts in the discussion area below!