Creating pages and sections with Storyblok and Vue.js

From this article, you’ll learn:

• How components are created
• What Atomic Design, Storyblok and Vue.js are
• Which solutions suit your business the best
• Whether the user interface affects the user experience
• How to implement each option in a specific project
• How to work with components effectively
   

Atomic Design, Storyblok and Vue.js – or how to work with components effectively

There are many different methodologies for working with components that can be easily integrated with headless systems.

However, before you commit, it’s worth looking into which are the best solutions, both your business and your customers.

Components let you create more detailed instructions and designs, which in turn make up an intuitive interface that even the most demanding users will find attractive and fun to use.

User experience and application interface

An application interface that is designed to fit the preferences and needs of a specific group of customers is an inseparable part of the user experience.

You can think of a user interface (UI) as an administration panel that every newcomer to your website should have no trouble navigating, right from the start. It must be both intuitive and simply fun to use.

An effective way of creating high-quality UI is the component methodology. The tools that let you build systems, down to the tiniest detail, are what guarantee an unforgettable user experience.

Remember to design your UI with both the visuals and utility in mind. Every tool designed for use by online visitors should be intuitive and able to accommodate diverse customers, including people with disabilities.

Methodologies for creating components

Even though the methodologies for creating components are popular in the e-commerce world, not everyone knows which solution is the optimal one.

We’re not designing pages, we’re designing systems of components. - Stephen Hay

The above quote shows that working with components is more about combining different building blocks to form a system than about developing a website in the traditional way.

However, the sheer number of available solutions for component-based designs makes it difficult to choose the perfect one for your business, and you always want your decision to be well-informed.

That’s why you’ll find an overview of the popular solutions below. We hope that with our help, you’ll be able to quickly find the best choice for your business.

Atomic Design

This design method involves dividing the interface into progressively smaller elements belonging to five distinct levels:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

The complexity of the elements decreases with each level.

Pattern Lab

Pattern Lab is a tool that lets you quickly create and test components that are grouped into categories, which can then be used to create templates.

Storyblok

Storyblok facilitates creating and testing components. The tool can also be used to streamline personalisation, by isolating the environment for each element.

Web Components

This technology allows you to create non-standard HTML elements and add them to an application. By choosing Web Components, you’ll be able to easily introduce components in various parts of your system.

As you can see, there’s a lot of methodologies available for creating components. Below, we present the most popular solutions that we believe are ideal for every modern online enterprise.

What is Atomic Design and why is it worth using?

The aforementioned Atomic Design deservedly occupies top place in the popularity charts.

Atomic Design also lets you conveniently design interfaces by dividing them into smaller, less complex elements. This philosophy was proposed by the well-known IT expert, Brad Frost.

The aforementioned levels of Atomic Design refer to the hierarchy used in this methodology. Specifically, they are:

• Atoms – the smallest elements of the interface, such as buttons, text fields or icons;
• Molecules – combinations of atoms that form more complex elements, such as forms or search bars;
• Organisms – complex elements composed of both atoms and molecules, such as headings, footers and menus;
• Templates – elements that combine atoms, molecules and organisms into concrete sections, such as the main heading or the content;
• Pages – the final deliverable, i.e. websites or applications made up of atoms, molecules, organisms and templates.

If you decide to implement Atomic Design in your business, you’ll be able to enjoy a number of important benefits, including:

Easy management

Dividing the interface into smaller elements makes its management that much easier and more intuitive.

Consistent design

A component-based approach helps you to maintain a consistent design, in which every element naturally fits with all the others.

Efficiency

Components allow you to reuse elements multiple times, meaning that you no longer have to build every page from scratch, which streamlines the entire design process.

Modularity

A modular project lets you easily make changes and share elements that are to be reused.

As you can see, Atomic Design focuses on dividing an application into smaller parts. This makes accessing every element quick and easy – while the system as a whole remains consistent and polished, down to the tiniest detail.

Is Storyblok the right choice for you?

Storyblok is rightfully advertised as a great means to create modern content.

Storyblok is one of the easiest CMSs I have ever worked with. Having worked with various CMSs before, and knowing my way around, Storyblok was the easiest to learn how to use, teach others and adapt to your content needs. - Emelie Samuelsson, Head of Tech at Xlash

The Storyblok CMS handles content in a very innovative way. It is currently used by Netflix, Adidas, Tesla, Saint Laurent and other major companies.

The system is particularly acknowledged for providing the ability to work with components. Storyblok is easy to use and allows you to adjust even the smallest details of your content.

In addition, the platform provides reliable headless technology, high-quality security and scalability. Choosing Storyblok guarantees that both your customers and your employees will be satisfied.

Vue.js, or a modern programming environment

Vue.js is a modern JavaScript framework that is used every day by programmers across the world. The solution works equally well for freelancers, startups and employees of international organisations.

Choose Vue.js, to gain a flexible tool designed to help you create online UIs.

An undeniable advantage of Vue.js is the possibility to seamlessly integrate it with other software, which means that you don’t have to worry about its compatibility with the existing solutions used in your business.

When choosing between programming environments, remember that Vue.js is not only a reliable framework, but also an effective tool that will allow you to create even the most advanced UIs.

Implementing the design model of your choice in your project: guide

Regardless of what sector you operate in, an appropriate design model is always helpful. If you’re wondering how to implement such a solution in your company, read the primer below.

How to effectively implement Atomic Design

• Determine the goals of the project: before the project begins, it’s worthwhile to consider your expectations and the elements you’ll need to meet them.
• Make a list of atoms: following up on the previous step, make a list of the atoms that you’ll need.
• Create the molecules: combine the atoms into more complicated elements, such as a contact form.
• Combine the molecules into organisms: you now have all the elements you need to create headings, menus, page footers, etc.
• Design the templates: combine all the part you’ve created so far into a theme for your website that’s easy to use and modify.

Use the above steps to effortlessly implement Atomic Design in your business and make working with components easy and effective.

How to use Storyblok to build an element structure

Begin building an element structure in Storyblok, by creating folders (groups) named ‘molecules’ and ‘organisms’. Next, create a component that matches the rendered sheets with the name, description and icon in a given colour, by following the steps outlined below:

1. In the molecules folder, create a component called the ‘service-card’.
2. Add properties to it, such as a name, icon, colour or description.
3. Create an element called ‘services’ inside the organism group with the following properties:

• Heading – the heading of the section on the page;
• Services – a container with the molecules (service-card).

Remember that the properties inside the component must be defined as a block, since you’re not inputting any specifics, in contrast to the molecules, which were properly defined earlier.

The same panel also allows you to set the maximum number of molecules that can make up a given organism.

For the molecules and organisms, these types of components are referred to as ‘nestable blocks’; whereas templates are referred to as ‘content-type blocks’. A particular theme is defined by:

• The name: page-template;
• The ‘Title’ field;
• The ‘Body’ field (you can limit the possibility to add components, which only belong to the organisms group).

Summary

To summarise, creating pages and UIs can be a real challenge. However, there are many methodologies designed to help you rise up to meet it.

Some of the most popular solutions are Atomic Design, Storyblok and Vue.js. Each of these tools offers a variety of functionalities, which is why it is important to choose the best one.

Before you choose one of the solutions mentioned in this article, consider the specifics of the sector that you operate in and the real needs of your target group.

Have you already decided which component methodology suits your needs the best? Or maybe you’re still unsure? Regardless of your answer, feel free to get in touch, and we’ll plan out your best course of action together.