Why is it so awesome? A look into Cathys Tools' website

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 I decided to start a series on it! Decided as in just-thought-about-it-a-minute-ago-without-planning, decided.

In any case, this should be fun!

On each post, we'll be breaking down the design elements that make a design work and I'll give you tips on how you can implement them on your site.

 

Today 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!!

 

Homepage

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

 

Blog

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.

 

I hope you enjoyed this breakdown, and if you have or know of a website that you'd like me to feature, let me know!

 

Until next time,

B.


FOLLOW ME FOR MORE!