đŸ‘‹đŸœ We wrote a book! Order Wireframing for Everyone today →

Balsamiq

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.

Pros:

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


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.

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

You can use the content blocks inside Balsamiq. Just search for "Website Content Blocks" in Quick Add.


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.

Website page’s design template and its recreated wireframe.
If this template will work, start adding your content right into the wireframe.

Below are various examples of templates found on Squarespace. Simply search for "Squarespace" in Quick Add 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.

Animated gif showing the building of a wireframe from preassembled design patterns.
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.


Webinar: UI Design with Wireframes

Watch the recording of our webinar about using wireframes to learn UI design.


By Billy Carlson
Got questions or feedback? Email support@balsamiq.com.


Related Articles

Accelerate Your B2B Software Spec and Wireframing Process

A software specification answers the what, why, and how. Here are 7 proven tips to create better specs and wireframes before moving to implementation.

By Diarmuid Glynn

5 min. read

Use Wireframes to Develop Your Designer’s Eye

Even if you don’t call yourself a designer, there are some easy tips and techniques to help you see a digital product and its usability like a designer.

By Billy Carlson

5 min. read

Common Website Mistakes and How to Fix Them

Learn how to improve your website’s user experience! For each mistake you’ll learn what usually happens and why, what it looks like, and what to do about it.

By Leon Barnard

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - JĂ©rĂ©mie AndrĂ©
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!