Elections for public office in many countries can have global consequences—the USA, for example, the European Union, and China. No, wait. But elections in the UK have a distinctly British quirkiness. Here, when an election is held for a major office like Prime Minister, there’s often someone standing there who looks out of place.

Although it’s not purely a British phenomenon, the UK has a long tradition of perennial and sometimes novelty parliamentary candidates. In last year’s general election, one candidate stood head and shoulders above the others, largely down to his dustbin-shaped helmet. He’s Count Binface, the intergalactic space warrior from planet Sigma 9 who campaigned against our previous Prime Minister, Rishi Soon Axed.

During a series of articles about political party websites, I wrote about my suggestions for a new Count Binface website. Well, you can imagine my delight and surprise when news arrived from Sigma 9 that Count Binface liked my designs. A few days later, Count Binface called and asked if I could turn my design ideas into his campaign website for this general election. I couldn’t refuse.

Squarespace is (obviously) the platform of choice for intergalactic space warriors. So, less than a week before Count Binface was due to announce his manifesto, the challenge was to develop my designs into a new website using Squarespace. I was a little concerned that I couldn’t deliver all my design details using Squarespace, but I did, and here’s how it got done.

Although Figma dominates the UX design field, Sketch is my favourite all-around design tool. I used it to create design concepts and production assets for the new Count Binface website.

Organic-shaped visual elements

Page layout is a crucial element in visual storytelling. Still, far too many websites use a generic grid with twelve even-width columns, resulting in an endless sea of carbon-copy website designs.

Count Binface has chosen Squarespace with its out-of-box 24-column even-ratio grid. My challenge was making a design that utilised the built-in layout without the result looking like a generic template. To accomplish this, I designed organic-shaped visual elements and used rounded frames for images and video to mask the grid structure.

Count Binface is, let’s (bin)face it, an unconventional character, so I wanted someone’s first impression of his website to be as unusual. This meant avoiding the full-width banner images which have invaded the web like an alien species. Instead, I created a portrait orientation graphic banner containing text and an animated Count Binface image. Alongside it is his introduction, which he updates regularly with new messages.

I used custom CSS to apply a background image to soften the hard division between the home page banner and the panel below.

As Squarespace doesn’t allow precise positioning of background images, the custom CSS enabled me to control its position, repeat, and size by targeting the banner’s unique ID:

To reduce the number of sharp corners throughout the design and turn Count Binface’s embedded videos into retro-styled TV screens, I applied Custom Featured Images with rounded shapes to each of the video blocks.

Adding custom font files

The type design of Count Binface’s new website is a big part of its personality. I chose Wildwords, a comic lettering font from Comic Book Fonts, and Count Binface commanded his team on Sigma 9 to purchase a license. Using a font from outside Squarespace isn‘t tricky.

1) Navigate to Custom CSS and expand the Custom Files dropdown.

2) Upload font files in a web-font format like woff2.

3) Add this snippet of CSS for as many fonts as you’re using.

• For each, replace FONT-NAME with the specific font name you’ll refer to elsewhere in your CSS. eg: wild-woods-regular

• Delete the URL placeholder, keep the insertion point between the marks, open Custom Files again, and press the font name.

• Squarespace will insert the absolute path to your font file now stored in its CDN.

• Now refer to the font-family name wherever you need the custom font.

Using SVG with Squarespace

For as long as I can remember, I’ve implemented graphics in my designs using Scalable Vector Graphics (SVG) for their high performance, scalability, and sharpness, especially on high-resolution displays. From the abstract artwork on my Squarespace template store to the animated banner on my studio website. Squarespace doesn’t (yet) allow you to use SVG files in its image blocks, so for the graphic banner containing text and an animated Count Binface image, I used a code block to embed inline SVG code. My process includes:

• Designing SVG graphics using Sketch

• Optimising these graphics by reducing paths and points

• Exporting the SVG files

• Further optimising the files using Jake Archibald’s SVGOMG

Even after I uploaded my custom fonts to Squarespace, some aspects of the implementation—including the large block numerals on the Count Binface home page—couldn’t be achieved using the Squarespace UI. To gain precise control over their alignment and spacing, I created these elements as SVG files and embedded them into the design using code blocks.

Code blocks and Custom CSS are your best friends

Squarespace is a flexible and powerful platform, but I cannot overstate the importance of Code blocks and Custom CSS to my Squarespace development process. Having spent my career writing CSS and HTML, it’s much easier and faster for me to embed HTML and SVG into a code block and then style it using Custom CSS. Sometimes, it’s things most people notice, like that graphic banner. 

Most often it’s the small details which make such a big difference to a design. For example, the Count Binface website footer includes a rocket graphic that links his logo to his social media icons. 

The lines in this divider expand to fill any available space, which is an obvious application for CSS Flexible Box Layout (Flexbox.) So, I inserted a code block with HTML for the divider:

And use custom CSS to style it:

Conclusion

Count Binface didn’t defeat our former Prime Minister—Sir Keir Starmer did that—but he did come sixth with his highest tally of votes, meaning his campaign was a success. How much of that was due to his new Squarepace website isn’t known, but my sources on Sigma 9 tell me it was a lot. Whatever the truth is, I thoroughly enjoyed developing the new Count Binface with Squarepace and I hope it works well for him for thousands of years to come.

Andy Clarke

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.

Andy’s written several industry-leading books, including ‘Transcending CSS,’ ‘Hardboiled Web Design,’ and ‘Art Direction for the Web.’ He’s also worked with businesses of all sizes and industries to achieve their goals through design.

Visit Andy’s studio, Stuff & Nonsense, and check out his limited edition Premium templates for Squarespace.