Using Cover Mock-Ups... Why Waste the Time?

If you follow me on Facebook you'll know already that I'm a big proponent of mocking up cover designs for books I haven't written yet.

Here are a few of the mock-ups I've done to help me stay motivated just so you have an idea what I'm talking about (or don't follow me on FB).

This is a designed I built solely from a title, and by the time I was finished with the design an entire mysteries series had developed from it. Obviously inspired by seedy, sleazy 60s crime novels, this one will feature a lady of the 80s who gets drawn into the underbelly of city life in Atlanta.

A man holds up the office of a private detective. Why? I don't know yet, but when I do, it'll be because this mock-up has been constantly playing in the background of my brain. 

This one will feature a serial killer who specializes in neo-burlesque dancers. Clearly a fetishist at work. 

This one will be for a line of "Extreme" line of crime novels, all pretty clearly inspired by sleazy 60s pulps. Boy meets girl. High school ends. Boy becomes detective. Girl becomes hooker. Girls gets killed. Boy owes her this one and must solve the crime.

And to answer your question, yes. I've heard it lots of times: "Why waste time on those when you could be actually writing the book instead?"

That's actually a darn good question, but I think I have a darn good answer for it.

Because:

1. It creates an image that will rekindle the inspiration later when I'm ready for that book. Just looking at it again will bring all those feelings of excitement I had initially about the concept, and it will also remind me of the plot ideas I was playing around with in the pre-pre-pre-pre-writing phase.

2. It helps me practice the design side of my brain. It's a different way to think about a story, image rather than verbal, and that keeps my brain exercised and more trained for I sit down to write.

3. It keeps me motivated. I never have to ask, "What can I possibly work on now?"  because I have a ready-made project eagerly awaiting my attention.

Would I recommend this practice to other writers? Sure, especially if you are the kind of learner who responds to and thinks in images. If so, there's no better way to trigger memory and excitement for a project, at least that I've found. If you're not a writer who also has to exercise that design side of your brain, the side that tries to speak to you in pictures just as much as words, then mock-ups probably going to be helpful to you, and you might as well just stick with your .doc file with a short write-up about the project.

But... before you completely turn your nose up at the idea, why not give it a shot and see if it helps? You might be surprised the kind of ideas that releasing some visual creativity can give you.

There are lots of great resources online so you don't have to pay for expensive design software. Serif Drawplus is one, and so is Inkscape. Both of those are vector based (meaning anything other than the bitmapped images can be scaled up or down without loss of quality). For more traditional free image software, both PaintNet and Gimp are favorites of mine. All four of those can be downloaded and run offline. If you're looking for something you can do online for free, try either Canva or SVG-Edit.

If you decide to give it a shot, send me some of your mock-ups, and I'll share them in a future post here on the blog. Happy mocking up... er, mockupping... er, playing with fake book covers!

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."