Image Terminology
Discover the different types of images and their functions in design
Images are among the most critical elements in UX design. They can make or break a design by either reinforcing the content or call to action or derailing it and confusing the user.
Images help users understand content by providing context and reinforcing key ideas when done well. Understanding different image types and their functions helps designers successfully use these visual assets in their designs.
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.
Pro Tip: Unsplash is a great free resource for stock photography — they also offer great plugins for all popular design tools.
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
Image placeholders are used in web and app design when the final
Pro Tip: Use placeholder images that match the project's theme in your wireframe or prototypes. This will help people to envision the final product.
A hero image is usually a large, eye-catching canvas at the top of a website. It could be an
Pro Tip: Choose a high-quality photo or video to make an excellent first impression.
Thumbnails are interactive small versions of
Thumbnails are often used for two reasons: helping users scan the
A
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,
Avatars usually include a profile
Pro Tip: When in doubt, choose the type of avatar placeholder that best reflects your brand's identity.
The most effective icons are those that are instantly recognizable and resonate with the concept they symbolize. Whether aiding in
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
By humanizing digital
References
- Why Circular Profile Pictures Accentuate Faces | UX Movement
- Design Better Avatars | Medium