a book sits on a beige marble floor, the title reads "HJM Studio Resources for web design and branding".

Recommended Resources for Squarespace & Web Design

A comprehensive list of the Squarespace and website design resources I’ve collected over the years as a professional website designer. No gatekeeping here!

My go-to insider resources for icons, graphics, stock photography, fonts, Squarespace plug-ins, branding tools, legal resources, courses and more!

*some of these resources are affiliate links which means I may receive a small commission for any purchases you make at no additional cost to you. I only recommend products I have used and loved personally.

Mockups and Scene Creators

Great photography can make or break your site. These are my favorite resources for great quality and cohesive images to use to upgrade the visuals of your website and social media presence for much less than you would spend on a custom brand shoot. Some are industry favourites and some are hidden gems I’ve found and couldn’t keep to myself.

Moyo Studio
Visually cohesive and elegant mockups and scene creators
Provides great minimalist and visually cohesive mockups and scene creators to lend a cohesive look to your website and products. I’ve tried many different mockups over the years and always end up coming back to Moyo for their ease of use and elevated designs.
Use code HJMSTUDIO to save 15% on all mockups
Bendito Mockup

Raw editorial style mockups created by up and coming designers
My fave mockup site for editorial style mockups. All of the mockups are incredibly unique and feature an editorial, street style feel that never feels over-styled or too precious.
Creative Market
Marketplace that features mockups of every style and product
A great marketplace of creators that features mockups for any product you can think of. Creative market is also a great place for custom fonts and graphics to up-level your branding and website.

Stock Photography

There are so many great sources of excellent stock photography these days that can supplement your brand images on your website or on social media. Here are my top sites that I always check first when looking for great imagery. The best part is that they are all free (always be sure to double check the terms when you use these resources).

Pexels

Stock photos, royalty free images & videos shared by awesome creators.
Lumi

Great source for free ai generated stock photography, illustrations and 3d renderings.
Nappy.co
Beautiful free stock photography site that was launched to highlight diversity in stock photography.
Nappy makes it easy for companies to be purposeful about representation in their designs, presentations, and advertisements.

Squarespace Plugins

Squarespace Plugins can enhance the functionality of your site and let you go beyond the built in limitations of the platform.

SQSP Themes
Selection of plugins that give advanced functionality to your site
A great shop that features plugins that add functionality to your Squarespace site that would not be possible otherwise. My faves include the mega menu plugin which lets you have a large fully styled drop down menu, lightbox anywhere makes it easy to have anything act as a sleek pop-up. Product swatch variant, lets you see visual colour and texture variants in your product listings.
Squarewebsites

Great plugins that add advanced functionality to display content
Great plugins that push what you can achieve on your site. Faves include the universal filter, interactive map and lazy load summaries.
SEO Space
The easiest way to make sure your SEO is optimized and covered
Considered the app for SEO on Squarespace. This plugin lets you easily check each page on your site to see how it is performing for SEO and gives easy to follow actionable steps to increase your rating. They offer a free SEO audit that I recommend everyone try out.

Fantastic Font Resources

My favorite place to go for fonts online.

Pangram Pangram Foundry
Great fonts that make a statement. Bold and minimalist style.
Pangram Pangram makes some of my fave fonts, including Neue Montreal, which I use on this site.
Harmonais Visual Creative Market Shop

Modern and unique fonts that reflect your brand voice
Harmonais Visual is one of my favourite font shops for unique heading fonts. My faves include the elegant retro serif Cocktail, the calligraphic serif Florentino, modern serif Constantine and the classy all caps sans Preston.
Brandon Nickerson Studio
Fun and modern fonts to make your brand stand out
One of my fave font studios, Brandon Nickerson Studio has a ton of unique display fonts that give your brand a ton of personality. My faves include the super fun 70s inspired Pooley, and the bold sans serif typeface Nautic Grotesk that’s inspired by nautical aesthetics.
Google Fonts
The ultimate resource for free body fonts
See all available google fonts here. Though I recommend using a unique display font from an independant designer, Google fonts are an amazing resource for complimentary body fonts.
Adobe Fonts
Great free font resource for subscribers of the Creative Cloud Family
If you are already subscribed to Adobe Creative Cloud, the Adobe fonts library is an often slept on benefit of your subscription.

Color Palette and Gradient Generators

Indispensable free tools to help you narrow down the colour choices on your website or in your branding.

Accessible Colour Generator
Make your website colours accessible
This brilliant generator lets you know if your background colour and text colour meet accessibility standards. Just enter your color code and the generator will tell you the best combos for accessibility and readability.
Gradient Generator

Easily create gorgeous gradients for your website
Just enter one or two colors of your palette and the gradient generator will let you create a radial, linear or conic gradient and tweak it until it's perfect. Then you can export your gradient as an SVG image or CSS code.
Coolors
My go-to colour palette generator
Search trending palettes, play with the random generator or add a few colors and get complementary matches. A great free resource to ensure colour harmony in your branding and website design.

Icons and Graphics

Indispensable free tools to help you source and create unique icons and graphics for your website and branding.

Unicode Library
A library of copy and past unicode symbols
Iconfinder

Free and paid illustrations and Icons for your website
Feather Icons
Simple minimalist open source icons
Lord Icon
Free and paid animated icons.

Tools to Help Run Your Business

A few of my favourite business tools that I use to automate parts of my business and keep myself organized.

Flodesk
Easy to design and cost-effective email marketing platform
Flodesk makes it super easy to create stunning email campaigns and allows you to use their pre-designed customer flows or create your own. I've used many different email marketing softwares and Flodesk is by far the best for value and ease of use.
Save 50% off your first year of Flodesk by clicking this link
Honeybook

Manage your entire customer pipeline from inquiry , proposal, billing and deisgn to project close in one place
I use Honeybook to manage all of my custom design work. It offers scheduling, invoicing (with the ability to auto charge credit cards monthly or in agreed upon increments), contracts, project management and more all in one easy to use platform.
Save 25% of your first year of Honeybook by clicking this link
Get Terms
Website terms & conditions and privacy policy generator
A super easy way to be sure your terms and conditions and privacy policies are up to date and complient.

Learn More About Website Design

The courses I recommend to anyone wanting to learn more about website design, coding or customizing their website.

Squarestylist CSS Basics (Free Course)
A perfect intro course to understand your website better and learn the basics of css customizations
By taking this free course, you get to learn:
How CSS can take your layouts to a whole new level
What you need to know about CSS, like syntax and media queries
The tools you can use to create and customize code with ease
Best practices in building out your content based on a mockup
Standout Squarespace

The most comprehensive Squarespace design course I have found
This is the course I recommend to anyone who wants to learn to code and create websites in the Squarespace ecosystem. The lessons focus on creating websites that follow best practices on accessibility, responsiveness, SEO, site speed and performance.
The Odin Project
The go-to (totally free) course that teaches you how to code.
The Odin Project is the best way to learn how to code. Learn advanced HTML, CSS, Javascript, React and more in an easy to follow course that is industry recognized. The best part is it is completely free.