Our Website Redesign
A few weeks ago we launched a new version of pebblecode.com. Now that it’s been in the wild for a while we thought it was time for a blog post explaining what we did and why we did it.
So in no particular order here are a few thoughts on the new design.
The first thing you may notice when comparing the new design to the previous one is that there’s a lot less copy. One of the stated aims of the redesign was to simplify the site and make it an easier/quicker read. Re-writing all the copy was a big part of this.
We got professional copywriter John McGarvey in to help us with this. We’ve worked with John before and frankly we couldn’t recommend him highly enough. He took our ideas and condensed them into tight direct copy.
Another facet of the simplification of the site was the visual design. This was really an evolution of what we already had as a design. Here there was a very strong focus on bold typography and simple shapes. Textures were used sparingly and there’s not a gradient to be found in the entire site!
The site’s also based on a very rigid grid system. Using a flexible grid on the horizontal and fixed baseline on the vertical. We think this gives the site a very solid feel and gives an impression of professionalism and reliability.
Of course the pebble {code} colours are back! The six colors we use are an integral part of our identity as is the way we implement them. As with the old site many elements are assigned random colors on each page load. Thanks to Tak for the JS wizardry that makes this all work.
The colors and their implementation aren’t just eye candy. They also say something about us as a company. The colors show our slightly more playful side. The variety of colour represents the variety here at pebble {code}, both in the people who work here and in the work we do. We know this sounds a little “art-farty” but it has the merit of being entirely true.
Whilst the previous design did work on multiple devices it wasn’t really optimised in any way to be multi platform. The new design was engineered to be responsive from the ground up. This manifested itself in a few ways, but mainly through media-queries. One thing we might have done differently here is focused more on a mobile first workflow. We’ll be experimenting with this idea in the future.
One little aside here is that if you’re a front end dev and you’ve not already checked out Adobe Shadow you’re missing out. It’s still in early development but we found it very useful in developing the site on iPhone, iPad and desktop all at the same time.
We’re using Compass to handle the CSS for pebblecode.com. As mentioned earlier we’re using quite a rigid grid structure on the site and Compass really helps with this. We set variables for the width of columns, gutters, and baseline height so we can change one value in the SCSS and the whole layout of the site will shift. The horizontal grid system works by applying grid classes to the markup. In the future we’re going to experiment with using mixins and includes to keep the grid in SCSS and get rid of the non semantic classes in our markup.
The horizontal grid system was ripped and then tweaked from Twitter bootstrap 2. So a big shout out to the super smart guys at Twitter behind that framework.
That’s most of the main things we did covered. With the new design we tried hard to focus on attention to detail with some subtle little extras. A great example of this is the “our people” page. The list of people is reordered randomly on page load. This was a great idea that really goes to show our company culture. The directors don’t automatically get displayed first and it’s a pretty accurate picture of the way we do things here at pebble {code}. It’s a very democratic office and there really isn’t any kind of top dog mentality.
We’d love to hear any feedback. Have a look at the source on Github and feel free to ask us any design or technical questions by email.
Overall we’re really happy with the new design - we hope you enjoy using it half as much as we enjoyed making it.
