Programming Archive | Elementi https://www.elementi-design.com/category/programming/ Corporate Design, Web Design, Marketing Consulting Tue, 24 Mar 2026 08:34:42 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://www.elementi-design.com/wp-content/uploads/2017/04/cropped-elementi-sign-512-32x32.png Programming Archive | Elementi https://www.elementi-design.com/category/programming/ 32 32 Inside the Architecture https://www.elementi-design.com/headless-cms-architecture/ https://www.elementi-design.com/headless-cms-architecture/#respond Sat, 14 Feb 2026 09:58:08 +0000 https://www.elementi-design.com/?p=17377 When people visit a website, they see pages. What they don’t see is the architecture that makes those pages possible. Every menu item, every tooltip, every contextual link is powered by a system. A system that decides whether a website can scale gracefully — or collapse under its own complexity.

Der Beitrag Inside the Architecture erschien zuerst auf Elementi.

]]>
Screenshot of a headless CMS architecture showing backend pages with services and case studies connections, illustrating structured content management.
Backend interface screenshot of a headless CMS architecture highlighting relational content connections and dynamic menus for complex service structures. Illustration related to case study content; visual enhancement for the article.
Admin dashboard view of a headless CMS architecture with custom fields and content modules for managing global services and regional variations efficiently. Illustration of global team diversity; complements CMS backend content.

Custom-Designed CMS Interface

Inside the Architecture.

A Headless WordPress CMS.

When people visit a website, they see pages. What they don’t see is the architecture that makes those pages possible. Every menu item, every tooltip, every contextual link is powered by a system. A system that decides whether a website can scale gracefully — or collapse under its own complexity.

For one of our global clients, it wasn’t enough to think in pages. We had to build a headless CMS: a structured, flexible foundation that connects services, teams, projects, and regions — all in a way editors can manage easily. Their organization operates across continents, industries, and regulatory frameworks, where services differ between regions, case studies span domains, and teams collaborate across offices.

Content, API, Frontend Layers (simplified)
Branches
Services
Teams
Offices
Expertise
Case Studies
RI Platform
RI Domains
REST API
Static Frontend
Context Menus
Quotes
Branch Modals
Story Sliders
View More Blocks
News Articles
Case Study Pages
Services Overview
Location Maps
Branch
RI Domain
Team Member
Case Study
Office
Country
Expertise
Team
Case Studies
Services
Quotes
Expertise

Content Relationships and Dependencies (detail)

Building Systems Instead of Pages.

Each element needed to exist independently while staying connected. Editors maintain a single source of truth — avoiding duplication, inconsistencies, and mounting maintenance. With a relational system, content lives once, links naturally, and scales seamlessly as the organization grows.

Instead of managing pages, editors manage relationships. Services connect to offices, offices connect to teams, teams connect to projects. The website becomes the expression of this structure — not something maintained separately, but something generated from it.

Structure Once, Display Everywhere.

Think of it like a supercharged category system. Content is defined once, connected to services, regions, teams, or regulatory types, and automatically distributed wherever it’s needed. Add a new office, update a service, or include a document, and the system keeps every page, menu, and tooltip in sync.

The effort shifts from maintaining countless touchpoints to maintaining the structure itself. Complexity doesn’t disappear — but it becomes organized, predictable, and manageable.

Content Fields, Styling, Placement Controls (simplified)

Word where highlight begins (maps to data-split). Leave empty for no highlight.

Select the section ID(s) where this quote should appear.

Primary visual for the case study card or header.

Short description used in cards or previews.

1
2
3
4
5

Optional. Select related XXX Service Items.

Invisible Complexity, Visible Clarity.

Visitors experience clarity. They see relevant services, accurate information, and meaningful connections. What they don’t see is the complexity behind it – the structure quietly ensuring everything appears where it should. Imagine a living knowledge base, where staff and designers determine the placement and connections of each piece.

For editors, this changes everything. Instead of fighting the system, they work with it. And instead of maintaining pages, they maintain knowledge.

The Result.

What we built was more than a website. It was an infrastructure for communication — designed to support global scale, organizational complexity, and long-term growth. Even the backend was intentionally structured: custom-designed fields and editorial interfaces ensure that content is entered in the right way, from the very beginning. Because when the structure is right, everything else follows.

What could the right structure unlock for your organization?

Contact us or simply leave a comment below and we will get back to you.

Start a Conversation

Related Articles

Color Modules

Color Modules

Experimentation, Programming

Der Beitrag Inside the Architecture erschien zuerst auf Elementi.

]]> https://www.elementi-design.com/headless-cms-architecture/feed/ 0 Color Modules https://www.elementi-design.com/color-modules/ https://www.elementi-design.com/color-modules/#respond Thu, 30 Jan 2025 07:11:45 +0000 https://www.elementi-design.com/?p=15765 This is a brief story about processes. What starts with a task turns into an idea and, in rare cases, is struck by an inspiration. Eventually, creations like these evolve and turn into something unexpected, almost by themselves.

Der Beitrag Color Modules erschien zuerst auf Elementi.

]]>

Music: Hania Rani The Boat (clicktap)

Music: Hania Rani The Boat

Preface

This is a brief story about processes. What starts with a task turns into an idea and, in rare cases, is struck by an inspiration. Eventually, creations like these evolve and turn into something unexpected, almost by themselves.

AFM Molecule Images

AFM Molecule Images*

A major biotech player recently asked us to create an animated key visual to support the market launch of their newly acquired manufacturer of chemical intermediates for drug development and perfume production.

*https://physics.aps.org/articles/v12/53

The Animation.

To visualize the molecules, we used 3D render models before experimenting with an animation based on a so-called shader script. This technique uses highly complex mathematical functions to draw individual pixels on the screen.

This technology is GPU-optimized for the browser, so that it runs extremely smoothly even with slower Internet connections and can be easily and very flexibly integrated into websites or any type of online presentation.

Impressed by the results, the board decided to involve us in the ongoing and somewhat painful process of redefining the parent company’s corporate design, especially when it came to redesigning their corporate colors.

After a series of mostly frustrating attempts to make their corporate colors more expressive with gradients, they were thrilled with the color brilliance and depth of our Molecules animation, especially on dark backgrounds.

The Gradients.

So it was an obvious idea to take a “closer look” at how this animation technology could be used to help them creating vibrant and organic colors, shading, variations for website sections, presentation titles and much more.

We extended the parameter set of the original animation with CSS-controlled values to enable fine-grained control of the position of the color gradients, the color composition, the softness and, last but not least, to allow color overlays.

Parameters (ex.)
Vibrancy
Rotation (drag)
Blue/Green
Timeline
Softness
Speed

The Usability.

In order to be integrated into ongoing workflows and to facilitate our customers’ decision-making, we have set up a series of microsites to test the backgrounds. To simplify things, some parameters were combined to achieve the best results for the corresponding corporate colors. Using a timer, our client was able to select section backgrounds with one click.

Timeline7.3s
Rotation21.9°
Softness50
0 /10s

The Performance.

The results were amazing. Because we were able to use the browser’s native GLSL technology, where each pixel is defined programmatically, the gradients were incredibly smooth, freeing our client from frustrating compression trade-offs. To keep performance even more under control, we ensured that the gradients, especially when animated, only became active when scrolled into view.

Single Pixel Color

Scroll Observed

We were inspired by how the laws of physics have their aesthetic similarities at all scales.

Interested in using powerful organic color gradients in your web project?

Contact us or simply leave a comment below and we will get back to you.

Contact us

Related Articles

Inside the Architecture

Inside the Architecture

Programming
The Nanoparticles Story

The Nanoparticles Story

Experimentation, Photography

Der Beitrag Color Modules erschien zuerst auf Elementi.

]]> https://www.elementi-design.com/color-modules/feed/ 0