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.
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!
Rebranding
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?
- We're all hugely passionate about what we do
- We work with our clients to produce the best result for users
- We always fight to ensure the correct decisions are made
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.
Goals of the new site
With new branding in place, we started to define what the main goals for our website should be:
- Promotion of our skills
- Introduce the team
- Establish core message/direction
- To create a flexible/responsive layout
- Infusing company personality
- Our first dedicated blog/content stream
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.
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.
Typography
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.
CSS
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!