K.I.S.S. Website Design

Websites can be a thing of beauty and selling power or they can hurt you. I don’t know about the rest of you, but I’ve been to some poorly designed websites/blogs. Those sites that make you cringe at the design before you even get the chance to read the content, and that is if you can find the content you are looking for.

If you are serious about being an author, you need a website. This is your 24/7 web ad. If you have a blog, my suggestion would be to combine them. Number one reason is that your blog will keep the content on your website fresh and higher in the search. I use wordpress.com as my website and my blog. You might want to use something else and that is fine.

The colors, font, and pictures tell visitors at a glance what your site is about. So as an author you want your website to reflect the Author persona, your genre, and your books. Extra filly items are just that, extra, and they can distract from the professionalism you are trying to show. I suggest using the K.I.S.S. Principle when designing your website. Don’t know what the KISS principle is? It’s the Keep It Simple Stupid Principle.

The Side Bar(s)

The sidebar can be the most useful part of your website if utilized properly. Reduce the clutter by getting rid of ads. Oww! I can hear the screaming from here. I know some of you make money off those ads, but unless they are for your book or something you think will benefit your target audience, they are taking up valuable space and annoying people.

To give you an idea of what should or could be there, I made a list.

  • About the author blurb that is about 100 words. Think Twitter profile. At the end of the super short bio have a link to your bio page, blog, and/or media kit so people can learn more about you.
  • Email subscription to blog and RSS feeds. For the love of your readers, please have both. If you don’t, you lose potential readers. Not having these can be your biggest blogging mistake. Don’t believe me? Then let me say it this way. If I happen upon your blog and you don’t have an email subscription, you’ve lost me. If my friend happens upon your blog and you don’t have an RSS feed, you’ve lost her.
  • Sidebar Images: This can be images of awards you’ve won, covers of your books, your author image, word count meter of your current work-in-progress, banners for blog tours and giveaways, recent posts or comments, archive of posts, search, links to other places to find you on the web, etc. Just don’t over clutter the sidebar or readers will have a hard time finding stuff.

Most people suggest putting the most important information above the fold. I’m going to say put the important things above the fold and make sure what you have put below the fold is just as interesting. You want the readers eyes to be drawn down and bright images catch the eyes and make the fingers twitch.

Pictures and Text

Having pictures in your posts, on your pages, and in your sidebars are great, but too many can be way too many. You don’t need hundreds of pictures (unless it’s a portfolio for artwork). Use pictures to break up text. Make sure it relates somehow to your topic. If possible downsize your web images into 72 ppi/dpi or 96 ppi/dpi for faster loading. You can finds some free image places from this post.

Color

Simply put, color orients the reader where they and evokes emotions in people. Certain colors and types are better for some genres while others are better for another.

White: clean, pure, new, peace, innocence simplicity.
Gray: conservative, traditional, seriousness.
Black: elegance, sophistication, mystery, thrillers, strength.
Red: strength, bold, excitement, determination, desire, courage, leadership.
Brown: endurance, relaxing, confident, casual, reassuring, earthy
Orange: enthusiasm, cheerful, stimulation, creativity.
Yellow: attention-grabbing, lively, intellect, happiness, energy.
Green: durable, reliable, optimistic, harmony, freshness
Blue: depth, stable, professional, loyal, reliable, spiritual, trust
Purple: power, luxury, mystery, royalty, elegance, magic.

Want to know more, visit the Designer Handbook of Color.

Headers and Backgrounds

Your header and backgrounds says a lot about your blog/website. It’s the first thing people notice upon arriving and it feeds their impression of where they are, what they are seeing, and possibly what they will be reading.

Be careful about making them too busy or textured. Some backgrounds seem to be popular and I’ve never figured out why. They are distracting and remove readers from what they are reading. Now Joleene has broken the textured background rule and she’s done it with style. She wrote a post on blog backgrounds and appearance.

For fun, take a look at the headers below and guess what genre these author’s write. The answers can be found at the end of the post. 😀

1. http://joleenenaylor.files.wordpress.com/2012/01/cropped-header-44.jpg

2.

3.

4.

5. http://stephanniebeman.files.wordpress.com/2012/06/bookheader1.jpg

Summary

I could write a book on website designs do’s and don’t, but I’m really not interested in writing what others have written to death. There are a lot of great books out there on blogs and websites, my favorite comes from Problogger (non-affiliated link). I’m sure you could find others that fulfill your needs.

Any Questions?

15 Comments

  1. lornafaith says:

    Very helpful post Stephannie:) I’m still in the process of figuring out my blog(it’s a self-hosted WordPress blog). So far it is extremely simple…I was thinking I should at the very least have a picture in the R.H. sidebar or on the bottom like yours…what do you think? I’m still learning how this all works…I’m a little technically challenged;(

    1. I’ve also seen short bios with pictures in the sidebars that link to the persons blog and/or about me pages. As an author I think the best think to have in the sidebars is a RSS feed subscription, email subscription, and book covers that link to the books book page.

      If you have any questions feel free to drop me a line Lorna. 😀

  2. cjmoseley says:

    Great article. My only comment is that the ppi of an image is utterly irrelevant on a webpage. The size of the image in KBs is what is important, although the quality of the jpeg can make a big difference, this is largely about the physical dimensions. PPI is only important to print images, as browsers are limited in PPI by operating system and monitor resolution.

    1. Very true. The PPI is for printing which some people like to do with data they find on webpages. I’ve found that as long as the image is at the most 96 pixels per inch (ppi) and 600X900 or less on my website that it loads faster. When I used my 600X900 with 300 ppi images I was ready to click to the next page before it finished loading the image.

      1. cjmoseley says:

        Hi again,
        I have to say I’m very confused to hear you say this. I’ve worked as a web developer for 13 years and worked as an electronic artist since the early nineties. And PPI has never been an issue for me.
        Download and render time has more to do with how the jpeg is compressed than the PPI of the image. Could I ask what software you used to ready the image for web in each case?

        1. Maybe I am doing something wrong. I’m not a web developer so it’s always possible. I work in the designs of book covers mainly, though I do occasionally create web banners. I just know that on all the website I’ve had that unless I make the image 96dpi and smaller sized, the load time is longer. And if load time is too long, then visitors never see the image before they click away. I’ve read entire articles in the time it took for some images to load.

          I use to use Photoshop for a long time when it was loaded on my old laptop. But when I got the new laptop I wasn’t able to use the Photoshop, licensing issues. The old laptop was a gift from my dad when he bought a new one. When I bought the new one I didn’t have the funds at the time to buy a design program. For the last year I’ve been using GIMP and Paint.net programs. Now with other obligations out of the way, I’m hoping to upgrade my programs. That would probably make a difference.

  3. Another great article.
    It is of upmost importance to give the best first impression possible.
    We’re trying to create a space on our site to do just that (Let us know if you think it works: http://bookscovered.co.uk/bookshelf ), but every author needs to give themselves a helping hand.

    1. I had a look at your website and it’s very professional. I love the covers. 😀

  4. Strayer says:

    I have a blog and I do like writing it almost every day. Couldn’t load WP the other day and so missed a day.
    You can tell by my avi that I can’t draw. I did my header all by myself and I can get away with this because the blog is about gardening and for children. I am doing information about the Oregon Trail in bits. Not the pioneers, but the nature stuff.
    I don’t have a website for the ebooks because my reader doesn’t read yet.

    1. Even if your readers don’t read, their parents do. 😀

      My drawing skills are worse then my 4 year old. It’s really sad.

      The great thing about WordPress is you can make your blog your website with a few tweaks. Then you can post all your books to it for people to find. But that is up to you. 🙂

      Good luck on the book. it ought to be interesting.

      1. Strayer says:

        The blog is separate from the 2 books. I don’t promote anything on it. I have adult readers so far and some from outside the US.
        Parents really don’t want to hear from kid ebook writers. There seems to be a lot of hostility to promotions from kid book writers.
        Four year olds can draw better than I do. I had to label everything.
        I do draw for the educational how to’s on the blog. They do make things clear.
        My drawing fits in with the theme of the series which starts when the 2 girls are four, then five, etc. They are eight and I’m doing notes on nine.
        The theme of the series is, So what if it’s not perfect, so what if it’s crooked, it does the job and that’s what counts.

  5. Cate Russell-Cole says:

    This needs to be shouted from the rooftops! I was in a “professional” site the other week which was still set up with the kind of blaring colours and basic, basic formatting that everyone was using in 1996. The hex chart is especially useful. Thank you!

    1. You’re welcome. I find that many people think of their website as a product, an ad, or a billboard. Which they are, but they don’t need to be treated like a box of cereal on the supermarket shelf. They don’t need all the bells and whistles and colors to draw the person to them. On the Internet, it’s not so much the picture frame/website, but the picture/content that draws in the crowd.

  6. Great post, Stephannie, and I like your observation about the content being the critical factor in drawing in the reader.

    1. I think sometimes we spend more time on the design then on the content in the website. Visitors don’t care so much about the design as much as the information on the website, as long as they can get to the information, of course.

Comments are closed.