28 September 2010

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:




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





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.




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




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:





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

4 comments:

  1. Great post! That colour scheme designer is a fantastic tool :)

    ReplyDelete
  2. The only problem I find with Photobucket is once that image exceeds Photobucket's designated bandwidth for the month it gets replaced by a little photobucket icon until the bandwidth is refreshed for the next month. This is fine if your site/blog doesn't get a lot of views, but if you get a lot of traffic this could be a problem. A good alternative is tinypic which is just as good as Photobucket for storage, getting links, etc. but it has unlimited bandwidth so you won't have the same problem as Photobucket. The only problem with tinypic is that it will only host that image for 2 years (I think) so you'd just have to rehost it there once that time is up, which is easy enough to do.

    ReplyDelete
  3. Some very clever stuff here. Thank you. I redesigned my blog and then got complaints that people couldn't read the comments. If I'd had the Viewlikeus link I'd have known not everyone was seeing what I was seeing.

    ReplyDelete
  4. Yeah, everything I listed was something I needed that I had to research and try out myself. I figured if you see something you like on my blog, I can save you time by sharing that information all in one article...

    Writers should have the best blogs :).

    ReplyDelete