Development

.CSS and all sorts of other punctuation that computers read. As a front-end designer I can take those pretty ideas and write them into visuals where computers read them, fast and accurately.

new zealand tour guide website running on a laptop

NZ Tour Guide

For a major rebuild of the one page New Zealand Tour Guide site I focused on speed and built a snappy little site with the basics of HTML, CSS, and JS producing a site that loads dramatically faster and consumes far fewer resources than what was there before.

The choice to build without a Content Management Systeme came from hosting NZTG as a WordPress site for the past few years and make very few if any changes so without the burden any dependencies I looked around to the options and chose to compile the code down with WebPack but in a way that’s not particularly tied to it so if the time does come to change the site again there is very little that would have to be swapped out to use any other system and most additions can simply be built atop what we have.

Design

I wanted to keep the page very simple with blocks of text running down the center of the page meaning that no matter what design the information would be very readable and the styling consistent.

Where I did bring in some attitude was with the angles on the top and bottom of images, the boxes containing the services and the testimonials. This allowed me to break up traditional layout and also keep the image heights down, especially on a large screen full width images have the habit of taking up more height than I like and constraining them with a maximum height can produce a sliver of an image looking out of place. Once the images had the angle the boxes needed to match and although the technique is relatively different between the two elements they match nicely.

Development

When scrolling down the page the images slightly parallax and the padding grows as elements scroll in and out of the screen, this was done with the goal of the site to be as fast as possible in mind, to accomplish this I built with a nested Intersection Observer. I purposefully didn’t include a polyfill for browsers that don’t support IO as tho they will be seeing a less dynamic site I made the decision that without a modern browser a frivolous slide to the images could be missed.

Explore NZ Tour Guide
laptop mockup of a website for mons royale

Mons Royale Product Page Pitch

Over a quiet weekend I knocked up a quick pitch piece of a product page for Mons Royale, I’ve always been a big fan of their pieces and have worked with them on media projects over the years but never in as much of a design role.

I took what Mons is already doing with product and graphic design and just pushed it to a web design, using the strong colors and angles, being a quick weekend piece the site works as a mockup but isn’t truly function, there’s no hover states, only enough header tags for the page to load, javascript only powers the webpack build, there are problems with the design at certain sizes or adaptions so it would need significat work to be production ready.

The design is layers on layers of CSS grid and I’m really looking forward to the implementation of sub-grid as it comes down the pipeline, almost all of the color is either background filled grids of SVG shapes, including the promo piece (green background) halfway down which involved layering and building shapes in a way I hadn’t pushed as far before so that’s something I want to continue explore and create some dynamic and responsive designs that are super performant.

https://mons.rileybathurst.com

(more…)
Explore Mons Royale Product Page Pitch
tahoe web shop running on a macbook

Tahoe Web Shop

I enjoy freelancing but sometimes it comes with limitations and one of those I was running into was how to promote myself online, with such a spread out portfolio there are days I struggle to explain what I do to someone on the street so I wanted to put up a front that was simple even if it doesn’t cover half of what I can do.

Tahoe Web Shop

Explore Tahoe Web Shop
pacrav physiotherapy website on a laptop

Pacrav

I have been working with Matthew at Pacrav as he has been setting up his new physiotherapy business in Reno, Nevada. We have been working on branding and website needs.

The logo for Pacrav is based around the idea of movement, flexibility and strength, we created a unique shape that has an inclusion of the double “A” with a custom word mark and can be used with the tag line as well as in individual parts.

Pacrav has been strongly branded in orange as a bright and lively color which can be used for branding elects or used as a background with white elements over it.

The site with all its branding and ideas can be found at pacrav.com aside from the regular website needs of a business in this day and age but we have taken that further streamlining the consultation forms, since these have been setup Matt has found it has saved time for patients as well as employees.

The site was built on a foundation framework with a wordpress Content Management System, with these together we we’re able to create a site that was affordable but also preforms strongly in many environments, the site is fast and responsive across devices with modern and documented code for easy updates and additions.

Explore Pacrav

Canterbury Homekill

As a custom butchery service Canterbury Homekill is a local service for farmers and hunters. The service requires a detailed form for each order, by moving this online the butchers have more time for work and a lot less time in admin. I have been helping CHK build up the online system and adapt as customers and orders have changed over the years.

As a customer uses the service they are able to create a profile for looking back on orders and get in touch with the butchers.

In addition to the website we have also worked on rebranding Canterbury Homekill with a new logo and color scheme as well as newspaper advertisements for marketing.

Explore Canterbury Homekill
priest sheetmetal website developed by Riley Bathurst on a macbook

Priest

Working with Priest Sheetmetal has had me spanning from graphic design to photography and branding then back again, as a local staple in an older industry the Priests are in their third generation of running the company and showing no signs of slowing down so they are embracing the modern design style and modern methods of reaching customers. The logo is a sheetmetal press which may get lost to those outside of the industry but they are ok with that as it still creates an interesting shape. The branding then rolls into the slab serif typeface to create a sturdy foundation as a reflection of the metal products they build. From the strong foundation of the icon, slab serif typography and a strong blue we have been able to build up into marketing materials from business cards to a website that is quick and to the point.

Explore Priest
vintage bikes beside a wall

The Vintage Peddler

As a local tourism operator the Vintage Peddler were looking to be a little different, bringing back a number of old bikes and letting tourists blend into the local scenery and slide on by like a local. Bikes have always been one of my favorite ways of to explore a new city so when the opportunity came along to design and shoot for the project it was a really cool one to work on.

Explore The Vintage Peddler
yeboi website

Yeboi Clothing

As a return of an 80’s aesthetic, snowboarding went back to big and bright colors including a friends company producing tall hoodies as well as a few other pieces. Yeboi was riding the wave of cheap Facebook advertising with a direct to consumer approach, the project lasted a couple of years while I worked on design, web, photography and the snowboarding videos that were a key piece of the marketing for Yeboi.

Explore Yeboi Clothing