5 Basic Types of Images in Web Design: Employ the Power of Visuals

“Content isn’t King, it’s the Kingdom,” Lee Odden said. I couldn’t agree more: without content design will be just an elegant wrapping. There shouldn’t be a fight over what is more important, design or content, as neither works at full without the other. Today we invite you to review five basic types of visual content that users come across on most web pages day by day and consider the benefits of each type, illustrated with various web design examples.

What Is Web Content?

Web content is basically everything that fills the website and is part of the user experience. That’s what people read, hear, see, watch, and manipulate on a website. Based on that, the core types of web content are:

• text (copy)
• images
• video
• animation
• audio (sound)

Today, let’s discuss images.

Images aren’t just a factor of beauty: in user experience design, pictures play an important part in building up usability. Most web users are visually driven; they perceive pictures faster than words. So, images are often the layout elements people see and scan first. What’s more, they are informative and emotionally appealing; they transfer not only a message but also particular aesthetics. Also, images on web pages can positively influence website SEO rankings.

Depending on the goals behind the website design, creative and marketing teams choose among different types of images. The following are the most typical to see on a webpage.

Photos and illustrations working together as visuals for the website of Continental Shoppe by Zeitler Design

Photos

Photos could, probably, be called the classics of web design imagery. They are used for a wide variety of goals, such as:

• theme photos
• demonstration photos
• photos of the items (for example, on e-commerce websites)
• title photos for blog articles
• hero banner photos, etc.

The biggest advantage of photos is their ability to connect what users see on a web page with the real world of physical things and live people. Photos have been a part of human reality for many decades, much before the advent of the Internet, so this kind of visual is sort of native, close, and clear for us. What’s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life for many people – so, being used on a website, it sets strong connections and associations.

Hero section on the home page for the website for Kreisson by Spark Interact

Photos on the Wickside landing page set the atmosphere and demonstrate the offer

Mason’s ecommerce website by Evolve employs photo as a effective visual instrument

What’s more, photography is also a kind of art. With them, you can set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and create the necessary emotional background. This is one reason to choose photos to support articles on blogs and media websites.

Blog page on the Proper website by Manufactur

No doubt, photos are the main tool of visual presentation of goods on e-commerce websites, where the principle “you get what you see” is a vital part of success.

Product page for the immersive ecommerce website by EngineStation by Monogrid uses photos to demonstrate the offered items

Where do designers get photos? There are several ways:

• original photos taken and processed for the particular project: this is the most expensive option but the photos will have the highest level of exclusiveness;
• paid stock photos: you buy a photo you need from a photo stock that offers a variety of shots. This may be cheaper than custom photo shooting but you may spend a lot of time searching for the photos corresponding to your tasks;
• free stock photos: you take the photos from the communities or teams that share them for free. It is the cheapest option but you have to be ready that other people may do the same so you’ll have to think well about how to make your design original under these conditions.

So, it’s easy to see that your choice depends on the project, its budget, and its goals.

Wolverine Worldwide website by Locomotive

Using photos in web design, consider the following tips:

• download high-resolution photos
• optimize them for the web so that too big images didn’t overload the page – loading speed is a crucial factor of positive user experience
• give the images enough air to breathe – keep the balance of negative space
• remember about responsiveness and test how the images look on different screens and devices
• don’t use photos as just a decor – let them speak to users, transfer a message and support all the other layout.

One popular design trend in recent years is using photos as a background image. This approach makes the screens visually and emotionally appealing. It also supports the integrity of all layout elements. On the other hand, it demands close attention to contrast and legibility, which can be harder to achieve than with a monochrome background.

Aitken Turnbull company website design by Harrison Carlos

Illustrations

Another big web design trend this year is using custom illustrations for various website needs. Made in various styles, custom graphics support quick perception of information on the page or screen. They also set the solid foundation of visual originality. They add aesthetics and beauty to blogs and websites we often read, as well as broaden the creative horizons for artists.

MindMarket website design by Louis Paquet playfully employs illustration, setting the mood and dynamics of interactions

You may often see illustrations in

• hero images
• theme images
• characters communicating with users
• blog article images
• rewards and other gamification graphics
• notifications and system messages
• stickers (these are especially popular for messenger apps)
• storytelling
• infographics
• marketing stuff and advertising banners
• visual markers of content categories.

Let’s check some examples.

Animated hero illustration for the website design by Habitat

Line illustration neatly integrated into the Inversa website design by Exo Ape

Mascots

A mascot is a character, a personified image that becomes a symbolic representation of a brand, company, service, or even a public figure.

In web user interfaces, mascots can serve as a practical element of communication and interaction. By changing their appearance (for example, mood, outfit, activities, etc.), you can quickly deliver a clear message to the user. Mascots can communicate directly with speech bubbles, provide visual prompts with various facial expressions, reflect the mood of the user with different graphic variations, give helpful instructions in tutorials, and congratulate the user on their achievements. All the mentioned makes the interaction with the system more human-like enhancing the general user experience.

The Shoring Company website by Qream employs a funny, cheerful mascot as part of the logo and brand identity and integrates it all over the website

3D Graphics

One more type of web visuals growing its presence this year is 3D renders. These are computer graphics created by turning 3D wireframe models into 2D images. Many of the images have photorealistic effects which is their big advantage for web design. 3D graphics may serve well in cases when the photo content you need is impossible to get or highly expensive.

Mysterious and captivating Obsidian Assembly website by Fiddle Digital

Keep in mind that this kind of graphics demands specific skills as well as an artistic eye and taste. Additionally, it is both costly and time-consuming. Yet, well-done 3D graphics are highly attractive and convincing, so they can have a great impact on web design looks and conversion rates.

Interactive home page layout with 3D graphics for the Elecсtro website by Lynksen

3D images as an interesting interactive design solution for the Cula website by Refokus

The interactive product page of the Sunday website for a robotic company uses smooth 3D model animation, allowing visitors to view it from different angles.

The home page of the Nesma&Partners website by Origin catches attention and impresses visitors with an animated 3D illustration.

Logo

A logo is a key element of a brand, its symbolic representation. So, it is an obvious visual element of most websites that present companies, brands, services, communities, and organizations. Even personal blogs and portfolio websites often feature original logos these days. And quite often companies and creators choose symbol logos or combination marks that have an illustrative or graphic element used independently or in composition with a textual part.

In terms of web design, consider the following tips on logo usage in UI:

• put a logo in the header as it’s one of the highly scanned zones of a web page
• don’t break a well-checked habit: when users click the logo in the header, it takes them to the starting point of the journey. It may be a home page or up to the start of the page if it’s a single-page website
• think of logo animation on hover: motion will add life and will be the prompt that the element is interactive.

Logo integrated into the design of a Wickside landing page by Society Studios 

Why Images Should Be a Part of Your Web Content

Here’s a bunch of convincing facts:

• the research shared by web archive Wayback Machine shows that people perceive images 60,000 times faster than text
• psychologists claim that people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• important pieces of information are often fixed by the brain as visual images even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements, while the text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory, which means that when dealing with the interface, users will not need to process and remember more data than is really necessary, so interactions get faster
• visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries
• pictures push the limits of perception for users who have natural problems with text recognition, such as, for instance, the dyslexic or non-reading preschoolers.

Design Articles

Here are several additional articles on the themes of usability and user experience design.

The Anatomy of a Web Page: Basic Elements

7 Elements of Efficient Company Website Design

UX Practices on Product Page Design

How to Design Effective Search

Web Design: 18 Basic Types of Web Pages

Guide to 6 Effective Types of Web Animation

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices

How to Improve Web Scannability

How To Use Hero Images in Web Design