Graphics: Friend of Foe?—Making it Both Useful and Pretty

This article appeared in the May/June 2008 issue of Writers’ Journal in the “Computer Business” column. It’s the fourth in a 6 part series. I’ve dominated that column since then and if there’s anything you’d like to know more about, Please feel free to comment or drop me a note.

Making it Both Useful AND Pretty

People have different ideas about what looks good. Most people agree, though, that monochromatic is boring. On the other hand, too much color or flashing graphics can be overpowering. For a writer, a website is a personal thing. You’re selling yourself and your site should reflect your personality. It should also reflect the mood of the writing you’re trying to promote. The impact of a site promoting a horror novel isn’t quite as convincing if designed in pastels. Likewise, a site promoting a book on dating and relationships would find itself catering to an extremely small niche if presented in black and lurid green.

Whatever your personality or the demands of your genre, there are a few basic design guidelines that remain constant.

Color Theory

Certain colors can affect the mood of the viewer. In general, colors tend to arrange themselves into three basic palates:

  • Red/Orange/Yellow – Hot colors. These tend to excite the viewer, but too much excitement can lead to fatigue.
  • Brown/Cream – Warm colors. These tend to be relaxing, but they can also become boring.
  • Blue/Purple/Green/Gray – Cool colors. These can be relaxing too, but they can also be depressing.

The rest of the colors tend to slip into and out of each of these groupings. They can be warm, cool or hot depending on what they’re grouped with. Choose a basic palate and then select a grouping of contrasting, or “punch,” colors to keep the site interesting.

Color in Design

web_graphics_marketingAlways keep in the back of your mind that you are a writer and people are on your site to read what you have to say. Pale blue text on a dark blue background might look nice from a design standpoint, but have you ever tried to read six paragraphs of text on a backlit screen presented like that? I can pretty much guarantee that unless you were desperate for the information you didn’t make it past paragraph two. Don’t do this to your visitors. For the bulk of your site, you want a high contrast between your text color and the background it is on. Black text on a white background is your safest bet, but there is some wiggle room so long as you don’t lose sight of the important thing here: you want them to keep reading, not dialing the phone for a visit to the eye doctor.

That doesn’t mean that you can’t have reversed out text on your site or text over a color that isn’t as high a contrast. Just make sure that when you do use this you aren’t also trying to present a large block of text. Design features that lend themselves to color license are the header, footer and navigation. These are places where you have a single word or a list of words that are probably going to be in a larger and bolder font anyway, thus making them easier to read.

Fonts

When selecting a font for a web site, your job is made much easier—and much more frustrating—by the fact that there are less than 25 fonts universally recognized by the web browsers currently in use. If you want something strange and unusual, you are going to have to create a picture of it and install the picture on your site. For reasons that we’ll go into in the upcoming article on Search Engine Optimization, you want to avoid placing text into an image as much as possible. It limits you somewhat from a design perspective, but the good side is that you aren’t going to accidentally end up with a font that is hard on the eyes.

In general, you want to use a serif font like Courier New or Times New Roman for long blocks of text. Serif fonts draw the eye down the page and are easier to read in large chunks. If your text is two five sentence paragraphs on a page or less, you can get by with a sans-serif font like Ariel or Verdana. Sans-serif fonts are prettier, but can become hard to read. They are best reserved for navigation and headings. Use the wilder fonts sparingly.

Graphics

A graphic is anything on the web site that isn’t text. In general, a writer’s site isn’t going to have much in the way of pictures. Your book cover, the covers of the magazines you’ve appeared in, a nice picture of yourself and a few shots of you doing book signings or talks are about all you have that is relevant. If you happen to be an artist too, you are way ahead of the rest of us. Most of us are going to have to rely on the placement of our colors to add visual interest to our site. We may even hire a graphics designer to come up with a logo, or use the cover image of our book in some artful way. Graphics and color substituting for graphics can be overdone. Make sure that whatever you have on your site enhances and draws attention to your writing without overpowering it.

Flash

Flash is a program originally developed by Macromedia and then bought and refined by Adobe. A graphics designer can create a movie that will play on the web. This movie can be as simple as a moving header or advertisement to as complex as an interactive game or tutorial.

First and foremost: there is nothing Flash can do that cannot be accomplished using another method. Flash can work very well as a short, mobile header image. Let me repeat short and make sure it isn’t on infinite replay. You might also consider an intro or splash page where a Flash movie plays just before people see your home page. I don’t recommend splash pages because they make people jump through one extra hoop before reaching the content they came to the site for. If you do decide that the mood of your site would benefit from a splash page, make sure the movie is short and that there is a clearly marked way to skip the movie if the visitor chooses.

Flash can create a full movie experience, which means it can incorporate sound. I highly recommend that you do not include a soundtrack of any nature that simply starts when the person lands on the page. Make them click on something to hear it so they know what they’re getting into. The bulk of the web is silent and a person surfing from site to site in a quiet room late at night who has perhaps forgotten that they turned their speakers up might just have a heart attack if your favorite song suddenly starts blaring at them with no warning. The office worker in their cubicle who was taking a break to surf the web and comes across your site won’t appreciate how your soundtrack turns their office into a prairie dog exhibit either. Be considerate.

There are several places where Flash should never be used on your website. The primary reason directly relates with how the web treats Flash movies and your Search Engine Optimization (As of this posting, Google has improved it’s ability to crawl the latest versions of Flash, but it’s still spotty at best). The second reason is because Flash movies are difficult at best to update. Be it a typo, or a revised appearance schedule, or a desire to update your content, you must have the original files used to build the movie and you must also have a Flash programmer to alter them. Even then, there’s a good chance the programmer will have to start from scratch.

Never use Flash for the following:

  • The text content of your site
  • Your navigation

The web is a place that is meant to change. By change, I mean that the content must be regularly updated or added to—not change as in moving around and blinking. If your content isn’t changing, then you aren’t fully utilizing everything the web has to offer. Don’t risk getting caught with a site that you cannot update.

That being said, the latest versions of Flash are much more friendly when dealing with HTML or CSS programming languages and will now allow text and images to be placed on top of them. This can allow fro all the goodness Flash has to offer without sacrificing the goodness of HTML text.

Navigation

web_graphics_marketing2Regardless of what your purpose is, once you get beyond the bare basics, you need to organize the rest of your information in a manner that people can easily navigate. That requires multiple web pages. Once you get past five or six headings on your navigation, you need to start organizing things into main pages and sub pages as well. Just look for related topics and condense when necessary.

Where you put your navigation will depend on how many selections there are and personal taste. Horizontally, just under the header image or vertically on the left—or both if the site’s big enough—are the two most common places for it to appear. Less often, it’ll appear on the right. What you want to avoid is putting it somewhere people aren’t expecting to see it, like along the bottom. You also want to avoid making the navigation selections inconsistent from page to page. If they can’t figure out how to navigate your site, they’ll resort to either the most used button on their browser—the “back” button—or the second most used button—the “X” that closes the browser. Either way, they haven’t read your message.

If you have multiple layers of sub-pages, make sure your users can always get back to where they came from. That means persistent navigation. Offering a string of breadcrumbs is another polite thing to do. A breadcrumb is a string of page header names that runs along the top of the content section of the page. For example:

Home > News and Events > Past Events

Clicking on either “Home” or “News and Events” will take you back to that page. It allows the user to have a mini map of where they’ve been. It has the added benefit that if they happened to arrive at your site from one of the sub pages, they will immediately be oriented as to where they are and how that page fits in with the rest of your site.

That brings us to the last hint I want to give you. A web site is not a linear experience. It’s not like a book where you start at page one and read through to the end. Thanks to search engines and friendly links from other web sites, a visitor can begin their experience on your site from any page. For this reason, it is important to make sure that every page on your site includes the following:

  1. A header that clearly displays the name of your site (your name or book title most likely)
  2. Navigation that allows people to get to any page on your site from any page on your site
  3. A consistent look and feel so that the visitor knows that they haven’t left.

In my next article, “E-Newsletters and Podcasts and Blogs—Oh My!” we’ll take a look at how and when to use interactive features on the web.

Angela Render is an author who has been editing and developing websites for over a decade. She teaches regular classes on Internet marketing. Her Internet marketing workbook, Marketing for Writers: A Practical Workbook, is available on her website at www.AngelaRender.com.

Tags: , , , ,

This entry was posted by on Monday, October 5, 2009.
Filed under: Articles, For Writers, Marketing, Web Design and Development, Writers' Journal
You can follow any responses to this entry through the feed. Both comments and pings are currently closed.

Comments are closed.