As I mentioned in my last post, I wanted to save all the mushy design details for this post. I wish to spread the details out over three parts instead of trying to fit everything in to one gigantic post. So let's re-focus our attention on the choices I made that lead to my redesign. Some ideas were better than others, and some were just down right ugly. But nonetheless, I am here to share my experiences with you and hopefully we can learn something together. Let's get started.
Wireframing
You can't eat cereal without milk, you can't fly a kite without string and you sure as hell can't create a website without wireframes. Now of course you could eat cereal with water (I've done it before) or fly a kite with some dental floss, but the taste wouldn't be as good and the resistance to the wind wouldn't be as strong. In the same way, making a website without a wireframe is just asking for trouble. Basically what I'm saying is you can't have one without the other. Where will you turn when you run in to a problem with your design? If you don't have any initial plans laid out ahead of time it will be more difficult to work through those issues when they come up. And believe me, problems will arise.
Here are some of my initial wireframes:
Once I had a good idea of what the basic structure was going to look like I fired up photoshop. And when I start working in photoshop I always like to use the 12-grid template provided by 960 grid system. (If photoshop isn't your preferred method, they also have templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Visio and Expression Design.) The template is a good base to start with and helps me align my elements the way I like. Plus since I've been using it for a while now I find it much easier to convert my mockups in to HTML and CSS.
Here are a couple of my initial mockups:
As you can see I was having a major identity crises. My first attempt was safe and predictable. I was trying too hard to appeal to all the inspirations in my head. Either that or I was craving some Andes chocolate mints. The second approach held a little more weight in the personality department, but I still wasn't happy with the layout. However, I like the oversized illustration (courtesy of Brad Colbow) that is prominently displayed in the header. And my name in Archer was close, but no cigar.
I decided to take a break and put things on the back burner.
Branding
My biggest problem in the beginning of this new design was trying to find the right font to express who I am. But nothing fit quite right. The idea of doing my identity by hand didn't occur to me until I had exhausted all other possibilities. So I sat down one day and started sketching out some ideas when it clicked that I shouldn't settle for some "off the shelf" font, but create a unique, one-of-a-kind, font that embodies who I am.
Here are some of the preliminary sketches I made:
The personal touch I put on my brand is probably my favorite part of this new design. I have always been a fan of doing things by hand, so hand-drawn type was something that always appealed to me. I love what my friend Josh Hemsley wrote about it:
"The humbleness and transparency in your words can now be identified in your new mark."
Layout
Building a theme from scratch is no easy task. But thanks to Ian Stewart, and his wonderful 11-part How To Create a WordPress Theme Tutorial, I was able to get some much needed help. Of course though, tutorials aren't the end-all-be-all solution, and that's when I turned to some of my friends for help. Matt Simo was a huge help to me with all the WordPress custom functionality. Caleb White also lent me a hand with his ninjastic WordPress custom field knowledge. And where would my layout be without the 960 grid system? A huge thanks to Nathan Smith for his contribution to the design community.
The Home Page
With the layout of my custom home page I wanted to focus on keeping my content fresh and up to date. The new portfolio slideshow is a combination of two jquery plugins, the jquery tools scrollable plugin and this sliding boxes and captions plugin over at build internet. The three "most recent posts" section at the bottom is managed by some custom wordpress loops and controlled by the jquery accordion plugin. And instead of pulling in the_excerpt for each post, I chose to use the_content so it would pull in my images and videos from each post.
The Blogroll
I knew I wanted a single column layout for my blog posts. I think it provides a clean and minimal look while allowing the focus to solely be on the content. I thought a lot about the comparison of reading online as opposed to reading a book. Wilson Miner has a great article called "Relative Readability" that talks about why he used a larger font-size in his design. He refers to this original article titled, "The 100% Easy-2-Read Standard", by Information Architects Japan which lists out 5 simple rules for better readability on the web.
- Standard font size for long texts
- Active white space
- Reader friendly line height
- Clear color contrast
- No text in images
I highly recommend this article for you to read, absorb and regurgitate back in to your own designs.
Comments
I'm not going to lie. I copied the comment styles from Thematic. Check my code. Go ahead. I dare you. I love the way they're styled so much that I couldn't find a way to really improve them. The only thing I added to my comments section was the Live Comment Preview plugin that shows you what your comment will look like in real time. I really love the client-side Javascript that shows you your gravatar image once you input your email address.
Get to Gettin
And now it's the time you've all been waiting for. I am pleased to offer my new hand-drawn font, appropriately named "Steed", available free to download in vector format.
Here's a preview of Steed:
I hope you enjoy the font and please tweet me a link anytime you use it.
Thank you all for all your continued support and encouragement. The feedback I've received so far has been nothing but positive. Please stay tuned for the third and final post in this series. I will explore the depths of my faith that I feel have brought about a change in my life and thus have lead to my need for redesigning myself.