Page builders often get a bad rap. They are often bloated – weighing your website down with heavy, messy code. They contribute to the homogeneity of design – making websites these samey, cookie-cutter, template-driven things with no originality or polish. And they can be a pain to manage – creating a mass of inconsistent widgets and pages on your website.
Many designers would argue that page builders have no place in design. Many developers would argue they have no place in development. Yet…
People use them.
They are undeniably popular and becoming more so every day.
And it makes sense. Page builders help a lot of different people:
- Freelancers can build websites for clients with minimal coding experience.
- Clients can make meaningful updates to their website without needing to hire anybody.
- Marketers can create and test sales pages quickly and cheaply.
- Founders can get their product idea out into the wild faster and with less upfront cost.
And want to know something else? Page builders can also be a great design tool.
Yes, you heard that right. Page builders can be a great design tool, if you know how to use them. Just because you’re using a page builder, it doesn’t mean you need to settle for generic, boring design. You can create something unique, polished, and consistent. It just involves reframing how you think about them.
So let’s look at how to design in a page builder.
1. Be selective about what needs to be “designed”
First, it’s important not to get stuck in the trap of thinking everything you produce needs to be designed from scratch. One of the main benefits of page builders are the libraries of frequently used components that you can use to quickly get a design up and running.
Many people take an all-or-nothing approach to design. You either create every single component from scratch, or you just grab a template and move on.
But I think that a more hybrid approach works best. Where you spend time crafting certain components and then use others out of the box.
This is especially useful when you’re learning design because you can spend your time and energy carefully crafting the most important components, without getting fatigued by having to do the same with the rest of the website.
Good design takes time – especially in the beginning. It’s about dozens of little details that on their own might not be noticeable and may seem like a waste of time, but together these details create something that looks professional.
2. Build up an inspiration library
If you’ve taken my course, you’ll know I’m pretty adamant about creating a library you can use for inspiration. You can of course find inspiration when you start a new project, but there’s something about looking for inspiration for a specific project that makes every website you look at not quite right.
So building an inspiration library should be an ongoing effort. When you come across something you like, whether it’s a whole website or just a pricing table, save it somewhere so you can come back to it time and time again.
But you can also collect inspiration from page builders too. When you come across pre-made components that you like, save them with your inspiration so you can come back to them later. Not all components are created equal in terms of design, so you want to have your own mini library of page builder components that you think are actually usable.
3. Start in design software first
When you’re using a page builder, it could be really tempting to just jump straight in, build your pages and try to design as you go. But if you are trying to create more bespoke design, then you will find it much easier to start in design software first.
The reasons are plenty:
- You can see the design as a whole.
You can zoom in and out of artboards so you can see how consistent they are and how they work together as a whole. - Design software supports content first design.
When you’re using a page builder, it can be really tempting to force your content to fit in with the pre-made templates that are already available instead of writing your content, then designing your content, and then building your content. - You get better version control and comparisons in design software.
You can duplicate artboards easily and see different versions of your design side by side, and easily restore older versions if you don’t like the new changes. - You can separate the design and the build.
Design thinking and development thinking are different. Even though you’re using a page builder and you aren’t coding as much, you still need to be installing plugins, configuring settings, and more. The context switching can really hinder the design process. - Finally, you can edit imagery very easily as you go in design software.
You can recolour icons, edit photography, and do all those little things that make a big difference in creating a consistent brand.
3. Make consistency a priority
As a designer, I find the biggest drawback to page builders is how difficult it is to keep things consistent. Because you have so much freedom and flexibility in terms of design you have to make a really conscious effort to make sure that this doesn’t get out of hand.
Coupling a page builder with a style guide will be a big help as your website grows. Your style guide doesn’t need to be anything fancy, it can be a Google doc with some design rules to keep things consistent.
You could define different padding or margin measurements, or document the exact colours that you use, or set some styles for buttons and images.
Doing this will ensure that you’re creating a website that can be used effectively long term without getting messy and overwhelming.
So those are some tips on how to use page builders in design. Page builders aren’t without their problems but with a bit of planning and forward thinking, you can create beautiful, unique, and consistent websites.
