Toggle navigation

Wireframing for Site-Builder Applications

6 min. read

Site builders have almost endless options to customize. That can be dangerous. Starting with wireframes makes the process of choosing and editing templates easier.

Site-builder applications boast that "anyone can design a beautiful website" and it’s pretty much true, but be wary of jumping right into visual design. Wireframing websites before starting to build them is just as true when using a site builder as it is if a professional developer were to write custom code.

Most people who come to me with web design questions often cite that they built their own site using Wix or Squarespace, but are unsatisfied with the results. The experience of creating the site they saw advertised was too hard and they did not like how it turned out. I have experienced this myself testing out various site-builder applications. It’s frustrating.

These companies often boast “Create a beautiful website without design experience”, or “Use our gorgeous templates to create your site”, but they fail to mention that you still need to plan out your site, just like in any other web design project.

Don't get me wrong, site builders are a great option when you need a web presence and don’t have access to designers or developers, but it can also be difficult to make your site as nice as the template you chose.

Pros and cons of using a site builder

Deciding whether to use a site builder isn't always an easy decision.


  • Can create very robust websites with lots of functionality
  • Well designed templates to choose from
  • Low in cost
  • Can be faster than building a site from scratch
  • Putting the design and dev part aside, they also provide easy ways to acquire a domain name and hosting, which are usually part of the monthly price. These are simple tasks for professionals in the web space, but are a total mystery to most people.


  • They are difficult to customize
    • Sites do not turn out as well as the example template
    • Often a designer or developer is needed to intervene
  • Difficult to export your site or backup your content
  • If you want more than basic functionality, you have to pay more
  • They allow the users to make some bad design/UX decisions

The steps outlined in this article should help as you work to create the site you imagined when you chose your template.

Overview of the design process when using a site builder

First and most importantly, know the content of your site. It’s easy to get drawn in by a gorgeous template with awesome copy, a cool logo, and great photography. Be sure you have a good sense of what your site will need. Check out my article about Content-First Design to help you understand what steps to take to be ready for the design phase of your project.

Here is the process I use to wireframe for site builders:

  1. Pick one or two (maybe more) templates that you like
  2. Wireframe each page you plan to use for your site from each template
  3. Swap out the generic content blocks with your own content
  4. Refine and update your pages until you find the layout you like best

You may be asking yourself, “Why should I do this? It seems like extra work.” Wireframes serve many purposes. If you get started and find that you aren’t sure what content to put in them, you will immediately know that you have some content-gathering to do. Finding this out in the wireframing phase of a project is better than finding out when you are ready to put everything into your site builder.

Also, it allows you to get all of your thoughts out of your head and onto the screen, very quickly and cheaply.

Finally, if you already have content, it’s a fast way to see if all of it will fit comfortably. That is why professional designers always start the design phase of any project with it.

Let’s take a look at these steps in more detail.

Choose the right templates

All site-builder applications use templates. The same methodology should apply when using pre-designed ones.

Despite all of the customization options, most templates are not very flexible and will break (look bad) if you don’t use them as intended. Don’t force templates to do more than what you see, unless you’re a pro and know how to customize them properly. You were drawn to a particular template for a reason, try to make it look as close to that as possible in the early stages of design. This will save you countless hours of designing and redesigning pages to make them all look good as you add content to each of your pages.

tl;dr When choosing a template be sure to find one that will hold all of your content!

Know your content... blocks

A series of content blocks make up a template. Think of them as the pieces to a puzzle. Put them together and you have a web page. As you browse the design template options available, you will notice lots of similarities in layout. That is intentional. These layouts are common because they are proven to work well with lots of content types.

There are different types of content blocks. I will break them down by Action-Oriented and Informative Content.

  • Action-Oriented Content is usually short and tries to get the user to take action. Think Sign Up or Shop Our Holiday Sale.
  • Informative Content is just as it sounds. It’s intended to inform the user. Think About Us content or content about the features of a website or app.

Quick tip: You do not want too much action content on one page. Try to use your informative content to support the one action you want the user to take.

Action-oriented content is short and usually includes a call-to-action.
Action-oriented content is short and usually includes a call-to-action.
Informative content is intended to inform the user, and usually supports action-oriented content.
Informative content is intended to inform the user, and usually supports action-oriented content.

You can import the content blocks shown above from Wireframes to Go.

Start wireframing!

The best way to know if your content will work is to create a wireframe of each page from the template you choose. It is much quicker than if you started adding content right into the site builder. You can also wireframe out multiple template options to see if you prefer the layout of one site over another. This is why UX designers create wireframes. It’s quick and easy.

"How exactly do I do this?"

The easiest way I found is to take screenshots of each page and recreate them in your tool of choice.

Each template has a demo site you can preview. For this example, I went through the demo site and selected the pages I planned on using for my website.

To take screenshots, I use a tool for the Chrome browser called Full Page Screen Capture, but there are tons of options to choose from. I do not measure the screen precisely or recreate it pixel for pixel, word for word. I create an approximation.

Put the image side by side and add all the elements from the template into the wireframe. For text, I start off with lorem ipsum and try to match the text sizes as much as possible. If you have content ready, place it in the wireframe. You can import images into Balsamiq.

If this template will work, start adding your content right into the wireframe
If this template will work, start adding your content right into the wireframe.

Below are various examples of templates found on Squarespace. Simply import them into Balsamiq from Wireframes to Go and start adding your content.

Bedford template

Hayden template

Harris template

Avenue template

An alternative would be to wireframe all of your content blocks and arrange them where you think they would go on the page. Then, find a template that best matches your ideal layout. You may need to edit your blocks a bit to match the template, however.

Create wireframes for each content block in your Template and design a page.
Create wireframes for each content block in your Template and design a page.

Now that you’ve got your content in wireframes according to the site builder templates, you should be ready to start building your site. Designing your content within the constraints of the site builder means there shouldn’t be any surprises.

Site builders have seemingly endless options to customize with. That can be dangerous. Your simple website can turn into a mess of pages real quick without some upfront planning. Start with wireframing when building your own website and the process should go much smoother. Good luck and happy designing.

By Billy Carlson
Got questions or feedback? Email

Related Articles

How to Use Wireframes for Content Modeling

Modeling your written content visually before you start wireframing the page is a little-known practice that will make you better at writing for the web.

By Derek Gillette

5 min. read

Ten Principles of Effective Wireframes

Guiding principles to help designers wireframe better and encourage the entire team to participate in the design process.

By Billy Carlson

Usability Testing Wireframes with Your Users

Learn how to conduct discount usability tests on wireframes with users — an effective step in validating your solution before implementation. For small budgets, too!

By Mike Angeles

14 min. read