Graphic Design and Web DesignSeptember 13, 2005
We recently launched a new web site for Cougar Construction of Barre, Vermont. One of the unique aspects of the web site is its graphic design features. In web design, where the web site will be viewed by the general public, you must ask the following questions in relation to graphics…
- how important are graphics for the web site?
- how many graphics per page?
- how large is each graphic?
How important are graphics? How many?
The purpose of the Cougar Construction web site is for offering their construction services. It was very important the web site have photos and a decent amount of them to show off the previous work of the company. Photos are definately more important than the actual text to get people interested in their services as they are visual in nature. However, from a internet marketing perspective, a decent amount of text is always essential for search engine marketing. You need the text so that the search engines have something to search so that the web site shows up properly in the search engine’s search results. For example, with the Cougar Construction web site, if we just had a bunch of photos and no text, it would be very unlikely that the web site would ever show up for a search like “Vermont Contruction” or “Metal Building Construction Vermont”, which are terms that Cougar Construction’s clients might use to find their web site. Therefore, there must be a balance. For Cougar Construction’s web site, I would say we had about a 50/50 ratio for the main pages and much higher amount of graphics on the gallery pages.
How large should the graphics be?
There are two aspects of photo size that we consider. First, you have the actual size of the photo. Second, you have the image quality. What we did for Cougar Construction’s web site was create smaller and low quality images (within 140 x 140 pixels with a 60 jpg quality) for all the photos, which load very fast. Please note that these two processes must be done in a graphics program such as Photoshop or Fireworks. Just shrinking the image in an web page editor such as Frontpage or Dreamweaver does not shrink the size for image loading purposes. The graphic size (both quality and dimensions) is very important because if you have a web page with a bunch of full quality images on it, it will significantly increase the loading time, scaring off visitors with slower internet access.
The next thing we did was add a link under each image that allows the visitor to click to view a full quality and larger image (usually within 500 x 500 pixels), which loads faster as it’s a pop-up with only that image loaded within it. We have found that this is very efficient and effective way of creating a photo gallery. We always optimize all graphics to appear at a decent quality along with an acceptable loading speed. Again, this is very important for a web site’s success as people with dial up internet access will not wait 2 minutes for a web site to fully load… they will just move on to the next one. Especially, if they don’t know you or your web site.
Finally, we included a flash animation for the web site on the top of the main page. It’s basically a presentation of some of the best photos along with photos of Chris who owns and operates Cougar Construction. This is really great way to get the visitor’s attention and by using flash as opposed to other media methods, it loads much quicker. Flash is really on the most efficient ways to add video or animation to a web page. I always suggest to use Flash sparingly and to not have your entire web site in Flash as it’s difficult for search engines to index flash content. Also, too much flash content can make a web site look busy and distract from the purpose of the web site.
Please contact me if you have any questions/comments regarding web design, internet marketing or any other web development topic.