( RESOURCES ) Browse through our collection of tips & tricks for Squarespace, Shopify, web design, and business. It’s a digital trove of creative ideas right at your fingertips.
Fab & Free Flodesk Email Templates with Easy Tutorial
Create stunning emails fast with our fab and free flodesk email templates
Add a whisper of nostalgia to your newsletters with our newly handcrafted trio of Flodesk templates
Fab & Free flodesk email templates with easy tutorial
a.
Business
b.
Video
Introduction
We spend most of our workdays in our inbox. Today is about turning those moments into an enriching experience—one that enables us to intimately connect with our readers, be it their anxieties, hopes, or aspirations. Add a whisper of nostalgia to your newsletters with our newly handcrafted trio of Flodesk templates:
Nurture Template
Take the time each week to check in with your subscribers. It doesn't have to be anything out of the ordinary—you can start with a simple yet heartwarming story that makes them look forward to hearing from you.
Curate Template
There's a vast amount of resources out in the open. Too much, in fact, for any single person to grasp all at once. This newsletter can cast a wide net to filter out irrelevant information, offering nothing but the most significant details lined up for their weekly review.
Launch Template
Calling attention to your new product or service can feel like stepping out of your comfort zone. Allow this visual collage to ease you into your own brand voice—firm and steady, without the need to shout. Let your signature offer speak for itself.
Making These Templates Your Own
To get the most out of these templates, we highly recommend watching our comprehensive video tutorial. It walks you through each step of the customization process and offers valuable tips for creating engaging newsletters.
If you're new to Flodesk, you can start a free account and keep these templates for when you're ready to send your newsletter. We hope each lovingly crafted section makes you fall in love with email marketing the way we did.
Your easy, effortless Intro to Design Intensives
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
Considering design intensives? Here's a good look at what they are, how they differ from templates or fully custom designs, and which clients need them.
Your easy, effortless intro to design intensives
a.
Business
b.
Article
Introduction
An intuitive glance of the web design industry might tell you that the most reliable way to set up your studio is to provide a fully custom, one-on-one design experience to high-ticket clients. This was how I got my own foot in the door—by looking for businesses in Southeast Asia who were willing to invest in expertise for their digital presence. However, not every prospect that comes knocking would be able to afford this level of support from you.
On the other hand, you could create and sell templates as I’ve done myself a few years down the line. But this passive income takes time before it can make a substantial contribution.
Thankfully, there now exists a third way for web designers, one that can integrate some form of customization from 1:1 services with the convenience of standardized templates. Design intensives are emerging as a new, flexible offer among studios—and for good reason.
What are design intensives?
You may know it by its other names: design days, day rates, day intensives—or alternatively, its weekly variants. Simply put, when I say design intensives, I’m talking about an offering that leverages on the select range of website customization a single day or week can allow.
Speed sets this offer apart from other options. Intensives are more time-efficient compared to fully custom design services, where strategy requires longer deliberation, and do-it-yourself solutions, where lack of experience might lead to more trial and error down the road. As such, the underlying system has to be streamlined and refined from an existing design workflow to make it possible in the first place.
Some people may balk at paying a thousand dollars or two for a day’s worth of design, but it can take years of skill and experience to pull off this caliber of efficiency. The premium pricing of design intensives is meant to reflect your expertise.
Clients best suited for design intensives
Not all entrepreneurs are seeking a highly personalized design experience, nor could they afford to invest a relatively huge amount into their website when they’re just starting out. In my experience, these are some tell-tale signs that potential clients may be a great fit for design intensives:
1. They’re looking for a simple website
For a number of small businesses, the functions and prerequisites they want to see on their website are straightforward—perhaps the homepage, about page, services page, blog collection, and contact form will do. Not a lot of bells and whistles, so clients don’t want to drag out the build process for too long.
If you already have an established process for such cases, especially in a niche you know like the back of your hand, then you might want to consider design intensives.
2. They need to launch their websites ASAP
Are you in talks with someone who seems to just want to get their website out of the way? They’d be happy with any minimum viable product you can come up with so they can launch in a few weeks’ time and take it from there.
They could look for a template, but they’re too pressed for time to set it up themselves. In fact, they might have even come across your template when they approached you to request a couple of small tweaks upon installation. This is where intensives could come in handy for template reskins.
3. They already know what they want
These types of clients have a singular goal and clear aesthetic in mind for their business. Their requests are website projects simply awaiting your creative execution.
Since time is of the essence, you cannot work on strategy and execution simultaneously; both you and the client would have to collaborate towards one of these two. Otherwise you might have to dedicate one design day for strategy then another round for the website build itself.
4. They can be quick on their feet
When you’re running a tight ship, there can be no space for excessive back and forth communication. You’d want to check if you’re working with a small team, preferably with one decision maker keeping in touch with you throughout the day. Observe closely if they have the ability to make snap decisions within your discovery call.
5. They have a list of random website tasks
Businesses could also have recurring website needs that may not be readily listed in your service packages. For instance, what if they need a designer to publish a couple of new product pages or blog posts on their behalf? If there’s a small glitch in one section you coded in—you just have to get into their backend to make a quick edit?
The day rate can provide a baseline for miscellaneous add-on or support services to new or returning clients. In this case, intensives may prove to be a better alternative if you find that hourly rates tend to be too constricting and monthly retainers too unpredictable.
Should you offer design intensives?
If you’ve been offering fully custom web design services for a while and you’re coming across quite a number of potential clients like these, it might be time for you to consider an offering that meets them where they are rather than turning them down entirely. There’s still an opportunity for you to work together there even when you have to reconsider the finer details of your collaboration.
I didn’t always offer this as a service outside of my custom-coded builds, until someone who expressed their love for my distinct style said, “I don’t need the full extent of the design experience you can offer. Admittedly, my business can’t afford that right now. But I would really appreciate a touch of your expertise for my website.”
To me, that put into words the value that design intensives could offer at the end of the day. If this is something you’d also like to provide for future clients, I have a workshop that can help you learn everything you need to know before getting started:
A Tour of our new website
Watch a walkthrough of our all-new website on Squarespace
In this video, I walk you through all the thoughtful features of this theme and my approach in building such. You also have the option to access this theme and use it in your projects by enrolling in my Shopify course, Standout Shopify
A TOUR OF OUR NEW WEBSITE
a.
Squarespace
b.
Video Walkthrough
Introduction
In this video, I'll take you on a tour of our newly revamped Squarestylist.com website, live on Squarespace. As the founder and educator behind Squarestylist, I'm thrilled to showcase our creative resource library for designers and developers.
I'll walk you through our interactive homepage, comprehensive courses section, and resource-rich blog. You'll discover our standout directory of expert designers and the inspiring showcase of student-built websites. I'll point out the thoughtful design elements, from custom imagery to handcrafted details, that reflect our unique brand identity. More so, I'll demonstrate how we've reimagined layouts using the magic of code, creating unexpected and user-friendly experiences across both desktop and mobile views. You'll see how we've minimized clicks and maximized engagement throughout the site. Hope this tour of the new Squarestylist website will inspire you to push the envelope of what's possible in web design.
A Preview of our new website
Timestamped Overview
00:29 Website Vision: Vision for the brand as a creative resource library for web designers and developers.
00:55 Website Features: Overview of the new website's features, starting with the new logo and horizontal scroll showcase.
02:05 Homepage Design Philosophy: Homepage as an overview of the entire website, leading to main pages like About Us and Resources.
04:31 Courses Page: Overview of available courses, including flagship programs and short masterclasses.
05:39 About Page: Simple layout highlighting brand mission, ethos, and team members.
06:16 Resources Page: Interactive blog list with various formats including galleries and videos.
09:09 Directory Page: Celebration of students' work, with hover previews and detailed profiles.
12:59 Showcase Page: Exhibit of websites created by students, with filters and easy navigation.
17:10 Mobile View Highlights: Ensuring a seamless mobile experience, including horizontal scrolling and filter options.
How to Test if your Emails are Authenticated
Test if your emails are authenticated to comply with stricter Google and Yahoo requirements and learn what steps to take to resolve the errors. This is crucial to ensure delivery emails and improving sender reputations
Full authentication of your emails according to this guide will enhance your email deliverability i.e. avoiding spam filters or bounces. The video guide comes with a step-by-step guide that you may download by signing up for our mailing list.
Ensuring Email Authentication with Google and Yahoo
a.
Squarespace
b.
Video Walkthrough
Introduction
Google and Yahoo will enforce stricter requirements to authenticate emails starting Feb 1, 2024. This applies to all emails across email sources. In this video, you'll learn:
1. The level of authentication that your emails require depending on the volume of emails that you send
2. How to test and understand if your emails are properly authenticated
3. How to properly set up SPF, DKIM and DMARC authentication for each email source
4. What further steps to take to fill gaps and resolve errors
5. Best practices to avoid domain errors unnecessary steps
Timestamped Overview
0:01 Announcement of stricter email authentication requirements by Google and Yahoo.
0:12 Importance of meeting these requirements to avoid delivery issues.
0:31 Common issues and confusion with setup instructions.
0:49 How to test if your emails are properly authenticated.
01:16 Overview of the types of email sources.
03:03 Definition of a bulk sender and its implications.
04:38 Importance of email authentication to prevent impersonation and malicious messages.
05:18 Steps to test email authentication for marketing emails.
15:00 Troubleshooting and setting up email authentication records (SPF, DKIM, DMARC).
26:06 Summary and final steps for ensuring email authentication for transactional emails.
Resources
The Importance of Email Sender Authentication
Google and Yahoo recently announced that they will be enforcing stricter requirements for email sender authentication. These changes mean that if emails aren’t authenticated properly, they may either fail to deliver or be marked as spam.
By now, you’ve probably seen a few reminders asking you to set this up. If you’re using different technologies to send your emails, those reminders can sometimes be confusing or conflicting.
This guide will help you take the necessary actions, whether you haven’t done anything yet, or you've already made changes but want to ensure they were set up correctly. Let’s dive in.
Email Sources and Proper Authentication
The overarching requirement for any email sender is to ensure emails across all sources are properly authenticated.
What Are Email Sources?
Our emails come from a variety of sources, primarily categorized into three main types:
Direct Emails: Sent via platforms like Google Workspace, Microsoft, or Yahoo Mail.
Marketing Emails: These are sent via email service providers (ESPs) such as ConvertKit, Flowdesk, MailChimp, and ActiveCampaign, to name a few.
Transactional Emails: Typically sent from website hosts, CRMs, or payment gateways like Shopify, Dubsado, or Honeybook.
These email sources are crucial as they represent the different ways we communicate with our audience and clients.
What Does Proper Authentication Mean?
There’s a misconception that email sender authentication is only for bulk email senders. In reality, all emails should be authenticated. However, for bulk senders (those who send close to 5,000 emails within 24 hours), the authentication requirements are much stricter.
It’s important to note that once classified as a bulk sender, that status is permanent. Even if you reduce the number of emails sent per day, your classification will not change. For non-bulk senders, full email authentication is still highly recommended to ensure emails reach inboxes instead of spam folders.
Preparing for Stricter Requirements
Experts foresee that Google and Yahoo will soon expand these requirements to include non-bulk senders, so it’s crucial to be proactive and get your email sender authentication in place. For bulk senders, this is mandatory, and based on the recent announcements, enforcement will be strict.
Why Authentication Matters
Authentication records are essential not just to prevent malicious messages from reaching recipients, but also to protect businesses from being impersonated. A key record to consider is DMARC, which helps monitor whether your brand is being impersonated through email.
How to Test and Ensure Proper Authentication
Before diving into implementation, it’s crucial to understand your current authentication status and fill any gaps where needed.
Step 1: Testing Marketing Emails
Since a large portion of emails sent are for marketing, it’s essential to test your marketing emails first.
Log in to your ESP (e.g., ConvertKit, Flowdesk).
Send a test email to a personal Gmail account.
Check if the email is sent from a branded domain (e.g., hello@yourdomain.com) or a shared domain (e.g., via convertkit.com). Emails should be sent via your branded domain to comply with authentication requirements.
Shared domains won’t pass DMARC authentication, so if your test fails, you’ll need to troubleshoot by verifying your custom domain with your ESP.
Step 2: Check SPF, DKIM, and DMARC Records
Once you receive your test email, follow these steps:
Click the ellipsis icon in Gmail and select Show Original to view the email header.
Check for the three required authentication records: SPF, DKIM, and DMARC. All should have a value of “pass.”
If any of these records fail, it’s time to address the issue:
SPF Record: Ensures your email is sent from authorized servers.
DKIM Record: Confirms that the email has not been tampered with.
DMARC Record: Ensures the SPF and DKIM records align with the domain used in the “From” address.
Verifying and Fixing Issues with Email Authentication
Ensuring your emails are properly authenticated is critical to protecting your domain reputation and improving deliverability. If you’ve failed any of the sender authentication tests, don’t worry—we’re going to dive into the troubleshooting process step by step. Let’s break it down.
Verifying Your Custom Domain
If you failed the branded sending domain test, the first step is to review the documentation provided by your email service provider (ESP) on how to verify your custom domain. I've linked resources on how to accomplish this for popular ESPs. Just make sure you have access to your DNS records via your domain host—not your website host. This is crucial.
In the case of Flodesk, you first need to define the sending address. Make sure it's a custom domain, not something like a Gmail or Yahoo address.
Once you've nominated the sender email, the next step is to verify your domain. This is key for sending marketing emails from a branded sending domain.
Editing DNS Records for Different ESPs
Depending on your ESP, the process might look different, but the general approach is the same: edit the DNS records via your domain host. For Flodesk, you can either verify your domain automatically or manually. I prefer to verify it manually because it gives me more control over the DNS records.
If you're not confident in editing these records, reach out to your domain host or consult an expert.
When doing it manually, you will be asked to add DNS records like CNAME for DKIM and SPF, and Text for DMARC. Pay close attention to the record type to avoid any errors. Be careful with DMARC records—there should be no duplicate entries.
Adding CNAME and Text Records
When adding CNAME records, start with DKIM. ESPs often append your domain automatically, so you should only copy the part without the domain. After saving the CNAME record, proceed with the SPF record. If your ESP uses a text record instead of CNAME for SPF, make sure you don’t add duplicate records.
DMARC Records and Avoiding Duplicates
Before adding any text records like DMARC, it's important to check for any existing records. I recommend using a tool like Dmarcian Domain Checker, which I’ve linked below, to verify whether you already have a DMARC or SPF record in place. If you find duplicates, you’ll need to clean those up before proceeding. The DMARC record should follow the format: P=none, which is a basic level of monitoring and authentication.
If you're ready to step up your authentication game, you can modify this DMARC setting for stricter security. Some documentation might recommend adding an email to receive DMARC reports, but until you're ready for more advanced monitoring, a P=none setting is sufficient.
Waiting for Domain Verification
Once you've added all the necessary records, the system might take 48 to 72 hours to verify your domain. Once verified, you can test your email again to ensure you pass all the sender authentication checks.
Different ESPs handle this process differently. For example, services like ConvertKit or Flodesk will follow a similar process of adding CNAME and text records. If you’ve set up your branded sending domain before 2024, you may not have a DMARC record, as it was implemented more recently.
Ensuring Full Authentication for Better Deliverability
Once fully authenticated, your deliverability will improve because it’s now based on your domain’s reputation, not a shared domain. Shared domains affect deliverability negatively because all users share the same IP. DMARC is particularly important here because it ensures that the domains in your DKIM and SPF records align with the domain in the email's from field.
Warming Up Your Domain
When switching to a branded domain, it's crucial to gradually increase the sending volume to build a positive sender reputation. This process, known as warming up your domain, involves sending emails to your most engaged segment first, then slowly ramping up volume over a period of two to four weeks.
Authenticating Direct Emails
Once your marketing emails are authenticated, you can move on to direct email authentication. I used Flodesk to send an email to my personal Gmail account, and then checked the headers for SPF, DKIM, and DMARC—these should all pass. If your setup isn’t quite there yet, don’t worry—many systems return a neutral SPF result, which is a soft fail. You can address this by setting up SPF and DKIM specific to your email provider.
Troubleshooting Direct Email Authentication
To authenticate your direct emails, you’ll need to check your existing DNS records, especially for SPF and DKIM. Tools like Dmarcian help ensure you don’t have duplicate records. If you already have a DMARC record for marketing emails, you’re in good shape—but double-check the setup to avoid any issues.
Having Multiple DKIM Records for Different Providers
Yes, you can have multiple DKIM records. I’ve linked a guide to help you turn on DKIM authentication in Google Workspace. After generating the DKIM record, add it to your domain’s DNS settings. This record may take up to 48 hours to authenticate.
Testing After Setup
Once you’ve followed these steps, repeat the test to ensure that SPF, DKIM, and DMARC all pass. Authentication is critical for protecting your email sender reputation and improving deliverability.
Authenticating Transactional Emails
Transactional emails are another area to check. These emails can come from different services like your CRM, website host, or payment gateways. If these emails use your domain in the from address, you’ll need to authenticate them by setting up SPF, DKIM, and DMARC. For services like Shopify, follow similar DNS record steps to authenticate your domain.
Closing Thoughts
Setting up email sender authentication is crucial not only for complying with Google and Yahoo’s new requirements but also for ensuring that your emails are secure and land in the inbox, not the spam folder. Make sure to check your marketing, direct, and transactional emails, verify your domain, and monitor your email deliverability.
While I can't provide personalized support through comments, I offer high-touch support in my programs for designers or recommend experts to help you with this process.
Let’s get those emails authenticated!
Notion Project Tracker and Designer Portral
Learn how to use Notion as a Project Tracker and Client portal
In this video, I'm sharing a walkthrough of my Notion Project Tracker and Client Portal. The Project Tracker immensely helps me in keeping track of my branding and web design projects. While the Client Portal serves as a central place where I communicate with clients.
Notion for designers: project tracker and client portal
a.
Business
b.
Video Walkthrough
INTRO
In this video, I'm sharing a walkthrough of my Notion Project Tracker and Client Portal. The Project Tracker immensely helps me in keeping track of my branding and web design projects. While the Client Portal serves as a central place where I communicate with clients.
Timestamped Overview
2:39 Key Features of Notion Project Tracker and Client Portal for Brand and Web Designers
5:45 How to share the Client Portal with clients
6:43 How to make sure that clients receive notifications in Notion
9:54 How to share questionnaires and content guide for clients to complete
11:04 How to consolidate view of all tasks across projects
14:05 How to use an customize the Notion Template from Squarestylist
21:18 How to add Notion buttons that opens a specific page
22:41 How to set automatic reminders for clients
28:00 Setting up dependencies in Notion so schedules automatically move depending on schedule
I know, I know, you've probably watched a lot of Notion setups and tours by now, but do you know you can take your Notion client portal from this to this?
Hi, I'm Rache from Square Stylist, and today we'll personalize your Notion project dashboard in a simple and stylish way without overwhelming you or your clients.
Why Notion?
There are no shortages of client portals available online. There are a lot of off-the-shelf options, like Dubsado or Honeybook, but they are less flexible in terms of design. On the other hand, you can go with Notion, an all-in-one workspace with building blocks for limitless possibilities. But if you've used it before, you know that Notion can get out of hand real quick. Just take a look at my project dashboard from last year.
Issues with My Previous Dashboard
This portal is pretty comprehensive, but there were a few drawbacks:
Overwhelming Layout: Clients found that there was too much to take in all at once, and they needed to click through too many pages to navigate.
Ordinary Design: If your Notion client portal ends up looking like every other template, it kind of defeats the purpose of going for Notion's versatile platform, doesn't it?
Confusing Questionnaires: Since clients were given full edit access on the Notion page, they tended to delete the entire questions by mistake.
Scattered Tasks: Getting a high-level overview of all tasks was difficult due to permission issues, and we had to create a separate calendar per project, making it hard to merge calendars and obtain a clearer view of tasks needed across projects.
Redesigned Notion Project Dashboard
With all that in mind, I went back to the drawing board and redesigned my entire Notion project dashboard while also incorporating new Notion features. This time, I made sure to feature checklists of what clients need to know. They can access only relevant information at a glance. Not to mention the overall look and feel is more on-brand, thanks to a few design choices I've made by playing around with the settings.
Key Features of Our Notion Project Tracker
Client Portal Layout
First, we have a simple yet stylish and inspiring layout for the client portal. You may easily swap the images to match your own brand. Our Notion client portal template looks great in both light mode and dark mode. We share this dashboard with a client so they know exactly what to expect in the course of our collaboration. But we also want this to be an engaging space for them to look forward to and to be excited about.
Checklist Format
In this client portal, we adopted a new checklist format, laying out what the client can expect from us and what we expect from them at every project phase.
To make it easy to digest, I used toggles and checkboxes highlighting how each phase is dependent on both client and designer inputs.
Previously, I used a Kanban board format, which you'll find in most Notion client portal templates as well. But while this Kanban board view makes sense to me, some clients and designers brought up that this Kanban view looks overwhelming for the following reasons:
Clients get confused about which card to click and where to add their feedback.
It takes a few clicks and navigating to get to a certain document.
They get overwhelmed seeing other tasks that are not relevant to them.
Laying out the stages and tasks in a checklist format while highlighting key dates makes it less overwhelming. We also have a project status block that highlights the most important task at the moment. For example, if we just initiated the project, then most likely we'll be asking for the client's answers to our questionnaires or our content guide. Hence the call to action here is to view the client forms, and if they click on it, they will be automatically led to that particular document where they can click the link to answer the questionnaire as well as provide the content.
Centralized Feedback and Conversations
We made client feedback and conversations more centralized and straightforward. When we book a new project, all we need to do is click this "Add a Project" button, and all the content of the project client portal template will be automatically generated. We simply need to populate this with details that are particular to this project, such as the project name, dates, and references.
We share this Notion client portal with a client so we can communicate right in Notion. All we need to do is share this entire dashboard but make sure that when we invite them, we only give them "can comment" permission.
This way, the client won't be able to mistakenly delete any of the elements within our portal, but they can view any of our presentations or briefs or videos and questionnaires and then comment right in the comment section of that Notion page, giving us context on what the conversation is about.
Robust Comment Features
Notion's comment features are actually quite robust because we can easily attach files. We may use the Mention option to notify our clients via email, and we may also add reminders. Contrary to popular misconceptions, Notion's email notifications are actually quite reliable. But it's important to make sure that in the welcome video where we introduce our Notion client portal to our client, we remind the client to ensure that under Settings, the option to always send email notifications is toggled on.
In the same video, we encourage them to always tag us or mention us in the comments when they leave feedback. Because every time we tag our clients, or every time they tag us, we receive these email notifications. To trigger reminders to someone else like the client, we simply need to mention them again, followed by the reminder.
Project Vault
We are able to house all important deliverables, references, and discussions in our project vault. For example, all our deliverables and conversations are accessible by clicking these cards. For example, under Website Strategy Document, this is where we embed the video and the link to the presentation, and this is where we invite our clients to share their comments. The same is true when we are presenting other deliverables such as homepage design.
For example, we can add the video to walk them through our design for the homepage and an option for them to view the design. Our clients can approve the designs via the comments or, if you'd like to formalize it, they can signify their approval by signing a sign-off or approval form where they can affix their signature and submit this so we can finalize this specific phase of the project.
We also use the Project Vault to house all references such as contract invoices, brand guidelines, and more. Feel free to add more references so you won't find it hard to find relevant files for a particular project. We may also house relevant links and inspirations here so it's easy to find them. Personally, I love adding my checklists under References because my web development process involves a lot of tasks, and to make sure that I am as accurate and thorough as possible, I have a comprehensive checklist of all the steps involved in my website design and development process.
Client Questionnaires
I used to use Notion to create questionnaires, but recently I started adapting other software. For example, for my questionnaire, I use this form so the client can easily submit it without mistakenly editing the questions. For my copy prompts where I ask the clients to provide the copy for their project, I use Google Docs, and this is a preview of my Google Docs content guide.
In this video, you'll learn that you can have access to this Notion client portal template and dashboard. However, the template won't include my client forms and my process checklist, but if you wish to have access to these, I share these forms and checklists within my flagship programs Standout Squarespace and Standout Shopify. The links are in the description below, or you may subscribe to this channel. Because I'll keep creating videos about these form builders and checklists that I create.
Notion's New Project and Sprint Features
Another key feature of this designer project tracker is that it is now powered by Notion's new project and sprint features. We are now able to consolidate all tasks across projects in just a single view. Notice how we have a project dashboard at the top, where we have different views of how our projects are overlapping or where in the process these projects are. We also have the option to view all projects.
This project dashboard is typical to most Notion client portal templates. But what's new with our designer project tracker is that we now have a master tasks dashboard reflecting what's due today, what's due next week. We also have a calendar view of the tasks due across multiple projects. And if we'd like to just view the tasks for a certain project only, then we have a filter right here. For example, if I only want to see the tasks for our essential project, then I can choose this filter, and it will only show the tasks for our essential project.
And if you have advanced project management needs, there is an option for you to add more properties to each task and even adapt sprints because this is now powered by the new Sprint feature of Notion.
In my previous project dashboard, and this is also what you'll find in most Notion templates, we had to click through each project before we were able to view the tasks that are due for each project. This consolidated view of all tasks across multiple projects is now possible because this list of tasks that we'll find when we open any of our client portals, at the very bottom, you'll find a list of the tasks related to this particular project only.
It's important to remember that this table or database is not visible to the client. This is only visible to us, the owner of the Notion workspace. We may also collaborate with our team members using this database. We don't need to hesitate because the notes and details right here won't be visible to our clients. Clients don't need access to all of these tasks and steps. What they actually just need is a simple and straightforward view of the current project status. Hence, this checklist format is more than sufficient.
Setting Up Your Own Notion Project Tracker
Let's walk through how you can set up something similar for your studio, step by step. I have great news for you, because you don't have to build this designer project tracker and client portal from scratch. Using the link in the description below, you'll have access to this exact Notion template. The template link will lead you to this screen.
Steps to Install the Template
1. Sign in to your Notion account: If you don't have a Notion account yet, don't worry, you may create a free account using the link provided here.
2. Duplicate the template: Click the "Duplicate" button at the top right corner.This will now be duplicated to your own Notion account, and you may now edit it to your heart's content.
You may change the title, remove the call-out for the instructions, and start editing the project template. This template contains the default content when we hit the "Add a project" button, so it's best to customize it based on how you typically run your projects. For example, if you'd like to change the images, simply click the ellipses icon and hit the replace button.
Welcome Video
I recommend creating a welcome video walking the client through how we can make use of this client portal. First, remind them that they would need to set their notifications to always receive emails.
They can do so under Settings and Members, My Notifications, and toggle on the option to always send email notifications. In that welcome video, let them know that we will guide them on how to provide feedback to our presentations. It's as simple as clicking this button and adding a comment right here. Just make sure that they mention us every time they comment.
In the video, I also mentioned that if they have any general questions that are not related to the presentation that we are currently reviewing, they may simply toggle on this chat button and hit the "Send Message" option.
You may use the same welcome video across all your clients. Hence, we're adding that welcome video in our template. To add that welcome video, simply toggle on this "How to use this dashboard" and paste the video link right here. Alternatively, you may hit forward slash on your keyboard, start typing Video, and then this is where you'll add any YouTube or Vimeo links. You may choose to edit parts of this template.
Again, this will be applied to succeeding projects that you'll create using this project tracker.
Process Steps
At the moment, I added stages of my process from onboarding up until offboarding. But if you have any other main phases of your project, feel free to just add a process step by clicking this button. For example, if you have a brand strategy happening after onboarding, then this will be our brand strategy phase, and we can simply move this using the six-dot icon to the proper place within your process.
We may also make changes to this Project Vault content, keeping in mind that whatever we add here will be applied across all projects. This task list must be kept empty while we're editing the template. We will populate it when we are editing the client-specific project dashboard.
Creating New Project
Once you're happy with the content of our project template, we may now use it as a template for our succeeding projects. Once a client books, that means they have signed the contract and paid the initial invoice. I create a project for them in this dashboard by hitting the "Add a Project" button.
Once we hit the button, all we need to do is change the new project name placeholder with the name of the project. For example, Project Solena. Then we can populate the dates for this project. For example, it's from August 1 until August 31. So we can include the end date by toggling this option on so we can choose this end date of August 31 by hitting Shift. Notice how our default project template content has been automatically added.
Finalizing the Portal
Our dashboard is best viewed on full screen. Hence, I click this "open in full page" icon. We may now populate this portal with the details that are specific to this project. For example, you can mention the name of the client here. Also, we need to make sure that the buttons are led to the correct pages. The welcome video is automatically led to a page for the video. The chat is also automatically led to the discussions page. The button to view client forms is also automatically connected to our client forms references. So we can just add the links to our client forms, both the questionnaire and the content guide. At any point in our project, we will also change the content of this project status block.
For example, if it is our time to present the website strategy, once we're ready with the website strategy, we can let the client know that the website strategy is ready for review. We also need to make sure that we update this call to action. Right now it says view client forms.
We then have to change this to view website strategy, and we also have to make sure this leads to the correct reference file. So instead of client forms, we'd need to select the website strategy document because this is our presentation at the moment. If I hit Share for this website strategy document, I can copy the link, and that is the link that we will indicate when we click this page option. I'll paste that link, and it will then confirm that we are connecting this button to the website strategy document.
Adding Custom Buttons
If you'd like to create your own buttons, it's quite easy to add by hitting forward slash on your keyboard, start typing button, and then, for example, this button is to view other guides. Then I can add a step, and that is to open a page. Similar to what we did earlier, we can just use any reference, copy the link, paste that right here when we select a page, and then we are able to use this button to open any references inside this client portal.
Customizing Tasks
Feel free to change the placeholder tasks that I added to each of these phases. We may also indicate some reminders. For example, if I need to remind a client about a date, I can just mention them anywhere and then follow it with a date. We can do that by hitting the add symbol and start choosing a date. Then just change this date to the relevant date and ensure that the reminder is toggled on on the day of the event or one day before the event. Typically, though, I prefer minimizing the number of reminders.
So whenever I present a website strategy or homepage design, for example, I simply add the reminder within the comment thread. For example, I'll say, "Hi @name of the client," and then I'll just let them know that this strategy is ready. Of course, feel free to add more details, but within the same line, we can add a date, and they will be automatically reminded on the date that we indicate right here as long as their name and the date are within the same comment.
Sharing the Dashboard
Once I've tracked all the buttons and details specific to this client, I share this dashboard with the client by using the Share button. I add their name or email address, and I make sure that this permission is set to "can comment" only. I hit Invite, and you may also add a message to give them more context about what this invitation is about. They will be receiving an email on how to create a Notion account and access this dashboard.
Managing Tasks
Now we'll proceed with the task list at the bottom of our client portal. Again, I'd like to remind you that this task list is not visible to the client. We may now start adding the tasks that are related to each of these phases by hitting this button to add new tasks. For example, if under onboarding, we need to send the invoice or sign the contract, we can add that right here and add the due date. Alternatively, you may use preloaded tasks at the bottom based on typical steps involved in a design project, but first you’ll have to hit the option to use the Project Tasks View.
Then we can preload this task by making sure that we select the first task, hold Shift on my keyboard, and select the other tasks using the arrow-down key on my keyboard as well. We'll copy all these tasks to this table by grabbing the six-dot icon while all of them are selected and holding the option key on our keyboard (or Alt key on Windows). I'll hold my option key and drag that to this database, and this is how we'll preload the tasks to this table.
Once these tasks are preloaded, we can switch back to the TASKS LIST and make changes to each of these tasks. Notice that there is a parenthesis "one" automatically added to each because we've copied it from our main tasks, but we can easily remove it. We may also edit each of these tasks, change the due date, change the week number, and of course, make changes to these properties and values. For example, if you have more phases than what I've initially added right here, we may add more phases or stages to your process. Simply add another one, for example, "brand design," and we may change its color using this ellipses icon. And of course, you have the option to add more properties.
Since this list of tasks is not visible to the client, I add personal notes right here, some things to remind myself regarding this particular task. If the tasks are not arranged chronologically, you may hit this option to sort. We can sort by due date and make sure that this is ascending. We also have the option to view this database in multiple ways, any way that makes sense to you and that will help you be productive.
Again, this is not visible to the client. So we have a monthly view, and we also have a weekly one. Notice that these weeks are week numbers that I manually added. These are not connected to the weeks of our calendar, but I like categorizing my tasks based on the week numbers because I typically keep my design and development projects from anywhere between four to eight weeks. Then I like assigning the week number for each task.
Timeline View and Dependencies
We also have a timeline view, which is particularly helpful if you'd like to set up dependencies. Dependencies are when we connect one task to the other, especially if a task is highly dependent on a preceding task. For example, we won't be able to schedule any kickoff call if the client forms haven't been completed. So I most of the time set up the dependencies for each of these by connecting them. For example, if we move the deadline of one task, there will be a red visual indicator that there have been changes in the schedule.
There is a cool feature where if we click this dependencies option, we have these options to shift and maintain time between tasks. That means all the other dates will move depending on the movement of the blocker or the essential task. Notice if I choose this option to shift and maintain time between tasks, if I try to move the due date of one task, then all the other dependent tasks will also move in terms of schedule.
Task Reflection Across Projects
Now what's beautiful with this project template is that all the tasks that we added in this project, Project Solena, will also be reflected in our tasks list. Notice how under Project Solena, we have all these tasks. If we create a new project by hitting this "Add a Project" button, for instance, I can name this Project Linea and assign a different icon so it's visually distinct. I can use this orange color. If I add tasks to this project, again using our preloaded tasks, notice that when we view this in our Tasks Dashboard, all the projects for Project Linea and Project Solena are distinct from each other. We can also see that under our calendar view. If you'd like to reflect the project property here, we can use this Properties option and ensure that the project name is shown in the calendar as well, or any views that you'd like.
In this Tasks Dashboard, I also use the same project tracker to manage my personal projects. I love working on personal projects, for example, a Squarespace or Shopify template. Once I've checked all the buttons and details that are specific to this client, I share this dashboard with the client by using the Share button. I add their name or email address and ensure that this permission is set to "can comment" only. I hit Invite, and you may also add a message to give them more context about what this invitation is about. They will receive an email on how to create a Notion account and access this dashboard.
Conclusion
Hope you found this resource helpful. If you'd like to learn more about Notion or other tools for web designers, please subscribe below or check out our courses, Standout Squarespace and Standout Shopify. The links are in the description below. See you in the next video.
3 powerful ways coding can make you a standout web designer
3 powerful ways coding can make you a standout web designer
Should web designers know how to code? That’s one question you’d hear a lot in our creative industry. It’s also probably something you’ve considered yourself, whether you’re still learning the ropes or you’re already more experienced.
Some people believe that focusing on web design alone as your core skill would allow you to carve out your niche more quickly. Others feel that taking on something new to add to your skillset would make you more in demand as a versatile, multi-passionate creator.
My thoughts? Honestly, you don’t have to know a single line of code to get started as a web designer. We all know how Squarespace, like other web builders, makes it easy for us to create a simple website without ever touching the Custom CSS Editor, let alone the Code Injection.
But for your design to truly stand out… that’s another story. There comes a point when the available settings in your Site Styles just won’t cut it anymore. You’d have to get a little more creative.
Here are three reasons why coding actually empowers you to create the unexpected:
1. Coding widens your perspective in design
Whenever we’re building out any site in Squarespace—adding blocks, dragging and dropping elements—it’s almost too easy to forget the technological wonder that makes this possible. Though you might be blissfully unaware of it, every website is actually composed of lines and lines of code. Your website builder of choice is simply good at handling that work for you so you don’t have to type them all yourself.
When you learn to code, you essentially learn to speak the language of your web browser. This shifts your perspective, allowing you to think about your design elements more intently.
You’d feel less frustrated about seemingly stubborn layout glitches since you’re able to “tell” the browser exactly how you want your page to be displayed. You would know why certain ideas are easy to implement while some would take more time. Having this skill allows you to work with the builder rather than against it. It’s no different from an artist with an innate understanding of paints, brushes, and surfaces. With knowledge of coding, your craft becomes a lot less confusing and a whole lot more dynamic.
2. Coding allows you to collaborate with developers
If you ever find yourself in a more complex project, chances are it’s not just the computer you’d be talking to. You’d also have to discuss with a web developer, whose main role is to build custom plugins based on your design. Granted, you won’t have to be as good as them, but don’t get stuck in the “it’s their job” mindset. Gaining technical know-how would still come in handy if you want to articulate your ideas well. This is especially true when you want to include more advanced features in the site.
Your shared understanding of how the process works will help you gain a more realistic expectation of what the rest of your team can deliver.
And the best part? You won’t have to cross your fingers every time you pass along your mockup, hoping that the final product wouldn’t look drastically different. Instead, you can be more closely involved in the actual website building process.
3. Coding enables you to bring more value to your clients
It’s true that web designers don’t really need to learn to code. But as service providers, what we do need is a strong willingness to provide more value to our clients. Taking up web development—HTML, CSS, and even the JavaScript basics—is a brilliant way to deliver beyond expectations. As creatives, we’re constantly seeking ways to improve our craft so that we can better fulfill customer needs. Not to mention, there would always be a high demand for multi-passionate minds with a flexible skillset.
So perhaps it’s time for you to consider coding less as some vague, techy job and more as a natural extension of your creative profession.
This way, you’d be able to create standout Squarespace sites with ease and charge with confidence in the long run. Eager to upskill, but don’t know where to begin? I know how intimidating CSS can be, even when you’ve already brushed up on the fundamentals. But you don’t have to push yourself into building out sophisticated features right away—it helps to the start with small but useful code fixes first. I sincerely believe that getting started doesn’t have to be the hardest part. That’s why I made a free Code Toolkit Lite for designers like you. It’s a library of my go-to code snippets (all the way from image blocks to blog pages) that you can implement in 15 minutes or less. I hope that you find this resource valuable the way I did when I started learning this stuff on my own. Looking forward to see what you’ll create!
Five reasons you should learn the CSS basics today
So what if you want to make your Squarespace site more dynamic and responsive… more like you (or your client)? That’s where the CSS Editor comes in.
So what if you want to make your site more dynamic and responsive… more like you (or your client)? That’s where the CSS Editor comes in.
We all know Squarespace is a drag-and-drop builder, which makes it easier to create and design your website. But while they look clean and presentable, templates rarely look unique—without a lot of tweaking, your brand will look like every other business that uses the same layout.
CSS, which stands for Cascading Style Sheets, is the programming language used to style web pages in ways that the Site Styles settings cannot. These include more options in terms of fonts, colors, margins, and even animations.
Still, it’s not enough for you to just copy-and-paste random code snippets from various sources without knowing what any of them mean. To make your designs truly stand out, it’s best for you to begin with the creative foundation when it comes to adding custom code.
To make your designs truly stand out, it’s best for you to begin with the creative
foundation when it comes to adding custom code.
These are just some of the benefits of using CSS for Squarespace designs:
CSS solves layout issues
Ever been frustrated with how elements don’t seem to align on the page despite your best efforts? Maybe you end up relying on those spacer blocks to do the trick. At least until you realize your little hack doesn’t work on smaller screens, where the text ends up being crammed in the middle. Knowing your CSS will allow you to address these common alignment and spacing problems, so you wouldn’t have to spend the whole day looking for answers in Google.
2. CSS creates flexible & beautiful mobile sites
Speaking of smaller screens, CSS can make it so much easier for you to make your site design more responsive. That means the elements in your page would change depending on whatever space is available in your user’s device.
Just think of your design like water being transferred from one container to another—you can expect a well-crafted website to act fluidly that way. It’ll be easier for you to work with elements from then on.
3. CSS makes the site easier to update
Learning CSS allows you to make changes fairly quickly, even for more advanced customizations.
For example, clipping images in a gallery into uniform dimensions would allow your client to upload any photo with ease, without having to worry about the size and shape. Just imagine if they’d have to depend too much on editing programs just to change every single photo!
4. CSS boosts your SEO
If you’ve ever thought about, say, rotating your headings by 90 degrees for a more editorial aesthetic, you’ve probably considered uploading them as images in your site instead. But that doesn’t bode very well for your website’s Search Engine Optimization (SEO).
You might be missing out on those crucial keywords that could have ranked your latest blog post higher up the Google results page.
5. CSS creates more elevated sites
Because it gives you more control over what your website looks like, CSS will allow you to modify designs to make them look the way you intend them to.
No need to work around your original mockup or compromise on features that you want to place in every webpage. It’s important for the final output to reflect the brand’s personality, and using code with your design expertise can help you accomplish just that.
Convinced that you need to go back to square one
and learn how CSS actually works?
Lucky for you, I’ve created a free foundational course, SQUAREONE: CSS in Squarespace, that you might want to check out. It’s a project-based approach, so you’ll be joining me in recreating a simple but stylish homepage layout through code.
And since we’d be discussing the basics and best practices, it’s the perfect place to start learning the concepts you need for both Squarespace 7.0 and 7.1. All you have to do is click here and use the discount code “FREE” at checkout!
Any other new features you’d like to see in Squarespace sites? I’m open to ideas, so feel free to send me an email and let’s make it happen.
