De Verbeelding

Web Development

Mockups of the final home and project page designs

I designed and developer a new website for De Verbeelding, an audiovisual production studio in Leiden, The Netherlands. Their clients include the TU Delft and the Royal Library.

The original identity is anitquated and visibly old, yet changing the logo and color scheme was not an option. The main challenge therefore, was to create a recognizeable website in lieu with the existing branding, yet also creating an interface by today’s standards. Using material design as a starting point, I experimented with color, layout and patterns. In the end, a more conventional design proved to be the most effective.

Photograph of wireframes in a sketchbook

Screenshot of wireframes mockups in a digital program

The logo colors are too primary and saturated to be used as visual cues, therefore the typography would play the main role in creating emphasis. I chose to go with GT Cinetype, a typeface that mimics old subtitling machines. The connection to cinema is obvious, yet I also chose it for its geometrical appearance, which is needed to compliment the blocky logo.

Design assets

The client’s wish was to open the site with a running movie, which proved challenging not only to UX but performance. Lowering the opacity by a quarter created the right compromise between readability and immersiveness. A jumbotron video also takes a massive hit on performance, and required high compression to run close to page load.

Mockups of the final home and project page designs

Mockup of the final mobile design

It is important for the client to infrequently showcase recent work, hence I decided to use Gatsby.js with a GraphCMS backend. Using a static site generator implies compile times before the updated website is visible, yet this is accepteable with infrequent additions to the content. Forthermore, the speed and SEO capabilites, along with Gatsby’s developer experience, made it a good fit for the project.

Furthermore, I put a lot of emphasis into SEO (structured data, social media previews…), and accessibility, in order to create the widest user reach possible for the website.

The components are animationed made with React spring, and use styled components for styling. All website elements are self containing components, and can eaily be reused for new use cases, should the client decide to want to add new features later along the line.

The site can be viewed at www.verbeelding.tv.