2 years ago
For those of you that are visiting my site for the first time, you may not realize that this simple little blog you’re looking at has just undergone some major renovations. I’m not sure if anyone is really interested in what has actually gone into this re-design, but I thought I’d share anyway the entire process from start to finish.
Previous Blog Design
I knew when I started selling on Theme Forest a little over a year ago, that I needed some kind of online presence. This was all back before I had ever created any kind of brand around the “Theme Blvd” name.
The main goals of the last design were simple. I wanted to seem personable to buyers with some sort of big goofy photo, and also have a place where I could post tutorials that I could then link buyers to when dealing with customer support questions.
The problem was that I didn’t have much time to devote to a personal site where there’d be no instant money rolling in afterwards. So, I did what we all do… I bought a theme on Theme Forest and whipped it up real quick!
First Design Attempt #fail
It’s only natural that our skills progress quicker than we can update our old stuff. I know I’m always looking back at designs I’ve done only months before, and thinking to myself, “What the heck was I thinking?”
So, it was clear that I needed to redesign my site. I didn’t think it would take much, as I figured my experience as a mediocre Theme Forest author should mean I’m qualified enough to design something at least a little unique, right? Well, it’s actually harder than you’d think to step outside the comfort level of designing business sites that all have the same layout.
Taking the redesign of my site too lightly, I was originally just planning to take another Theme Forest theme and modify it like I had done the last time. I even had the perfect one picked out. I was going to rip the “blog” part out of IvorPadilla‘s awesome theme, Americana.
I started with a screenshot of his blog design and started customizing it while watching my nightly fix of NHL on the Fly. This is what came out.
I actually sat tweaking that design for many hours, two nights in a row in front of the TV. Inevitablly, I knew that design wouldn’t cut it, and I needed to re-think my entire plan.
Goals for the New Site
After realizing this project would take me actually investing some real time in order to get it done right, I decided to do something that I learned from all that tuition spent on my superb college education (#sarcasm) … “Make a list, dummy!”
So I decided to do just that, and make a cheesy list of things I was looking to accomplish with this new website.
- Needs to be personable.
I want people to see my site and feel like they "know" me on some level. This was one of my original goals with the last site, and I think it has helped with buyers on Theme Forest. I can do the same method again by using some goofy photo of me or something similar.
- Include Theme Blvd promotion that won't get ignored.
The average website is going to have rotating banner ads in various places. I think we're all so used to seeing these, they often get ignored when we're viewing websites. So, when I advertise Theme Blvd, I need to do it in a way that's more clever than the standard banner ad. I want people to really notice the the themes I'm promoting.
- Immediate Theme Blvd association.
I think most authors on Theme Forest are linking to some sort of site that makes them look like more of a "web design company." Since I'm trying to keep a personal feel here, I'm worried there will be confusion that I am also Theme Blvd. So, when people see the site, I want to make sure right away they know that.
- Try to increase activity on Twitter and Dribbble.
Since these are two sites I'm starting to use more often now, I'd like to get more people aware that I'm on these sites. I don't have many followers on either. Dribbble is currently really bad in this regard. I'd like to show my activity from both on my site.
- Needs to aid Theme Forest customer support.
This was also a goal of my last site, and I want to continue it with this one. I need this site to serve as a good source of tutorials I can link to that answer commonly asked questions I get over on Theme Forest.
- Make it easier to post more often.
My old blog was a bit too formal, so it was difficult to find time to post. I think this was because I felt every post had to be some sort of long tutorial or article. With this site, I want to create a more casual environment where I'm able to post more frequently, with not everything needing to be "important" necessarily. Mix the fun with the pleasure... I'm thinking this would be a good time to experiment with WordPress 3.1 post formats to help accomplish this. This all will tie into the goal of making the site more personable, as well.
I have to say, this actually worked pretty well. Who knew something as simple as making a list of goals could put you on the right course?
Taking the goals I listed above, the next step was to wireframe it out on paper before sitting down in Photoshop and just moving crap around.
So, here’s my initial sketch of the layout on my fancy-schmancy 960 grid system paper.
I actually starting doing a lot of these wireframes lately because I have so many ideas for new themes I want to create for Theme Forest, and the only way I can retain them quickly and not forget about them is to sketch them out.
Designing for me is by far my weakest skill in the entire website creation process. I spent a lot of time in Photoshop with this design trying different things out.
It was really difficult to come up with a “logo.” I mean what could I use as a logo for a website about myself? It seemed kind of pretentious to create some dazzling text treatment of my name. So, I decided to go with something that ended up summing up just about everything I was doing at the time, which was being confused and using Photoshop on my MacBook! Real creative, right? I know…
Two of my big design goals coming in were to create an ad space up top for Theme Blvd that people would immediately look at and that would also make people immediately associate my site with the brand. This was a bit of a challenge, but I think overall that turned out pretty well.
I also spent a fair amount of time mulling over the typography. This is also a pretty weak skill for me that I’m trying to improve on. I used these two e-books from Smashing Magazine to aid me along in the process:
What ironically turned out to be the most important thing I wanted to accomplish (even though it wasn’t in the beginning) was to utilize WordPress 3.1 post formats to create a sort of Tumblr type of blog feel that would hopefully encourage me to post things more frequently by not always requiring me to write a lengthy article.
So, below you can see what I ended up with in Photoshop.
It actually did turn out pretty much exactly like my original sketch. The only major difference is that I ended up moving the sidebar to the opposite side. The reason for this was because the I needed more room for the main content area, and having the sidebar directly underneath the logo, but just barely not the same width, looked pretty funky to me.
The Development Process
Like every other step in the process, development ended up taking way longer than I had planned for. It’s obviously a given that I’d be using WordPress to create my blog, but going into the process, I wasn’t sure how much time I wanted to spend on making this into a properly coded WordPress theme. There’s a huge difference between making a theme for yourself and one for others to use.
Eventually, I decided that I wanted to take advantage of this time spent working on my personal site to “start” some other projects that I’d be doing after and also educate myself.
What I mean by that is that I was able to justify so much time spent on this website if I could get some additional value out of it. I did quite a bit of research on each element that I was inputting into this little WordPress theme. I looked up alternate ways of doing things that I thought I already knew how to do. Often when creating a commercial theme, it’s hard to find time for this.
I also spent a lot of time trying to come up with a way to utilize WordPress 3.1 post formats based on the brief information given over in the WordPress Codex.
It’s not that it was difficult to code them into the theme, but it was difficult to come up conceptually with a good way to use them. The end result, as you can see here on this site, ended up being a blog format that resembles many blogs over on Tumblr.
So, while I didn’t code absolutely everything that I normally would with a theme I might be releasing to the public, I did end up with a pretty complete WordPress theme.
Aside from the WordPress part of the development process, I did spent a lot of extra time fine tuning and adding little random bits of jQuery effects like random pop up messages in different places, tooltips, etc.
Making the WordPress theme for this new site gave me a lot of inspiration for some other things I’d like to do with WordPress. I’m really feeling this whole Tumblr vibe now. I’d like to utilize all the post format styling elements I came up with for this theme in some sort of WordPress theme I can release to everyone.
“Bloggy” WordPress themes don’t seem to sell well over on Theme Forest, so I’m thinking I’ll just make a WordPress theme similar to this site, copying and pasting a lot of the same elements, and release it out to everyone for free.
Also, I don’t want to take the time program in all the premium goodies that might be in one of my normal WordPress themes, so it’ll be nice to just put together a quick WordPress theme for once that doesn’t take months to complete.