Week 12: Choosing Images and Visuals

Imagine a website without any pictures or graphics, it’d probably be pretty boring right? Not only would it be dull and boring, but the user wouldn’t learn or engage as much as they could with valuable visuals. It’s very important to have these elements since they contribute to the overall effect that the website has.

What Makes an Image “Good”?

Images should be high quality and have purpose. They should contribute to the overall function of the website and create straightforward communication of the information being presented. “Good” images tend to have clarity in visual and psychological perception and provide as much sensory information as possible.

Images should fall under one of two categories

1. Lifestyle Images

Lifestyle images can be extremely important to the user. They can provide content. For example, if the information is about a certain place, the content could be what the location looks like, offering the reader a visualization of where they would potentially be going. For objects, like an article of clothing, can provide a solid interpretation of what it would look like while being worn.

These visuals tend to answer important questions like, “What does it look like?”, “How is it used?”, “When would I use it?”, and “Who is it for?”

In order for the images to be interpreted properly, they should reflect your brand faithfully. Take into consideration the brand’s values, which can be a guide to choosing or creating the perfect images. For example, a playful brand should showcase bright colors and light hearted scenarios. While a more serious brand could include a more sober palette with realistic subject matter.

Website homepage of an Australian beach vacation site called Hamilton Island.

As we can see in the lifestyle image above, the bright blues and playful smiles promotes this vacation destination of the coast of Australia. The beautiful location is something that the visitors can see when they arrive to the site, allowing them to get a visual of their potential visit. Using models also allows the users to picture themselves in their position, enjoying a fun and relaxing holiday.

2. Images to Promote a Product or Service

Product photography is not an easy task. The images are competing with our memories and expectations we have from viewing products in real life. This is why you need to choose images that present your product in the best way possible.

Tips for mimicking the behavior of experiencing products or services in the flesh include:

  • Use multiple images providing many viewpoints
  • Use close ups, or provide a function to see the images larger, to give a better sense of its material
  • Use images that show the product in the way it would conventionally be used
  • Use images with variation of size, color, etc.
Clothing website displaying a jacket, involving zoom feature.

Using the example above, it is clear that the website took those tips into consideration. The zoom function allows the material to be more accessibly seen, there are several images including the front an back of the jacket, and an image of it being worn (in context as well). With the use of these images, the user can get a better understanding of the product.

United States Postal Service home page.

I think it is also important to discuss how services provide promoting images. Holding the teddy bear with open boxes in the background, their smiling faces make it clear to see that they were satisfied with the company, which is how they want their users to feel. The play to emotions helps gain the users trust, hopefully gaining more users.

How Can We Make the Images Work for Us?

There are three main tips and tricks to using images that work well for you.

1. Images that contain people and/or animals

With people in images, it is easier for the audience to relate to the company. As humans we are unconsciously inclined to notice certain things when looking at images of people, like the direction of their gaze, their body language, and the reflectivity of the subject.

Direction of Gaze

Nike Ad promoting Women’s Tights, featuring a woman exercising.

As you can see in this image, the direction of this woman’s gaze leads you right to “Buy” and the FaceBook “Like” button, inclining the user to spend money on the companies product or promote them on FaceBook, both of which is good publicity for the site.

Body Language

These two images show the difference in tone influenced by body language. The woman on the right seems to be wearing something that is comfortable, easy to move in, and brings her positive energy. The man on the left with his arms crossed, holds a more serious tone, implying that the clothes he is wearing is for a more serious occasion.

Reflectivity

Home page of Kelloggs website, feature a mother and daughter baking a holiday desert.

Reflectivity allows the audience to see that the site is relevant and that they are in the right place by displaying their own likeness reflected back at them. The image above has a rotating gallery representing families of variant ages and ethnicities.

2. Consistency across a range of images

Keeping a professional and stylized website can be done through consistency. Things like color, lighting, placement, background, and mood can help avoid distraction of conflicting design.

Anthropologie’s website displaying dresses on mannequins.

Notice in the image above, the consistency of several factors. Choosing to display their dresses on mannequins allows similarity to be seen right away. The silent background allows the dresses to pop, providing clarity of their product.

3. Creativity in images

The user is more likely to remember images that provide a unique and imaginative perspective over those that don’t. Showing a creative edge is not only more memorable, but overall more interesting. Consider composition, lighting, symbolism, and illustration when displaying images.

Composition

Image of bouquet of flowers, including close up with more detail.

Although the image on the left is beautiful, the image on the right holds different value. The viewpoint and cropping of the image give a more intriguing, unique design.

Lighting

Bed with floral comforter, seen in soft lighting.

The surrounding darkness and moonlike light give the illusion of nighttime, which is appropriate since the subject matter is a bed.

Symbolism

Two kids in the Sahara in their living room.

The carefully placed objects create an interesting, theatrical illusion of a Sahara without ever leaving the house.

Illustration

Bottle of perfume, surrounded by 2D art.

This very interesting image shows a collaboration between photography and drawing. Watercolors of apples and floral designs can tell us what we can expect the perfume to smell like.

Now that we know how to choose the right images for our product, we also need to decide what kind of hero image to use!

What’s a Hero Image?

Well, first of all, it’s not simply one picture, like I thought it would be at first. A hero image, also referred to as “hero header”, is a web design term used to describe an oversized banner, generally at the top of a website. It’s purpose is the allow the user to get a glimpse at what your company is through a very prominent image. It is either usually a high quality image, video, or animation.

Template of website, including hero image.

There are several different ways to use hero images. It is very important to apply a hero image that works best with your site and offers ease to the visitor when navigating. Always make sure that the hero image contributes to the conversation of the website.

Why and How Do Use a Hero Image?

The use of a hero image immediately builds credibility and trust for the brand. It is a strong start to a website and once again, allows the user to see the site’s purpose right from the get-go. Involvement is also very easily accessed.

Hero image from a t-shirt design company, involving buttons to “shop” or “create.”

Very often, like this image, the hero image will involve interactive buttons. It is usually to help the user dive into the site and helping them reach their end goal idealy faster. This t-shirt company is immediately trying to get the visitor to start shopping or creating, eventually leading them to spending money buying shirts from the site.

A travel company site, inviting the user to sign in.

Sometimes, the hero image will include somewhere to sign in or search. Usually, like this travel site, the cursor will already be blinking, allowing the user to immediately start getting involved by typing, not having to select anything.

Two things to consider when using hero images:

  1. Be aware the large images may affect the loading time of the website, especially on mobile devices.
  2. Make sure that the image actually adds value to the site and it’s disrupting the viewers experience.

Testing

A/B testing is a method of testing when 50% of those being tested are shown the original version of your page and the other 50% are shown a new variation. Showing a random sample can help determine which version of the page works best to the users.

It is ideal to test the impact of a still images versus a moving image, which works best for your site and with the users. Interactive play versus auto play is another thing to consider if you chose to display a moving image. Test that your hero image works and is valuable to the site.

How Can We Make Visuals Memorable?

Did you know there is a science behind memorable visuals? Cognitive neuroscientist Dr. Carmen Simon has been studying this science for years and explained that the four areas prevalent in communication are facts, processes, data, and abstracts.

All your audiences make decisions in your favor based on what they remember, stay on people’s minds long enough for them to decide in your favor.”

Dr. Carmen Simon

What Are the Elements of Visual Thinking for Nondesigners?

Dr. Simon breaks down elements of visual thinking into three groups:

  • Think in pictures
    • Challenge yourself to communicate facts through images
    • Use arrows to indicate an order of a process
    • Put data into visual format to give it meaning
    • Allow the audience to interpret the visual meaning of an abstract image
  • Visual elements
    • Avoid visual cliches and don’t use pictures spontaneously
    • Use vivid, concrete words that lets the audience’s brain build images out of text
    • Lines can help the brain process information faster and more effectively
    • Certain shapes can contribute differently to conversations
  • Universal design principles
Three parts of visual thinking for non-designers chart.

Choosing images can certainly be a challenge. There are many factors to consider when deciding what visuals to use on your website. Be sure to consider your audience, your product or service, your message, and your purpose. When selecting visual elements, be aware of the effect it will have to your website and its users.

Sources

“Extras & Tools.” HTML and CSS Book, https://www.htmlandcssbook.com/extras/choosing-images-for-your-site/index.shtml. 

“Hero Image.” Optimizely, https://www.optimizely.com/optimization-glossary/hero-image/. 

How to Design Hero Images (with 35 Case Studies) | CANVA. https://www.canva.com/learn/hero-images/. 

Johnston, Marcia Riefer. “Review: The Science behind Memorable Visuals.” LaptrinhX, LaptrinhX, 18 Jan. 2018, https://laptrinhx.com/review-the-science-behind-memorable-visuals-3491401264/. 

This Post Has 5 Comments

  1. Hi Torianna!

    I really enjoyed reading your blog post for week 12 about visual elements. I never knew that all images fell into two categories: lifestyle and product/service. It definitely makes sense looking back, and I’ll keep this in mind for when my group is planning our website because we will utilize both types of images. I really like the term reflectivity because its so important to be inclusive to all users of a website. Consistency of images is also vital to make an organized and professional looking website. I definitely think I will refer back to the list in your post about elements for nondesigners.

    When researching another source, I discovered an article titled “9 Golden Rules of Choosing Images for Your Website”. This article goes into further detail on the best images to convey the message of a website. I specifically liked the list of useful websites to find quality images at the end of the post. Another takeaway is to be wary of licensing when choosing images as you could be stealing someone else’s work. Overall, I think your post was very useful as we begin to design our website as images are essential.

    https://oscwebdesign.biz/rules-choosing-images-website/

  2. Hello Torianna,
    Overall, I absolutely love your blog post for this week. The way you broke down the significant influences images, such as hero images, has on the overall experience of users. I believe the ample use of coordination you use with the associated headings was also great in terms of continuity. Additionally, this also allows your blog to use the quick “grab and go” method we’ve discussed in class. When addressing images and the purposes they hold for visual learning, I found an article that discussed critical aspects to keep in mind when applying them. This article, https://www.getfeedback.com/resources/ux/10-things-to-know-about-images-in-web-design/, is a little outdated, there are certain factors don’t really conform to the norms of today, but it’s interesting to see how the foundation of such writing has evolved throughout the years. Referencing back to your hero image application to websites, the previously mentioned article discusses that using such methods should not happen, as they may appear as ads. While this is something to be mindful of, banner (hero) images allow for creators to immediately establish the purpose of website right away, similarly to what you mention in your thread. Overall, wonderful job!

  3. Hi Torianna! First of all, I love the purple theme of this post! I think it demonstrates your theme of visuals determining tone on a site by making your post look friendly and inviting. Second, you did a fantastic job with writing this post. It’s helpful and easy to read, as well as visually appealing. I didn’t really understand fully what a hero image was until you broke it down completely for us, and then I started to connect that information back to other websites and ads that I had seen. I also liked how you also cautioned readers about loading times if they choose to use these types of images. I think that’s very transparent and provides the reader with a complete set of information. Yoo also had a section on user testing, which I thought was interesting. I was able to tie that back to an earlier blog post about testing and connect the two together. I found on Canva’s website (https://www.canva.com/learn/hero-images/) a page about hero images and even tips and advice on designing them. I think if other people use both of these resources side-by-side, they will have such an easy time creating visuals and imporoving their website dynamics with your advice.

  4. Hi Torianna! thank you for such an interesting read I never knew that there were classifications for the images we use on webpages, but the categories help so much for understanding what image needs to be used when! I really liked your section about the hero images and the research you brought in from Dr. Simon. I think that considering the visual elements of an image and the way it will effect your website is a very comprehensive way to choose appropriate and impactful images. This article goes into detail about when to use a PNG and when to use a JPEG I thought this was interesting since I didn’t know before that they are generally used in different places. https://www.g2.com/articles/choosing-the-best-images-for-websites
    thank you again for an interesting read!
    Maddie Jones

  5. Hi Torianna,
    I really enjoyed getting to read your log post today! People don’t understand how important images are, and there is a HUGE difference between bad images and good images. Images can be a lot of work, either you google for some or maybe you create your own. And when you google for them you find a BUNCH that are good, bad or maybe in-between. I actually own my own boutique and we focus so much one creating good photos for our site and for our social media accounts. There is a major difference in how your audience reacts and how your sales are. Plus sometimes images can tell a whole story, and if you don’t have the right image, it can tell a different story than what you mean it to say. I pulled the article “What is the Importance of Images in Business” to look over after reading your post. They further go into building credibility, making it more interesting, telling a story and so much more. Check it out!
    URL: https://smallbusiness.chron.com/importance-images-business-75964.html

Leave a Reply

Close Menu