Helen Kirkum: Squarespace Website Design

 
 

I’m so excited to showcase this project! Let me introduce my wonderful client, Helen…

Helen founded Helen Kirkum Studio Limited in 2019, and is a London-based artist and designer whose work has garnered international acclaim.

She is widely considered a pioneer of the hacked and deconstructed aesthetic within the sneaker industry, and in the vanguard of the sustainable footwear movement.

Helen offers made to order sneakers, socks, and workshops.

Here’s a quick snippet about her company…

At Helen Kirkum Studio, we celebrate the processes of wearing and making in our products. Utilising recycled and dead stock materials, we create bespoke sneakers artistically crafted for an individual experience. We collaborate with brands worldwide to bring our playful perspective and sustainable message to their products. We also love to spread our signature design through making ethos in talks and workshops, promoting the value of spontaneous and tactile creativity.

Needless to say, Helen is doing incredible work in this world!

Helen’s mission is to shift attitudes and raise awareness around over-consumption and newness and to create a community around the brand driven by meaningful consumption as a way to express playful individuality, spontaneous and conscious creativity and process driven craft.

When Helen approached me, she had a website that wasn’t quite working for her anymore. It was created back in 2016 when she graduated, and now that she has a number of projects under her belt, she wanted it to better reflect her offerings.

These were some of the issues…

  • The recently added shop needed a facelift and more professional integration and look

  • She wanted to add downloadable workshops to the site, but wasn’t sure how

  • The made to order page was confusing and unclear

  • All of her requests for work were going to one email, and she wanted to streamline it with individuals forms

  • Her values, ideals and story were not very visible

When it came to the website design itself, Helen struggled most with the time and the knowledge of the software and how to organize the pages effectively. As a designer herself, she has a strong awareness of design and her aesthetic as well as a clear voice for the brand, but she found it difficult to compartmentalize it and create flowing content.

Let’s dive in deeper!


Step 1: Color palette and fonts


Helen already had a color palette and some fun graphic elements she wanted incorporated on the website.

She pulled the colors from collecting recycled sneakers, which had a mix of worn or faded feel to them. She wanted to use the dark grey color for some headings so that the pages weren’t so stark with black text on a white background.

She used the 'cutting mat green' for workshops and buttons on her email newsletter, so I made a note to include that color for many of the buttons.

Here is her color palette…

 
Helen Kirkum Color Palette.jpg
 

For fonts, Helen wanted to keep the typewriter-style font, called Sneak. We decided to pair it with a heavy weight minimal font - Monserrat.


Step 2: Website Design


On the questionnaire I provide to all my clients to get a better understanding of what they want, Helen communicated that she wanted her website to feel:

  • Creative

  • Engaging

  • Artistic

  • Playful

  • Unique

She wanted a minimal vibe with playful touches. She also wanted some hand written graphics, masking tape and post-its to give the studio a “sketchbooky” feeling.

From her old website, Helen wanted to keep a few aspects like…

  • The overall minimal and arty aesthetic

  • White background

  • The paragraph font

  • Hover effects on images

Some features that were important to her were:

  • An announcement bar to showcase promotions/important notes

  • Pop up to sign up for the newsletter

  • A newsletter opt-in page

Helen wanted some fun animation and designs. Here are some effects that I added to her website using CSS:

  • Images that blur on hover

  • Brushstrokes that appear behind navigation pages on hover

  • Buttons that rotate on hover

  • Vertical text

  • Vertical tabs

  • Rotating marquee

  • Jump-to anchor links

  • 2 columns of text for specific image block layouts

I also included parallax and animations on a few of the image blocks as you scroll down a page, which are built-in features of Squarespace.

It was most important to Helen that the website was clear, engaging and structured in a way that lead site visitors to learn more about how they can work with her and take action.

Time for some before and after photos!

Below are before and after screenshots of the home, made to order and products pages.


Here is her homepage…

Squarespace website design for artist - home page before and after

Here is her made to order page…

Squarespace website design for artist - made to order page before and after .jpg

Here is her products page…

Squarespace website design for artist - products page before and after .jpg

Step 3: Website launch


From her old website to her new one, we also did some streamlining…

  • Her ecommerce was moved to Squarespace

  • She closed down her Mailchimp account and started using Squarespace Email Campaigns

  • We moved her hosting and domain to Squarespace from another platform

  • We added her workshops to the Squarespace Members Area

This is why I love Squarespace - it’s basically an all-in-one platform! With these new changes and website ready to go live, it was time for the launch call and website handoff!

I jumped on a Zoom call with Helen, where I:

  • transferred website ownership to her

  • connected and transferred the domain over to the new website

  • connected Google Analytics/Google Search Console

  • walked through simple tweaks and changes she can make in the future

I handed over all of the design files, Canva links, and gave her access to my client library of video tutorials.


View the live website!

 

Are you looking for a website overhaul like Helen?

I’d love to connect and learn more about your business! Click the link below to view my packages and set up a free consultation!

Previous
Previous

What is an Alternative Logo and Why Should You Have One?

Next
Next

11 Key Features to Put on the Homepage of Your Website