A new look for Offroadcode

· BY ·

This entry was written more than 2 years ago and the information may be out of date

We're probably not alone when we hold our hands up and say we've long neglected our own site in favour of finishing work for our clients but we had to do something about that.

The old site never really did much and since it was knocked together a couple of years back, we've grown to a team of 8 and done some exciting work we wanted to write a bit more about and create some case studies to share. 

The time had come to put the old site, colour scheme and logo in the bin and start again using our normal design and build process.

Content first design

AKA: The bit where you spend weeks screaming that you need content from everyone.

Our aim was still to keep a streamlined site that focuses on two main areas - our work and the experience we bring to projects.

For smaller sites like ours, I like to put the page structure into Trello in the form of cards for each page and assign certain cards to relevant members of the team with checklists or questions to complete in order to gather content together.

This generally works well for smaller sites and doesn't get too complicated or introduce too many tools or apps to the process. Sometimes it's hard enough remembering where you've saved a pattern, document, job task or design asset there are so many different tools out there. 

A new look and feel

Our design process (once we've gathered what content we can) is to start putting this content into rough layouts. Much as I like the idea of pattern libraries, I find that in the early stages, "sketching" a layout idea out as a Photoshop visual allows the team or a client to get a feel for overall direction without over-committing 

Trying some new visual styles - Feedback: "OK but a bit too much like Ikea"

I had a feel for the content so sketching some layouts in a notebook and mocking them up in Photoshop before posting them up in the redesign Slack channel meant the team could be involved from the start. The yellow and blue colour scheme was a bit overwhelming. 

A significantly refined colour palette and more focus on case studies and the current look and feel started developing

Using Dribbble for feedback and second opinions has been invaluable to me over the last few projects. It's not always well thought of by some designers but I find that if you post a specific shot with the appropriate context and ask a specific question, then you can get valuable feedback from people. 

Related viewing: View the Dribbble redesign project

The need for a new logo

Our logo has always been a bit of a crudely drawn png of some mountains. I'm not proud of that and it's the reason quite often (see the visual above) I opt for simple text for the company name in designs. That's not really good enough these days and it was time to refresh the logo too.

Those who know us will know that we're keen on outdoor sports, I run and Pete mountain bikes. The name Offroadcode was coined many years ago to represent our love of the outdoors and what we do for our clients. The new logo update rather than just the old mountains, is intended to look like slanted documents/files to show this.  

Initial sketches
Pages of tweaks quickly sketched in the notebook
Offroadcode logo iterations
Inspired by Draplin's process, copy/paste/iterate lots and lots!

As someone who isn't a logo designer, the process of creating just this simple update on our old logo was fun and if you're looking for some tips on designing a logo/mark, check out the incredible Aaron Draplin's logo challenge video for some inspiration.

Uses elsewhere
Social media, supplier pages, content feeds and more - a logo needs to be in many places these days

Now it's a lot easier for us to maintain a consistent presence on and offline.

Building the website

When we build sites, we have a good balance between the skills of the team which works for us. James is able to spec out features in design / prototypes but with a good grasp of what's possible when it comes to building it in Umbraco. On the flip side, the rest of the team have a strong grounding in responsive design so it makes for fewer how the hell are we going to build this?!" moments. 

That said, the aim for the site this time was refinement and expansion of content to include more case studies and detail and to build more of it in modular components we could use on an page with no (or minimal) alterations - for example the thumbnails for work and team members. 

Library pages

We've had good success creating library pages for the components on a project. We've not full atomic [or insert latest design system] yet but building out simple library pages with HTML and CSS has helped create an easy to use deliverable that can be converted into Umbraco components. 

Related viewing: The HTML design library for this website

It falls short of being a full styleguide at the moment simply because that's not been created yet although our Sass is documented and split into reasonably easy to follow component parts and that's something we'll work on next - particularly as it became clear just trying to refresh our logo just how much consistent use guidelines are across the website and elsewhere like Google Docs where we keep client notes, quotes, specs and more. 

What's the goal?

Hopefully this has been useful in explaining a little of our process and how we would apply it not just to our own site but to client projects as well. It's not set in stone, it's not the same on every project and we're happy with that but for now - this works. For us and the projects we've launched.

Ultimately we want to share case studies, our outlook and our code because the type of work we do now is what we want more of. 

Thanks for visiting and reading, if you've got any feedback on the new site (good or bad) please drop us a line

Love this? Give it a tweet!

Hi, I'm James

Hi, I'm James

How can we help?

From Umbraco development (we won an award for that 👍) to design and development or giving you some advice, whether technical or if that hat really goes with those shoes - drop us a line below and we'll be in touch.