Back You are reading: Tips on Website UX: Images and Graphics

Tips on Website UX: Images and Graphics

header UX images graphics

There are numerous ways to include images in your website while considering the website UX.

Today’s website development technology allows the integration of illustrations and vector graphics, in addition to the ability to blend photographic images with the background using pure CSS5.

Before diving deep into advanced techniques, it’s important to know the basic principles of website graphic design and website UX (user experience) design. The three principles which will be discussed here should be used to ground all the creative and innovative power of web design into practical and functional terms.

purpose image

1. Every Image Has A Purpose

The common maxim of design is that nothing more should be added than necessary, and that less is better.

This is true of image placement. Images are more than just for decoration. Like the website copy that delivers information with language, images are also means for communication.

If two different images deliver the same message, even if they are different and ‘looks great’ on the page, it’s best to eliminate one of them. Better still, if you want to retain the number of images, simply choose a new image that tells a different story.

Images don’t have to be photographs. They can be vector illustrations, infographics, charts, and perhaps a way to label various sections of the page. Write words inside an image frame to emphasize the text content such as in a quote block, aside, or even a call-to-action.

image blend with text

2. Images Should Blend Within The Context

The context of the web page is the topic. Various topics will evoke certain emotions to the visitor.

The web copy alone may describe the overall tone of the page, but if the added image represents the wrong emotions, this can create a more confusing user experience.

This is what many web designers should be careful about. Even a selection of color and shape in a vector graphic design can be misinterpreted, which then leads to a conflict between the intended tone and the overall content message.

Images are powerful — much more powerful than copy. Designers study ways to increase the productivity of users by incorporating carefully designed symbols. An image that accompanies an extremely short description can often be more informative than highly descriptive copy with no image (or the wrong image).

unoptimized images

3. Optimize Every Image

Images can potentially take up a lot of memory and thus significantly impact page loading time.

Once the images have been optimized for load speed, they must still be optimized for search engines.

Search engines are continually pushing for a more accessible web browsing experience. If possible, add an alt text attribute to each image that is part of the content. It’s not necessary to do this for all forms of graphic design, especially if they are used simply for decoration. Most images used in the content, however, are likely to require alt text.

To make things easier, you can leave your website to Juicebox, a digital marketing agency based in Jakarta and Bali, and focus on growing your business. Let’s discuss the best plan for your business website UX and UI without further ado.