Wordpress Theme Design Tips: The Birth Of “Motivate Thyself”

I’m going to spend the next two days going over some essential Wordpress design tips to hopefully help illustrate what goes on in my head when I redesign.  If I play my cards right, I might even teach you something.

For the first part of the lesson, I’m going to go through the thought process of birthing my first blog, “Motivate Thyself”.

A Theme Was Born

(NOTE: This isn’t going to be one of those dramatic changes where I take a BUTT UGLY theme design and turn it into a blogging gem.  This is a redesign of a theme that looked pretty good to start with.  You may find some of these changes slight, but my goal is to try and show you how to take something good and turn it great.)

When I first started blogging I knew very little about almost nothing.  I had just purchased motivatethyself.com and my hosting service, and was hunting around the Internet for a good theme to give my blog some skin.  I quickly turned to premium themes as they seemed to start you off miles down the road.  I found myself at iThemes.com sifting through some excellent offerings.  The essence theme jumped out at me as a clean yet sleek look.  It seemed perfect for the motivational 2.0 website in my head.

From the color choices available, I instantly gravitated toward “Dark Essence.”  The rest is blogging history!  (I’m totally kidding!!!  The only history created back then was that of a record breaking imagination.  A kid can dream, can’t he?! )

I was fairly satisfied with this theme right out of the box, but soon realized that some major issues needed to be attended to.  For one, that particular theme was narrow in size, leaving me with little to work with in both the content area and navigation bar.  I jumped into the style sheet and upped everything to a total width of 990px.  After the new spacing, I was left with a content area of 580px and 336px for the sidebar.  Though this required resizing of a few images (including the footer for example), it came together nicely.

Another note about site width: This is a total opinion here, but when I go to a website that is fairly skinny, it feels like the site is malnourished.  With widescreen monitors these days, a nice, wide blog seems to have a stronger presence.

Next was the background pattern.  If you were to glance at the original background and then the current backdrop of “Motivate Thyself” you may notice there is a pattern I felt unnecessary.  I’m a big fan of clean and simple, but with a light flash that catches the eye.  Though I was digging the gradient black background that lightened as it went upward, the pattern had to go.  This required a bit of bench work with Gimp, but proved a simple task.

Then came the shadows.  If you notice on the stock version, the border/sides of the theme, as well as the bottom of the blog, include shadowing for a 3D look.  I had nothing against this, but didn’t feel it was necessary.  They got hacked as well.  Notice that the toolbar, header, and top part of the background all have a sleek, gradient look, whereas the rest of the blog is fairly clean and simple.  I prefer it this way because it centers the framing.

Quick tip: Framing

The theme is a frame for your content, right?  It’s there to hold it and make it look its best.  It’s paramount to have the proper balance, including directional as well as weight.

Let’s use the last paragraph as an example…

“Motivate Thyself” starts off visually with a smooth, gradient look.  Once it hits the content, though, it turns light and clean.  This is where the content has a chance to shine.  Too much fluff around the content and you’ll have to knock that content glimmer down a notch.

The same is true for anything in your sidebar.  I prefer pretty pieces in my sidebar because I believe it’s important to attract as much attention as you can, but if those pretty images have to fight with the rest of the theme for a cursory glance, you’ll have far less eyes in the appropriate places.  Bottom line, directing the eye is an art.  You want new visitors to naturally see certain items.  If the path for glances is riddled with obstacles, your theme will feel cluttered and too complex.

Speaking of the sidebar…

I see many new bloggers with sidebars packed with stuff.  Not only too many images, but too much text as well.  This is an ineffective way to draw attention that promotes skimming rather than encouraging the reader to really sift through the content.

I prefer mostly images on the sidebar because I feel it helps frame the main content.  You want to be clear which area is dedicated to your voice.  This is sacred ground and should be represented this way.  Too many words surrounding this area will give the visual appearance of a weak voice.  I do find it beneficial, however, to have some non-post areas where I can include content.  Things such as Categories, Featured Posts, Links/Blogroll, etc… This is where the bottom of the blog comes in.

Please note: I am fully aware of the different strokes for different folks on this one.  The above is merely my opinion.

The bottom of “Motivate Thyself” lends itself nicely to this sort of content.  In this location it won’t conflict with my posts, but still shows itself to the reader making a comment.  Zen Habits is another perfect example.

Branding Your Blog

Your blog’s logo is one of the most important parts of the design.  It’s one of the first things a reader sees, and the first chance you get to communicate with your audience.  The thought process of a first visit is immediate.

• Does the logo look professional, stock or just plain weird?
• Is it attractive, bland or ugly?
• Is it easy to read and understand?
• Does it accurately communicate the focus of the blog?

Many new bloggers have stock blog titles (no logo, just a typed name).  A few themes can pull this off without it screaming newbie (the Thesis theme for example), but even then it simply isn’t effective for the strongest first impression.  I know not every new blogger can get a custom logo when first starting, and this should certainly not keep them from starting their blog, but over time, if you’re serious about blogging, you should give it some real thought.  A custom logo isn’t a requirement, but it is a good idea.

With “Motivate Thyself” I whipped out my favorite logo design software, found a font that embodied the essence of the message, then added a little shadow action and a tag, then I blended it into the rest of the header.

Nothing complex, just clean, clear and verbally accurate to my blogs intentions.  Creating an effective logo isn’t rocket science, it’s just a matter of knowing what you want and then knowing how to create it.  Most of us have the first part covered, but many can’t make it happen themselves.  If this is the case, do yourself a favor and get someone to do it for you.  Either a friend or paid service, but even at $100 (or whatever) it’s totally worth properly branding your blog.

Logo Sizing

This is totally dependent on individual preference and type of site, but here are a few ideas to bare in mind.  With “Motivate Thyself” I wanted simple and elegant.  A smallish logo on the left side of the header was perfect.  It also left room for a feature area on the right side.  As you can see on THIS blog, I decided to use the entire space.  I still stuck with a smaller logo, but filled the rest of the space with a tagline.  I guess you could say we decided to feature “Find Your Voice.”

Ideas for creating a great logo…

• Come up with a look relevant to the ideas presented.

• Add stand out qualities. I talk a lot about a clean look, but it is important that your logo DOES stand out.  That’s its job.  If it isn’t prominent, it will only blend into the rest of the header.
  

• Make sure  it blends well with the rest of the header. You want your logo to stand out, but not like a sore thumb.  Big is often best, but not always.  Also, make sure you can’t see unwanted outlines of the logo, and that the colors blend well together.  Contrasting colors can be good for visibility, but bad if they appear tacky.

The basic traits I think of when tweaking my own themes:

• Simplicity
• Clean lines
• Unique logo that blends well with the header, but still remains visible.
• Wide sidebar for flexible add/widget placement.
• Wide content area to allow for large images and flexible content arrangement.
• 990px total width. This fully fills a 1024×768 screen without having to scroll horizontally.  I mention this screen resolution because it’s generally the smallest someone will use to view your site.
• Good ‘content framing’ characteristics from the header, footer and sidebar.
• A subtle yet clear line between content and sidebar.
• Attractive and visible icons for RSS/Email subscribing. This also goes for social media buttons.
• Attractive/neat add placement. I like a well organized look.
• Good accessibility/usability. You don’t want visitors to search for common items like About, Contact, Subscribe, etc…
• Color scheme and consistency. For “Motivate Thyself” it’s black and white.  For the Blueprint, it’s blue, white and gray.
• All around unique, attractive look. I like a blog that makes you step back every once and a while and say, “This blog really looks great!”

What tools I use when I work on Wordpress themes:

• The Logo Creator (An excellent little piece of design software.)
• Gimp.  (The free Photoshop alternative.)
• Filezilla.  (Free ftp software to upload images.)
• Notepad2.  (Much better than Windows Notepad for editing code.  I use this when it’s easier to directly edit the PHP code for the themes.)
• Firefox.
• Windows Vista and Mac OSX Leopard.  I go back and forth, but I tend to use Vista more.  (But it’s all done on a Macbook.)

I hope this post encourages you to take another look at your blog theme.  Perhaps you’ll see a few new ways to make it shine.  I don’t claim to be a design genius or anything, but I do know what I like and why.  Figure this out for yourself, then make it happen on your own blog.  If you don’t find yourself occasionally stepping back to admire your site, you’ve got some work to do.

Tomorrow I’ll discuss the Wordpress Themes of 2009 and the Evolution of the Do It Yourself Website.  Just 6 months back I thought my Essence theme was top of the line.  Now it feels like an antique.

Eric

Related Websites

• How Wordpress Can Make Recurring Income How many times have you heard the words blog or web log or how about online diary? If you have been in action online for the past few years, you’ve probably heard it thousands of times. What you don’t realize is that blogging is not only one of the fastest......
• Top 50 Frugality Blogs that Will Help You Save Money Miranda writes for Bankling, a new portal for personal finance information, which publishes a weblog, and a resources section that contains tools like the highest bank CD rates , the highest savings account rates, free mortgage rate calculators, and more. With the recession on, many people are interested in saving......
• Obama Wipes the Noses of Crybaby Consumers This week we saw the spectacle of President Obama wiping the noses of whiny consumers because credit card companies were being mean. He summoned the leaders of those companies to the White House to tell them to stop being such bad people, or he would spank them. Mr. ToughMoneyLove doesn't......
• Do You Need A Website When Starting An Internet Business Do you need a website when starting an internet business? This is a good question that often comes up when a person is looking for ways to start an internet business. Let's talk about some aspects of this issue. Hopefully these will help you to decide whether you want a......
• task scheduler properties greyed out [affmage source="chitika" results="0"][/affmage] [mage lang="" source="flickr"]task scheduler properties greyed out[/mage] The Dos and Don’ts of Hiring Contractors when RehabbingRehabbing houses is a fun way to pass the time and rack up big profits. Because of the perks it can bring to rehabbers of property, many people are encouraged to try......