In visual storytelling, you’ll generally utilize three different types of pictures: indexical images, iconic images, and symbolic images. There is no one style of image that is ‘best’ suited to web design, each one may be utilized, frequently concurrently on the same project, to obtain the required objectives.
Let’s take a look at the attributes of each type of image, then assess the optimal scenarios of application.
1. Indexical Images
Indexical imagery relates meanings between the images’ appearance and their depiction. For example, Images of individuals in 80s outfits elicit feelings of nostalgia.
Indexical images are some of the most regularly encountered images in advertising and design. We tend to shy away from displaying things too literally, frequently because we aim to convey emotion rather than force factual facts down the user’s throat.
Consider these two examples:
- To inspire happiness, would you choose a picture of someone smiling (literal), or a lovely dog playing on the beach (emotional)?
- For sadness, would you use an image of a person sobbing (literal) or a gloomy, dreary day with rain pouring down and a kid’s bicycle lying unused and soaking in the front yard (emotional)?
These two images are suggestive of emotion, however, the first example in each is more likely to make the user feel something, rather than merely think of the name for the feeling.
Let’s imagine that you want to make people nostalgic when they visit your website. There are a variety of ways to achieve that, but opening with images that convey that sense without shouting ‘NOSTALGIA’ is an excellent place to start. If your target audience is likely to be in their 30s, you may utilize imagery that suggests the 1980s, since it’s the period when your audience was growing up.
You may accomplish the same impact with more abstract visual components like colour palettes. Using a neon colour palette evocative of the late 80s and early ’90s is instantly going to generate a considerably different image than a colour palette of rosy pinks and subdued Aquas that were more prevalent in the 1950s.
2. Iconic Images
As outlined in the Visual Storyteller’s Guide to Web Design, iconic pictures are immediately identifiable and firmly connected with a specified topic. They’re also often quite literal visuals, so even someone not acquainted with them may extrapolate a basic meaning. They look like what they imply.
Think about the icons for play and pause in any video player. An arrow-like icon and square box in a video player are fairly easy to interpret, regardless of whether you’d ever seen these images or not, or if their meaning had ever been conveyed to you.
Objects like arrows, wheelchairs, and symbols that are reduced versions of tangible things, also frequently come under iconic imagery. Icon sets (like UXPin’s free icon collection) are typically a fantastic source for iconic pictures since they need to be apparent and simple to read with or without text labels.
Diagrams, charts, and scientific representations are all instances of iconic imagery. They very literally depict information in a manner that is impossible to misread (which is the cornerstone of a memorable picture) (which is the cornerstone of an iconic image).
Symbols you’ll likely see on the web or in an application:
- house to indicate the homepage
- checkmark to signal task completion
- envelopes to represent email
- trash to suggest deleting something
- disk to indicate storing something
Regardless of past knowledge of these symbols in a given situation, most users will be able to make an informed estimate about what is triggered by clicking on these icons.
While some icon images may have started out as symbolic (more on symbolic imagery in the following section), many are so well known today that they have become iconic.
As you can see from a handful of the icons accessible in the prototype program UXPin, the folder icon is pretty much universally recognized as a sign to open a file, but the folder itself doesn’t communicate this without its lengthy cultural association.
The same applies to the commonly-seen ‘gear’ icon to access settings, along with the icons for uploading (which generally includes an arrow pointing up) and downloading (includes an arrow pointing down), and many more.
3. Symbolic Images
These are more abstract than iconic images and often do more to express an emotion or broad notion than a particular concrete object. This imagery is very commonly found in logos since they reinforce the ideas a brand wants to portray.
For example, the Microsoft Windows logo is an abstract depiction of a window but isn’t a literal interpretation. Someone might perceive it to signify something else, especially if they come from a society where a different form of window is more typical.
Symbolic images often need to have their meanings taught. They are not quickly identifiable, since they are not actual. Until the meaning is understood, they might be broadly open to interpretation.
Which images work best?
All three images have their place in excellent design. As with any design methodology, it all relies on the characteristics of your project.
When you’re creating the basic navigational structure of your site, you’re likely going to want to stick with images that are iconic, or that ride the line between iconic and symbolic. You don’t want your visitors staring at a certain picture and wondering what will happen if they click on it.
For that reason, images like icons used for navigation must be globally identifiable and as near to iconic as you can achieve. There are loads of alternatives out there for icons, whether you want to develop your own or utilize a pre-made collection. Just be sure to choose a set that is simple to comprehend for your visitors, and don’t be afraid to label if it’s not immediately evident.
