The first steps I take as Squarespace website designer

So, it’s time to start designing your website and you’ve decided on using Squarespace as your web builder. How do you start? It seems overwhelming at first.

First, don’t worry about the template choice too much if you are designing in Squarespace version 7.1, the latest as of fall of 2023. In fact you can start with a blank template because all features across version 7.1 are the same unlike 7.0, where certain templates behaved differently from a functionality standpoint. No matter what template you choose in 7.1 you can make it look like anything else you see in the template roster.

  1. Start by simply naming your site. If you aren’t sure of your site name, just put something there as you can change it later.

  2. Then delete the demo content if you’ve chosen a designed template and add new pages that you’ve planned to feature on your site. Typically I’ll add a Services, About and Contact page in addition to the Homepage. You can leave those blank for now. The idea is to create a framework that you will start filling in.

  3. If you haven’t already look at website designs that you like. Create a simple design that mimics it. Always build and then refine. In website design, like many creative endeavors you want to create, then edit. Most authors attribute a strong final product with the work of good editors.

  4. Choose images of for your site. If you don’t have the time or budget for a professional brand photo shoot, choose free stock images from Unsplash, the service built into Squarespace, or use a service like Adobe Stock or Shutterstock, which offers stock images for pay. Many, many stock images look too fake or canned, so dig deep if you need to find images that look more realistic.

  5. Use dummy text if you don’t have your copy quite ready yet.

  6. You can employ a basic layout on the homepage that starts with a background image with headline text over it. Add a different style of section below that one, perhaps a single image block with a complementary text block. Below that try a section with a List format or another background image with text over it. The point it, vary the style of your sections on homepage to establish different visual features to help move the site visitor along.

  7. If you are unsure of how to build step six, look for inspiration from websites that are similar to your personal style.


Now you should have a true start to your new Squarespace website design. Keep filling sections in and don’t feel like you need to force subpages (non-homepage pages) to hold as much content as your homepage. Your homepage is the grand entrance. The inner pages can be more functional, similar to great design for a home.

  • One of my favorite features of 7.1 is the ability to save a section and recall it later if needed. Just hover over a section and you’ll see an editing block for that section. Click on the little heart symbol and that section’s format will be saved. If you choose to you use it again when you add a new section, your favorites will be available as options.

  • Use the predesigned page layouts provided by Squarespace, but don’t be afraid to adjust them for your own needs and preferences. For example, if a List section layout has a call-to-action button that isn’t quite right, get rid of it.

  • Keep it basic at first. Don’t add background image effects and other flourishes until you have all of your content installed. That is a major step. It’s a good idea to look at the complete picture first and then decide how to refine the look and feel.

Li Wang

I’m a former journalist who transitioned into website design. I love playing with typography and colors. My hobbies include watches and weightlifting.

https://www.littleoxworkshop.com/
Previous
Previous

Don't Be Dense

Next
Next

Why minimalist Squarespace website designs work