Squarespace Design Tips & Best Practices
Squarespace offers anyone the ability to design their own website without needing coding knowledge. However, if you’re not familiar with the platform, it is very easy to run into a snag and make you very frustrated. That is why we put together a list of design tips and best practices to follow if you are looking to design your next website in Squarespace.
Picking The Right Template For Your Brand
Squarespace offers an assortment of templates aimed at small businesses, artists, graphic designers, nonprofits, and more. The key to a successful site is to choose the template that fits your exact needs. For example, if you are a freelance website designer, you might want to pick a portfolio-themed template to better showcase your work. To see all of the types of templates Squarespace has, check out the full list here.
PRO TIP: Don’t get too caught up on how all of the content is laid out in the demos, as that can be changed. However, if you want your website to be more banner/image focused, that is where choosing the right template comes into play.
Be Mindful Of Your Branding
One of the best Squarespace design tips I can offer is to ensure that your website has a cohesive look, especially if you are a designer or a company that cares about their branding. Keep your website clean by avoiding using too many fonts, picture sizes, or colors. Focus on one to two font faces, and a few key colors to keep your branding harmonized. Remember, if you’re not innately creative, keep it simple! The more complex designs you attempt as a non-designer, the greater your chances will be of creating a sloppy design.
Here’s a simple website I just designed for Momentum CPA. They already had a great logo to work with, but in designing the website, I made sure that the fonts and color scheme were complimentary throughout the whole website, so that it flowed nicely and evenly.
High-Quality Images Reign Supreme
I cannot stress this enough. The better quality imagery that you have, the better your website will look. Makes sense, right? Content is king and queen here, just like anywhere else. I have had experience designing numerous websites for previous clients where they have had little to no images. Fortunately, that is where stock photos can come in. Stock photos can be expensive, but there are plenty of affordable options on the market. Pexels is a free destination for image sourcing, and Twenty20 offers authentic-looking photos for as little as $50/each.
Most of the Squarespace templates are heavily banner-focused, which means that these images are blown up to scale on desktop. One of the best Squarespace design tips is to make sure that your banner image works properly on desktop, tablet, and mobile (home to an increasing share of your traffic!).
Here’s how to make sure your site is optimized for all formats:
Step 1: When editing your website, click on the middle drop-down button located on any page that you are currently editing.
Step 2: Three options will pop up. Click on each one to make sure that your design fits properly on mobile, tablet, and desktop views.
Focus On The Small Details
One way to instantly set your Squarespace website apart from others is by uploading a Favicon image. For those that don’t know what a Favicon is, it is the image that appears next to your website’s name in the web browser tab.
It’s quite easy to get rid of the black box that currently sits beside your name, here’s how to do it. In the main menu, click on Design, then Logo & Title. Under the Browser Icon (Favicon) section, upload a .png file with a transparent background (transparent images always look best). Please note that favicons don’t appear very large on the tab, so stick to something simple and small. Even just by adding even a small detail like a favicon, your site will appear more custom and professional.
Continue The Conversation
You are driving people to your site, and making design choices to keep them around. The next step is to capture their email so you can continue the conversation after they leave your site. One new function that Squarespace just rolled out to all of their users is the ability to create a popup to alert that can be used to share a promotion or drive email signups.
If you aren’t already collecting emails, you are missing out on a huge audience, and it is very easy to design and implement a pop-up function on Squarespace. Here’s how.
Step 1: Go into your settings on your web building portal.
Step 2: Click on Marketing under the “Website” section.
Step 3: Click on Promotional Pop-up.
Step 4: Design the pop-up to look how you want it to and change out the text.
Note: This is still in Beta, so some of the functionality is still getting worked out, but most, if not all of what you need, is already done.Take your template to the next level
Take your template to the next level
Since Squarespace is a template-based program, there are often limitations in terms of design and functionality that you might want to get past. Some of these limitations might involve adding jQuery, HTML, and CSS to the backend. Squarespace doesn’t recommend adding any custom coding to their templates, and if anything goes wrong while trying to code your website, they won’t offer any support or solutions.
With that in mind, if you’re looking to customize your page and do not have a background in web design, this is where the good people at Brad Good comes in. We are not a design agency, we are not a marketing firm, we are implementation experts. We have created a niche in the Squarespace market to help individuals and small business with their Squarespace websites. There is no request too small and our hourly rate is $95/hr. Want to learn more? Get started here.
With that said, if you still want to research and add some code to your website, the internet offers many good sources of help. Luckily, there is a large Squarespace community comprised of talented developers who provide answers to many common questions on their forum, called Squarespace Answers.
The Completed Project
The last tip we’d like to leave you with is that once you have a final draft of your website, share it with people who you trust in your network that can review it and provide constructive feedback. It’s always best to have a couple pairs of eyes on it who might be able to catch something that you missed. Once that is done, congrats your new website is done!