The future of web design comes in blocks

5th November 2018

By Ben May

Are you designing or overseeing the design of a new website? We’re sharing some lessons on block web design, the future-proof and more efficient way to approach web design.

Over the last couple of years, content management systems, including WordPress, have been moving towards richer content editing experiences (how you edit your pages or content).

For example, WordPress has transitioned from the traditional content editor, which is much like a single large text area, through to visual page building experiences, so you can preview things in real time.

The default WordPress page editor 

This transition from standard “pages” through to richer content editing experiences presents great opportunities for publishers to do a lot more with their CMS. 

If you’ve been involved in any kind of website design project in the last decade, the experience is somewhat the same. Website designers will design style guides, then design individual layouts, like a home page design, a content page design, and so on. This is now becoming a less efficient way to design a website, and moving towards a block based approach offers many significant advantages we wanted to share.

What is block design?

Designing by block can also be called designing by module. Whereas some designers focus on pages and templates, module design means to design the different segments needed on a page.

With multiple different sections designed, coders and developers can then create each module and compile them in different sequences to create unique pages and templates.

Think of modules like lego. With block design, you can use your unique building blocks to create a number of uniquely designed pages that still fit within your brand, since they use the same elements, colours, and other design aspects.

4 reasons we recommend block design for websites

1) Page layout designs can be a false indicator of effort

Creating multiple page layouts sounds like a lot of design work, but if they look more or less the same, or follow a branded style, it can be a false indicator of effort. Designers can construct different page layouts by copying certain elements and tweaking others so that it works as a different page.

For example, if you offer different types of solutions, these pages can follow the same layout and have the same structural elements, but look different with a few minor changes.

2) Building modules is more cost and time efficient

Thinking of your design in terms of blocks means that designers can avoid providing multiple sections that are almost all identical, but with minor variations. This makes things easier for your designers, more cost efficient for your company, and faster for your development team to put together.

3) Block design is more flexible

Having your website designed in blocks gives us the flexibility to pull together different pages based on elements. Instead of having a client give us 10 designs to quote off, we could get an inventory of blocks and still be able to create all the different page layouts the client sees.

4) Your website can evolve with your business

When you have separate building blocks of a website, that website can grow, shift, and change along with your business.

It’s much easier to put together a page for a new solution or offering using elements from existing (and branded) pages, instead of designing an entirely new one.

Having different modules ensures a scalable website, no matter what you have to add or remove.

Communication & Branding Agency, Enigma, created this helpful video to explain the difference: