It’s easy to get by in most college writing without thinking about visual design or graphics. About the most visual design college writing asks for is that you emulate the MLA or APA document format, pretty bare bones visual designs in themselves. Create your text of letters and numbers, and plug it in.
The web, though, is a different place. To be a web writer, you have to expand your definition of “text” beyond merely copy (the alphanumeric symbols on the page you might have previously thought exclusively constituted all writing) to include visual design as well as the use of font, images, layout, video, and other media. Using these new forms of writing also raises new issues about copyright and fair use.
A good starting point is to learn some basic design principles. To think about visual design of your pages, you need a design vocabulary: a set of terms you can use to talk about what you like and don’t like in a web page.
While there are many different sets of terms you could learn, contrast, repetition, alignment, and proximity (CRAP) is a good place to start. Read Mike Rundle’s How C.R.A.P is Your Site Design? and Travis McAshan’s Is Your Website Design “CRAP?” Go read them now. Seriously. It’s going to be hard to make progress with visual design without understanding CRAP.
White Space Is Your Friend
In the previous section, we recommended that you read about the CRAP design principals as a way of getting starting thinking about and talking about the visual design of your web pages.
Now that you understand what CRAP is, a good next principle is that the background on the page, the “white space,” (also known as “negative space”) is your friend. Cluttered websites where everything is smashed together can be difficult to read. Take a moment to browse Max Standworth’s article 25 Examples of Clean and Well Designed Web Sites. See how in these examples of good design, there is plenty of white space. The text has room to “breathe” and the pages are much more reader friendly for it.
Now suppose your white space is not white, but a background image (this is why we need the term negative space). If the background image is too strong—such as a bright picture or a repeating design behind your text—it will call too much attention to itself. Reading text may be extremely difficult, and you may obscure important information. Look at Ugliest / Worst Over The Top Web Sites of 2009 over at Web Pages That Suck. You’ll find some examples where strong backgrounds are a problem. Consider a solid color background and add pictures to create interest. Or if you want to use an image as a background, you might be able to fade the image so that it is very subtle against a solid background, almost transparent.
Still, even solid backgrounds can be a problem if there is not enough contrast between the background and the copy on the page. (See, we just used the C of CRAP, contrast, to talk about a web design issue.) The worst cases are color combinations that will give readers migraines, red text on a blue background. It might look interesting at first, but it will make your readers’ eyes bleed (or at the very least give them a headache) if they have to look it at for longer than a few seconds. Chances are they won’t stick around that long if they see a page full of jarring colors (anyone tired of MySpace yet?).
But I Might As Well Be Color Blind!
If you thought the previous example of red text on blue background was cool, well it might be true (you might as well be color blind).
Even though most of us can tell that the awful color combination of text and background given in the previous section is a completely insane choice, it still can be difficult for us to work with colors effectively. A designer has to choose colors that are the right tone to support the mission or focus of the website. Most people know that blue (because of water) and green (because of plants) can symbolize life. Red can hint at anger or, ironically, love. Black blackground websites with some harsh red and white might have a Goth or Heavy Metal feel to them (no one wants their website to have a hair band feel—unless the website is for a hair band).
Now that you are writing for the web, you might also be expecting a global audience. Did you know that colors symbolize different meaning in other cultures? Check out Color Meanings by Culture at The International Business Edge. For instance in Japanese culture, red symbolizes life.
Beyond understanding symbolism, it can still be hard to come up with a color scheme of multiple colors that work well on a site. If your website has a primary logo or visual, one technique can be to use the color picker in an image editor to choose the colors that match with that logo or visual. Or if you still feel challenged in trying to pick out colors that go together in your design, Color Scheme Designer 3 and Color Schemer Online v2 can help you to come up with matching colors.
Source: Writing Spaces Web Writing Style Guide, available under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) License.