Visual Design Considerations

This is part of Kate's Guide to Author Websites.

Visual Design Considerations

This is a vast field so I'm just going to stick with the tips that I think will be most helpful to non-professionals.  I'm assuming you are using a tool to create your design.

Where to Start

If the very idea of designing your own website gives you hives, I suggest you hire a pro or simply use a template/theme you like on one of the sites I've already recommended. 

But if you plan to design your site from scratch or modify a template/theme, I recommend you start your visual design process by collecting the images you know you will include: book covers, portrait, and your logo if you have one.  Then add a set of colors and fonts.  Then add other graphics if you like.  Now step back and make sure it all goes together and isn't too much.

If your books suggest a specific aesthetic - like steampunk, hippie, french country, or Atlantian, you should by all means reflect that in your design.  If you don't know, ask your readers!  If your books are too disparate to pin down, then just go with your personal taste.  Use Google to find web template galleries and design galleries for ideas.

I personally happen to love interior design, and find the visual web design process quite similar, so I often browse decorating magazines for inspiration. I look for the way colors are used together, the lighting, scale, and the balance of elements.

Although simplicity is fine, it really is important to have a coherent and complete look.  Google is probably the only site in the world that can get away with one pic and a handful of tiny words on a big white page.

Fonts

There are two kinds of text on web pages.  There is regular text data, and then there are pictures of text.  You can tell the difference in any page by attempting to select the text the way you would in a word processor.  This is text data you are reading right now, while the big word "Google" on the Google home page is an image.

The difference is important for two reasons.  First, when you create images with text in Paint, Photoshop or other design tools, you can use any font you have installed on your system (and another several million you can get online).   That font is converted to an image that is sent to your user's system the same way a photo is.  But regular text is sent as simple strings of letters, and is rendered in a font that resides on your user's computer.  If all they have is Helvetica, your text data will be displayed to them in Helvetica.  All you can do is specify your first few choices, and a default font family.  Sans-serif fonts are thought to be the most readable, so this is what I recommend.

The second difference between regular text data and images of text is searchability.  The Google search engine has no idea what its own logo says.  (It only knows that the HTML img element has an alt attribute that says "Google".)  For this reason, and also because it requires a lot more bytes and therefore slower download times, image-text is generally only appropriate for logos, titles, and navigation.

Color

I could talk all day about color theory, but at the end of the day, you just know what you think looks good.  Here's the important stuff:

• Website colors are specified in RGB values, unlike colors for printing, which are CMYK.
• Aside from graphic images, there are two primary uses of color on websites:
• Highlight text, particularly headers and links.
• Blocks of background colors that visually contain discrete chunks of information on the page.
• Website color is a little unreliable.  Go ahead and use any of 32 million colors, but be aware that they will look a little different on different screens, and very different on a tiny number of really primitive screens.  The bigger issue with color is that a significant number of users, especially men, have some form of color blindness.  Generally speaking, you should avoid color-coding.
• Anywhere you need contrast, such as contrasting text to background, you need to contrast in value: light next to dark.  For example, use black-on-white, yellow-on-black, or light blue on dark blue, but don't use bright red on bright green.
• Excluding images, limit your color palette to four or five colors.  If you are unsure about mixing colors, just choose two or three.  If you are really scared, use a few (not too similar) shades of the same hue.  Here is a nice deck of colors that makes this easy (scroll down a bit to get to the good stuff).  But if you really want to play, check out Kuler.

Images

Creating/sourcing/editing/optimizing images is out of scope here, but please keep the following in mind:

• Don't rip off graphics; we artists need to stick together.  Buy photos and illustrations on sites like thinkstock.com, get them free on xsc.hu, or use images you created yourself.
• Monitors typically display in 72dpi, so you require much lower resolution online than in print (300dpi). Use whatever photo management program you have (and you almost certainly have one) to crop and compress the images as much as you can while maintaining an acceptable level of quality.  This may take some experimentation, but is enormously important for download times.  There is no better way to push away users than to have a slow site.

Layout

Depending on your design tool, you may be limited in your layout choices; this section is primarily for those of you creating your websites manually.

• Keep your visual elements organized and lined up.  One hallmark of an amateur site is a bunch of randomly sized photos randomly strewn on a page.
• Balance! Balance! Balance!  Use layout to balance positive and negative space, frame discrete blocks of content, and make the page easier to scan.  Another hallmark of an amateur site is a single wide column of text, usually with a ton of white space beneath it.
• Liquid layout, in which a column width changes when the browser width changes, makes is difficult to control visual balance.
• Test in as many browsers and devices as you can. Test resizing, zooming, and changing text size.
• Using frames is very old school and poorly supported.  Use divs.

I hope you find this helpful.  Next up: informational and functional design considerations.