7 Designer Hacks To Make Your Website Look Less DIY

Jan 26

Seven designer hacks to make your website look less DIY

As a Squarespace designer, I’ve seen my fair share of websites that fall into various categories of the good, the bad, and the ugly. While it’s totally possible to design a beautiful Squarespace website on your own, the truth is there are a few things that immediately give away a DIY website.

That’s why in this quick post, I want to share with you my six design hacks to make your website look less DIY and more attractive.

How To Make Your Website Look More Attractive

Here are 6 quick design hacks you can implement on your website today to make it look more professional and less DIY.

1. Add A Custom Favicon

A favicon is that small image that appears in the corner of the browser window. By default, every Squarespace website has the cube as the favicon which, if we’re being honest, is not the most sexiest thing to look at.

Luckily, it’s pretty easy to add your own favicon. For starters, look to your logo and branding — do you have a custom brand icon? If the answer is yes, then you can use that as a favicon.

If the answer is no, you’ll need to create one first. The easiest way to do this is to head on over to Canva and start off with a Logo design template. Then, choose the Text tool and type the first letter of your business name.

Make it really big so it fills the entire canvas and adjust the color to your liking. Then, download the design as PNG or JPG and head on over to your Squarespace website.

For Squarespace 7.0, go to Settings > Logo And Title > Browser icon and upload it there.

For Squarespace 7.1, go to Settings > Style > Browser Icon and upload your new shiny favicon.

If you prefer video, you can watch the tutorial below:

2. Stick To Two Fonts

Using two fonts will create a nice visual hierarchy for your text. However, for this two work, you need to choose two fonts that provide enough contrast, otherwise they’ll blend with one another.

The easiest way to do this is to choose a serif font (like Lora or Playfair Display) and pair it with a sans serif font (like Lato, Raleway or Montserrat). You can also experiment with font weight such as black, normal, semi bold, etc.

Then, create some rules on how your fonts will be used. Think beyond the headings and body text. You also need to use a font for your navigation, buttons, and meta text like categories and publish date.

A good way to create hierarchy, for example, is this:

Heading 1 & 3 — Raleway Black
Heading 2 — Playfair Display Normal
Body text — Raleway Regular
Navigation, buttons, and meta — Raleway Bold

3. Create Custom Graphics

Custom graphics like icons, colored backgrounds, pattern backgrounds or collage backgrounds are a great way to add personality to your website and make it stand out from the crowd.

There’s plenty of websites where you can get quality design resources that you can use to spice up your website. Once you have a selection of different design elements, you can use a program like Canva to create custom graphics for your website.

4. Play With The Spacer Block

Squarespace websites are built on a 12-grid system. This means that you can use the spacer block to create interesting grid layouts.

First, start by adding 3 or 4 spacer blocks to your page. Add them one under the other. Then, grab one spacer block and start dragging it next to another spacer block. Then repeat the process to create 2, 3, or 4 columns.

Once you have your columns, drag the handle on one of the blocks to resize them and make the column bigger or smaller.

5. Remove Powered By Squarespace

No matter which template you choose, you’ll inevitably run into the Powered By Squarespace block in your footer. That’s a surefire sign of a DIY website and it’s easily fixed. All you have to do is edit your footer and delete that block.

Then, replace it with something more important like a newsletter optin or links to your social media profiles.

6. Enable SSL

One of the cool things about Squarespace is that it provides free SSL certificates for all website plans. In a nutshell, this makes all of your website content secure, it protects your visitors, clients’ and customer’s sensitive information (like their email address and credit card info when they’re making a purchase on your site), and it prevents hackers from stealing that information and abusing it.

On top of that, Google takes SSL pretty seriously and displays a nasty warning about your site not being secure without it. This can seem quite scary to your website visitors and may prevent them from visiting your site. In other words, enabling the SSL will also help improve your SEO in the long run!

Thankfully, enabling SSL on your Squarespace website is super easy. Go to Settings and then scroll all the way down to the Advanced section. There, click on SSL and make sure that SSL is set to enabled and Secure (Preferred) is selected as well.

7. Add White Space

White space is a design terms that refers to empty space around elements on a webpage. It doesn’t have to be white at all, just to be clear. White space gives the elements on your website space to breathe which instantly elevates your design and makes your site look more professional. On top of that, it makes your website easier to read and helps draw attention to the most important content on that page.

Final Thoughts

And that’s a wrap. Taking care of these 6 tips will help your website look more professional and attractive and a lot less DIY.

And if you’re on the lookout for a new website, be sure to grab my free DIY website roadmap. It’s a step-by-step checklist that walks you through creating a website that looks good and actually converts.