How to Give Your Blog a Facelift in 24 Hours With the Headway Theme

A few days ago I had to chance to interview Grant Griffith, the founder of the Headway theme (which amazingly was developed by his son who was 15 when the project started). I’d been looking at different blogs all week and knew that I wanted to make some changes to my design, but hiring a designer was out of my budget so I decided to take Headway theme for a test drive. Below I’ve written my own guide to how I gave my blog a facelift with the Headway Theme.

2 Things You Should Do Before You Start

• Look at Other Sites You Like: This was an important first step for me because I knew that I was going to be borrowing some ideas from other blogs. Fortunately, there are tons of great examples on Headway Gallery. I also used the blogs of Danny Brown and Tyler Tervooren as a guide for what I wanted my new layout to look like. By looking at a few other sites I was able to get a good sense for how to optimize real estate on the blog.
• Sketch out Your Design on Paper: This might seem counter-intuitive to people, but I think there’s something very valuable about making things as simple as possible. In fact, in Garr Reynold’s book, Presentation Zen, he even recommends doing this for presentations. I just took out a small sheet of paper from my moleskine and drew a very basic picture of what I wanted the structure of my web site to look like.

The Headway Visual Editor

For the non-designer the visual editor in Headway is absolutely amazing. It makes it possible to put together a very nice looking web site in the span of a few hours. I think things took a bit longer for me because I already had a web site. When I first launched the theme the visual editor wasn’t working the way it was supposed to because I had a bunch of plug-ins installed on wordpress. I really wish the instruction to disable all my plugins had been given to me upfront because I wasted a few hours because of that. So, my request to the Headway team is that they let anybody who is upgrading know that right at the beginning.

• Choosing a Layout: I’ve experimented with a bunch of different layouts for The Skool of Life over the last 18 months and I never really loved any of them. I always felt like there was too much clutter and too many columns. The visual editor gives you a few different options for layouts, but my recommendation is that for non-designers simplicity is the way to go. I opted for a 2 column layout where the content got the widest column possible and the sidebar was wide enough to do some pretty cool customization which I’ll discuss below.
• Design Your Custom Header: One of the things that I really loved about the experience of working with headway is the ease at which you can put a custom header on your blog. If you can afford it, go to 99 designs and get a header designed. However if you’re willing to be patient and experiment a bit you can actually design the header yourself. I’ve done the entire design for this site just by looking at other examples.
• Choosing a Color Scheme: This process is more or less automated once you design your header. Headway actually looks at the color scheme of your Header and then makes recommendations for a color palette. Again for the non-designer this is really fantastic. In the past anything I did with color scheme matching was more or less guesswork, but this takes all the guesswork out.
• Navigation: Customizing the navigation bars is also a breeze and you can just move navigation items around with a simple drag and drop. It was actually on customizing my navbar where I ran into issues because I didn’t turn off all plugins, so I recommend you do that before you get started with tweaking your site. You can also decide if you want to the header image to be above the navbar or below.
• Leafs and Sidebar Widgets: Grant had warned me that there was a bit of a learning curve to Headway as there is with any framework and I think using leafs was is where the biggest learning curve is. If you’re not like me and you actually are the kind of person who reads instruction manuals when you get something new, you’ll save yourself a good amount of time. I personally think your best bet is to just start messing with it and refer back to the instruction as needed.
• Content Leafs: You can use the content leaf to display exactly how your content appears and how many posts you want to show on the home page. This is something I’m still trying to customize a bit more but haven’t quite figured out. I currently display 5 posts on my page, but what I’d ultimately like to do is feature my latest post in someway , but only by showing a summary instead of the whole post. But I am very pleased with how clean displaying content in one column is. Grant assured me that you can do some really amazing things with the leafs once you really get how to use them and I have no doubts about that.
• Sidebar Widgets: I’ve always wondered how exactly people make their sidebars look cool and so visually appealing. This is something I recommend all of you do. Go and take a look at the code on some of your favorite blogs. When I did this, it turned out that all the sidebar titles were images. So I decided to create some very simple banners using GIMP. I basically matched up the dimensions in gimp with the column width of the sidebar and created the banners you see on the side for Skool Supplies, Find me In Skool, etc, etc. Then I uploaded the images to my server and used a text widget for the side bar with and just entered some img src code. It was actually quite a bit of fun to do this. I’m not sure if this is the ideal way from an infrastructure standpoint to do design work because it could impact load times, (so I’ll leave to the design pros to answer.

I first installed the Headway theme around 5pm on Saturday night and what you see today was more or less done by 11am Sunday morning. I’d say that the first few hours were where I struggled the most, but once I got it down it more or less flowed like clockwork. Below shared some other ideas about the design process.

Design Tips from a Guy Who Doesn’t Know Much About Design

• Read my friend Jenny’s guide on branding for the non-designers. Jenny is a really talented web designer and she does a great job here talking about a number of aspects of design including branding which is actually less a technical thing and more of a marketing thing. She has some fantastic examples of branding and design that aligns with it.
• Don’t be afraid to break it: This one freaks many people out. Your blog is after all almost like your child (well maybe not). But, the idea of doing any damage to all your hard work is something that makes people nervous. While there’s no doubt that you can do something to really screw up your blog, the only way you’re really going to learn is to experiment. To be on the safe side, create a backup of your blog or even setup a staging environment (a bit more complicate) where you can play with the new version all you want without screwing up your site.
• Have Fun: I thought doing design work would be incredibly tedious because I’d have to spend all day fine tuning minor details. The truth is really good designers probably do that. But my forte is not design, but I wanted to create a better looking site and based on the feedback from other bloggers, I feel like my mission was accomplished. I’m still not 100% done with a few things, but I’m feeling quite confident that the last 10% should be fairly straight forward.

As some of you know, I’m the host and co-founder of BlogcasttFM and I recently interviewed Grant Griffith. I’m going to make the same offer here that I did on BlogcastFM. For anybody who purchases the Headway theme using my affiliate link below, I’ll actually throw in a 1-hour content strategy session where we can talk about anything you want.

The Skool of Delivered to Your Inbox

Sign up for my FREE Course on the 7 Most Important Things You Never Learned in School