Visual Elements of Web Design

Why are Visual Elements so Important to my Website and Social Media?

High quality images bring instant visual engagement from a website visitor's first glance. Written content takes a deeper interaction and more time to appeal to the visitor. Since first impressions are formed within seconds and most of the information we consume and interpret in those first few seconds is visual. High quality photos and design elements can make your site register in the visitor's mind as professional and credible. 

Our short attention spans have made lengthy written content less effective – so how do you keep interest? Show, don’t tell.

Physiology of Visual Image Interpretation

Humans started communicating with images more than 35,000 years ago with cave drawings and paintings. Some theories hold that cave paintings may have been a way of communicating with others, while other theories identify a religious or ceremonial purpose to them.

Our minds have evolved to react differently to visual stimuli because the human brain deciphers image elements instantly, while language is decoded in a linear, sequential manner taking more time to process. Research studies tell us that as much as 90% of information transmitted to the brain is visual, and visuals are processed 60,000 times faster in the brain than text. 

An interesting example of how the human brain decodes written text and organizes it into visual elements is this example of words with jumbled letters. We don't read individual letters but visually organize the words into groups to understand the meaning.    

Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. 

According to Dr. Lynell Burmark, Ph.D. Associate at the Thornburg Center for Professional Development “Words are processed by our short-term memory. Images, on the other hand, go directly into long-term memory where they are indelibly etched.”

What constitutes a high quality image on a website?

• Use an appropriate image for the message – You want to use a visual that serves as a clue and supports the points you’re making.
• Use the most attractive image possible - Incorporate the most eye-catching photo that will be etched into your customer’s, reader’s, prospect’s mind.
• Use High Resolution Images - High Resolution images can come from most modern mobile devices and of course traditional cameras. A 300 Pixels Per Inch (commonly referred to as 300dpi) photo is adequate for most marketing activities.
• Use the proper image format - Understand the pros/cons of each image format for visual elements.  
• Stick to a visual style and be consistent - The visual elements you use also say something about YOU, about YOUR business, and about YOUR style.   By sticking to one visual style, you’ll be sending a strong, consistent message and not a hodge-podge scattering of visual clutter. 

When to use Stock Photography

• If you have access to your own high quality photos about you and your business, it is always better to use them
• If you have the ability to take high quality photos about your business, do it.
• If you don't have any high quality photos, then stock photos can still be used effectively.
• Stock photos aren’t usually the solution, but they are far better than low-quality photos or no photos at all.
• Stock photography should always be purchased from the source,  versus harvested from Google Images or elsewhere. If not you run the risk of receiving a substantial fine from the copyright owner via image scanning services operating on the Internet such as picscout. 

Licensing of Stock Photography

Q: What are the different types of stock images?

A: Stock images break down into two main types, royalty-free and rights-managed.

1) For royalty-free images, you get nearly unlimited use. You can use the image in virtually any application, for as long as you like, in as many different projects as you like, as long as you comply with the terms of the license agreement. The image is available to use from when you purchase a license. Following payment of the license fee, no additional royalty payments are owed.

2) With rights-managed images, your right to use the image is typically restricted, with limitations placed on things such as duration of use, geographic region, industry, etc., as established by your license agreement.

Q: Can I use stockphoto images for free on a blog or non-commercial website?

A: In most cases, no. Unless your use is specifically permitted by copyright law, all the images on your website must be properly licensed, regardless of the nature of your site. You can, however, license very inexpensive images from many imagery providers that are perfect for web use and will be properly licensed.

Click here for more information on stock photo licensing

Understanding Image Formats

.SVG File Extension

Scalable Vector Graphics (SVG) is a seemingly new text-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG files provide resolution independent, high resolution dots per inch (HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG is vector technology. This means it is not raster technology. Vector images are a combination of lines. Raster files use pixels, or tiny dots. This is one reason that SVG is scalable. Vector graphics exist in the world of mathematics. Due to the vector technology and the underlying mathematics involved a 2 inch SVG image will have the same "weight" on the Internet as a 90 inch SVG image.
Best Uses Include: Responsive Design Scenarios when scaling of the image will occur

.Jpeg/.Jpg File Extension

The Joint Photographic Experts Group (Jpeg) format was developed in 1986. The Jpeg format is the standard for most digital cameras and devices currently.
Best Uses include: Photographs and still images 

.PNG File Extension

The Portable Network Graphics (PNG) file format was developed in the 1990s. PNG file format was created to address patent issues with the gif format and brings together benefits of the gif and jpeg format. The .PNG file format allows you to remove a background from a photo/image so that you don't have a "white background" showing around an image when you place the image on a website or social media page.
Best Uses Include: Web Images, Logos with Fading, Complex images when file size isn't an issue, Graphics with transparent backgrounds

.GIF File Extension

The Graphics Interchange Format (GIF) was developed by CompuServe in 1987. The creator of the format, Steve Wilhite, has stated that the correct pronunciation is "jif" versus "gif". The GIF file extension is generally used for web graphics with limited color ranges. 
Best Uses Include: Web graphics with limited colors  

How not to use Images on your website and social media

• Stay away from Pixelated Images - Low resolutions (fuzzy) images will lead your customer to think you have poor quality products and give poor quality service. Stay away from using images that are out of focus, or images that are clearly "stock" photos. 
• Don't get Flashy - Stay away from broad flashing visual elements that annoy or at worst can induce photosensitive epilepsy.
  
• Don't Crowd Your Images - You don’t have to fill every inch of white space on your website. Great designs contain well-planned white space which can help you highlight important points. Be careful, it's a thin line between too much blank space and not enough.
• Don't steal/harvest images - Placing graphics on your website that you didn't design or photos that you didn't take is a risky proposition. Just because an image is on the Internet doesn't make it free to copy or manipulate. Graphic designers and photographers need to eat too...