A new look for Offroadcode
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
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.
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.
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.
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.
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.