Contrast Creative

Brief

Tracks and Layers specialise in projects that combine elements from short form edits, motion graphics, visual effects, 3D modelling and animation. Working with renowned clients such as the BBC and ITV, he wanted the website to demonstrate their specialist ability in broadcast graphics.

Another key driver for the new website was to broaden their customer base. Tracks and Layers requested the site act as a library of their projects. Mike wanted to be able to direct potential clients towards specific projects on the site in an easily accessible way. The menu had to be easy to navigate and relatively self explanatory for any new customers visiting the website.

Dark grey, deep purple and turquoise are the primary branding colours of Tracks and Layers. We wanted to reflect these brand colours throughout the design. Having a dark tone across all of the web pages really showcased the videos of their work. It was a given that the site had to be visually engaging and the project videos had to be front and centre and play across all possible devices.

Process

The initial stage of any web design for us is to get the site map locked down. This gives our Designers a clear idea of all of the content and helps them develop the visitor journey. Wireframes were created and approved alongside the site map. These wireframes indicate what elements appear on each page and once approved, the design, use of colours and fonts can be worked on.

We chose fonts which fitted with Tracks and Layers current branding, Accumin Pro and Europa were selected. These fonts are clear and legible on such a dark background while suiting the brand. Pops of colour are introduced in the form of parallax blocks. These blocks represent the ‘tracks’ and ‘layers’ used in the creation of their work.

A website which moves, for a motion design company

Videos across the site are primarily full width, to ensure they have the most space on any page. Tags are used to categorise each project. This gives Tracks and Layers the ability to send a specific URL to any potential client easily demonstrating types of works or points of reference. We also developed a video menu bar, where any full width video will continue playing, once scrolled past.

The whole site represents the nature of our clients work. It shows fun and moveable elements while promoting their professionalism via easy to navigate menus and detailed projects.

Click here to see their website in full.