Using Images In Web Design

Web standards rise continually, changing our expectations towards a website. We want to find information quickly, we want to socialize, we want to get entertained, and we want all of it to happen on a personal level. The key to designing efficient, attractive, and personal websites is the use of a wide range of engaging media.What kind of media? Basically anything you can use on your website to convey a message, such as videos, audio, graphics, or images. While any of these can help to improve the user experience, the media you choose should be appropriate for your main target group with all their expectations, abilities and limitations. Also consider the devices people will use to access your site and technical limitations that come with it.
For example, videos can be a great way to get your visitors engaged. However, their device might not fulfill the technical requirements to watch the video. The same with audio. Imagine you offer some very informative audio tour on your site. People who are not in their office by themselves, or who don’t have their headphones at hand will most likely not listen to it.

For now let’s focus on a medium that always works to boost the user experience — if used with reason, of course: Images. Here are ten guidelines that help to get the most out of every single image on your site.

1. People prefer images over text

37% of the population are visual learners. Source

We just love images. A website without any images is boring and even with a nice design, most of us would probably prefer one with a lot of images. Why is that? There are many reasons that explain why we think images are attractive. For example, visual information is very convenient. Instead of reading a lot of text, which takes time and effort, we rather quickly scan an image or a graph. Then, images can trigger all sorts of emotions and memories, which makes them very engaging. Also, a lot of people can better memorize visual information and often it’s easier to share than written content. At last, images can cross language barriers a lot better than text can.

2. Images draw attention & trigger emotion

90 percent of all information that we perceive and that gets transmitted to our brains is visual. Source.

Images are an easy way to improve the user experience of your website. 90 percent of all information that we perceive and that gets transmitted to our brains is visual.. Images can help you to attract attention and to guide your visitor’s line of sight. They can be of great value when it comes to presenting important information. Also are images a great emotion trigger that you can use to draw your visitors in and get them engaged in your content.

3. Logos help users to orientate

The one image that you are most likely to find on any website is the company logo. The logo takes in a very special role, doing two things. First, it helps visitors to identify a website and gives them the safe feeling that they are where they want to be. Second, when showing your logo on every page of your site your visitors can be certain they have not yet left your site. Try to always position the logo in the same spot. Especially when you offer different content that requires a different site layout, it can be very valuable to offer this consistent element of recognition.

4. Limit Large Images Above the Fold


In 2010, web users spend 80% of their time looking at information above the page fold. Source

Images are great for many reasons, but make sure you don’t set their priority too high. The space of a web page that is above the fold, so the part that people can see without having to scroll, is the most valuable real estate of your site. Not because people are not willing to scroll, but because this area is the first part people see when coming to your site and you should use it wisely. Give people a reason to scroll and look at the rest of your site. If your images take an active role in this guidance, then make them as big as you want. However, make sure they don’t push more important, informative, or catchy content below the fold.

5. Use meaningful images

When using images, it is important that you know why. Don’t just use them to get rid of too much white space or because you have heard that people like them. For every image on your site, you should be able to answer two questions. (1) Why did you chose that image and not a different one? (2) Why did you place the image where you placed it, and not somewhere else? If you don’t know the answer to either one of these two questions, you should take a minute to think about it. Keep in mind that you should only use images that somehow support your content. Be it because they show some relevant information, because they proof a point you make elsewhere, or because they convey a feeling that supports your message.

6. Show real people

Dove makes very good use of images with real, down-to earth people. Source

Human images are a very effective way to get your visitors engaged. We like it to recognize any human elements on the Web. It makes us feel like we are actually connecting with other humans, not only with some coded website. Especially faces of other humans draw our attention and not only that, we even follow their line of sight. When using images with faces in your design, double-check where they might attract attention to. Also, don’t fall back on stock images, but use high quality photographs of people, who really match your site’s character.

7. Background images create an atmosphere

Background images are a great way to create a unique atmosphere on your site, or give your visitors an immediate impression of what your site is about. Make sure you know exactly what effect you want your background image to have on your visitors. Then implement it in your design and test it to make sure it has the desired effect. The thing with background images is that they can easily make your site look messy, for example if there is no clear distinction between background and content. Check out this collection of sites for some great examples of websites with large background images that work.

8. Don’t let graphics look like banner ads

Something you really want to avoid is to make images on your site look like banner ads. People don’t like ads and over the years they have successfully learned to ignore them. So when placing images in banner form either at the top of your site, or at the side, chances are good that people will simply not see them. In this case you case you can either not display them at all and keep your site clean, or you change their shape and position to better integrate them in your design.

9. Label Clickable Images

It has become a popular thing to use images instead of text for links. In general, this is not a bad thing because images have more potential to draw attention and usually they are also bigger, making it easier to click them. However, you should not forget to label them. While good text links are already descriptive themselves, a lot of time images are not-self explanatory and therefore need labeling to tell people where they link to.

10. Ensure that Images Do Not Slow Down Your Site

Images can have a great impact on the user experience of a website. At the same time, they can slow down a site and by doing so counteract a positive experience. Luckily, Internet connections nowadays allow us to quickly load many images – if we are at home, or in our office, or in a café with high-speed Internet. However, if people access your website from mobile, or if they use a connection that does not yet meet our usual standards, it is important that you optimize your images. You can for example optimize their size, or use thumbnail images to preview larger ones.

Conclusion

While a lot of different media can be used to enhance the user experience of a website. images are still the most common and also most universal medium. We like images because they are convenient, easy to engage with and easy to memorize. If used with reason, images can attract and guide your visitors’ attention, trigger emotions, and build trust.

Capt Don's Whale Watching

About Virtual Vidiot

Hello,
I’m Don Bernard and I’d like to welcome you to Virtual Vidiot. I’ve been designing websites and creating media for web, print and video in Silicon Valley since 1986. Currently I perform routine IT services for many local businesses and some major Internet companies including Linked In, Amazon, Twitter, Symantec and Netflix. (OK enough name dropping!)

Starting out as a Laser and Electronics Technician in the 80’s, I soon changed my career to the new computer industry and became  what was known as a “Super Technician”.  Next I moved to electrical. design and manufacturing engineering of computer systems.  Eventually I moved to quality manufacturing engineering then to Quality Manager for Acer America and Director of Quality for Synnex Information Technologies.

While I was tenured by these companies I was responsible for all quality groups, document control and ISO 9000 Quality Management as Lead Auditor and Company Representative. Most importantly, in this period we produced nearly 5 million computer and server systems as a OEM (Original Equipment Manufacturer) for companies such as HP, Compaq, Apple, Dell, Sun Micro systems and IBM (So I dropped a few more) with low process fallout and high customer satisfaction.  And successfully passed all of our ISO Audits.

Along the way I learned programming, databases, networking, Internet and various media software skills as a requirement for the testing, data collection, document control and training processes I was responsible for. I began creating in-process data collection, informational and online training resources on our company intranets. Greatly improving the manufacturing  process by providing real-time process information and analysis. This is where I acquired most of my basic web development. graphic design, audio, video, 3D modeling and other multimedia skills. Including building content management systems using HTML, CSS, PHP, SQL databases and WordPress.

In 1998 began building websites and providing both web and print marketing and advertising media for local business and organizations around San Jose and the South Bay Area.  Internationally I provide web services to non-profit organizations in Ireland and Mexico. Most advertising media was printed in San Jose Mercury News and Silicon Valley Community Newspapers and others used for marketing and informational brochures, business cards and company logos.

I found many small business and organizations that could not afford a staff (or even have an employee)  to create and maintain a  website, create media, update content, provide administration for users and members, setup e-commerce or deal with servers and hosting. I found I could provide a low-cost temporary solution by providing new business with their initial websites and media by providing them with a “Virtual Solution” until they placed their own staff. Or create dynamic websites with a custom user interface and provide some training so the business owner could easily update content as needed with no cost no fuss.

It was with these experiences I decided to create Virtual Vidiot.

I hope my services can be of value to you. If you are starting a new business venture, organization or just need a place for your profile and information, give Virtual Vidiot a call. I’m sure we can work out a solution for you. Virtually all your web needs in one place.

Don’t be an Idiot, Call Virtual Vidiot!

Don Bernard

Mammoth Journey 10,000 BCE

Mammoth Journey 10,000 BCE

Actual Game Video


What did Santa Clara Valley and Bay Area look like over 12,000 years ago when Colombian Mammoths roamed the Landscape? Mammoth Journey 10,000 BCE gives us a look at this time.

The Pacific Ocean was 30 miles off shore and the Bay as we see it now may have been empty with marshes creeks and rivers, but wildlife was abundant.  Explore, have fun, There is no real object to this demo, no stress. Find a nice place and to relax and watch the changing vistas while listening to the sounds of nature.

Download PC version here. .zip approx 210 Mb. Uncompressed approx 360 Mb.

Download MAC version here. .zip approx 200 Mb. Uncompressed approx 360 Mb.

Download Linux version here. .zip approx 200 Mb. Uncompressed approx 360 Mb.

These demos are free!
Completely Free! No charge or Credit Card required.

For All Ages!
Non-Violent, No aggressive play. The object is to wander around and watch. See the video above.

Malware and Virus Free!
  These demos are safe and (after download) do not require internet access to play.