Designing your AEM Cloud Service Website with Core Components

Adobe brings a set of reusable and production-ready components for its content management system, AEM.

Their name: The Adobe Core Components.

Their purpose: Speeding up development time.

But how do you take advantage of these Core Components to deliver a website fast?

What is the best design approach, and how should the team members work together?

If your company is using AEM or AEM Cloud Service and you are looking to fast-track the design process while following the best practices of AEM’s styling system, you came to the right place.

Today, we are going to explain how to avoid a long design phase, and too much back and forth.

We will explain the best workflow to design user experiences and build websites at scale:

You’ll learn what Adobe Core Components are…
and how your design team and development team should collaborate!

AEM Styling process in a nutshell
What are the Core Components in AEM?
How to use the AEM Core Components
1. Understanding the architecture of a Core Component
2. Customising a Core Component
3. Roles in your team
4. Managing design at scale with a flexible system
AEM design workflow with Core Components
1. Step 1 – Map the mockup to Core Components
2. Step 2 – Design in Adobe XD
3. Step 3 – Configuration and style in AEM matching the mockup
4. Overview of the AEM styling workflow
Core Components: AEM Cloud Service’s best companions
Finally, build enterprise websites faster with AEM Cloud Service and Core Components

AEM Styling process in a nutshell

Let’s go through the styling process with Adobe Experience Manager.

The process suits a new project with AEM Cloud Service.

However, you could follow a similar design approach while working with an on-premise version of AEM.

Indeed, the basis of the styling process will remain the same for any version of AEM and leverage Adobe Core Components, a library of best practice components.

The main idea of the styling process can be summarised in three concepts:

Using standardised components
Low code, a software development approach that requires little to no coding
Reusability

The standards are represented by the Core Components. More than just a library of web elements, they will drive the design of the user experience from the very beginning and help the designers, the website owner, and developers to work together on a common frame.

Low code is a key aspect of the styling process. Why always reinvent the wheel?

The Core Components offer a foundation. By leveraging them, the development effort is drastically reduced and the main task is all about styling the components. In other words, it’s focused on adapting CSS and JS. HTML won’t be adapted.

Finally, the design elements must be reusable for other websites, landing pages, or intranets.

When companies decide to invest in AEM and build a consistent user experience across many websites and channels, they must consider having proper information architecture.

A well-designed component library helps them implement websites at scale.

We will now go into detail of these concepts, explain what core components are, and what it means to build the user experience with core components in mind to get your project design up to speed.

What are the Core Components in AEM?

The Core Components are a set of standardised Web Content Management (WCM) components for Adobe Experience Manager (AEM).

They were introduced with AEM 6.3, and their aim is to speed up development time while reducing maintenance costs, and ensuring better upgradability.

The use of Core Components is the best and recommended approach to start a new project with AEM as a Cloud Service. Core Components are cloud-ready. Using them will help you deliver your new website faster.

If you have expertise with building websites, you might have noticed that some elements or UI patterns are quite common. For example, we often build text, image elements, or teasers highlighting content of related pages.

This is what the Core Components library has to offer. A list of thirty versatile components including:

Title
Text
Image
List
Teaser
Download
Button
And more components…

These components are built to be flexible and can be assembled to produce nearly any kind of layout.

From our expertise, 80% to 90% of usual components on a website can be implemented with a core component and a bit of styling.

As you can see below, the teaser components come with four variations that cover most use cases.

If something is missing, you can still customise a core component, extend a core component with additional functionality, or for complex scenarios, create a component from scratch (the old school way).

Adobe Core Components are open source, and you can find them on Github.

To summarise, the Core Components offer a standard approach and have many advantages:

Design-agnostic: data, logic and design are completely separated
Stylisation: they can be styled in different ways
Flexibility: they offer a wide range of functionality
Future-proof: they guarantee compatibility with future versions of AEM

How to use the AEM Core Components

To understand the design process and the people, profiles, and roles involved in this process, it’s important to get a better understanding on how to use, extend, and customise Core Components.

We won’t go too much into the technical details, but it’s important that the anatomy of an AEM Core Component is understood.

Understanding the architecture of a Core Component

To make it simple, a core component can be split into two distinct parts: the backend part and the frontend part.

The backend contains:

The content model. It defines the structure of the content that can be stored in a component: for example, a teaser might consist of a title, an image, a short description text and a link to the target.
The configuration of the components and the edit dialog. These elements let you define what to display, and what an editor can edit, and the options he can use.
The logic behind the preparation of the content for frontend (also called view).

The frontend part will be in charge of generating the output in HTML:

A markup language (HTL) is used to bring together content from the backend and HTML elements.
CSS and JS are used for the styling and effects applied on the elements.

(We use on purpose layman terms, if you want more specific information, jump to the official and technical documentation of Adobe.)

Customising a Core Component

Yes, a core component can be customised. You can extend them to match your requirements and avoid starting custom development from scratch.

However, a word of advice. To keep all the benefits and guarantee upgrade compatibility, some best practices and customisation patterns must be followed:

1 ) Never modify the code directly. Instead, extend the existing logic:

The architecture of a Core Component allows you to extend the content model, dialog, and logic of a component and allow an editor to use additional content.

For example, you might want to add a “category” field to a certain teaser. All you have to do is extend the teaser with a text element “category“, and define how the editor shall use it in the dialogue, and how it shall be represented in the HTML output.

2) Style the components by applying your own CSS styles:

Core Components follow a standard naming convention inspired by Bootstrap to make it easy for an experienced frontend developer to apply the website’s branding.

You can read more about customization patterns here.

Roles in your team

The customisation patterns tell us what kind of profiles or roles you need in your website project team to guarantee smooth operation.

Basically, you will need two types of roles:

An AEM backend developer in charge of the configuration and extension of the backend logic of the core components.
A frontend developer mastering CSS and JS who could apply any look and feel to the HTML structure offered by the Core Components.

We do believe that customisation can be reduced to its minimum and even be avoided if you start designing your website with Core Components in mind. More about this later.

Managing design at scale with a flexible system

The frontend developers will play a key role in the implementation process. Once they master the Core Components and style system, the sky will be the limit.

Just by adapting the style of the component, multiple themes could be created for various websites, microsites, landing pages, and more.

And the beauty is: the Core Components stay the same.

You simply adapt their style and assemble them in a new manner for different websites. By setting up a versatile set of components for your digital presence together with various themes, you will be able to manage design and website at scale.

But how can this be achieved? This is what we tackle now, and outline how to design with the Core Components in mind.

AEM design workflow with Core Components

Now that the concept of Core Components is clearer, we can detail the design workflow.

We will answer the following questions:

How to design a website with AEM using Core Components
How to design a website with AEM without compromise
How to design a website with AEM and go live fast

We will cover two scenarios. One when the UI/UX of the website is not done yet, and the second when you already have the design of the website ready.

You may be doing a migration of an existing website to AEM, and therefore want to migrate your existing website first and apply changes later.

Step 1 – Map the mockup to Core Components

In our first scenario, the design of the website is not defined yet. We start with a blank page.

The two main recommendations are:

Plan the design based on the Core Components
Set up a team made of designers and AEM consultants

It’s crucial to take the Core Components into account from the beginning. We recommend you involve AEM experts from day one, as they will guide you through this process.

In other words, don’t leave the designer alone in a room and once the design is ready, hand it over to the AEM experts and developers for implementation.

This often leads to unconceivable user experiences that don’t leverage the solution, coming with additional cost, escalations and frustrations.

A common misunderstanding is that a framework restricts the design process. But in fact, it’s the opposite. Talking to an AEM expert will open new perspectives and will unleash the full potential of AEM.

Together the designer and the AEM Expert will define a mockup including the main page templates and components to use. This guarantees that you get the best AEM has to offer.

In the scenario where the design of your website is ready, for instance if you are migrating to AEM as a Cloud Service, you should start with component mapping.

An AEM expert will analyse the building blocks of your current website and map it to Core Components.

With this scenario, there might be some trade-offs:

Changing the current blocks on your website to map with the Core Components layout and feature. Let’s imagine that you have a teaser with 4 CTA while the teaser Core Component offers only 2 CTA. Here you could decide to adapt your requirements to the Core Components.
Or, if your requirements are not adaptable, the solution would be to create a custom component, extending the Core Component that fits your current UX and UI.

Anyway, for both scenarios, the goal is to have a mockup of the website where all elements are represented by Core Components.

Step 2 – Design in Adobe XD

Adobe XD is a design tool.

With Adobe XD, designers can now design based on the out-of-the-box AEM Core Components, and consider how different styles can be implemented via AEM’s style system.

Adobe created an UI Kit for AEM Components.

By using the premade UI Kit based on AEM Core Components, unnecessary design deviations are avoided, namely the kind of deviation that requires more development effort and involves extra cost.

The steps for the designer are the following:

They will assemble the Core Components based on the mockup which will create the layout for the different pages.
They will then start styling each component based on the visual identity of the website and branding guidelines.

By following this approach, the backend developer will have an easier time configuring everything in AEM. Layout structure will represent a page template in the CMS.

It’s crucial that the website design stays in sync with the Core Components.

A similar process can be done in the case of scenario 2.

Step 3 – Configuration and style in AEM matching the mockup

While the designer will adapt the look and feel of the Core Components in Adobe XD, a AEM backend developer can start the configuration of the page templates and components in AEM.

This can be done in parallel as both work on the same basis – the defined mockup.

As soon as the design is ready and validated, a frontend developer can start working and applying the right style, CSS and JS to the core components.

Everything is bundled into AEM and ready to be deployed.

Overview of the AEM styling workflow

To recap, here are the main steps of the design workflow with AEM and Core Components:

Define a mockup based on the Core Components
Create the UI and theme in Adobe XD
Configure the page templates and components, then style the Core Components in AEM

And do not forget, a critical aspect is to have a mixed team made of designers and AEM experts from the very beginning.

Core Components: AEM Cloud Service’s best companions

Even though the Adobe Core Components were created with AEM 6.3 before the release of AEM Cloud Service, they perform best when used together with the cloud version of Adobe CMS.

One of the main purposes of AEM Cloud Service is to enable fast innovation and help you focus on what matters most: building outstanding customer experiences.

With AEM Cloud Service you don’t need to care about servers, IT operations, network, security etc. anymore.

Leveraging Core Components gives you additional benefits by speeding up the design and development phase.

Quickly assemble the building blocks to realise a mockup, and then style them with limited backend development.

This is the best way to tackle any AEM as a Cloud Service project, and will enable you to go live fast, while guaranteeing upgradability.

Finally, build enterprise websites faster with AEM Cloud Service and Core Components

Designing for AEM with Core Components is close to what you are already doing for other projects. You leverage a framework that enables you to build something faster.

The key element is to design with the Core Components in mind and to involve an AEM expert at the very first stage of the design process.

The expert will guide you through the process and indicate the best way to use the components to avoid potential limitations.

This article is part of a series of content about AEM Cloud Service, where we explain how to move to AEM Cloud Service.