3 Thirds Imaging

My Role

  • Website design
  • Front-end code
  • Wordpress development
3 Thirds were bought up in 2015, so this website is no longer live.

3 thirds are a young and flourishing print & installation studio who service large contracts across London with companies such as GAP and Banana Republic.

First things first

Running a print studio is hard work. The guys at 3 thirds are always flat out and had no time to even begin thinking about the site's content. So I arranged times to pop in after work hours to chat about the details of what they do and get a good first hand feel for their business

This allowed me to group different aspects of their work into distinct services, each with a title and logo. The result being that a new client visiting the site can quickly understand what is on offer. It was agreed that the site should also serve to educate clients in technical terms, so each service was given it's own page with detailed information and tips on things like how to prepare artwork for print.

Worth a thousand words

It was clear that a good portfolio page would also be crucial. The guys add lots of new images all the time so we made a way to filter images by type of work or by client. This kept things focused and also served to further define the types of service on offer. I used a combination of jQuery and CSS transitions to animate the filtering process smoothly.

The small details

menu_animation
The filter menu on a small screen width

There are quite a few image filters in the portfolio section and on a small screen that means you can't see the effect of pressing a button. To get around this I introduced a folding animation on the filter section each time you click a button. This gives immediate feedback that something has happened, and also reduces the amount of scrolling needed to get to content. The arrow also changes direction and pulsates to indicate how to bring the menu back.

High print quality

3 thirds' business is all about delivering high quality graphics. To live up to the integrity of their print work it was going to be vital to display crisp visuals. It was clear the way to do this was to use technologies that give high definition results to retina displays while keeping the page load size as lean and quick as possible. This was achieved through extensive use of CSS for page rendering and layout. Also icon-fonts and optimized SVGs were used to keep logos crisp at high resolutions.