Good Images Make the Best Creative Web Design
What Are Good Website Images and How to take the Best Website Photos
Why are good Images Important on a Website?
The best creative web design for clients all have one thing in common; image quality. Images are the number one visual way information is communicated and in the day and age of increasing demands for quick information, images do a great job at telling a story quickly for site visitors. Images are crucial for efficient web design because they break up content on pages which can be overwhelming for visitors. Essentially, people want information fast, and when they don’t get the answer to a search phrase, they leave the site (contributing to high bounce rates, low conversions, and lowered SEO scores). What better way to convey information quickly than through pertinent images paired with good keyword-heavy content aiming to match a visitor’s search phrase?
Efficient use of images can be hugely beneficial to a site and can add to a business’s branding, their tone toward visitors, their business’s image, efficiency in converting visitors, guiding efficient site-navigation, SEO, and much more. Images work hand in hand with creative web design and are increasingly recognized in their importance in conveying information:
“A common finding is an observed processing superiority of pictures as compared to words, suggesting that pictures have a faster and more direct access to meaning, while words are discussed to require additional translational activity…” -Schlochtermeier, et al. (2013).
Given the importance of images to visitors, it is good to know what constitutes as good images for a website to make the most of creative web design.
How are images used in Creative Web Design?
When people think of the best web design they typically only think of a site’s layout. However, most people forget that a large portion of layout is where to place high-quality images and content. The best web design is unique for each client and their business. However, there are similarities with site layouts and how images are arranged:
Simple and effective designs use layouts with images that do not confuse visitors, help them navigate the site, sell your unique message, and help convert visitors into a customers. Good layouts also use images to guide visitors toward pertinent pages or locations on their site.
What are Good Images for Your Website Conceptually?
Good images have a number of things in common conceptually:
- Simplicity: They are uncluttered and non-distracting. Images that are very high contrast or full of patterns tend to distract visitors.
- Relevant: The images should be relevant to your products or service. It wouldn’t make sense to show images with cereal on a website for a construction company.
- Consistency: Images should not be too different throughout the site. A website with a lot of obvious stock images, mixed with candid shots taken from your iPhone, can give a feel of artificiality, deception, or lack of professionalism. Consistency can be an issue in images not only with the subject matter, but also the lighting, image quality, etc.
What are Good Images for Your Website Specifically and How to Take Them?
Here are 5 tips to taking good images for your website.
1. Take Big Photos:
There is a misconception that images need to be small for a website. Images need to be as big as possible to get high resolution, only their file sizes need to be small. Thankfully OCG takes care of all file compression so even if you give us massive photos, we ensure they are optimized on your website. Images that are too small are ‘pixelated’ or ‘low-res’ and look bad on websites and can hurt your online appearance and brand identity.
High Res Image
Low Res Image
2. Lighting:
The images need to be well lit. Avoid using a flash because it tends to wash out all images. The main source of lighting should not be behind the subject either and you should avoid highly contrasted images that add a lot of distracting patterns. This is very important because many images on a website have text over them and high-contrast images make it difficult to read the content and can be strenuous to look at on their own.
Good Lighting
Bad Lighting
3. Focus:
Having everything in focus can make the image too cluttered and distract from what you really want to viewer to see in the image. A ‘soft-focus’ pulls the viewer’s eye toward the object you want site visitors to pay attention to while softly blurring the rest. This can also help de-clutter busy images.
Good Focus
Bad Focus
4. Composition:
Many people think that if you want to draw attention to something it needs to be centered in the image. That can get repetitive with many images on your site. Take images from close up and far away with the subject in different places. It can be a mistake to take all of your images from one perspective using one composition, unless you are taking product shots.
Good Composition
Bad Composition
5. Perspective:
You may hear web-designers or account-coordinators talking about ‘mastheads’. Mastheads, banners, or site headers are the images that display at the top of each web page. These images need to be large (to work with a responsive website) and need to be ‘landscape’ not ‘portrait’. Additionally, because visitors only see a tiny part of the whole image, it is a good idea for the image to capture ‘depth’. For example, instead of taking images from a top-down angle on a subject, try taking shots from different angles that emphasize perspective. A good way to do this is taking a series of images starting from the ground-level and moving up.
Good Perspective
Bad Perspective
Common Questions about Images and Website Layouts
Many clients find sites and ask what we can do to make their site more like the example they choose. The most common site people tend to ask for is Apple or other sites for technology companies. So what do they do that makes their layout work so well?
- Brilliant Product Images: The images on these sites are highly detailed, well lit and show the context of use for each product (typically by showing bright and colorful programs or backgrounds on the product screens). They also merge into the background of the site seamlessly. You cannot see the backdrop of a white curtain or other distracting elements. Additionally, they keep the images simple and de-cluttered and emphasize perspective by taking the image shot from the same perspective as the visitor’s eye while browsing the site.
- Integrated Grid Layout: The layout of the site incorporates images in a strict grid fashion and not inconsistently wherever they believe and image should fit. These ‘grids’ also help break up content into manageable bites for visitors and pair them with images that are relevant and add to that content.
- Branding: The branding on these sites is consistent between every page. Every image appears that it was taken in the same photo shoot even though the images show different subject matter. The images also all tie branding colors together, such as the metallic gray of Apple and the black and white product images. These sites also use images with people in them strategically, giving the page and the brand a nice ‘feel-good’ and personable quality. Good images with people can be used as visual substitutes for client testimonials and help persuade the site visitor of the quality of the company, product, or service.