Image Terminology

Photos play a pivotal role in design by adding a visual dimension that captures users' attention and enhances comprehension. Their functions include:

• Illustrating ideas: They can break down complex concepts, making them accessible. For instance, an image of a product on an e-commerce site allows users to visualize what they're buying.
• Building an emotional connection: High-quality photos with a human touch can evoke emotions and help in branding. An example is a travel website featuring a traveler in stunning landscapes to inspire wanderlust.
• Enhancing user engagement: Visually engaging images keep users on a page longer. Consider how media sites use photographs to complement news stories, thus enriching the reading experience.

Overall, photos act as a visual catalyst in design, translating abstract ideas into tangible visuals and enhancing user engagement.

An illustration is a visualization created by an artist. It is a drawing (or painting, collage, engraving, or iconographic.) that helps convey a visual message. Among other functions, there are:

• Evoking positive emotions
• Tapping into nostalgic feelings
• Livening up content that is dry or dense
• Reinforcing or shaping your brand’s identity in your product
• Explaining what the product is about
• Generally making the UX more enjoyable

An image placeholder is a dummy image used to draw attention to the need for an actual image. The most common image placeholder is a grey background with mountain & sun icons. You can also design your own version of image placeholders in line with your branding.

Image placeholders are used in web and app design when the final images aren't available. For example, you can see them in wireframes or early mockups and prototypes. Another application is to use image placeholders in skeleton loaders to hold space for images while the page content loads.

A hero image is usually a large, eye-catching canvas at the top of a website. It could be an image, a video, or a GIF. Hero images have the power to grab users' attention and engage them to explore the site further. Choose your hero images wisely, as they need to reinforce the overall message of the site and are key to audience engagement.

Thumbnails are interactive small versions of images. The thumbnail itself can represent an image or a still from a video. Clicking on a thumbnail can lead to a new page, open the full-size image into a lightbox, or otherwise display the selected image.

Thumbnails are often used for two reasons: helping users scan the content and reducing the page loading time. To reduce the data the server needs to load, create separate thumbnail assets instead of shrinking full-size images.

A lightbox opens on click, overlaying the entire screen, and displays images in a larger format. It sort of mimics a projector and lets users view the image distraction-free.

Remember that if you have multiple images in a sequence, you should include some kind of visual cue for photo navigation. This can include arrows on either side of the photo or a series of dots or numbers near the bottom of the image.

A profile picture is a vital visual element that represents users across various online platforms, including social media, forums, and professional networks. Positioned near the account name or within posts and comments, it's typically a personal photograph, often focusing on the user's face.

The choice of a circular shape is popular and thoughtful, as it frames the face naturally, highlighting key facial features. This simple yet effective design enhances recognizability and adds a personal touch to online interactions.^[1] Through profile pictures, users can express their identity and individuality, creating a more engaging and humanized digital experience.

Broadly, an avatar is an object that represents users’ identity on screen. For example, profile pictures are a type of avatar. In the narrow sense, avatars are profile picture placeholders before users add their profile pictures. They also help users quickly scan content on comment threads as they accompany or sometimes replace a name.

Avatars usually include a profile icon, user initials, or identicon on a colored background. Some companies create custom avatars represented by illustrations, animals, emojis, or branding elements.^[2]

Icons are visual symbols found in digital interfaces that guide users through various tasks and functions. By representing ideas, objects, or actions in a simple yet intuitive manner, icons bridge the gap between design and usability. They serve as signposts within an interface's information architecture, leading users effortlessly to their desired destination.

The most effective icons are those that are instantly recognizable and resonate with the concept they symbolize. Whether aiding in navigation, emphasizing a call to action, or simplifying complex instructions, icons contribute to a more seamless and engaging user experience. Their carefully crafted design plays a crucial role in enhancing the overall usability and aesthetic appeal of digital products.

Emojis are small, expressive images utilized in digital communication to convey emotions, ideas, and concepts. Originating from the Japanese word for "pictograph," the term "emoji" is unrelated to the English word "emotion." Since their inception in 1997, emojis have become a vital part of modern digital language, reaching mainstream popularity in recent years.

Emojis offer a vast array of representations, including facial expressions, food, animals, objects, places, and weather symbols. Their versatile nature adds a touch of informality and relatability to UX design, fostering a more personal connection with users.

By humanizing digital interactions, emojis enhance user engagement and contribute to a more enjoyable and interactive user experience.