Knowledge Base Articles > Wireframing for Site-Builder Applications

Wireframing for Site-Builder Applications


SUMMARY: 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 to using a site builder:

  • 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.

Cons:

  • 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.

Here are some suggestions for you as you work to build your own site with one of these tools.

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. Checkout my article 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, which we touched on in the content first article. 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 webpage. 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 WireframesToGo.

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 by following these instructions.

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 WireframesToGo and start adding your content.

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.


Billy CarlsonBy Billy Carlson
Got questions or feedback? Email learn@balsamiq.com.