Creating a Style Guide for Clients on Squarespace
Have you ever gone into a client training, and asked yourself, how the heck do I explain all of this to a client? Even harder if you do a live training session. And even harder if you know your client isn’t the type to watch your set of content or really pay attention. How will they know what to do when they get to the stage in 4-6months when they want to change their site a bit for new content.
The ONE thing that I have figured out while developing templates for clients is that ESPECIALLY for quick-site design clients (templates, pre-mades (aka: templates you install or edit), mini-sites (or quick turn arounds)) you will definitely find this method of showcasing the design and teaching the method of designing on Squarespace —> or any platform MUCH much easier.
What is a style guide in Squarespace Terms?
What I like to do for clients is create them a space to create, and a place to test out things. So my style guides include a bit of everything, as much as I can in one section.
Here’s What I include in my Style Guide + Training Video Pages:
Index Gallery - make sure you style the full index gallery
Index Page (no background)
ALL BLOCKS on this index - all blocks your client will use - obviously skip events or certain things they wont use - but don’t skip anything like image layouts.
Include all variants of type with explanations or tutorials. Ex: I usually have one or two things where we add a custom xyz, like a custom section for a summary gallery design - so I showcase that custom section here WITH the css outlined so it’s clear what we did.
Index page (background image)
Include your “alternate” versions - all text and their variant colors, buttons and variants and newsletter - all things that have “alternate” colors because of the background image on the index page.
Set of Videos that explain the page - and any links referenced. I include the staus.squarespace.com website + a link to squarepace help.
Set of Qs for troubleshooting, and a direct form to send me a question so they don’t have to go looking for my email. I make it a lightbox form so it’s a button on the page.
Note: If you don’t do the index pages, and do a single page instead, demonstrating and showing/creating a sample index page with index gallery on top for training purposes is useful.
This set of things tends to cover the majority of Q + A about their site - some clients will get a zoom walkthrough (mini site clients) and some clients get custom videos for their site. So we embed them RIGHT on the Style Guide + Training Page.
Privacy - I record all videos on Loom.com - which make it fast to produce - no waiting time to save and upload, and highly recommend this to ANY person who uses video in their training regime for clients. Then the page password protected if we are using indexes (since you can’t un-enable an index and all it’s sub-pages and have it still look like an index).
Templates - For templates I keep these pages separate. The videos are uploaded on their site for pre-mades (we no longer sell these - we have just been too busy) and for templates, the videos are hosted HERE on our website, and we create a style guide page as our last step in the process. It ensures that when you create a template that you don’t “miss” any kinds of blocks or pages in the tutorials. It’s 100% a key aspect in making sure you are designing a FULLY designed template, and not just something that works for very specific content as in the example. For templates you can skip the index pages and galleries if the template doesn’t have them.
The Naturalist Template - For our retired Naturalist Template from the Meg Summerfield Studio, LLC we separated out the style guide and the tutorial videos. So as you can see we added in all the blocks that require some styling, and showcase the images. Since pre-mades or install templates tend to come with images from unsplash, or those you have rights to use and distribute, you can help the user get a good feel of those right with your style guide. If you are going that route and have distribution rights on the images consider adding them in!
Other things to add in:
A Form: to directly send you a help request! This is great if you find requests for help on templates or clients tends to not have all the info - you can add in all the info you need. Like for templates, if you add in what’s your site url, and password, it reminds them to make sure you can see the issue before replying back.
Alternate Fonts: We like to link fonts if we are using “open source” fonts. Example google fonts or other things. We also add in font suggestions for our full studio clients, for example, an alternate and free downloadable font, that way if they end up deciding the font they wanted for the site is great, but they got rid of their adobe creative suite which had the font license, they have a backup that is a good alternate for their brand.
Resources: A few things to add in for templates might be a faq/ troubelshooting, but also if you suggest using x, y or z resource and are an affiliate - add the link right in (just don’t forget the note that it’s an affiliate link). I will add in my favorite print resources for those who did branding, or in templates we discuss our favorite sidebar plugin since The Cecily and our other templates are not built to be on business plan we don’t add it into the design, but showcase our favorite way of implementing it.
In conclusion - be sure no matter what type of site you are getting paid to design, that you aren’t skipping anything in your design. If your client doesn’t NEED a gallery page - design a quick one ANYWAY in site styles, set a few things to be sure that your installed Squarespace template starter fonts aren’t there when they decide to add on a few products in a year from now. It will help ensure that your designs stay relavent for yoru client. The last thing you want for referrals is for them to open up a blog in a year from now, and find that it looks NOTHING like the rest of their site. QUICK font and styling is all that’s necessary, but give yourself an hour and complete the site top to bottom — just in case ;)