Books Archive | Elementi https://www.elementi-design.com/tag/books/ Corporate Design, Web Design, Marketing Consulting Tue, 10 Mar 2026 08:17:13 +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 Books Archive | Elementi https://www.elementi-design.com/tag/books/ 32 32 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