Responses by Holographik.
Background: The Traffic Productions website is the digital face of production company Traffic Productions’s studios. It features an overview of its projects, introduces the public to its brand and the services it provides, and offers an official place to get in touch.
Design core: Our core approach is the same for every project we do, as we have found it to deliver promising results. So, we took the same approach to creating the Traffic Productions website. It is based on extensive visual research and design, which enables us to create a unique end product. Before even starting with the design phase, we create categorized moodboards that hone in our vision and help us communicate the design direction with our client.
The main prominent design element is simultaneously the detail that we’re most proud of: the “snake” element, as we like to call it internally. It is the winding line that represents city streets—in other words, traffic. When we came up with it at first, we didn’t even realize how versatile of an element it would prove to be. It was used in animations, and it became the main graphical element that separates the website’s various sections.
Other than that, we aimed to give each section and element on the page the space it deserved so it stands out on its own, which was, again, achieved with the snake element.
Challenges: Our motion and design teams had the same primary challenge when presenting the visual identity of Traffic Productions: it had to be unique and represent the brand in a fitting manner. The client was open to the idea of having that connection to actual traffic, so we went for a raw graphical approach, which turned out functional and aesthetically pleasing at the same time. The motion team aimed for a clean look, which they achieved with subtle interactive animations.
Time constraints: Because we have a system in place that has proven to work for us time and time again, we didn’t really feel a lot of pressure from the deadline. Our approach to researching, moodboarding and design strategy kept us focused and confident throughout the whole project.
Navigation structure: The site’s navigation is straightforward, so we decided not to unnecessarily complicate things. The navigation presents the four main functions of the website: work, services, about and contact. We added our signature touch by giving the logo on the left-hand side a hover animation, all in line with the other brand elements.
Technology: For the back end, we used the CMS Craft with GraphQL. For the front end, we used multiple technologies—the most important ones were Vercel’s Next.js (React) and Typescript.
We also always try to utilize our other teams in all our projects, so for this one, our design, motion and development teams collaborated to liven up the website with custom animations. Our design team would prepare the visuals in Figma, then our motion team would animate them in After Effects, and finally, our development team would write the simple animations in CSS with styled-components and Tailwind CSS, and the more complex ones were created using the Greensock library.