The Making of a Monsta … WordPress Theme

I love posts that follow the author’s design process for things like logos, illustrations and website designs. I decided to do one describing my process for building my current WordPress theme called Monsta.

This post will give an overview of each step I took in the process, with pictures, while trying not to go too in depth on any one section. Some larger topics, such as the character illustration process or some of my custom WordPress stuff, will eventually get their own posts.

Here’s the design to development process of the Monsta WordPress Theme:

• Brainstorm
• Sketching
• Wireframe/Design
• HTML
• Character Design
• WordPress

Brainstorm

The first step when building anything is taking time to decide what you’d like to accomplish. After already doing one theme for this blog I had a good idea about what elements I  wanted preserved and ones I didn’t.

Here’s a high level view of what I wanted:

Clean design

A muted color palette with the content being displayed in greyscale with hints of red to guide the eye. I also wanted to use some larger fonts  to give it a polished look.

Ability to display multiple skills or interests

I tend to switch my creative interests frequently. Call it creative restlessness if you will. I simply get bored doing any one thing for too long and love learning new things. I needed a theme that could expand and contract as I go through these spurts of restless creativity.

For design, I wanted a theme that would let me emulate what Jason Santa Maria does with his themed posts. This way if I get really passionate about design/css stuff I won’t have to make another theme for it.

For photography, I have a flickr stream that I can easily switch into prominence. I can also display a photograph in the Social Networks box if this interest takes over.

For illustration, I made the large homepage character that I can switch as I design more characters.

For development, this theme was a good challenge for me as a developer with some jQuery being added to the sidebar sections and with some WordPress trickery going on in the background. If I feel like I need to develop something anytime soon I have a few tweaks I’d like to make to the theme.

Show personality

I wanted a theme that was a little more light hearted than before and one that I wouldn’t out feel is out of place by posting on a broader range of topics.

Promote social networks

I need more friends in EVERYTHING, i.e., Follow Me on Twitter

Seriously, Follow Me

Show beginnings of a portfolio

Although I don’t have much of anything to go towards a legitimate portfolio, I’d like to eventually become a freelancer so I needed to ease into displaying my stuff. I can add stuff easily so I won’t have to redo anything as I get more pieces.

Easy to maintain

The main problem with my last blog design was that I developed too many things that needed to be maintained. Each post needed to have a large and small image added in the WordPress custom fields to show correctly. I had a section with post suggestions that too had to be updated or else the same three articles would sit there for months.

My old designed prohibited me from writing sometimes because I didn’t feel like doing the extra work to maintain it.

Your blog design should never prohibit you from blogging.

Unique homepage

I really believe this is something that most blog designs drop the ball on. I’ll try to elaborate on this is a separate post, but I wanted my subpages to have a design that was different from my homepage’s design.

Site provides context based off what user is viewing

This is also something I think more blogs should do. If a reader is on a single post, the sidebar items Popular Posts and Recent Posts display posts in the same category as the one that’s currently being read.

If you were reading my What I Hate About Becoming a Designer post, which is in the Design category, then I show you the most popular and recent posts from the Design category. It makes sense to do this, but I don’t see anyone else doing.

Also, if someone viewing the homepage might not necessarily be interested in my blog, so I don’t display all the other blog type things there by default. Instead, the homepage is a more visual experience with portfolio pieces showing. But I also make it easy for them to click to the blog stuff if they do want to view categories and such.

Sketching

I begin to sketch out some rough layouts for the blog. I usually get a general layout with the different content area’s in their place first, then I start to get more granular with exactly how each content area is laid out.

Here was the list for what items I wanted on my site:

• Header (large one for homepage and a small one for subpages)
  • Logo
  • Large welcome/ overview of what I do (homepage only)
  • Links to About, Portfolio and Contact page
• Main Content (blog posts)
• Social Networks section
• Mini Portfolio View
• Blog sidebar stuff like categories and tags
• Flickr stream
• Lifestream(optional)
• Footer

Original idea’s played with a super large intro with links to About and Contact highlighted throughout the sentences. Most of the inspiration for it came from Matt Dempsey site.

I hit a layout I liked and played with it bit, doing a few different sketches.

After being reasonable happy with the homepage I did a subpage sketch also.

I refined the homepage header a bit later on since that will be such an eye-catching area.

I also did a rough layout of how I wanted my portfolio page to look.

I’m pretty happy with my sketches now and am eager to start seeing a more perfected looking page so I jump into wireframing.

Wireframe/Mock/PSD

Wireframe is one of those touchy feeling words that different people have different definitions for. The truest definition is a document used to help establish if the functional elements of a page are accounted for. Some expand on it more and make it an example of layout. Others associate a wireframe with a complete website mockup, meaning the site is finished in PSD form and is waiting for markup.

For this project I’m using it to mean an almost complete version of what I’d like my final site to look like. I start out doing more of the true wireframe layout kind of things and then later I add more of the design work. The size of the project should really determine how detailed you should be with each phase. Since I’m my own client I can get away with the all-in-one method.

Here’s a couple of more “wireframe-ish” ones.

I throw a couple of different patterns in the background. This is one of the type of things that will change on the posts I do separate designs for.

I decided to stick with a red one for now and the proceeded to design the different sidebar area – Blog, Flickr and Lifestream.

Finally, I do the subpage design.

HTML

My next step is to take the PSD and begin translating it into HTML, CSS and javascript.

Slicing images

I start taking all the images and cutting them up into manageable pieces to use in the HTML. I use to do most of the the HTML/CSS first without the images, but found that it takes more time to redo markup with the images than just using them from the beginning.

For certain images, like the subpage links at the top, I make sprites out of them to help lessen the HTTP requests. I won’t go into detail here but here’s a good tutorial on using sprites.

Markup

I like to markup my entire document first, instead of doing small portions of HTML then styling it. When I lay the entire HTML document out first it helps me think about the structure of my HTML and making sure that the code is as semantic as possible without relying on CSS trickery to position elements. This also helps with my CSS naming conventions by seeing the big picture in my HTML structure.

CSS

Now I make my site look like my wireframe/psd through the magic that is CSS. I test in firefox only as I code. This typically means it works well in the other standard compliant browsers like Safari and Chrome.

IE7 usually works well after this stage also. I use to have more problems with my designs becoming mangled in IE7, but now I have a rule of thumb when I do my CSS that seems to eliminate most of my IE7 woes. Don’t use padding. If I need something with space between it, instead of giving the outside containing element padding, I give the inside elements margins.

I don’t bother with IE6 in this blog’s design. Without getting onto too much of a soapbox, my general feeling about this is that if the person viewing my site can’t take the 20 seconds to download a better browser I can’t take the 5 hours to make my site look halfway decent in IE6. I understand that I have the ability to make this decision since it’s a personal site and since my content caters to designers who don’t use IE6 so the amount of traffic lost is minuscule.

Javascript

My javascript library of choice is jQuery. I’ve never done any real javascripting so I am very appreciative of what the jQuery guys have done by harnessing the power of DOM manipulation in such an easy to use library.

I debating about not doing the jQuery stuff until after I got the site converted over to WordPress, but I decided to get the site as close to functionally ready as possible before converting. Doing this made the conversion super easy and this method is also helpful in debugging.

By doing the jQuery stuff in HTML land I knew that if something didn’t work is was obviously jQuery’s fault. If I had tried to do jQuery and WordPress stuff simultaneously then I wouldn’t be sure which one was broken.

Character Illustration

With the HTML/CSS/javascript complete, I moved on to the character illustration. I drug my feet on this since I’ve never done any of this before. I’m a horrible artist if you couldn’t tell by my sketches so this phase intimidated me. But it’s a skill I’d desperately want to have so I eventually got to it and was proud of my end result.

Inspiration

I have a general idea of what I want my monster to look like. I want something that was obviously a monster, but of a kinder, gentler variety. I just wanted a loveable mascot at the top to greet visitors.

I do some Google searching for monster illustrations and find this fantastic one by Matt Inman which is almost exactly the type of character I was imagining. He’s cute and loveable and brings a little smile to your face.

Sketches

I sketch a ridiculous number of monsters, especially considering how simplistic the design really is. I’m sure most character designers could produce a far superior version in 10 minutes, but drawing is going to have a steep learning curve for me and I’m standing at the bottom of the hill.

Here’s some of my sketches:

I use the sketch on the right for making the monster a vector image.

Vectorize

After the sketch is complete, it’s time give the character more life through making it a vector.

If you’re unsure of what I mean by making the image a vector, find out more about vector graphics.

I import my monster sketch into Adobe Illustrator. Now I begin the arduous task of learning Illustrator and figuring out how to get the pen tool to do what I tell it.

After working on inking my monster for a few hours I come up with this:

The next process will be to give the monster some color. I did all of my coloring in Illustrator. I believe that most people will take the inked character and import it into Photoshop at this stage to do the coloring, but I wanted to learn Illustrator more so I did everything in it. If any of you have your own methods or suggestions for what to do I’d love to hear them.

The general technique I used for the coloring comes from the comic book industry, I believe. I first applied what are called flat colors. Essentially you are just filling each area with one dominate color, no gradients. After you’re happy with your base colors, you then apply the shadows and highlights through gradients and other tools.

After a few more hours of work I came up with this:

There’s my guy, who I decided to name Eerb.

WordPress

Now I head back to my finished HTML, drop Eerb in there, reposition some stuff since he is taller than the previous monster and I’m off to the WordPress conversion.

The conversion goes extremely smoothly since the HTML is done, so I just start dropping pieces of code into the appropriate template files.

I was able to most of the design converting from HTML to WordPress in under two hours. The site had a complete feel about it, but there were still those little details that don’t take up much space, but require lots of time to get working correctly.

Here’s a few of the final details that took some time:

Plugins

I had find which plugins I needed and learn how to use them. A few I used are Tweet This, Popularity Contest, and YARPP.

Custom Taxonomies

I had to learn how to make custom taxonomies. Taxonomies are things like Categories and Tags in WordPress.  My theme has a custom taxonomy for my portfolio tags so that when I tag a portfolio item with ‘blog’ it does not get intermingled with my posts that are also tagged with ‘blog’. Here’s a few good posts on custom taxonomies: Custom Taxonomies in WordPress 2.8 Using Custom Taxonomies

Threaded Comments

Another hurdle was getting comments to thread properly. Here’s how to get threaded comments in WordPress.

Post Image Trickiness

When you view lists of posts like on the index page or by categories /tags the image displayed above the post meta information is pulled in an intelligent way.

Since I didn’t want to deal with the hassle of making images and using WordPress custom fields for every post, I developed this method to avoid that yet still get an image there for most posts.

First, if I actually do take the time to make an image for the specific post the theme will pull the image from a custom field.

Secondly, if I didn’t use a custom field but the post contains images in it, then I pull the first image from the post and use it for the post image spot. Also, I remove that first image used from the post content when viewing it in list form so that you don’t see duplicate images for the same post blurb.

Finally, if I don’t have either then the post displays without a post image. Although, I could just as easily give those posts a random default image to display. Maybe I’ll add that later, but since most of my posts use images I don’t think it will be necessary.

Conclusion

If you made it all the way down here I appreciate giving me your time to read this long post. I hope the content can help you if you are planning to take on the task of developing a theme from scratch.

This is the first time I’ve used this exact process, but I’m happy with its results. Although it is annoying to take so much time in the beginning planning stages, by doing so you make the end stages go more quickly. You also have a better final design since you take the time to fully think things through.

If I were to change some things I probably would have spent more time in the Wireframe/PSD phase. There were a few things I changed late into the WordPress conversion that took a bit of time to undo that I could have avoided if I would have found the problems while looking at a more completed mock in Photoshop.

There are only a few places that I’m not happy with, mainly the comments section. I wanted something simple, but feel that it’s far too plain and boring. When I get the developer’s itch again it will be top on my list to update.

I would also like to update the Social Networks box to draw a bit more attention to it, especially my Twitter.

Again, thanks for reading I hope you enjoyed. I’d love to hear your comments on what you think of my process and if you’ve got any tips of your own to share.