Squarespace site inspiration: Cathys Tools

May 2018: Cathy did a complete redesign of her site proving once again she knows what she's doing! Still, I'm keeping this post with the breakdown of her old site as inspiration for you!

Do you ever wonder why a certain website looks so freaking awesome?

Do you ever wonder what is that thing that makes it feel so unique, so bold (or minimal!), or so eye-catching?

Do you ever wonder why you can't help but to love a website design?

I know I do.

That's why today I thought it would be fun to breakdown a site that is so different from everything else out there, because it truly deserves a shoutout.


I want to share with you Catherina Schürmann's website, Cathys Tools.

I heard about her and her site through an email she sent me. She bought one of my plugins and was having some trouble accessing the code, and after that was resolved she emailed me back saying she LOVED the way it turned out and sent me the link to see it.

And oh my... I fell in love with her entire site!!



First of all, her homepage is completely out of the norm, with no background image and high contrast between her font and button color, and second... her graphics!!

Those grungy/whimsical letters and GORGEOUS blog post thumbnails are just fantastic!

A great way to create a unique looking homepage hero area


Next, we have the right-side navigation that jumps to the different sections of her homepage. That style of nav is native to the Brine family template, but it's the first time I've seen anybody use it that way! It works amazingly with her pure white background.

I'm usually not a fan of sidebars with ads because they tend to look very clutter and clunky, however, Catherina managed to set up hers beautifully, flowing perfectly with the rest of her homepage content.

Great example of a fake sidebar in Squarespace that works


Further down the page, we find her "AKTUELLES IM BLOG" section (which Google tells me translates to "NEWS IN THE BLOG") where she has those beautiful blog thumbnails I mentioned earlier. 

By the way, if you hover over that section you'll see a really neat effect that animates the image while the blog post title pops up – that's my summary block double effect plugin! #noshame.

Squarespace summary block with a plugin that gives it a great hover mode effect


And scrolling down even more, you get to her opt in section, where she added a lovely graphic with some parallax effect as the background for her sign up form.

This proves that you can still benefit from this cool effect – on templates that offer that option – without having to go full width!

Great use of parallax effect on Squarespace index section without using full width



The rest of her site is basically divided into the different categories of her blog page, plus an about and contact page.

All of these pages go straight to the point showcasing her blog post thumbnails, and complement the homepage design beautifully by maintaining the bold text and bringing in the corresponding graphic.

An example of bold Squarespace inner pages design


On a personal note, I'm super excited for the Squarespace category btw... I think I might learn German just to understand what tips she gives, ha!


Now, inside her blog posts, she keeps up the awesomeness!

She breaks up the standard stacked style (like mine) by creating columns in some parts of her content, playing up with her bold brand fonts, and using whitespace boldly in between whatever Frage's is.

Beautiful example on how to create columns inside a Squarespace blog post


(Question, Frage means question... I just looked it up... ok, moving on!)


So, why is it so awesome?

Overall, her site is an amazing example on how you can step outside a regular design, make it awesome, and still use Squarespace.

Here's a recap of all the things that make it so eye-catching:

  • Bold use of whitespace, which comes from:

    • Constricting the size of the website content.
      In the Brine family template you can do this by going into the Style Editor and under Site, in the Design option select Constrained width. This will allow you to set the background color of the border and the limiting width.

    • Making the background and border of the site one solid color.

    • Avoiding full-width background images.

    • Adding more space than normal in between sections of content (be careful with this as you might affect the readability of your content).

  • Big bold fonts used sparingly, only for H1s.

  • Beautiful on-brand graphics, simple yet eye-catching.

  • Great use of unusual navigation.
    In the Brine family template you can set it up by going into your Style Editor and under Index: Navigation selecting as style Expanding Horizontal Lines. That will bring up a bunch of options for you to style your new nav!

  • No fear of breaking her content in columns.

  • Great choice of a simple yet awesome plugin – of course I was going to mention it again!

And there you have it! These are the main reasons why Cathy Tools design is so awesome.


Until next time,