Squarespace Design Guide

Squarespace Design Elements You Need

When designing your new website or remodeling your old site, you need a few key elements to make the process easy and efficient. We will outline everything below. Before I begin, I’ve also put together a video for designers to know what they need for design as they begin the site. :)

Squarespace Design Elements You Need For Your Site

Logo

Sagi Haviv, partner in the design firm Chermayeff & Geismar & Haviv, said ”A logo is not communication. It's identification. It's the period at the end of sentence and not the sentence.” What specific elements do you need for website?

Files Needed

  • Color Logo - Clear Background

  • Black/White Logo - Clear Background

  • Logo Icon only - Clear Background

  • Logo Mark only - Clear Background

Favicon (Browser Icon)

The favicon is made to help quickly identify your website when people are browsing through hundreds of tabs. And Squarespace gives the square for all it’s sites natively, but it’s generic, so it loses it’s value.

Screenshot 2019-01-10 12.35.20.png
new favicon.png

File Needs

Image resolution
Favicon images work best across all browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px. These are the standard favicon dimensions. While some browsers support larger favicon files, all will support that size.

File format
We recommend using an .ico or a .png file as the favicon image. Some versions of Internet Explorer may have trouble displaying a .png as a favicon.

File size
Favicon image files can't exceed 100 KB.

Header 1, 2, 3

Font choices for your headers can make or break your site. Font gives a feel of your brand and who you are to your website visitors.

You will need (image below) a few key items for fonts. Squarespace strucutres your site with Heading 1, 2, 3, and body font. This is best practice for SEO to follow the guides the same way it’s strucutred (so heading 1 is the biggest and covers headlines while body font is paragraphs and long text).

You can implement hundreds of free fonts into Squarespace. So, be sure to chat with your designer before they choose fonts to prioritize font’s built into Squarespace (unless you need highly unique fonts). Hundreds of free fonts are available inside Squarespace are available from TypeKit and/or Google Fonts.

Adding Custom Fonts is quite straightforward but you may need a designer or custom developer to make sure the fonts are implemented seamlessly across your entire site.

How to Design A Squarespace Website - Design Elements

Body Font Choices

For the body font (mage above where it says “lorem ipsum”, this font is really important to request a few things from a designer:

  1. What is the font for the body copy?

  2. What is the weight of the font? (Typically 300, 400, or 500)

  3. What is the spacing between the lines (line hieght)?

  4. What is the max words per line we should aim for?

For #4: Look below, which website is easier to read? It's obvious - the size that’s bigger but also the one that has less words per line. It’s easier to follow. Plus the second option (lower option) is much easier to skim, as many people do nowadays.

 
 

Expert note: Have your designer choose Heading 1, Heading 2, and Heading 3 font. Plus, your body font & your body link color.

Color Palette (2-4 colors)

Choose Your website colors before you begin building your site, otherwise it gets a little crazy. I would request 1-2 main colors (outside white/black/grey) from the designer for your brand. You can also ask for a specific black/grey, as much of the webs option for black, isn’t full black (#000), it’s an off-black (the image below shows a good example of this. The HEX code isn’t #000, it’s #00010D.

If you are choosing the colors yourself, start with 1 color you absolutely love and drop it on Adobe’s color wheel in the middle (image below). It will give you ideas of amazing colors to go along with your favorite color.

Choosing Colors for Your Squarespace Website


Additional Items You May Want for Your Squarespace Design Before You Begin

Body Style/Font

Each Squarespace website gives you 3 native styles for buttons - small, medium, large (image below). You can shape these buttons to be Square, Rounded (that means the corner of the button are softer than the square buttons below), and Pill style buttons. Also, you can have the buttons filled in (solid) or outlined, like the ones below. A few things to request from your designer:

  • Small/Medium/Large Button Shape: Square, Rounded, or Pill

  • Small/Medium/Large Button Style: Solid, Outlined

  • Small/Medium/Large Button Color

  • Small/Medium/Large Button Font/Font Weight/Text Transformation(Options are ALL uppercase, lowercase, or capitalize)


Expert note: Create a free trial on Squarespace for your designer to test his design on the platform and give you specifications on everything. They can even export a JSON file with everything already designed on the site (how to down below).


Icons

Struggling to write text for your website? Use icons instead! Icons have a way of speaking to people without saying a word. There are a few websites where you can get free icons/paid icons I’ll link below.

Flat Icon (screenshot below of their icons)

Noun Project

Recommendation:

Download icons at 128x128 PNG (this will give you a transparent background) This makes the mobile experience awesome

On Flat Icon, you can change the color of the icon before you download it. Just click download, and click PNG. You will see color options appear. From there, you can change the color to your desired color. It must be a black icon for this to work, not an icon with multiple colors.

Screenshot 2019-01-10 13.19.05.png



Exporting JSON file

If your designer is willing and makes it part of the project scope, they can create a mock-up trial site, implement the design options on a design page they create and export the JSON file. Details on exporting the page here.

David IskanderComment