ering how a web design company can go nearly two and a half years without their own website. Well it wasn't for a lack of trying.

Several iterations have been designed and even partially built over the years but nothing stuck. Nothing felt like 'us'. Plus we quite liked our old holding page.

Rumble Holding Page

This living breathing 'live' site you are viewing now is the result of us finally being able to express who we are. What makes Rumble Labs Rumble Labs. Here's what we did!


The process started with a decision to rebrand last year. I felt our existing branding failed to represent our personality and company attitude.

What is our company attitude?

The knuckle duster icon felt like the right fit, and when later combined with a flask to represent 'Labs', proved to be one of the most important sources of inspiration for the unique layout of this site.

Rumble Rebrand

Goals of the new site

With new branding in place, we started to define what the main goals for our website should be:

WIth the goals defined, I began the process of wire framing and iterating through concepts. On this occasion it took slightly longer than normal as the site evolved to, in essence, become two sites in one.

The idea was to create a split site featuring opposing navigation columns. On the left static content, about us and on the right our blog, somewhere we could frequently & easily post content.

Initial Concept

An early concept

This was the first time we had attempted a fully responsive site. Trying to find the right way to represent the unusual structure of the site in not just one view, but responsively down to mobile proved a challenge.

I found that one of the keys to designing responsively is keeping things simple. Always keep in mind how the content will flow and reduce to a smaller (or larger) scale.


How we set the type was also important, as we've already touched on in a previous note with Front's Golidlocks Approach. Choosing typefaces for the web has drastically changed in the last year now that we have so many options available to us via fantastic services, such as Typekit and Fontdeck.

I've found with the growth of these services, my approach to design is changing, moving towards simple, clear, typography based layouts. With this in mind I decided to use FF Tisa as the main typeface, supported by Futura and FF Market. Tisa is a great sans-serif offering from Typekit, originally created for use in magazines but adapted for the web and now a quality choice for body copy, imho.


A conscious decision was made to keep away from modern trends in the web design community such as CSS3 transforms and animation, that's not to say we don't like doing that kinda stuff. There was just no need for us to add unnecessary distracting elements to the site's overall experience.

What next?

We've created something here that is flexible and extendible. We plan to keep iterating, improving on what we have developed.

Check back in the near future for some open source goodness, our project planner, client case studies and more!

Get in Touch

Great! Tell us about it by completing our project planner. Doing so helps us better understand your requirements and in turn we can provide a more helpful response.

Start your project plan now