Web Design for Authors

As far as design is concerned, less is more. It is. Think about it. Even a site like ShabbyBlogs.com that offers a whimsical collection of frames and backgrounds, complete with tutorials, is in fact simple.

These images are well-coordinated, user friendly and then some.  What if you want to develop a theme from a variety of different sources?  You'll need to consider some basic design principles.  First, a well-defined goal for your blog's images will help you make a statement on an objective level.

Pick five or so words that describe your blog. Each image should relate to one or more these vague, but significant words. For example on Peevish Penman we publish articles for aspiring and newer writers, but our visual theme is more subjective:

1950s, desktop, hand-drawn, masculine, coffee...

Orange and Blue Beautiful Together

Although most blogging services provide templates and schemes that use color theory, I don't care.  If you never visit ColorSchemeDesigner.com your life is not complete.  It's like never having tried coffee or written anything EVER!  Immediately below the title you can see simple classic color themes, which do require a degree in design to appreciate.  Here's an example of a dichromatic color compliment, orange and blue.  Yes, that is orange and not red, no matter what your browser might represent it as-it looks a little red to me actually.  Orange and blue are opposites on the color wheel, which make for striking combinations as do any two colors directly opposing each other on the wheel.  On ColorSchemeDesigner.com you can play around with your favorite colors and work them into a scheme that ties all the elements of your website together, simply, beautifully.

While you cannot control the images of other businesses on your site, you can organize them in a visually un-distruptive manner.  Advertising links and additional information can be tastefully displayed inside one designated section. Too many ads or unsightly google ads added to a side bar that extends three or four times the length of the blog posts, does not appear professional to most visitors. Discard any pointless links.  I use a 125x125 px script added into my sidebar with a script, which I will share in my next blog post on writer's blogs.

Background:

Every blog requires a background that at the very least does not offend visitors. Check your blog in different resolutions from 800x600 to 1920x1200 to see how your background appears on different computer monitors at ViewLikeUs.com. To check the differences between how your site appears in various browsers such as Firefox, Kazehakzse, and others you may not have heard about, visit Browsershots.org.

Favicon:

A favicon, if well designed, represents your most significant improvement pixel for pixel. This small .ico file will be seen on tabs and next to the address bar on visitor's browsers. Why does such a ity bity teeny weeny blurry image matter? It's your logo and a good logo is memorable.

Iconj.com is what I used to generate the favicon for Peevish Penman. They allow you to start with a photo and then adapt it on a simple pixel graph. Adding it to your website requires a script and editing your blog’s template. (A script is a section of code just like a widget or a gadget, but generally it’s going to be added to your template. Those may not be the technical definitions, but they will bring up what you want in a Google, Bing, or other search engine).

Update July 2012: Favicon Giveaway!

Buttons:

Cooltexts.com buttons generates simple button images or two buttons to use for a mouse over effect. These images will still need to be hosted, but maybe used to serve many purposes and functions.

Mouseover Image:

Regular or Single Image:

(Scroll down to the end of the posts to see how this button works. As you hold your mouse pointer over the button, the second image appears)

Images:

Most images will need to be hosted somewhere and that place could be Photobucket.com. I've tried a string of free image hosts and even found some that I dearly loved only to be later betrayed by their servers crashing permanently. On Photobucket you can store, edit, and easily link to the images you want to use on your blog.

Simple codes to perfect the images' display:

This is the basic html code to post an image to your site. Just replace the image address with the direct link to your image:

<img border="0" src="http://12345.photobucket.com/albums/yourimage.png"/>


And use this code to add a link to an image:

<a href="http://www.yourlink.com"/><img border="0" src="http://12345.photobucket.com/albums/yourimage.png"/>



And here is the code to adjust the size of the image. Phew! Isn't that easier than constantly editing the image to different sizes of jpegs, pngs, and gifs and then uploading each until you get the right one?  Yes, I did that for years myself.


<img border="0" src="http://12345.photobucket.com/albums/yourimageheretoo.gif" width="125" height="125"/>

This here is what you add to adjust the positioning of the image. It even accepts negative numbers to place anywhere you want:

<img style="position:absolute; TOP:-132px; LEFT:170px; WIDTH:360px; HEIGHT:50px" src="http://12345.photobucket.com/albums/anotheroneofyourlovelyimages.gif" />


And here is how you get the image to stand still in one spot even while visitors scroll down your site.  As you can see I've done this with the post-it note in the corner that links to my Twitter account:


<a style="display:scroll;position:fixed;bottom:350px;left:1px;" href="http://www.yourlink.com" target="_blank"/><img style="border:0;" src="http://12345.photobucket.com/replacethisaddresswithyourimagesaddress.png"/>


Just for fun:

Internet searches will turn up some very fun pre-made images. Wigflip tools are nothing short of awesome. Once you have the code, you can embed them into your posts, your site, your pages, your tweets, your emails. Here’s an example of how I used the Super Mario Bros widget in a post (by the way, widget or gadget is a code that you can add to the layout design of your blog if you select “add html”).

For more design resources online visit the Writer Secret Society Pathfinder