Compass

The hardest thing was having our first child in-between the whole thing, between that and finally letting go of polishing and actually launching the site, come what may! :) My favourite part of the site is the tongue in cheek icons in the footer. This is the sort of thing you don't get to do often with client site designs.

Compass came about after I used a new video tool to comment on a friends website that his agency was working on. His positive feedback really helped plant the idea for the business, so I then set to work creating the site. I'd already started work on the Pathfinder.agency design and saw Compass as a little sister business originally.

Both sites were always about embracing this idea of the great outdoors as a theme and work with the brand names, but early designs with lots of outdoor images felt passé.

Instead I shifted to a minimal design that I purposefully reigned in but tried to add small flourishes to, such as the + on each of the HR tags. I wanted visitors focus to be on the illustrations and copy instead of the overall layout.

I used Affinity Designer for the early mockups and layout and then started to consider the illustration style. I typically outsource illustration work and I came across a lovely outdoor icon set by the font designer Pratama Yudha. He used this nice thin, thick line combination with nicely flowing shapes. They were perfect and fitted nicely to the content I'd started to outline.

I did contact him about doing more freelance work, but by the time he got back to me a few weeks later, I'd started to adapt and create the other illustrations I needed on my own.

In addition line based illustrations lend themselves to being converted into SVG images, but it can be difficult to work with illustrators that don't always understand the technical issues in creating these.

I found Affinity Designer's SVG exports still quite bloaty, so I spent a lot of time optimising each file so that they are as tiny as possible.

For this task I used https://petercollingridge.appspot.com/svg-optimiser/ because it does a nice job of exporting CSS focused SVG files. I then made these even smaller by creating a global set of SVG styles in the main CSS file instead of each SVG to trim even more.

There are three animations on the site at the moment, all created with the help of an app called Hype 3 on Mac. This enabled more advanced SVG animations, such as the swinging on the padlock and chop of the axe blade. You can also click on the compass arrow and watch it swirl around thanks to Hype's javascript.

I did consider also adding CSS3 transitions for other areas of the site, but after the fancy opening animation I wanted the site to focus on the content and be easy to read as you scrolled.

I also used the vivus.js script to add some pop to the opening animation, which is a lovely effect for SVG files and works alongside the animations created in Hype nicely. I wanted the site to load fast so built it on the flat file CMS, Grav. It has some really nice features for handling the scripts and assets. From a code perspective, building Compass has been a labour of love and taught me a great deal. I definitely spent way too much time on setting up a gulp build pipeline, but found it unreliable, so I switched to a mix of Codekit to handle the SASS code and a bit of Gulp to clean up the output.

Code was done with Atom and while most of the SCSS was hand coded,I used a few bits of Thoughtbot's Bourbon and Bitters to provide some framework to the SCSS and integrated the lovely Lostgrid for the grid layout. The latter allowed me to reduce class calls in the HTML code, instead using the DOM to reach in and style elements where possible.

Navigation uses no JS and CSS only using some tricks. As ever, Codrops and lots other sites like yours have been an inspiration along the way.