8 Ways (plus more) to Make Your Squarespace Website Design Stand Out
So you’ve dove into Squarespace and figured out how to create a website that is serviceable, perhaps very close to the design of the template. It works, but you feel it lacks energy. Squarespace is a powerful tool and much of its capabilities are unlocked as it’s difficult to find all of its features within the toolkit.
I want to share some easy ways to spice up your site.
Animation: Under Design go to your Site Styles and click on Animations. The default is none, but you can try different ways to enact a site wide animation effect that will give a simple, not distracting, visual effect for visitors.
One big font within your Header font options: Sometimes a nice big bold font can help bring visual intrigue to certain sections of your Squarespace website. Try to contrast big and small elements. Use a large header font size sparingly, but don’t be afraid to experiment with it.
Smaller slideshow galleries: Add a Gallery Block and fill it with three or four images to provide a nice dynamic element to your site. Choose the Gallery setting to Slideshow and set it to autoplay and remove any other elements such as show thumbnails. You will have a clean image rotation. This is an ideal situation to move this Block to the foreground using your Fluid Engine options and have a static image behind it in a collage.
Speaking of collages: Fluid Engine allows you to easily place images and text on top of our behind other images. Try overlapping photos or color block images for a pro look.
One bright color in your palette: While I love deep blues and soft grays, when the occasion calls for it I will use one brighter accent color to make pages sing a bit more. This is dependent on your brand guidelines, but I’ve seen this contrast work very well. Try a black background with neon yellow accents. Google Image search for your base color with the world palette for ideas. Also grab ideas from print publications. Catalogs and magazines may not be as popular in our digital age, but I definitely enjoy borrowing ideas from them.
Backgrounds with textures: Instead of just using a solid block of color in your Section backgrounds, try adding an image with some texture. Check out Unsplash, the built-in free stock image service for Squarespace. You can search for a color and options of different renderings of that base color will appear in your search results.
Full bleed banner images that extend into your main navigation: A lot of design industry websites use a banner image at the top of the page to provide an immersive effect. Navigate to your Header editing options and choose Dynamic for the Style of your header. This allows the Background Image to bleed into the navigation bar. Typically I will adjust the Opacity of the image with dark background at just around 30 to 40 percent so that the top navigation items are visible. Use a heavier weight navigation font if need be and make sure the color settings of those elements are light for contrast against your background image. On pages without a background image, the header navigation will take on whatever color background you choose for the top of the page. One issue that you may face is using a light background when your logo is light, rendering it hard to see or invisible. I have a bit of color where you can upload the contrasting color version of your logo on those pages.
Scale down your fonts: Many of my clients ask me to increase the size of fonts throughout a site. I urge you to resist that temptation. I often hear that it is harder to read, but unless your fonts are tiny I assure you that it will be fine. With some exceptions (see Tip 2), smaller font sizes are more elegant and I’ll leave it at that.
These are just some ways to help spice up that site that you’ve been working on. I suggest Duplicating a Page (just in case you’re wondering I capitalize office Squarespace terms) and giving yourself the license to go crazy with experimenting with the page. I use an excellent no-code tool called Squarekicker which can provide a lot of customization options on your Squarespace site. I love using their Sticky Page feature that allows you to pin one Section of your site while another Section moves/scrolls.
Also check out your Background Image effect settings. My favorite is Parallax, which provides a subtle visual boost that allows the Background Image to remain static to a certain break point as the user scrolls down the page.
Don’t be afraid of long pages with lots of sections. Just be sure to break up each of the Sections into different styles to help move the user down the page. For example, if you use a wide full-width Background Image in one section, use a smaller image with a text block next to it below. Squarespace offers some very easy-to-use page layouts to help aid with this.
Additional tips for your Squarespace website design
Drive users to take action: Don’t fall into the trap of thinking that your website needs to tell your complete story. In most cases your website is a strong introduction to your brand. Give them enough information to contact you or buy something directly from your website.
Cut your copy in half. Can you cut it more? Use fewer, stronger words. Edit mercilessly.
Focal points of images on Squarespace: Did you know you can adjust where the center of your image is on a Banner Image in Squarespace? What does that mean? Suppose you have a banner image where the main subject matter is more to the right of the frame. If you click on Edit when you open up your Image Block, you can adjust where the image’s focal point is by clicking on the image and dragging the tiny circle inside of the image to where you want the focus to be. This is especially useful when text may be covering up the face of the person in the image or if your mobile view of the image is cutting off key elements.
Use a flatter version of your logo in the Header: Some brands use a logo that is more square or circular in shape, giving it a lot of height relative to the space at the top of your website. If you use this particular logo iteration and don’t use a transparent background in your top navigation area, your header will look too tall. So if your symbol is above the words in your logo, consider having your graphic designer create a version that sits flatter or has the symbol at the same height next to the words. This allows for a cleaner top navigation area.
Pinning your top Navigation: A simple way to provide a scrolling effect with practical use is to pin your top navigation bar so that when users scroll down the page they can easily click on your menu items. After all, your Buy Now or Book Appointment button should always be easy to access. Plus, as your page elements scroll beneath the top navigation, it gives your site a subtle visual effect but maintains the overall simplicity of your design.
Simple graphic design treatments to your images: No longer do people have to learn how to use advanced design software to create simple and effective graphic accents on images to use on their website. User-friendly programs like Canva and Snappa allow you to add simple accents such as solid colored backgrounds or motifs such as a floral pattern to an image. You can create these designs and download them before adding them to your website design. I recommend using a light touch. I’ve found many solid tutorials online to help with this process.
Testimonials sprinkled throughout your Squarespace website: Instead of having a single page with all of your testimonials, try adding them to different pages at key points instead to reinforce multiple touchpoints. When testimonials are all on a single page it gives the appearance that the business owner is simply cherry picking her best testimonials. By putting testimonials on different pages it mitigates that perception. Choose testimonials that add to the point you are making on that page. For example, if you are describing your periodontal services, try to add a testimonial that speaks to that particular aspect.
There are many, many tricks I’ve learned over the years of being a Squarespace website designer. Squarespace is simple, but there are a lot of features that need to be discovered. Even with the number of sites I’ve built, I am always discovering features that I haven’t used and could find a way to employ them.
The most important aspect of creating your own beautiful Squarespace website is to get started. Check out my article on how to get started. Build a foundation and off you go!
