4 Surprising Design Secrets That Will Level Up Your Squarespace Website
Back when you built your Squarespace website for your business, you may recall hearing advice like: “look at your website through the eyes of your clients.” This advice combines my two loves: web design and psychology (yep, I’m a nerd). When I was getting my masters degree in counseling, all we talked about was psychology, of course. But do you know where else they talk about psychology for hours on end?
Marketing.
Getting into the minds of your ideal clients is a big ol’ factor when it comes to attracting said clients — that’s where you start when you brand, write copy and choose photos.
But did you know that how you design your site can be just as important as what you say on your site? It’s true! Even the small details in the design can have an unconscious psychological impact on the peeps who are scrolling through your website — ultimately leading to whether or not they decide to invest in your business.
Those are the secrets I’m going to share with you today — those small design details that most folks overlook but that actually make a BIG difference (I seriously build all of my client’s site with these elements in mind at all times)! Yep, these little details can give your website that subtle edge, making your site appealing to browse, easy to navigate and pulling in your clients…perhaps without them even realizing why 😉
By the way, you can sign up for a free trial of Squarespace here, and I also snagged you a lil’ deal so use code PARTNER10 for 10% off your first year of Squarespace!
FACE YOUR PICTURES TOWARD YOUR TEXT
If you’ve got people in any of your photos, then this tip is for you!
Have you ever experienced the phenomenon where you see a couple of people looking in a certain direction, and you find yourself looking in that same direction, even for a few moments, just to see what they’re looking at? This is a psychological phenomenon called gaze following, backed up by research, which basically says that “we humans have a strong tendency to follow the gaze of another human being” (Psychology Today).
So how does this play into web design? Glad you asked! Take a quick peek at the following image:
Beloved client Forthright Advising :)
Now check out this one:
Did you spot the difference? Even more so, did you get a different “vibe” from the first image vs. the second? Chances are you got a “better feel” from the second one (and if not, you’ve escaped the status quo, huzzah! Or you’re a serial killer, idk).
More importantly, most people are more likely to read the text in the second image; because (you guessed it) the person in the photo is facing the text!
Yes, it’s subtle…but it makes a difference. Facing your photos AWAY from the text unconsciously draws people away from your text…and off of your site. Facing your photos towards your text creates a higher probability that people are going to stay focused on your website and your content. The person in the photo is looking at it/turned towards it, so — unconsciously — they will too.
Again, it’s subtle, but it’s the little things that give you an edge and keep people on your site longer!
MINIMIZE YOU TEXT WIDTH
What the text on your website (i.e. your copy) says is super important — your messaging is how you draw your clients in, of course. However, the readability of your text is JUST as important, especially when it comes to design. After all, if folks have a tough time simply reading your content, chances are they won’t try for long.
One of the key components in optimizing readability is your line length; in other words, how long or wide your text is across the screen.
As you can see in my blogs, my text doesn’t reach all the way from one side of the screen to the other (unless you’re reading on a phone — more on that below!). That’s because I restrict the size of my Text Blocks to maintain an easy reading experience for my visitors.
According to UX Planet, “If a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm. If a line of text is too long, the user’s eye will have a hard time focusing on the text.”
They suggest having ~60 characters (i.e. letters & symbols) per line for desktop views and ~30-40 characters for mobile devices.*
So when you’re laying out your website during the design process, try to keep those numbers in mind…and size down those Text Blocks!
*Squarespace optimizes your mobile settings for all of their sites, which means your line length is automatically resized to that number without you having to lift a finger! (Or worse, do any fancy coding. Yet another Squarespace perk.)
DON’T USE MORE THAN 2-3 FONTS
Choosing fonts for your website is a big part of branding and choosing them is a pretty personal endeavor. Depending on how good you are at making decisions, here’s the good/bad news: you don’t have to pick that many!
If you’ve got a Squarespace website, you already know that four fonts is your limit (not counting your Quote Block or any fancy headings you add with CSS — ooh, loopholes!). Even so, keeping those four fonts within the same 1 -2 font families can do your website a world of good — in more ways than one.
Fonts are definitely fun, and lord knows there’s about 837924 of them out there. But if all 837924 were on your site (heck, if even 5 or 6 of them were), your site would look super unprofessional super quickly. The uniformity of fonts helps with that “readability” we just talked about — when there are too many fonts in one place, they tend to fight for attention, so-to-speak, which makes focusing on and reading your content more difficult.
Check out International Adventure Guide’s website below:
This section on their home page has a lot of good info — and only TWO different fonts (both in the sans-serif family). You can actually create variety within the exact same font: the headers are all various forms & sizes of Futura — some all uppercase, some normal case; some bolded, some not. This creates the illusion of various fonts while actually keeping everything uniform, easy to read and well-branded.
It’s much easier to read than, say, this:
Image courtesy of UX Planet
Kinda funny to read now, but if an entire website looked like that? Oy, the headache you’d get from trying to read it (spoiler alert: you probably wouldn’t try for very long…and neither would anyone else).
BREAK UP SECTIONS ON LONG SCROLLING PAGES
Different designers have different philosophies on how much scrolling visitors should be able to do on your site, and I fall into the “don’t be afraid to have long pages” camp!
People are SO used to scrolling these days: Instagram, Pinterest, Facebook and other social media feeds have trained us to keep on scrollin’, so it’s certainly not taboo to have pages of info on your site that go on for a while.
There ARE right and wrong ways to go about this when it comes to designing these long pages, though. And my number one designer tip for leveling up those lengthy guys?:
Break up those sections.
On Squarespace, the best way to do this is by building your long pages with an Index (which is a collection of pages stacked on top of one another). This sets you up for success from the start because Indexes make it much easier to change backgrounds and rearrange content. Speaking of which, there are a variety of ways you can break up content on a long page:
Use background images for certain sections
Use colored backgrounds for certain sections
Alternate your layout (i.e. if you have two columns — like an Image Block next to a Text Block — make the section below it one centered column; alternately, if one section is centered, break the section below it into two or three columns; continue to alternate!)
Use the Line block above and below certain content to make it look “sectioned off”
Use text boxes
…and these are just a few ideas! Some of them (like using background images, alternating your layout and using line blocks) can be done simply by using Squarespace’s tools, while others (like colored backgrounds and text boxes) require a bit of CSS. But you can just choose one or two to start — that’s all you really need!
For example:
This centered section of my Squarespace Design Services page (note the colored section background) is followed directly by…
…my “let’s talk details” section! Which is split up into three columns and maintains my site’s white background, providing contrast with the section above it.
Breaking up sections in any of the above ways simply makes it easier to read content and makes your content appear more digestible. Think about it: if you see one big, long block of text scrolling down a page, it may seem like information overload and you’re less likely to read it.
However, if you’re scrolling and there are small amounts of text next to images followed by a bigger chunk of text that is highlighted with a different background color, you’d feel more like you could easily read the small amounts of text in each section…and before you know it, you’ve read each section and made it to the bottom of what actually was a pretty long page. Voila!
