Sneak peek at our next Headway template, Impact

In my previous post I covered the role that HeadwayRocket has played in our small company over the past (almost) four years. This post is a preview of the first new template to be added to the collection, called Impact.

Designing outside the box

For Impact I wanted to give myself a bit of a challenge and so purposefully designed in a couple of things that I thought would be challenging in Headway. That was the plan at least. It turned out to be easier than I initially expected. Big kudos has to go to Clay for making Headway so easily extendible.

Here is a break down of the challenges I set for myself when I started planning Impact:

1.) Start at Ground Zero

Headway has a lot of default styling, which means to override those styles, you need to layer on more styles. This can quickly become quite messy, so before I started on Impact, I create a new blank template called RAW, which is essentially the default Headway with all the styles removed.

The biggest advantage with taking this route is the inheritance cascade. Instead of overriding and re-setting the title in 20 different places, it’s now set once at the top in the global defaults, giving consistent styling throughout the template.

2.) A challenging take on the blog index

Headway doesn’t output any Gravatar anywhere by default and no Headway templates I’ve ever seen take advantage of this, so I figured it would add a nice touch to the posts - being able to visually associate the author with the post. Thanks to the built-in Gravatar function in WordPress it turned out to be surprisingly easy.

3.) The title overlay

You’ve probably seen the effect before, but for Impact I wanted to take a stab at overlaying the title. The challenge was to ensure remained readable on different featured images. To do so I added a fading backdrop from dark to transparent, but to cater for varying title lengths (since titles can sometimes span multiple lines) increasing the vertical height of the title, the title needs to be flush to the bottom of the header. It required a bit of out-the-box thinking, but I got it in the end :)

4.) Search toggle

Another trick I managed to implement is the top search toggle, which overlays the search field over the top navigation.

5.) Category and archives jump menu

Last thing to point out is the top filters for the post categories and archives. It’s added via the Custom Code block in Headway and makes navigating your different categories quick and easy.

Without further delay

Here’s a quick video walking you through the various layouts included in Impact.

What do you guys think? Am I on the right track? I have another uber minimal concept in the works, but beyond that I’m open to suggestions :)