How to Get Started with Your Squarespace Website Design

Half of winning in life is just getting started. Don’t worry about being perfect, just plant the seed. This is especially important in designing your Squarespace site. It seems daunting at first. The platform offers a lot of options, so let me show you how to get started.

First off, be careful not to use the template design too closely if you are using a template or theme. You can start with a blank template. I start with a basic template but typically will delete the preset pages right away. You can delete any page and it will stay in the trash can for 30 days like the way your Gmail operates.

OK, so start by naming your site. You can change this later, but just enter your business name or personal brand name. Then go into Settings and navigate to Domains and change your built-in domain to something other that the random text Squarespace assigns you. This doesn’t affect your site design, but it helps you take ownership of your site right off the bat. 

Then change the fonts and colors

Google “Squarespace font pairings” to get some ideas from experts. Decide whether your brand is bold and modern or classic and elegant, or find some happy medium. As always, use your gut. Whatever you gravitate towards, go for it. You can always change it later. Remember that. Just flow into whatever you choose. Font and color settings are in the Design section of the site and found in the Style editor. Simply find your fonts by clicking on Header and Paragraph font sections and find your font and let it change to the new font you select. You can change the weight (how thick a font is) later or right there and then as you can see the changes in font immediately on Squarespace. That’s the beauty of a WYSIWYG (what you see is what you get) CMS (content management system).

For the colors, if you have brand colors already you can apply those. If you’ve worked with a professional brand designer, you will have the exact color codes from him or her to apply. I use the HEX color reference because it’s a simpler format like #fffffff.

If you don’t have a color palette already established, first decide what base color you want to use for your site and business. I tend to like a deep dark color juxtaposed with a very light gray or off-white. Some brands use bold bright colors throughout their materials, but I'm more of a traditionalist when it comes to color choices. Again it’s easy to change, so, again, go with your gut.

Need inspiration? Do a Google Image search for “(color description such as sky blue) color palette” and the results will show your primary color along with complementary colors. Then I use a tool that can identify the HEX codes for the colors. Simple search “color picker from image” and upload your Google Image search result into the color identifier program. It’s amazing how many free or inexpensive tools you find with a Google search. Copy and paste the HEX codes into the color controls in Squarespace.

Then work on your homepage

Your homepage is the most important page of your website and the effort you put into it should reflect that. If you don’t know where to start, just go with a formula that can be reshaped later. If I don’t have a vision immediately, I’ll go for a tried-and-true banner (full width) image with a tagline or motto that immediately draws in (or turns off) the visitor. I have a whole article on that topic here. Yes, I did also write “turns off” the visitor because you want your immediate impression to either strongly pull in or turn off the site visitor. Go strong with what your brand represents. Don’t be somewhere in the middle.

Then go into an introduction to your brand. A simple image with copy next to it works. Simply add a Text Block and then an Image Block to your Section. Add your introduction with a Header font title and Paragraph font description. Under that section, use another Banner image section and apply copy that reinforces the reason why someone should use your product or service. 

Not sure what your copy will be? Don’t worry, get your structure down first. It even helps to see the spatial relationship between words and images to help shape how you are going to present your brand messaging. I’ve always been an advocate for web design not just being how a site looks, but how it looks and feels as a brand communications tool. Remember, your website is just a tool in your arsenal of tools for your business. It is a very important tool, one that sells and provides information about your company.

Getting organized (or just getting started)

For some I may have skipped a step. Some people prefer to get everything organized before even starting a Squarespace website design. It really depends on your personality. It’s helpful to plan out what images will go on what page and what sections within those pages. But in the spirit of just getting started, my advice to just start plugging in images with your gut is very effective. It bears repeating: You can always change it later.

I can understate the value of just getting started as seeing progress inspires further development. Everyone is different on how they work, but most of us are guilty of procrastination and making excuses for progress.

This clarity on just getting started was revealed to me when a client said he wanted to start a podcast on renewable energy. He had a friend who is an expert on podcast production. The client invited me to be his co-host. One day on a rainy cold day we drove from Jersey City to Columbia University to meet the expert and he told us simply to tape the first episode. We had no notes, no preparation. We felt awkward but we did it. Gradually the podcast took shape and today it is one of the top-ranked podcasts in its category and has opened up opportunities for the client’s business. So get started. Be careful when your reading and preparation becomes procrastination.

The Detail

Make sure to go to the Design section and add a favicon (the little image that sits at the top left-hand side of your browser window) and a social sharing image (the photo or image that appears when you share links to your site on social media). If you don’t replace this image the default Squarespace icon will show. Favicon images are tiny, so make sure yours are just 16 pixels widths. Google “favicon generator” and find a tool to help or you can size down a square or circular version of our logo or other brand signifier.

Remove the language of “Built by Squarespace” unless you want to promote this like I do. And make sure that any dummy (stand-in) text is removed. 

Swap your own social media links in for the default Squarespace social links in Settings > Social Media. 

Prepare your images

If you have a set of photos ready to go, make sure they are big enough first (over 3000 pixel widths is a good guideline for landscape orientation photos) and then you can compress them so that they load faster without losing the image quality on even the largest retina screens. To simplify, make sure they are not too small. Images under 1000 pixels in their dimensions won’t work well. On a Mac you can check the file size of an image by clicking on it and viewing its dimensions. 

To compress a file, Google “photo size compressor.” I found a program I like called jpgmini, in which you simply upload your images and it spits out an optimized for web use version for you within minutes or less.

If you don’t have a custom professional photo shoot with amazing output, then you can go the stock image route. Just make sure you get a great photo of yourself for the About page at least if you are the face of the brand. Again, in the spirit of “just start” use stock images if you need to. I use Adobe Stock combined with the free service Unsplash if I need to use stock. It’s a cost-effective and time-effective way to get it done, which is the point of this post.

To get organized, I like to place my images in folders labeled by what page they will go on. Or just have your selections ready and use your gut, which is a theme that runs throughout this just get started process.

Get it in. Then refine.

Overthinking is the enemy of progress. Get going. If you need design inspiration, look at websites you really like. If you need to take some time and gain inspiration from a family of sites, then by all means take that time to gather what you like about other sites that you can apply to yours. Don’t copy anything exactly (a good rule in life), but the fact is any website will have common structures that are universally tried and true. For example, the classic full width banner image followed by a smaller image and text section and then another full-width banner image works in most instances for a business. 

To enact this, your best/favorite image goes first. Place your tagline on top of it. Perhaps add a call to action (button or text) here too. Then choose a smaller image. Add a block and upload the image. Place a text block next to it. If you don’t have the copy ready yet, just add in dummy text or placeholder text. You can Google “dummy text generator” to copy and paste some placeholder text in that slot. Why do this? So you can see the spatial relationship between the image and text areas, so when you have finished (or draft) copy ready you can see what length looks good too

Then add a new section underneath by choosing Images in the section guide and adding another full-width banner that complements the elements above. This simple ratio of wide, medium, and wide content creates a visual interest for visitors that says “Here’s the main point of my site, then here are some details about that main point, and then there’s an image that supports both of those points above.”

Once you have all the elements in place, then make adjustments. If you are learning Fluid Engine, the newest editor in Squarespace, it’s easy to create a custom look that caters to your overall brand look and feel. What I love about Fluid Engine is that in case your copy is too long or short, you can micro adjust the accompanying image to fit in line with the copy. We’ll go over more advanced techniques with overlapping text and images in a different article because the focus here is about getting started.

Easy wins add up.

Then go in and start slapping down content on the subpages. Not sure what subpages you need yet, start with About, Services and Contact. You can build around those main pages. If Services isn’t what you do, replace it with another category that goes into the nitty gritty of what you can offer the visitor.

For these pages, you can choose one of the preset designs Squarespace suggests. My only guideline here is to choose a simpler design as you can always add more elements later. I personally prefer simpler designs with rich content that doesn’t need too much fanciness to get the job done. At the end of the day, if you want someone to buy something from you, simplicity and clarity rule. If you need help with your messaging I highly recommend Donald Miller’s “Storybrand” methodology.

Slap in content as much as possible

Here is where you need to push yourself to get a true sense of accomplishment. Fill in those details. Use an old LinkedIn bio. Keep the Contact page simple with just a contact form (maybe Google map) and your social media links.

At this point you should have a semblance of what will be your final product. Your website should have a framework that will push you towards completion. Now if you’ve done what I’ve recommended you must feel great. Your new website is heading towards completion. And it’s because you didn’t overthink it. You just did something.