Web Design In Squarespace: Step 1 - Create A Grid!

 
 

So you wouldn’t call yourself a web designer. But that doesn’t mean you don’t deserve to make a kick-ass website in Squarespace! Learn how to utilize a grid structure and you’ll find your website looking better in no time.  

Step 1 to web design in Squarespace is creating a grid
 

FIRST OFF, WHAT IS A GRID STRUCTURE?

Imagine splitting your website into a few (or many) evenly-spaced columns entirely surrounded by a margin; that is your basic grid structure and everything you put on the page will be aligned to this grid. A grid structure will be the foundation of your web page (check out how our website has been split into 8 columns in the image here!). Now, you don't have to use as many columns as pictured, but it’s important to know how to use grids to your advantage. Plus, you can break the rules! Even if you have 8 grids, you can span content across the full width of the page, have content fill 2 of the columns, or play with the structure as you see fit.

 
GRID STRUCTURE-01.png
 

 

WHY SHOULD YOU USE A GRID?

The first thing you have to remember is that your website's purpose is to present information. If you’ve laid out your information successfully, your audience should be well informed on what it is that you do and have to offer. As an entrepreneur, our first instinct would be to "info dump" to make sure that all the information is presented and absorbed by viewers.  But throwing everything on to a page can be confusing, it can make it hard to absorb information, and could potentially turn away interested parties.

Web designers try to avoid these pitfalls through the implementation of a grid structure on the web page. By having the grids in place you'll have a more controlled way of displaying content, and most importantly (for Squarespace) you'll have a way of easily controlling the size of the content you're placing on your website. This is because things like images, when loaded onto Squarespace, will load as the size they actually are. But, if you use a spacer to set up a grid for yourself before hand, your image will fill the width of the spacer, and therefore fit into your page structure how YOU want it to. 

Plus, grids also...

1. ESTABLISH A HIERACHY

Not all content is created equal. You will know where your audience should focus its attention and should lay out your information as such. Using a grid structure can help enhance the content you deem more relevant; make it be the first thing your eye lands on. By increasing the size of an image across many columns in a grid, the eye of the viewer will automatically travel to the largest item on the page.

 

2. MAINTAIN ORGANIZATION

By sticking to a grid structure, you can better present copy heavy pages in a more attractive manner, where information can be easily digested (think editorial pages of a magazine). Keeping your webpages organized and similar across the entire site will provide clarity for your audience as well. As they continue to navigate, they will not get overwhelmed by an unfamiliar page.

 

3. KEEP THINGS TIDY

Which leads to this point: organization will also lead to a tidier website. Aesthetically, tidy websites with ample white space are better received by audiences, as they don’t confuse the eye and are attractive to look at.

 

4. CREATE BALANCE

When you design in a grid, this can help guide you to establish balance on your web pages. Using columns as guides may first lead you to design symmetrical layouts, but then you use the grid structure to move content around to a more attractive manner in a way that still makes sense. For example, if you know you’ve got three even columns at the top of your webpage, you could play with a smaller box next to a larger box in the next row of content below that.

 

5. BUT YOU CAN ALSO BREAK FREE!

Like any effective rule, the grid structure is here to guide you. But it’s also meant to be broken. Once you feel confident enough with how to lay out content on a grid structure, dabble in occasionally breaking out of those hard and fast columns. Used sparingly, it can often leads to more interesting designs and add something special to your website. Remember, these are just guidelines! It’s your website! You do what you want!

 

 

SO HOW DO YOU CREATE A GRID IN SQUARESPACE?

This step is surprisingly easy, because you can use the spacers! As mentioned, any content you load will fill the space created by a spacer, making it the perfect tool for setting up grids. Take a look at the steps below to see how you can create your own grid in Squarespace, using the spacer content blocks.

 

1. FIND THE PAGE YOU WANT TO EDIT, AND ADD A SPACER

Adding a spacer in squarespace to create a grid.png
 

2. ADD A COUPLE MORE SPACERS

Adding spacers in Squarespace to create a grid for your web design
 

3. FIND THE BLACK LINE AND THE HAND ICON, USE THAT TO MOVE THE SPACERS NEXT TO EACH OTHER

Adding spacers in Squarespace to create a grid for your web design
 

4. PLAY WITH THE WIDTH OF THE SPACERS USING THE WIDTH TOOL (HOVER BETWEEN THE SPACERS TO FIND IT)

Change the width of your spacer grid in squarespace
 

5. ADD SOME CONTENT AND PLAY WITH THE GRID YOU'VE CREATED!

Place content into your grid in squarespace
 

6. ADD IN EVEN MORE SPACERS TO REALLY GET CREATIVE

Add in lots of spacers to create a dynamic grid in squarespace
 

Practice makes perfect so experiment with your grid structures! If you follow your good design instincts and look to other websites you admire for inspiration, you’ll have a great Squarespace website in no time. If you'd like to book some 1:1 Squarespace training time with us, get in touch! We offer consultations and full-day work training sessions for Squarespace newbies.