Blog

Endless possibilities with Component Based Design

To overview
Endless possibilities with Component Based Design

In the past, everything was... worse?

From the early days of the internet to long after, a website was often nothing more than a literal translation of the company brochure. You hired a web designer or Desktop Publisher (DTP'er) to put your brochure in an online environment.

This designer was used to designing books, posters, letterhead, and brochures for a printer. When designing the first websites, it was therefore natural to set up your design in an endless series of pages. All worked out in detail. published

And if the client had feedback? Or did you want to try something different? Then as a web designer, you had to go through all those pages again to adjust the font in all places. This process, with different feedback rounds per page, took (as you can imagine) a lot of time. And if there was a mistake in that process? It caused inconsistency in color use, styling, or tone of voice. "Making a quick adjustment" was actually not possible.

Website Design Now

Meanwhile, the use of the internet and websites has become a permanent part of our daily lives. The internet is fully integrated and generally accepted as a medium. For many organizations, their website is no longer just a digital brochure, but a real, digital experience of the brand. Or the core business on which the entire company revolves.

Many websites are still built on the principle of 'pages'. Just think: there are still a fixed number of pages that always come back: the 'homepage', 'contact page', and 'about us', for example.

Fortunately, the design process has really changed. We no longer think in whole pages but in components. This is called component-based design.

What is component-based design?

As the name suggests, with component-based design, you design components. Components are separate building blocks from which a page is built. Think of a header, a footer, a call-to-action block, a contact form, a text block, a quote block with an image, and so on. Think of it as a big box of Lego bricks. By sticking and combining these bricks together, the most beautiful buildings arise. The possibilities are endless. By designing each component separately with the right attention, the design and use of it will improve overall. published

Why is component-based design useful?

A typical website nowadays consists of thousands of pages. We can never have a designer design all those pages at the pixel level. Let alone manually make changes when something needs to be adjusted.

With component design, you don't have that problem. When you adjust the design of a component, this is immediately implemented on all pages where this component appears.

  • This way you ensure speed and consistency;

  • You can try new things and present them to the client faster;

  • or do A/B testing with users;

This makes the design of the website increasingly targeted and a bit better. Together with our clients, we look at which components are minimally necessary in preparation. By combining components, new possibilities arise. Customers can also put together new pages themselves with the available components, without first having to work out a design in detail!

Designing Components

Over the years, many standard conventions and best practices have emerged. These are also applied in component-based design. Everyone now knows how a contact form works and expects a certain standard behavior from it. So, we don't have to reinvent the wheel every time, but can focus most of our time on optimizing the look and feel and things that really make a difference for our customers when designing components.

Components are optimized for the device on which they are used. For example, a menu (navigation component) may look completely different on a smartphone than on a laptop or television screen. Each component, therefore, has different applications and possibilities. Together, we look at the needs of the target audience and the usage. This is a continuous process, where we continuously optimize components.

From design to development

Component-based design has the advantage that it is also easier to transfer to development. Each component has its own design and characteristics. Building the website is, therefore, easy to phase and control. We split the construction into different sub-deliveries, determining in advance which components we will realize. In the CMS, we create fixed templates of components for many recurring pages, but the beauty of component-based design is that customers can also build new variants of pages in the CMS by 'clicking together' and combining the available components.

Customer and Design

With component-based design, we are able to truly involve the customer in the design process. No more endless ping-pong processes with countless feedback rounds and tiny adjustments across different pages. Instead, we work goal-oriented on a specific component. The design process is, therefore, much faster, scalable, and really enjoyable for everyone!

Do you have a design challenge yourself? Do you want to see examples of component-based design? Then be sure to contact us for a look behind the scenes!

Read more blogs? You can find them here!

Interested? Contact us

Close
Your name
You need to fill in your name
Email
You need to enter a valid email address
Company
Message
You need to enter your message

Thank you for your messae 💪

Thank you for your message! We will answer your question shortly
LiveWall is a digital agency. With a team of developers, designers, app developers, webdevelopers and designers we create high end digital products.