Creating Aesthetic through Images

Images are something that we are constantly surrounded by as a way to take in information about brands and the world around us in a way that is more interesting than your basic text, but there is a science behind these images and why they are chosen. The visual impact of images helps to motivate the reader and influence them to find out more about the information they are seeing. Now, let’s take some time to understand how you can ensure that you are capturing your audience’s attention in the best way possible through proper imagery.

Choosing Images for your Site

HTML&CSS Book tells us that good images communicate with their audience, they have clarity. Both visually and in terms of psychological comprehension.

Categories of Images

Lifestyle
  • These images provide context to the viewer
  • Answer questions such as:
    • What does it look like?
    • How is it used?
    • When would I use it?
    • Who is it for?
  • These images sell an idealized image of a part of life
  • They are most effective when they represent your brand’s values
Image from HTML&CSS of Hamilton Island homepage
Promoting a Product or Service

This process is harder to achieve effectively because naturally, we prefer to and are used to judging products in real life rather than via a photo, so sensory information is key.

  • Tips to achieve an effective product photo
    • Multiple images, from multiple viewpoints
    • Add closeups 
    • Show the product in the context of which it will be used
    • Include images of any variations in size, color, etc.

How to make your images sing

Yep, you heard that right, sing! Here are some tricks that can help make sure that the images you choose work for you:

Images containing animals or people

Images with a face are good to use in many situations, but there are also a number of things to keep in mind in order to make them most effective.

  • Direction of gaze
    • Have the gaze point in the direction of what you want the user to pay attention to on the website.
American Bird Conservancy Homepage via HTML&CSS
  • Body language
    • Much like body language says something in person, it does the same online. Have your photos mimic the vibe of what it is that your site is talking about and the message you are trying to convey.
  • Reflectivity 
    • If the photos you choose reflect an event or lifestyle that your audience is likely to engage in then they will be more likely to be drawn to your product/service.
Consistency across a range of images

Consistency with your images helps to make your site appear more professional and put together.

  • Color 
    • Stick to a certain color scheme.
  • Context 
    • Present your photos with similar context, in other words, feature the photos with the same background in order to create a sense consistency for the viewer.
  • Mood 
    • Maintaining the same overall tone throughout the website is something that will not go unnoticed by your readers.
Creativity in images

Aim to provide images that create unique and imaginative perspectives. These perspectives will prove more memorable for your audience. Composition could include the use of negative space, cropping, or a different vantage point. Using composition in your photos will help to spice them up and show the reader’s something new. Altering the lighting in photos is another way to alter the mood of the photos and the webpage. Lighting can be dreamy or dramatic, innocent or sinister, gentle or harsh. Lastly, symbolism can be used to alter and enhance objects in order to inspire your audience in a way that goes beyond the obvious.

Hero Images

First, what is a hero image? According to Optimizely, hero images are the large banners you see at the top of web pages, typically made out of high quality photos or videos. These are important because they offer your audience an initial taste of what it is that your brand does and what it is that they may find on your website.

Image from Optimizely
Why should I use a hero image?
  • Adds a personal touch to your brand that then increases credibility and trust among your audience 
  • Leads to a positive first impression 
  • Can serve as a call-to-action 
  • May be used to present your businesses values
Things to consider when using hero images:
  • Be aware of the size of your image
    • Making the image/video too large could affect the pages loading time. The image is no longer effective if it means slowing down the amount of time it takes to bring the user to the page.
  • Does your image add value?
    • Stock images, while quick and cheap, are not as effective as they do not showcase YOUR brand as well. Taking the time to get photography or videography done of your products for the hero image will be most beneficial.

How to Design Hero Images

Creating a hero image is all about capturing the message that your brand wants to convey to its audience. This can be done in many different ways, so let’s break down some of the most helpful tips when it comes to standing out to your users.

  • Lead with lines
    • Lines can be used to draw the audience to certain areas of the website that you specifically want them to pay attention to.
  • Call to action 
    • Placing a call to action up front in a hero image is a great way to make your viewers feel compelled to carry on with what it is that they are doing on your site.
  • Symmetry 
    • The human eye appreciates and is drawn to symmetry, so in this case a symmetrical hero image could be just what you need to attract the audience.
  • Minimalism can be a classy, sophisticated way of representing your brands and the basics you want to portray at that time:
Image from Canva of Berger homepage hero image
  • Changing the perspective in which your audience typically might view your product allows you as a brand to stand out and make them think of using your product in this new and exciting way. 
  • Set a scene
    • Creating a scenario in one’s head is an incredible way to force the reader to picture themselves in this scene and therefore feel drawn to your service even more.
  • Consider using borders. Borders serve as a way to structure and reinforce the message that is contained in your hero image.
  • As always, choose your photos wisely. Ensure that your chosen photo encapsulates your brand and the overall tone of the message.

Now you may be wondering where you should go to create a hero image of your own? Well lucky for you, Canva has a ton of great tools to help you do that!

Memorable Visuals

Visuals help readers engage better and recall information quicker because we are able to process them faster. But there is such a thing as a forgettable visual. We encounter so much information each day, week, and year, so making sure that the visuals you put out there are effective is something to pay attention to. Making a memorable visual seems like a no brainer, but there is a science behind it, and I’m here to break that process down for you!

Why does it matter which visuals are memorable?

Dr. Carmen Simon discusses how our audiences make decisions based off of what it is that they remember. As a business you need to ask yourself the following:

  • What makes people remember your content?
  • How do we stay in people’s minds long term?
What are the elements of visual thinking for nondesigners?
  • Think in pictures
  • Visual Elements
  • Universal Design Principles
Photo from The Content Wrangler
Think in Pictures
  • Facts
    • Presenting facts with pictures helps our brain digest the information better and retain it in the long haul
  • Processes
    • Use arrows to indicate the order of information in a sequence 
  • Numbers
    • Making numbers appear in a visual format is challenging, but it resonates better with the audience
Image from The Content Wrangler
  • Abstract terms
    • Metaphors are your best friend! Making a concept topic correlate to ideas that we better understand will help your reader follow along.
Visual Elements
  • Pictures
    • Your pictures must serve a purpose. They have to mean something. 
    • Avoid clichés 
  • Text
    • Use vivid, concrete words to help paint the picture in the reader’s head
  • Lines
    • They help to break information down
    • Group information accordingly
    • Guide the attention of your reader

“At its most fundamental, graphic design is about organizing visual elements on a plane: manipulating graphics, various media, and typography to produce a visual order that reflects and enhances the messages of the content.

Web Style Guide (page. 262) by Patrick J. Lynch etc. at ProQuest

So next time you need to choose visuals for a blog, website, or whatever it may be remember these tips, and think to yourself what visuals resonate with you? Using your own personal opinion and perspective can serve as great help when it comes to publishing work!

This Post Has 9 Comments

  1. Hi Margaret,
    I really enjoyed reading your blog post this week! You made great use of bulleted lists throughout, breaking down concepts with additional sub bullets when necessary. I liked how this layout allowed for easy navigation of your blog post. Additionally, I thought you made great use of images (unironically). It was nice to get a visual representation of some of the concepts you discussed, and it made it easy to recognize what concept was being represented by placing the image directly under said concept. It was interesting to learn more about how to make your images sing. The example you included of the hummingbird directing the user’s gaze was especially interesting to see and definitely gave me more to think about when creating effective images! I did some further research on how to create compelling alt text to accompany images, as blind users are unable to experience the effects of the image on the page (https://www.lifewire.com/writing-great-alt-text-3466185). The article explained that alt text should be brief (roughly 5-15 words) and avoid using keywords simply for an SEO appeal, unless keywords are relevant. Text included in the image should also be included in the alt text. Alt text needs to be meaningful and remember that readers are the top priority. It was interesting to learn more about how to create meaningful alt text, especially as we create our team websites.

  2. I appreciate that your post is engaging and informational. I like that it laid out well and it is organized. “The visual impact of images helps to motivate the reader and influence them to find out more about the information they are seeing.” To me this is so true. I find myself more interested in something if the visuals are pleasing to the eye. If I like what I see I would continue to read it. However, as much as I believe that visuals are important but sometimes we cannot judge the book by its cover. Sometimes visuals can trick us. When reading your post, I learned so many things. Somethings that I knew about but heard another term for such as hero image, I just always refer to it as a banner. “Making the image/video too large could affect the pages loading time. The image is no longer effective if it means slowing down the amount of time it takes to bring the user to the page.” Honestly, I never actually thought about what happens if your hero image is too big, but what you mentioned in your post makes so much sense. Through the article Make the Most of Your Design with a Hero Header by Carrie Cousins I learned that a hero image is also called a hero header. https://designmodo.com/hero-headers/#:~:text=A%20hero%20header%20is%20the,can%20be%20realistic%20or%20drawn. The article talks about using a hero header in your website design and it cover tips when using hero headers. One of the tips that stuck out to me the most is color choice and how you should be aware on what colors you use. I feel like this very important, especially when it comes to using text on a hero header, because our sites will focus on being accessible for people with disabilities. The colors you use can be key for a making a site for people with disabilities accessible. For example, the article Alzheimer’s Society issues guidance on creating dementia-friendly websites by Claudia Cahalane mentioned avoiding the color blue. The article is a guide on creating a site friendlier for persons with dementia. The color blue can be difficult to make out for people with dementia therefore making it harder to see. https://www.abilitynet.org.uk/news-blogs/alzheimers-society-issues-guidance-creating-dementia-friendly-websites

  3. Hi Maggie!

    This blog is written to perfection and stylistically entertaining! You did an excellent job of breaking down different concepts of photo aesthetics using bullet points, bold, headings, and subheadings. This structure made the concise content easy to digest. As I was reading your post, I realized how familiar I was with seeing these concepts in real life. Often times, I see hero images on websites when advertising new product or showing the dining area of a restaurant’s website. Now when I see photos “singing”, I can relate the strategy back to the overarching goal of positive user perception by way of aesthetic. The link below discusses aesthetics versus functionality. While the look of our website is critical for first impressions, that needs to exist in harmony with functionality. This source does a great job elaborating on the strengths of both and inspires designers to integrate them within each other. This is a read that will be especially useful while building the group websites! Take a look:
    https://uxplanet.org/website-design-aesthetics-vs-functionality-8d429dd09f8a

  4. Hi Margaret,

    I really enjoyed your blog post for this week on images. The structure is great and helps break down different aspects of images, so nice job! The thing that helped the most when digesting all the information in the blog post was the visuals. The visuals of websites that show exact examples of what you were discussing helped me understand what you meant in each major section of the blog post, especially when you talked about hero images and how to direct someone’s’ gaze through an image.
    The thing I was most interested in when reading your blog post was how to use hero images. Typically when I think of creating a website, I think of using an image that relates to what the website is about. For example, Taylor and I are creating a website for a Hungarian restaurant, and I feel like it’s obvious that we would use an image of food for the hero image at the top of the home page, but after your post, I realized there are so many things to consider when choosing this image, such as the direction the image is pointing to, how symmetry is used, whether it is a call to action, etc. I started researching hero images for restaurants, and I found a website that shows how to use hero images for different kinds of websites. I linked it here. https://whatpixel.com/hero-images/. This could help anyone who needs help deciding on what type of image to use on their home page.

  5. Hi Margret!
    Great blog post! Your organization was extremely well done! I particularly like how often you used bulletpoints and lists to organize the information about each image type. I also really liked how you used bolded words to highlight the key points when you did have to write in a longer paragraphs. As for content, your post was really interesting and the visuals definitely helped connect your ideas/points. I actually already knew that the head/focus of the image should direct the user’s eye to where you would like it to go. I actually used that technique a lot in Doc Design; usually I would have the person’s eyes looking at the most important piece of information. However, I completely forgot about that principle when beginning to design my website, but I guess websites are internet documents so the same principle would apply. What really helped prove this point in you post was the image; the way that the hummingbird pointed to the button on the webpage is the perfect example! One new thing that I particularly enjoyed learning from your post was the concept of hero images. I’ve seen them everywhere on the internet, but never knew that they had a name or thought about their importance on websites! I really liked your tips that you included on hero images, and did some research for more tips particularly on dating websites (my website project). While I couldn’t find anything specifically for dating websites (although I did get a lot of tips on dating profile pictures….), I did find this helpful article on hero images in general: https://whatpixel.com/hero-images/. It discusses how hero images help set a tone for the wbsite and offers opinions/tips for all different types of websites

  6. Margaret,
    I liked this blog post. I think the images you chose really helped to outline the points that were being delivered with the written content on the blog. The only thing I would suggest regarding organization would be making sure to not sandwich a subheading between two lists. I think if you had a block of paragraph content separating the lists as well as a subheading, it would look a bit neater and be less jarring. Other than that the blog is organized nicely. I think it was interesting that I can now put a name to Hero images on a site, as we see them everywhere but never really consider that they have their own conceptual name. A lot of the tips included in the post seem useful and relevant to the project we are doing. It’s important to maintain a consistent aesthetic with the images on your site, and it’s increasingly difficult when you are not in the position to create your own images, as searching for the appropriate ones that have similar quality and feel takes time. I found this site https://ivorymix.com/steps-to-create-a-consistent-brand-using-stock-photos/ that gives tips on how to maintain consistency using stock images interesting. I think a lot of the tips are generally common knowledge, but it’s nice to see them reinforced and elaborated on.

  7. Hey Margaret,
    I would have never thought about this topic so heavily had I not read your blog post. I want to say that you have done a great job organizing all of your information and presenting it with imagery that best exemplifies what you were trying to tell the audience. The only criticism I have is that this is the opportunity to use vibrant imagery or something that has more of an aesthetic feel. Obviously, everyone has their own aesthetics, but the pictures feel a bit dull and plain. Using websites that have the same structures but more vibrant pictures could have also helped with bringing out the “aesthetic” of this blog post. Otherwise, this was well written. As a person who is a huge fan of many aesthetics, I really enjoy when I can find a site that matches what I love looking at and feeling. I would say this about Urban Outfitters or even Converse. They are subtle, but have everything I was looking for. Aesthetics definitely add to a website experience and I think your blog post describes it well. Here is an article that also discusses the importance of website aesthetics:https://www.appliedi.net/blog/7-elements-of-an-aesthetically-pleasing-website/

  8. Hello, fellow Margaret,

    I find photos to be the main thing I remember about a website. From personal experience, I definitely think they really work to exemplify a brand image and give the reader something tangible to attach the brand to. I especially thought that the part about hero images was interesting. Those big banners at the top of the web page really do hold my attention and help me to better understand what the brand is all about. This reminds me of how album art for music usually points to the kind of music genre the song will be. I found more about hero images here:https://whatpixel.com/hero-images/. Usually, the hero image explains the purpose or goal of the company/website to the viewer.

  9. I like this blog post about visuals. I also think it is worth including that people not only pay more attention to visuals than text, but also remember visuals better. I think having someone remember your site is very valuable and visuals can help with that. As a painter I use a lot of these laws when creating painting ideas. I understand the importance of composition, lighting, and symbolism to appeal to a certain audience. This article explains ways to use visuals similarly to how you do in this blog. https://howtogetonline.com/creating-website-visuals-for-non-designers.php However, this article also talks about gifs. Where I am sitting, I would never include a gif in a website or blog post. But this article explains how and when to use them, and that the length of time they loop in is important as well.

Leave a Reply

Close Menu