by Terry Kent
There are varying opinions on how graphic design should fit into the internet. Certain people believe that the internet should be about getting information as quickly as possible while others think, “what’s the point if it doesn’t look good?” The key is to find a balance that suits everyone’s needs.
A webmaster must always focus on creating graphics that are pleasing to the eye, that download as quickly as possible, and most importantly, they must serve a purpose.
Decrease the size of your graphics:
One of the simplest ways webmasters fall victim to having their pages skipped over is large file size of their graphics. The internet is a fast moving place. If your images do not download quickly – you run the risk of losing surfers to other websites which come up quickly.
Think: small, smaller, smallest. A few extra K is all it takes for some people to skip right on to another page. Here are some quick tips for reducing file size:
- save your file to the actual physical dimensions that will be on your website.
- reduce the number of colors as much as possible without compromising quality
- if you’re using buttons and bars, use the same button over and over if you can, it only has to download once – it also creates consistency.
“Web safe color palette” – what the heck does that mean? The 216 color palette is based on these 6 Hex color values: 00(RGB=0), 33(RGB=51), 66(RGB=102), 99(RGB=153), CC(RGB=204), FF(RGB=255). I’ve included the RGB values because graphics are created using these, and may have more meaning for graphic designers. Webmasters will use a 6 digit hex code to insert color into the text. Any combination of those values creates a web safe color. For instance, on The Write Market website, we use #336666 – grayish green – for our text, #000000 – black – for our links, #333399 – dark blue – for our vlinks and #CC0000 – red – for our headings. All of our colors are composed of “web-safe” 216 colors.
The total number of combinations adds up to 216 colors. These 216 colors are common to both Windows 8-bit and Mac color system palettes. If you run outside this “gamut” or range you run the risk of dithering – seeing a speckle or moiré pattern in flat areas of color. An example of moiré: Have you ever watched the news on TV and one of the news anchors has on a jacket that has an odd pattern flickering as he moves around? That’s the pattern in the fabric of his jacket conflicting with the dots that make up your television screen, that’s a moiré pattern. The television just can’t seem to recreate that pattern or texture. This is like a computer screen trying to recreate a color that it does not have a definition for. You’ll know dithering or moiré when you see it, part of an image will appear fuzzy or splotchy and look to be of poor quality.
Functionality vs. eye candy – looks great, but big deal, it took 10 miuntes to download. No surfer in their right mind, has time to deal with eye candy. There is a ton of eye candy out there on the net but think about how often you wait for it to completely load. Be aware of download times on pages.
One way you can check page speed is to check your pages in Google Page Speed. A good standard is to keep your pages loading within 4 seconds. Remember that most people will not wait, most are looking for information, and will quickly move on if they aren’t getting at least a hint of what they were looking for. The graphics are just something pleasant to look at on the way to somewhere else.
There is an old saying in the newspaper business: “The articles are just filler for the advertisements.” A newspaper runs for the purpose of making money, and they make their money through advertising. The news articles get you to look at the page with the hopes you see the ads. Something similar can be said for web graphics: “Web graphics are just filler to make you more interested in what’s being sold on the web site.”