Vector animation in new web design for Green Structural Engineering

Architects. Interior designers. Antique dealers. Picture framers. Furniture designers. Even plumbers. If there’s a business that does something that’s to do with a house, there’s a good chance we’ve designed a logo, a website, a site-board, a van, a magazine advert or a shopfront for it. So we were thrilled to be approached by GSE, a west London firm of structural engineers we’d long been aware of via a series of our local clients to work on their new website. Finding the right visual look for a firm with complex technical expertise is something that is at once visual and intangible. Much of GSE’s work is mathematical so from the start, I was keen to approach our visuals for the project in a linear, virtual landscape – and so proposed using vector animation in new web design for the firm.

The structural

Green Structural Engineering has had a distinctive, elegant logo for many years, the simplicity of which I had long admired. To mark 15 years in business, GSE were keen to update their brand but without significantly changing things. Our new version of it refreshes the typography of the icon, using the typeface Forma DJR, a reimagining of the classic Italian typeface by David Jonathan Ross and Roger Black. The redesign adapts the way the three letters work, defining the negative space in-between the G and E in a smoother, cleaner way, so the letters flow into each other.

The name of the company then sits on the right, with the height of the logo echoed within the x-height of the lower case letters, allowing the ‘G of Green’ to pop up and the descenders of the word Engineering to dangle below. In essence, nothing has changed, except everything about it, as David Jonathan Ross says on his website when comparing his font to Helvetica, a form of words that I rather like.

The civil

Creating visuals for GSE meant thinking about the work they’d done in both the abstract and the finished build. Our idea was to show the mix of calculation and real building, creating a rendering in the space between the two states. To achieve this we began thinking of the spatial planes of the buildings and how they relate to one another, using images of the finished buildings to almost work back to the engineering stage.

The end result was  series of custom graphic, architectural drawings created in-house for this project. We created a series of these drawings as vectors, focussing on each of the core sectors within which GSE work. These included private housing, educational buildings, retail and leisure spaces and healthcare facilities. Having drawn up each of these, we then defined a subtle colour palette. The primary GSE logo was in tones of green, refining the colours that they had used previously; then our drawings each apply a dusty, complimentary tonal set for each section of the site.

From our first conversation with Geoff and his team, we had pitched the idea of making their work move, imagining the ways people travel through these spaces. We’ve long been advocates of vector animation in new web design and this felt like the perfect application of this technology. The end result is a true blend of the functional and the decorative to evoke the work of one of our most technically savvy clients.

The forensic

This project feels like a fascinating cross between our work for interiors specialists and the property and real estate sector. As I mentioned, it’s a deeply satisfying continuation of our particular specialism of ‘things to do with houses’ that has given me so much joy over the years – particularly designing for firms and around Chelsea Harbour. It gives us a niche in this industry and working for a firm of structural engineers, particularly one that interacts with several of our other clients, feels like completing a missing piece of the puzzle, professionally.

While many other pages of the GSE website use drawings and movement, outside the core sector portfolio, the rest of the site follows a more conventional creative pathway, covering a focus on core skills and the team. In addition, a busy news section also includes case studies of new project work, which are then featured on the relevant pages across the site including the all-important expertise section.

As I reflect on this piece of work, it’s feels like an application of our interest in visual branding, modern typography and vector animation in new web design reached a real cross-section with the GSE project. It has delivered a beautiful and striking website for sure, but also a wider project that tightly refines what this particular company does and how it looks. We’re very much hoping to do some more work for the firm, perhaps some print, to see site hoardings with the new GSE identity pop up around west London in the coming years and for the site to richly enhance the excellent work the company does.

For technical businesses, vector animation in new web design is the way forward

If you’re interested in an approach to a website which requires a technical approach – such as engineering, AI or architecture, vector animation is an excellent choice as media within your website. We have been working on expanding our capabilities and skillset in this area over the last few years and would be interested in discussing how best to deploy this tech with you. Whatever industry you work in, we can help you achieve a fresh approach online.

Call us on 020 7351 4083 or email direct to tell us all about it.

Discover the Green Structural Engineering project

Our portfolio page on the project

Our branding and web design work for interior design practices

Visit the GSE website