Tom Sears
A portrait of a man with a black blazer over his head

Squarespace Brand

Introduction

The Squarespace brand can be seen throughout all touchpoints of the organization; from marketing, advertising and social and also through to the CMS product itself.

As we are predominantly a digital company, our output a brand can have a strong emphasis on motion as the medium we are able to roll out to is able to show moving visuals.

The challenge was to roll out this concept throughout all of our various teams and touchpoints in a cohesive way that worked for all stakeholders while maintaining strong brand recognition and unique design.

Brand Guidelines

Brand Guidelines

Our brand guidelines are at the core of all our teams outputs. We met with every team in the org from product, to social, to campaigns and the dotcom team to figure out how to create guidelines that would take into accound the needs of each team and allow them to stay within the lines of the brand and start to evolve the look and feel themselves

Motion within Brand

As mentioned previously, a very important part of the brand is motion. We essentially wanted to brand moving elements and the way objects move. The idea was relatively simple in that we take a square, and the space it occupies as it is moved through a 3D axis. This alowed us to end up with four different types of motion that we use through the brand, and that we can play with as components to use as we rebild our brand.

Credits

Chief Creative Officer
David Lee
Agency
DIA
Design & Creative Direction
Ness Higson
Tom Sears
Design & Production
Tom Sears
Marvin Schwaibold
Lionel Taurus
Motion Assets
Lionel Taurus
Project Management
Shayna Friedman
Charlie Geyer
Katie Flynn

Component Library

Once we completed our Brand Guidelines, we then decided to create some visual component libraries for a select number of teams within the Figma product. This project essentially took a design systems approach to visual design to allow each team to work more efficiently and also maintain a strong brand aesthetic. The main approach was that if we could allow teams to complete 80% of their work in 20% of the time, then each team would have more time to work on evolving and innovating within their teams. The videos below show real examples of creating breakpoints in Squarespace.com using the 'Frontsite component library' and also a social campaign using our 'Social component library'.

Credits

Design Director
Tom Sears
Design & Production
Tom Sears
Marvin Schwaibold
Florence Libbrecht
Lionel Taurus
Motion Assets
Lionel Taurus
Project Management
Charlie Geyer