Narrative Design

Helping a creative agency bring its new visual identity to life

Client

Narrative Design

Expertise

Animation
Brand Strategy
Digital Design

Sector

Consultancy

Year

2021

A re-brand focused on geometry

Narrative is a creative agency for charity and cause-driven brands which had recently updated its visual identity. I was asked to bring the new identity to life through their website with an emphasis on storytelling and animation.

Looking to Bauhaus and Constructivism’s use of geometric elements
Image: Bauhaus Kooperation

The new suite of colours and geometric shapes for Narrative’s visual identity
Image: Narrative Design

Consumers expect brands to be purpose-driven, not just profit-driven
Image: Pixabay

Narrative specialises in working with charities
Image: Pexels

Balancing colour, shape, text and photography

The new identity included a suite of bold, vibrant colours and geometric shapes, meaning that there was a wide variety of possible combinations. One of the keys to success would be to balance the use of different elements in a way that was lively without being overwhelming.

A layered approach

I began the design process by experimenting with multiple layers to see which combinations might work best. Shapes were used as masks for photography, with an offset drop shadow effect that gave the image an added dimension and colour.

Creating a sense of movement

Wanting to implement animation in a way that would be meaningful for Narrative, I also looked to storytelling for inspiration here. The Narrative logo is designed to unscramble when the page is loaded, making use of their new shapes whilst reflecting their focus on crafting with words and images.

I also used one of the triangular shapes as a wayfinding element throughout the site – it rotates when viewed to point users in the direction of the next section below.

The building blocks of storytelling

The responsive design is based on the idea that stories are made up of many different building blocks to form a bigger picture. An offset masonry-like grid structure allows content to flow from one block to another, with ample space in between.

Templates for easy updating and maintenance

As part of the project, I also created editable templates for individual case studies and blog posts that could be adapted for different projects and content. These comprised various blocks such as 3 image columns and pull-out quotes that could be duplicated or removed as needed.