There are numerous ways to include images in your website. Today’s web 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.

Images can be simple, yet tells so much story.

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.

 

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).

Visual communication happens more frequently than communication with language.
Don't forget to add alt-text, like this one, to help search engines make sense of 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.

We can help you improve your website UX

The greatest challenge in UX website graphic design is not in the use of software and technology. Rather, it’s the decision-making, in deciding whether to include each line, shape, and color into a web page, and thinking about how that will affect the overall user experience.

Island Media Management has years of experience with web design projects. The resulting web designs boost brand recognition and credibility, making it easier to make great first impressions to customers online.

 

 

 

About the author

Gio

Gio

Gio is a creative writer with a technical background in food science. His strong research skills and a keen sense of communication style blend well to craft compelling content. His personal blog covers topics about lifestyle, food, and finance. 

Related Post

Post on January 22, 2021
If you take a look at our portfolio of website projects, you might wonder how...
Post on January 15, 2021
In the 90s and early 2000s, the word ‘e-commerce’ sounded novel and exciting. At that...
Post on December 25, 2020
At first glance, it may be difficult to imagine how visual brand guidelines will help...