8 Simple Ways To Make Your Squarespace Website Look More Professional

So you’ve started your website on Squarespace but it still looks like a homemade website, not something that looks professionally designed. You can’t figure out why. I’ll give you some tips that are fairly easy and don’t require any advanced knowledge or skills.

Change the font pairing: Even though you might like the stock font pairing that the Squarespace template gives you, choose your own. Click on Design > Style Settings > Fonts and choose new Header, Paragraph, Miscellaneous and Button fonts. What’s a good font pairing? That depends on your brand. Is your business more modern? Or is it more traditional? Bold sans serif fonts work well for more contemporary brands and it’s easy to use a classic font pairing for a more conservative industry. 

I’m a fan of using a sans serif font for headers and a serif font for body text. This is a strong combo if you value legibility and readability. Sans serif fonts combinations work well if there is less copy to read on your site and you want to emphasize punchy headlines. What is the difference you may ask: Sans serif fonts don’t have any line additions on the edges of the letters while serif fonts have lines that extend beyond the main body of the letters. That is a simple explanation.

How do you get ideas? Just Google “Squarespace font pairings” as a starting point. Lots of good suggestions from various web designers are available. Just have fun trying different combinations. My favorite serif font is Cinzel and my favorite sans serif font is Brandon Grotesque. Those are, for now, what I’m feeling, but this can change. I will often look at print magazines or catalogs for inspiration. Look at brands you like and get inspired.

Take your font size down one point at least: Most websites have font sizes that are too big. I understand you may feel it is harder for old people to read. I’m sorry (but not sorry) to tell you—let them squint then. I myself need reading glasses but I would never design a website where the fonts are too big. Or make some fonts intentionally huge. Be intentional in your design. That’s right, you are a designer because you decided to build your own website. Congratulations. I like what some might consider teeny tiny font sizes. I’ll quite often change the base font size from 16 points to 15 right off the bat.

Why is this important? Smaller fonts just look more elegant. Scale, in general, is what often separates good design from bad. Rules can be broken, but for the most part websites use font size settings that are too bulky and it makes your brand look cheap. If you can’t resist big font settings, I urge you to try big headlines juxtaposed with smaller body fonts. Either way, don’t be afraid to go down a point or two with your fonts. 

Crop your photos to the same dimensions: Sometimes you’ll have a layout such as a Services or Team page where there are several photos that should be uniform on a single page or section. Sometimes I will see sites where these are all different sizes and dimensions. This looks sloppy when it’s not intentional. The easiest way to rectify this is to crop all of these images to that same aspect ratio such as 1:1. Just click to edit one of your images, click on edit image, crop and choose one of the aspect ratio options that makes the most sense for your design. And they will all now line up and you have a clean page layout that looks professional.

If an image you are using is too small in file size dimensions, delete it for now until you get a replacement. If any of your team members has a headshot, for example, that is a tiny file size, tell that person they need to provide a new headshot. These days, with the quality of mobile phone cameras, it’s hard to find an excuse. It’s also great to have headshots that look similar in composition or at least quality.

Use enough space in each section: Many people tend to reduce the spacing in each section of their Squarespace site to the smallest setting. There is a time and place for cramming in information. But try to air out your content and give it enough room to breathe on the page. Spacing between sections helps visitors digest specific content better and it just makes the page easier to read and absorb. I like to use tight spacing within a section for a neater appearance, but outside of a section, such as an Image Block with Text (card design setting), I apply plenty of room around it.

Again, there are always exceptions to any rules, but be careful not the try to cram too much information into a small space. I do wish that Squarespace 7.1 allowed more height variance using Spacer Blocks for better fine tuning, but spacer blocks are super helpful as a tool to provide separation between elements.

Reduce the amount of copy on your Squarespace site: Don’t feel that your website has to be the be all and end all to your personal brand or business. For most businesses the goal is to get the prospect to contact them, sign up for a newsletter, take some type of action. Too much copy can prevent that action from happening. A lot can be explained in the next level of your interaction off of the website. For the most part, you don’t want users to spend a lot of time on your website reading about your policies or your academic credentials. You want them buying a product or service, right?

So make sure that every word counts. In the classic book “On Writing Well,” author William Zinser writes: “But the secret of good writing is to strip every sentence to its cleanest components. Every word that serves no function, every long word that could be a short word, every adverb that carries the same meaning that's already in the verb, every passive construction that leaves the reader unsure of who is doing what—these are the thousand and one adulterants that weaken the strength of a sentence. And they usually occur, ironically, in proportion to education and rank.”

Adjust the focal point of your banner images: Do you know what the focal point of an image is? And did you know you can adjust it? The focal point is the location of an image where you choose to be the central focus. I often will see websites with photos of people with heads cut off or just awkward orientations. For example if you have an image of a mountain that also shows a body of water underneath, more often than not, this type of image looks good when the visitor can see the details of the mountain and the ocean beneath. So go into your image editor, click on the image and you’ll see a small circle. Drag and drop that circle to approximately when the water meets the land. You will now see that the image sits differently within the frame. This is especially crucial for mobile view. If you don’t adjust the focal point the banner image on mobile may just show a part of the image that doesn’t convey the information you want to show. Don’t cut off faces!

Use simple dynamic elements: Some websites will feature a major animated sequence that may dazzle at first, but subsequent visits to the site cause the viewer to wish the sequence was not there unfolding slowly because they just want to get to the part of the site they need information from. I prefer to design websites that look great but value functionality first. Just adding a subtle bit of movement by using Squarespace 7.1’s sitewide animation options or an image effect such as tilting gives your site a but of movement and visual intrigue without slowing down the user experience. Being subtle is the key to being stylish in life. Do you think the person wearing loud brand name strewn outfits is classier than the person wearing a subtle non-brand emblazoned outfit made with quality materials? There are always exceptions and it depends on your personal style, but there are reasons why classic looks are defined as classics. Your website should follow the same principle. I design websites that look good today and will still look great in 20 years. Of course, I urge you to update your site when there is a relevant update, but try using very subtle visual effects. Just turning on and choosing one of the Sitewide Animation features in Squarespace is a good step. Go you your Site Styles section and click on Animation.

Use a color palette that matches your brand aesthetic: I find color inspiration everywhere. Having my iPhone ready to snap a photo is an important part of my life as a designer. I love the color schemes of Mini Coopers and the cream colorway with black roof really sings. I take shots of catalogs, screenshots of fashion spreads, whatever my gut says to me could be considered for use in a website design. I use a free online tool called Color Picker from Image, which allows you to upload an image and grab the exact HEX code for a color. You can copy and paste it directly into the style setting on your Squarespace website.

I like using a pop of a bright color against a more muted background to really call attention to specific areas of a site. Try different color HEX codes and play around with the manual adjusts to attain that ideal shade. I often find that suggested color palettes don’t have a light enough off-white color to use so I’ll lighten that element.

Attention to these details really adds up. Creating your own color palette or applying a font pairing that works for your brand is essential to make your Squarespace website look like one that has been created by a designer. Thankfully, the Squarespace templates are excellent guides and the web builder does provide a lot of useful page layout suggestions. Definitely use their suggestions as starting points, but don’t stick to them by the book.

There are lots of features that Squarespace offers that are underutilized resources such as Image Effects for banner images. You can find these effects when you click on Background on a Section and you scroll down to image effects. But the most important non-Squarepace, non-platform related factor in making your website standout is understanding your audience or audiences. What style would they like to see? Take a look at different popular mainstream brands and how different each of them are in their attempt to connect with their prospects. Are you a Nike or adidas person? How do you identify yourself and how does that relate to the brands you seek out?

Website building on Squarespace can be fun once you roll out up your sleeves and put in some time practicing. Relax and create. There is an Undo button at the top of the page and you always choose to Discard Changes before saving your work in case you feel you’ve completely messed up a page and want to start over.

For many beginners learning how to drag and drop blocks to the desired location can be challenging and frustrating at first. Once you get a feel for how the blocks align with each other, the feeling of manipulating their placement becomes more intuitive.

I challenge you to seek beauty in the world around you. Take a photo snap of anything that might inspire your website design or brand color scheme. Squarespace’s easy-to-use Style section is very malleable once you take time to get to know it.

To get help check out my video tutorials. They are intentionally short and narrow in scope to help you pick up Squarespace design skills one step at a time. What are you struggling with? Get in touch and I’ll do my best to make a video covering your issue.