Simple and Consistent Web Design

Written by

There are many elements that web designers need to take into consideration in order to generate “good” design, however two important characteristics of good design are simplicity and consistency.

All too often I find websites that are too busy. Websites with bright colors, multiple videos, images, and walls of text. Websites without these elements would be dull, however there is a right and wrong way to use these elements. The information your visitors are looking for will be difficult to find if your website is cluttered. If certain elements don’t help tell your story, you should remove them.

Simple design doesn’t mean boring, it just means that it’s clean and easy to use. Use the minimum amount of text necessary in order to get your point across. All the images on the website should be relevant. Images should always help explain content. They should make your visitors feel as though they are in the right place for the information they are looking for.

Making the site design consistent is also crucial. Make sure that the menus, headings, text and all design elements look and work the same way throughout your site. If you have a particular design element, try to reuse it throughout the website.

Simple design allows your visitors to access the information they are looking for quickly. Consistency in web design allows your visitors to understand how to navigate throughout your website easily. No matter how amazing the images are or how trendy the theme might be, users will not stick around on your site if it is too complicated and busy.

 

Authentic Images Are Worth It

Written by

Business Man Shaking Hands

We have all seen one of these photos. The man in a suit with the perfect smile doing “business things” in front of a blurry background. Stock photos are all over the internet. Many are high quality, but they often lack personality. Images can help humanize your brand. Instead of using images of freakishly good-looking young professionals in business suits, hire a photographer and block out an hour to take some group shots around the office. If money is tight and you have a digital camera, go the DIY route (just do some research on correct lighting as that will make a huge difference).

Don’t refrain from using an image of yourself or images of your team. Not only will it make your website more personable, there’s a good chance it will help your conversions. Marketingexperiments.com ran a case study on a consumer credit counseling service’s home page. The experiment ran a stock photo of a woman with a headset against a photo of the company’s actual founder. When the photo of the company’s founder was displayed, visitors were 35 percent more inclined to sign up for a free consultation.

If you have no choice but to use a stock photo, make sure it is high quality and relevant to the message you are trying to convey. Just because you like a photo, doesn’t mean you should use it. Make sure the image isn’t used too often or (more importantly) by any of your competitors. If you are using Google Chrome, right click on the image that you are considering and select “Search Google for Image.” This will bring up all locations and websites where that specific image is being used.

Google Reverse Image Search

No matter what your budget or time constraints may be, keep in mind that your customers want to relate and connect with you and your team. If there is any way to incorporate your own style over a stock image, you will stand out in the crowd.

Optimizing Images for Search: The Basics

Written by

Images are important. They can improve SEO as well as break up text and help make your website or blog post aesthetically pleasing. However, large uncompressed images can slow your page speed and impact your ranking factor. With the majority of people using their mobile devices for web browsing rather than desktop pc’s or laptops, making sure that your images are optimized is vital. Follow these steps and you will be on your way to becoming an image optimizing machine.

Finding The Right Image

Whether it is the header image for your website, a featured image for your blog post or a product image for your web store, make sure that you are using an image that reflects what you are trying to accomplish. There are many great resources that provide free stock images however it is best if you can supply your own images or have professional images taken. Original images will always be better than stock images, but if you do not have the resources to take your own photos, free stock images will work as long as they are high-quality and not too tacky. A couple website that I frequent are:

There are plenty of other stock image sites, however make sure that you can legally use them and whether or not you need to provide attribution.

Choosing The Correct File Format

Whether you are using Adobe Photoshop, Affinity Photo, or any of the other photo editing programs available, you will need to figure out which filetype will be the best for your image. This could be confusing considering how many file options are available. In this post I will be going over two popular file formats, JPEG and PNG.

  • JPEG: This is one of the most common image file types on the internet. JPEGs do not support transparency within images like PNGs do. JPEGs keep file sizes small and is pretty much supported universally.
  • PNG: Unlike JPEG, PNGs support transparency and possess a better color range. On the downside, file sizes are larger than a JPEG.

Unless you need transparency, JPEG should be your first choice when deciding file format.

Correctly Naming Your Image

Using a proper file name for you image is important because you want Google and other search engines to know what the image is about. For example, let’s say that you took a photo of a sunset at the beach in Hawaii using your own digital camera. When you upload that photo to your computer, you might have seen something like DSC1234.jpg as the file name. When looking at the image, you can instantly tell that it’s a picture of a sunset at the beach. Unfortunately this isn’t the case for Google. Instead you want Google to see that the image is sunset-hawaii-beach.jpg.

Optimizing Your Image For Web

When posting an image on the web, your main goal is to decrease the file size as much as possible without losing too much quality. With websites like compressjpeg.com and compresspng.com this process is incredibly simple. Simply upload your image to the site and it will do everything for you. After the image has been compressed, you can make further changes to the image when you hover over the image and click on “settings” (shown below).

Once you’re happy with the changes you have made, simply download the image and you are ready to go!

If you have access to Photoshop and want an in-depth “hands-on” approach, you can read about compression and how to compress images in Photoshop here.

What Alt Text Is and Why You Need It

Alt text is the text that search engines use to understand what the image is. When we look at a picture of a sunset at a beach, we understand what is going on in the picture. At this time, search engines cannot recognize images unless you include alt text. If you are uploading your image to WordPress, all you need to do is update the alt text option within the edit image options. Another way to include alt text is simply through html. For example:

<img src=”sunset-hawaii-beach.jpg” alt=”Sunset Hawaii Beach” />

Done!

It’s that simple. By following the steps previously outlined, you will have images that look great and load quickly.