New Year, New Site
January 02, 2012 / 2 comments / Permalink
the creative geek
Throughout the course of 2011, we learned a lot working on our client projects. We discovered new, better ways of doing things. We improved our design skills. We picked up some new best practices. As we were closing in on a new year, we looked at our own site and figured it was probably a good time to put the new things we've learned to use. What you see now is the result of several months of work and we'd like to share with you how we arrived at the new design as well as some of the highlights we're proud of.
Taking Branding More Seriously
We've always taken our clients' brands seriously, but honestly we never really developed something formal of our own. We just did what we felt like at the time, which is silly for a design organization. We evaluated our colors and officially settled on red, black, white, and tan colors as the official color scheme. Based off that, we also developed the little "tg" icon which we've already started using on our social media presences and as our new favicon in the browser.
As part of the redesign, we wanted to look more closely at fonts which convey us a bit better. For the large headings, we're using Bebas Neue. We felt it was bold and sleek at the same time with its heavy, but condensed lettering. It speaks clean and sharp to us. We were also pretty sick of Arial as a body font. We settled on PT Sans as its a little wider and more legible than Arial. We also took our leading (or line height) more seriously this time, applying the golden ratio and modular scales to the body copy. The result is visually pleasing, easier to read copy throughout the site.
Simplified
One of our main gripes about the old site was how cluttered it felt. We tried to use every bit of space to pack in stuff. This time around, we started from a blank canvas and evaluated each piece of material for each page more carefully. What we found were certain things which were truly important to the page. Everything else, while perhaps applicable, wasn't really important. The result - cleaner sections with more whitespace. We like it. This is perhaps most evident on our blog. In the previous design, we had packed every share button imagineable along with a list of recent posts, all categories, recent comments, and whatever else you could think of into the sidebars. That made for a really cluttered blog. In this round, we have our article, a single share button which lets you share on Facebook and Twitter, related categories, and a few related articles. This is so much cleaner and it makes the reading experience an enjoyable one.
We also decided to eliminate some sections to simplify things. We condensed our old About and Services pages into a single Us page with relevant information on it. We also eliminated the Resources page, but we have plans for that old content for the future. Our navigation is now simplified, and thus easier.
Cleaned Up The Portfolio
Our Google Analytics showed that our second most visited page on the site was the Projects page. Going back through all those projects, we realized that many of the projects shown were built up to eight years ago and weren't good representatives of what we're capable of today. The way our industry works, what we did yesterday may not be representative of what we can do today. That's why we like it. We decided to empty out all projects and pick only a few featured ones which better represent what we're able to do today with modern best practices and content management systems. In pairing down the projects to a handful, we didn't want to lose the fact that we've worked with a breadth of organizations over the years. To help with this, we've created a list of clients for the sidebar on our new Work page. Now, we can showcase our best work and showcase the various businesses we've worked with in the past as well.
Mobile Focus
Mobile isn't the future. Mobile is now. The site was built using a responsive design this time. What that means is that the layout responds to the size of the browser. On desktops, you see the site in all its wide glory. But when you have a smaller window (think mobile devices), the layout adapts that accomodate. The navigation shrinks and moves down, the right column moves underneath the main column, and fonts size appropriately. What we like about the responsive approach is that it doesn't depend on detecting what specific device you're on, but adapts based on the size you're working with. This is much more future-proof than device detection routes. We also like that it doesn't require a completely different "mobile" site in order to work. What you see on smaller screen sizes is the exact same site you see on your desktop or laptop - the syling is just adapted. We think it's sweet and we hope you like it too.
Smarter Numbers
Google Analytics has always provided us page views and related statistics, but we wanted to know how people interact with elements on pages. Google fortunately released Event Tracking, which we've put to good use. Now we'll know how our big homepage feature is used, how our Project Planner download is used, as well as social media button clicks and sharing link clicks. We're really looking to learning how visitors interact with the elements on each page along with page views. It will help us to continue improving.
In Summary
Overall, we're pleased with how our redesign turned out and we hope you are too. We'll get more specific with certain aspects of the redesign in future posts. If you have any feedback, please let us know in the comments below.
Comments
Branding..Portfolio Cleaning. Got it. Now I need to get to work as well! Awesome thoughts on all this. My site isn’t doing a great job at representing me anymore either. The carpenter’s house is always the one falling apart, eh? Miss seeing you guys at important meetings. Hope I can make it to your blog conference. Sounds great!
February 06, 2012
Jim Appleby
Hi Jeremy:
The kid you spoke with a couple of years back, Austin Payne, now has his BBQ Sauce bottled and needs to get on the web. I have told him to contact you but he is only 18 years old, so you’ll probably have to contact him! He still has the “pie in the sky” attitude about his business, which is great, but way ahead of where his focus should be today. For four years I have been mentoring him and I contacted his local news paper and suggested they do an article on him. They did and he has now sold 100 cases of sauce. I think 100 is the correct quantity. Last week I told him to get himself a website and I assumed he would call you. However, he called someone else and they have promised him he would have “www.austinsbbqsauce.com” and that is impossible because it is already registered. I have immediately told him to cancel doing business with them and to contact you.
Contact Austin Payne 336-755-3996 (his mom and dad’s #)
Good luck,
Jim
January 22, 2012