Easy To Follow Squarespace Design Tips & Best Practices5 min read
As an entrepreneur, freelancer, or small business owner, having access access to high-quality programs on the internet is essential—especially when undertaking something as involved as developing a website.
Thanks to content management systems like Squarespace, you don’t need to know how to code or design in order to make a website from scratch. Serving as a built-in virtual developer, Squarespace takes the coding aspect out of website building and provides hacks and tools to make your pages more customizable.
If you’re looking to create your next website with Squarespace, check out the design tips below.
Picking your template
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.
Creating a cohesive look-and-feel
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 (Hint: 41% of freelancers said personal branding and marketing is a “critical” function of their business, per AND CO’s Slash Workers report).
Keep your website clean by avoiding using too many fonts, picture sizes, or colors. Center on a 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.
Use high-quality imagery
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.#Squarespace tip: the better quality imagery that you have, the better your website will look. Click To Tweet
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.
Capture your audience
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 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
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, you might want to enlist the help of a fellow freelancer or consultant to take care of the heavy lifting. There are people out there, myself included, who specialize in this type of support specific to Squarespace and designers can range from $50 to $100/hour.
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.
There are several inexpensive plugins that you can use to enhance your site. My go-to would have to be Square Studio. They have some of the best plugins on the market and are fairly affordable. Plus, the best part is they offer a step-by-step guide on how to implement the code.
The final product
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. This is especially valuable if you’ve been working on the website solo.
What tips and tricks would you add? Let us know in the comments below.