Three main types of pictures are often used in visual storytelling: iconic, symbolic, and indexical. Each type of picture can be used to get the results you want, often at the same time on the same project. There is no “best” type of picture for web design. To get the results you want, you need to use different kinds of pictures together.
Before we talk about the best uses for each type of image, let’s start by looking at what makes it unique.
1. Iconic pictures
The Visual Storyteller’s Guide to Web Design says that iconic pictures are ones that people can know right away and that are closely linked to a certain idea. They are also usually shown with very accurate images so that even people who don’t know much about them can understand what the whole thing means. They sound like they are saying exactly what they want to say.
Look at the signs that show the way to the men’s and women’s stalls. In either of these photos, it’s not hard to see a person wearing pants or a dress, even if you haven’t seen them before or been told what they are.
A lot of iconic pictures, like signs, wheelchairs, and other symbols, show simplified versions of real-world things. Icons are what we call these pictures. Sets of icons, like the free UXPin icon collection, are often great places to find icons. This is because icons need to be clear and easy to understand, even if they have word captions next to them or not.
The form of graphs, charts, and diagrams, graphs, charts, and diagrams are used to show scientific facts in iconic drawings. Because the information they give is so clear and easy to understand, it is hard to mistake them for something else.
2. Pictures that stand for something
In comparison to iconic images, symbolic images are more general and usually show an emotion or idea instead of a specific thing. Iconic images are more concrete in form. Symbolic imagery is often used in logos because it helps brands express the feelings they want their target audiences to feel.
For example, the Microsoft Windows sign looks like a window, but in a way that is both literal and not. Some people might see it differently, especially if they come from a culture where a different kind of window is more popular.
Most of the time, you need to be taught what the different symbols mean. Because they are not real, they are not easy to spot at first glance. It’s possible that they won’t make much sense until the message is understood.
Instead, semiotics, which is also known as “visual grammar,” makes it possible for symbolic images to share meaning better than iconic images do. Symbolic pictures are like visual metaphors, and it’s often important to understand metaphors in general to understand what they mean.
A lot of symbols are known on a cultural level because they are used so often to represent certain things or ideas.
One example is where stop signs and other road signs are put. Also, if you asked a native of another country what a lot of the road signs meant, they would probably tell you something wrong.
3. Indexical shots
Images that work as guides link the meanings of what the image looks like and what it means. For example, if the thermometer shows that the temperature is below zero, it means that the temperature is below freezing.
Indexical images are used a lot in ads and design. We try not to give very literal descriptions of things because we’d rather make the person feel something than force information down their throats. This is why we try not to show things in too much detail.
Take the following two examples into account:
- Which would you rather see: a real person crying or a sad picture of a kid’s wet, abandoned bike in the front garden?
- Which picture of a cute puppy playing in the sand, an emotional one or a physical one, would you choose if you had to pick just one?
Even though both types of images might make a person feel something, they are more likely to feel something than just think about it when they see the second example of each type of picture. This is true even though both types of images can make you feel something.
You can get a similar effect by using more abstract visual elements, like color choices. Compared to the rosy pinks and muted aquas that were popular in the 1950s, a color scheme from the late 1980s or early 1990s that uses bright colors will make a very different first impression.
What is the best way to do it?
Each of the three pictures needs to have a place in the plan. In the design process, everything depends on the specifics of your project, as it does in any design process. Even so, no one questions the fact that there are some acceptable ground rules.
During the process of building the website’s basic structure for navigation, you will probably want to stick with iconic pictures or images that are somewhere between iconic and symbolic. You don’t want people who visit your website to wonder what will happen if they click on a certain picture.
Try some free association with the ideas and pictures that come to mind. Also, look for pictures that focus on those words, and then start thinking about what might work best together and what you should leave out.