Basic Webpage Design for Writers

by Sean Taylor

In this day and age, when even simple, fill-in-the-blank tools like Wix, Blogger, Wordpress, and Webs can create an attractive, easy-to-navigate site, there's simply no excuse for any author to have a less-than-professional looking home on the Internet.

And just a cursory glance at a few author sites this morning for both folks I know and support and folks I don't know at all tells me that we need a basic web design for authors seminar.

The top five glaring "sins" I see as I look at writers' pages?

1. Unhelpful or confusing navigation, or no navigation at all.
2. Overly long blocks of text with little to no white space and/or graphics.
3. Annoying rainbow colors and/or blinking text to highlight key items.
4. No "brand" ID or site logo. 
5. All content thrown together on one single page rather than broken up into more useful chunks.

NOTE: I am a designer and have designed numerous web sites both professionally and personally, but, what I'm demonstrating here is not advanced technique. These are the basic design elements that will enable your author page to be attractive, follow the eyes' natural reading disposition, and meet the needs of web readers. What I'm demonstrating here are merely the basic building blocks that you can dress up and personalize in as many ways as there are website owners to adapt them.

Essentially readable, attractive web design gets down to three basic components for the non-web designer author:

• Title/Logo
• Navigation Menu
• Content

So let's look at each of the parts and get to know them and what makes them work on an effective website.

Title/Logo

The title/logo doesn't have to be fancy or a work of Photoshop genius. In a lark, even a colored box with your name in it can work with a good sense of color and font choice.

For example, the title image of this blog is designed to reflect the pulpy, genre-writing tone of the content. My friend Bobby Nash uses a logo that reinforces the notion of a writer as a computer typists and eschews images altogether.

Navigation Menu

A navigation menu can be done in many ways, across the top or down the side or as part of the title logo as an image map (if you want to fancy it up a bit). Regardless, a good navigation menu will divide the content of the site into pages that break up the monotony of a "one long page of everything' text dump. Like goes with like.

For example, the categories across in my menu here on the blog divide my content into separate pages for the blog's content, from reading the key articles and checking for in-person author appearances, but it also includes my promotional pages for reading reviews of my books and purchasing my books. Thanks to the navigation menu, readers who only want the blog content can use that, but readers who actually want to support me as an author can do so as well, without being forced to do both in one long page of digging through the stuff they don't want to get to the stuff they actually want.

And that is the purpose of an effective navigation menu, in a nutshell, to get readers and viewers to the content they are looking for in the quickest, most efficient way possible.

Content

Content is the key to a good website. Period.

Content can include text or text and images. The best content is some mix of the too, using images that related to the text on the page. Fundamentally , it should be easy to read, with no fancy text effects just as blinks or highlighted backgrounds or funky, eye-killing fonts. Images should be neither tiny nor huge, and fit easily within a single screen scroll. And, speaking of scrolling, typically a well-designed page of content (i.e., a page that is categorized in your menu navigation plan) shouldn't go on for more than 3 screen scrolls typically unless the page is a feature article or online short story.

Don't forget white space in your content. A visual break is one of your best friends on the web. That means keep your paragraphs short and your margins wide. 

Getting Graphic

I know what you're thinking. Telling me is one thing, but I really want you to show me what you're talking about. Okay, since showing instead of telling is the hallmark of being a successful writer, I'll do it here too.

This image illustrates four of the most common ways these three elements are put together for basic, attractive website design. And yes, these are very generic looking, but this is the basic, 101 class, not the fancy one for web-gurus. You can always dress them up later as your skills grow.

In the top left model you get the basic blog-style stacked design with a logo on top, followed by a navigation menu, and finally the actual content.

In the top right, you get the side-navigation model, with the logo on top and the menu to the left of the content.

In the bottom left, is one of my favorite designs, which incorporates the menu into the logo image.

In the final, bottom right model, you basically have an inverse of the one above it, with the menu on the right instead of the left. Be careful with this one, because if you aren't careful you can have the menu slide off the side of the page in some browsers.

Putting Myself on the Chopping Block -- A Case Study

Let's look at a real-life example. Click this link now (a new window will open for you to flip back and forth to examine while you read): www.taylorverse.com.

That's my official writer's website (this is my official blog, in case you're confused -- okay, it's semantics).

Let's examine the title/logo. It's a little busy (and the dialog balloon even pokes fun at that), but it's clear from the logo where you are and what you're in for on the site.

Next let's look at the menu bar. At first glance it's a blog stack model, but if you look closer you'll see that the menu is actually part of the image, tabbed across the bottom, so it's a blend of the top left and bottom left design times from the image above. Getting all that on one page would be a nightmare, so these tabbed categories help readers get to what they want.

Finally, let's look at the content. All it says on the main page basically just a hello and welcome. It has a few book cover images, a drop cap (like in a book since I'm a writer), and an illustration of me to dress up the text a bit. To personalize it a little, there are a few quotes down the side.

Notice this. The page scrolls only once.

Why?

Because the page is just to let people know where they are. The menu gets them to where they want to go next. My main page is an invitation to go deeper. That's the sole point of it.

If my main page were an invitation to buy my books, then it would be a differently looking page altogether.

Here are a few examples of attractive, efficient, but not expensive and fancy, high-fallutin' author sites:

• http://christafaust.net/
• http://www.petrucha.com/
• http://www.stephenzimmer.com/
• http://www.vitodelsante.com/
• http://daadams.com/

And in Conclusion...

There it is in a nutshell, basic web design for writers.

• Use a logo that tells readers who you are and what your site is for.
• Set up an efficient navigation menu.
• Don't dump everything on one page and make readers scroll and scroll and dig and dig.
• Keep your content engaging and arranged by categories (like goes with like).
• Think graphically and make it look good.

Of course, you can get more advanced than this with your design, but even these basics will give you an easy on the eyes, simple to navigate, efficiently laid-out site that won't scream "I don't know what I'm doing."