Website Archive | Elementi https://www.elementi-design.com/tag/website/ 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 Website Archive | Elementi https://www.elementi-design.com/tag/website/ 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 Trifolio Magic — The Making Of https://www.elementi-design.com/trifolio-magic-the-making-of/ https://www.elementi-design.com/trifolio-magic-the-making-of/#comments Wed, 14 Sep 2022 11:14:22 +0000 https://www.elementi-design.com/?p=11566 I thought for a while about whether to feature this as a project on our website or something else. It didn't seem to fit with the rest. Not only because of the topic it tells about. Because books seem so far away from the big modern design topics like application development, UX design and so on. Still, I decided not to just skip it.

Der Beitrag Trifolio Magic — The Making Of erschien zuerst auf Elementi.

]]>

Website Layers

Trifolio Magic — The Making Of.

Preface

I thought for a while about whether to feature this as a project on our website or something else. It didn’t seem to fit with the rest. Not only because of the topic it tells about. Because books seem so far away from the big modern design topics like application development, UX design and so on. Still, I decided not to just skip it. Again, not because of the result, the final product, which is actually a website. But because it contains so many interesting facts about how it came to be and why it is “magic” to me. [Stefan Seifert]

Website Background Images

01. Photography.

There are photographers who are very good at photographing people, others who are good at photographing architecture or landscapes, and so on. And then there are the artists. Not that the former are not also artists. Of course they are. But there are those who have a very special way of looking at things. They may not be the ones who can represent an object or a person in the best of all possible ways. But they see substance, mere ideas of something where other people see nothing special. We hired Italian photographer Antonella Iovino because she is one of those artists.

We needed this artistic quality to reflect the special tactile quality of the famous books Trifolio prints for museums and renowned artists around the world. The feeling you get when you run your hands over the turned pages, when you touch the high color density of the printed images.

02. Creating the Magic.

What could we do now as a key to tell the long traditional story of this particular print shop? Something that symbolized the magic that comes from these books? And there it was. The color powder (because they also make their own color pigments) sprinkled over the pages by the hand of a fairy!

00

Particle Code Detail “Magic Powder”

To achieve this, we customized one of the fabulous particle scripts found on the web. However, some significant changes were required because we wanted the powder to expand itself as the user scrolled down the story. For each section, it should “magically” align with the chapter headings and disappear after a short time so as not to disrupt the reading experience. In addition, the powder should change color (5) smoothly depending on the color accents in the background photography (6).

00

1/8

1/4

1/4

1/2

00

Grid System Based on the Golden Ratio

03. Some Magic Numbers.

But what captivated us most about this project was the layout aspect. We’ve experimented a lot with CSS variables, and this time we wanted to go all the way. So we decided to use a single base value, which is 38.2vw (where 100vw is the total width of the screen), and thus the smaller divisor according to the ratio of the golden section 1/1.618. This sets the height of the foreground sections (4). All other measurements within the sections and the distances between elements are defined as fractions of this one number.

CSS Rules With –section-height as Unique Root Measure

Trifolio CSS Detail
00

So when it came to the responsiveness of the website, we only had to manipulate a single value. All elements fit together perfectly, regardless of the width of the device. We also have a simple tool to “open” the gaps between the sections in the vertical for narrow devices to get enough room for the magic of the powder particles. The background images, which shift slightly against each other as the page scrolls, have been carefully retouched to invisibly close the gaps with an underlying common background color. (1–3)

04. Typography.

Another very interesting aspect of this particular storytelling website was the typographic design. Since we’re talking about and for book lovers, we felt it was necessary to focus on typography that would be both elegant and functional on all devices and in all situations. In part, work we had already done on the Trifolio parent website: the Trifolio web fonts. These customized fonts radiate their subtle elegance in large headlines with sublime line contrast and remain legible at small sizes. In total, we have created 13 font versions for one typeface.

These fonts differ mainly in terms of contrast and thickness of lines. The larger ones tend to have progressively finer lines and more subtle details as their rhythm tightens, while their smaller cousins do the opposite. Via CSS, the font variants also change smoothly as the browser window resizes. In addition, all families include different language versions with special features such as longer hyphens in American. This has ensured that the heavy database of Trifolios’ large portfolio does not need to be touched, yet typographic details have been corrected retroactively.

Related Articles

Capability Versus Subtlety

Capability Versus Subtlety

Culture
(Web) Layout From 1950 to 2020

(Web) Layout From 1950 to 2020

Graphic Design
The Passion of Being a Typeface Designer

The Passion of Being a Typeface Designer

Design, Graphic Design, Typo Arts
Why Italians Do It Better

Why Italians Do It Better

Culture, Design

Der Beitrag Trifolio Magic — The Making Of erschien zuerst auf Elementi.

]]> https://www.elementi-design.com/trifolio-magic-the-making-of/feed/ 4