I decided to experiment a little with the new design and development of my website. After months of making notes on design elements that I like, ideas I had for the site, and various other little scribbles, I ended up jumping on this re-design project 2 days ago, and completed it this morning at about 4am. When I work on a project that I get really into, I struggle to pull myself away from the computer. When I say “struggle”, I’m talking about sometimes spending 18 hours straight with one break in between. It is part of my character, whether it is a good thing or a bad thing. Once I have my mind set on getting something done, I just do it.
So, the design in photoshop, and all of the coding was done in 2 days, and I am more than happy with the outcome. I believe this new design is right where I want it to be visually. The overall look and feel is light, yet I think there is a perfect touch of artistic flair in the graphic elements and overall aesthetics. It was important to me to have a clean design, but I still wanted to create an image that presented me, my personality and characteristics. This balance is difficult, especially with a somewhat sketchy design, but I think it came off nicely.
I first learned about WordPress around February 2008 when I was trying to increase backlinks to my company website. After finding David Airey’s website, I proceeded to add several comments to his posts, and enjoyed his articles and writing style. David quickly realized what I was doing, and told me off! So, I learned all about the blogging and online design industry by being a dirty search engine optimizer concerned with acquiring backlinks from design related sites. Thanks David! I learned the error of my ways, and understood the “blog commenting etiquette” that was in place, or was supposed to be in place.
My previous design was pretty much my first attempt at creating a custom theme for WordPress. I loved the textured website designs around the net, and wanted to do something along those lines. While I was happy with the original design for a while, my interface and graphic design skills had progressed past the image the website was giving off. Since February 2008, I have immersed myself in everything to do with developing custom WordPress themes, from reading tutorials, to mashing the code up to see what works and what doesn’t. I learn the most by simply hacking away at things using only educated guesses, and once something works, I remember how to do it forever.
Quickly I found myself understanding WordPress a great deal, and ended up working with it on almost a daily basis using it as a CMS system for client websites. For about 5 months or so, I have tried to plan the time to re-design this website, and just the other day I just decided to go for it. I went through my notes, my bookmarks and everything else that I had saved for inspiration for a new re-design, and I was ready.
The new logo came first. While I don’t see this is aspect as too vital for my reasons or goals as a design blogger, I thought it would still be fun to create a unique identity for myself and my website. I blog predominantly for the fun of it, and for networking with others, so I’m not overly concerned with my “online brand”. My company’s brand is what I put time into.
I wanted to find a way to put the “B” and the “Y” together, but had struggled with this in the past. They are not the best initials to work with. I decided to draw a custom font in Adobe Illustrator for the two letters, and after some variations on the arrangement of them, I found a format that fit well. Then, I decided I wanted the logo not to just represent my name, but I wanted it to also display what I do, what my interests are, what my personal site is about, and what readers can expect to see on my blog.
I didn’t have to go far for inspiration, as I simply thought to myself “What do I do, what do I blog about?”, and the answer was right there on the left hand side of the programs I use every day. The pen tool and the brush tool in Adobe Photoshop and Adobe Illustrator were perfect little symbols to represent what my blog is about. Designers will know what the imagery means, and represents, and after all, I am not too concerned about marketing my personal site to people outside of the design industry.
After drawing the two elements onto the “BY” initials, and changing the colors of the letters, I asked my Twitter followers if they had any feedback. Martin Kulakowski came back to me with a great suggestion, and even sent an image showing his idea. He added a slight amount of separation between the stem of the letters and the design icons. I thought that was a perfect addition.
So, the logo was ready to go, and immediately I started working on the website design. I knew I wanted to create a light, watercolor/sketch look, and its color scheme would include teal / turquoise (my favorite color). I also knew that I wanted the website to be 1080 px wide. This would provide me with a nice amount of white space and room to work in some design elements.
During a quiet night staying in, I put together a header design that I was really happy with. It had a classy / artsy feel but wasn’t heavy like my previous design. I also wanted to include a personal image but didn’t want it to look out of place inside the overall design. A little saturation and play with the hue of the image, and it fit into the color scheme nicely. The before and after can be seen below.
The previous design was way too heavy, and I went a little crazy with the paper texture brush. I think I had just found that brush or something, and was a little too excited to try it out!
The new header has much more style, and helps to give the new design a light, clean feeling.
From my notes, I knew I had a lot of little touches of quality that I wanted to put on the website, whether it was some type of creative rollover or a unique way of showing information.
A look at some of the new elements and features…
Obviously the layout of the homepage is important. If it is good, your bounce rate will be low, and visitors will want to click-through to the various pages and posts on your site. I decided to get rid of the “Featured Post” spot on the homepage, as this started to have no meaning to me. In my opinion, for a site like mine, the most recent post WAS the featured post. So, I simply decided to just list the posts in order of publish date.
Comment Count
One small note I had written down somewhere was to display the “post comment count” in a speech bubble. This is a nice way to display this information, as it is simple, takes up very 
little room, and looks more interesting than a simple text link saying “3 comments”. It also allowed me to have fun with a rollover inspired by sites like Web Designer Wall (rollover the main navigation). You can see what I did if you rollover the little teal colored speech bubble at the top right of each post page, and on the homepage and category pages.
Navigation
I really didn’t like my navigation on the previous design, and it bugged me every time I thought about it. I had used some junky javascript and images for the rollover effect, and that was not cool to be doing in 2009. For my new website navigation, you can see similar rollover effects, but the entire navigation uses one single image, utilizing the CSS image replacement technique. I am a strong believer in this type of navigation, especially because of the fact that text links remain in the source code. The search engine bots don’t see the image file with a link, they see plain textual links. I like (insert Borat accent). High five
A little more insight…
Another small addition, is at the bottom of each post page. I thought it would be nice to have some little snippet of information about what was going on in my life or what I was thinking at the time I published a post. So, I added some custom fields and the necessary php code to pull them into the website, and on each post, it will now have a few lines of “when I published this post, I was…”. Prepare to see things like “planning world domination” or “eating a big mac and judging myself”.
One major part of this website re-design included the display of visitor comments, and the comment form area. I really wanted this to look unique and in-line with the rest of the website. I spent time working on the layout of the comments list, and finally landed upon a format that I was happy with. First, the visitor’s name, twitter ID, and the time and date the comment was made. Below that line, the avatar, and the comment text.
I’m quite happy with how the comments list turned out. A little addition to this area is the “Highlight Author Comments” plugin (by a god of WP plugins, Rob Marsh) that allows me to make it easier for visitors to read my comment responses. With a bit of padding, and my new logo, it now provides a subtle difference to make it easy to follow my responses in the comment thread.
Next up was the comments form area. This was another area that I neglected with my first custom WordPress theme design, mainly because I was too afraid to hack up the code that controlled the form. Not anymore!
With some simple CSS on the form fields, and correct positioning, I was able to use a single background image for the form, and keep the overall look consistent with the rest of the website. I still have a few additions to this area of the website, and will probably get to them in the next few days. They include: adding a “comments policy”, and creating a nicer submit button.
A before and after screenshot can be seen below:
Another major piece of the new design involves how the categories and archived posts are displayed. I didn’t want to have a giant list of categories going all the way down the right hand side of the website, so I decided the best way to keep the site clean was the hide the categories until a visitor activated that area to see them. I did the same for displaying “Popular Posts” and “Random Posts”. This keeps the sidebar nice and simple and drop down slider is a fun way of presenting information.
On the old site, I had a section I called “Today, I am reading” and this was a small list of some of the various design related blogs that I regularly visit. For this new design, I moved this to the footer where it fits much better.
I will be changing the RSS feeds that I pull into this area regularly, but for now I am happy to display Randa Clay’s, David Airey’s and Six Revision’s latest posts. There is some weird character issue with the RSS feed script in WordPress in the way that it deals with apostrophes and different characters, but this may be more of a character set UTF-8 issue. Not sure just yet, but I will try to fix this soon.
So, all in all, I am quite pleased with this re-design. My main goal of this new design is to re-ignite my energy into posting more regularly and being more active on here. The old site just didn’t encourage me to do this, and I think this new design will.
Thanks to everyone on Twitter for your feedback and comments on the design, they are much appreciated. If anyone is interested in seeing a tutorial on any aspect of the creation of this theme, please leave a comment and I will be happy to write a post about it if a few others are interested also.
What do you think of the re-design?
