- HOME
- ● PROJECTS
- ● CASE STUDY - Tannwerk
Tannwerk
ANIMATED SECTIONS / SCROLL ANIMATIONS / PHOTO / COPYWRITING
Craft / Joinery
Redesign
7
2026
Elementor/HTML/CSS/JS
Photos/Copywriting
Concep/Design/Development
Live
Status
An overloaded
and unclear
website.
The previous website was divided into numerous individual service pages, with overlapping content and no clear hierarchy. The structure made it difficult to understand what Tannwerk actually offers, while the visual language felt inconsistent and disconnected from the character of the brand.
Less complexity.
More clarity.
We rethought the entire structure from the ground up. Instead of presenting every service separately, we reduced the content to four distinct areas — Holz, Klang, Reif and Licht — and built the experience around them. The goal was not simply to redesign the website, but to create a clearer digital expression of what makes Tannwerk unique.
A clear and
immersive
digital brand.
The new website combines a refined visual language with a clear and intuitive structure. The four core areas can now be discovered as distinct parts of the Tannwerk world, while interactive details and carefully curated imagery bring the materials, craftsmanship and atmosphere to life.
Excerpt from the previous Website
A closer look at the new Tannwerk
From structure and storytelling to
interaction and responsive design — a
closer look at the decisions that shaped
the new digital experience.
From many individual services to four clear worlds.
Instead of presenting every service as a separate part of the website, we brought Tannwerk’s diverse work together into four distinct worlds: Holz, Klang, Reif and Licht. Each area has its own character while remaining part of one connected experience.
- ● Four distinct worlds
- ● Clear Navigation
- ● One connected experience
- ● Each area with its own character
From a static website to a more immersive experience.
Subtle animations, scroll effects and dynamic transitions bring the new Tannwerk website to life. Movement guides the user through the content, creates visual connections between sections and adds depth to the experience — without distracting from the information itself.
- ● Animations and moving elements
- ● Scroll animations
- ● Dynamic transitions
- ● Interactive elements
A stronger visual identity for Tannwerk.
The new design creates a more distinctive visual language for Tannwerk, combining refined typography, carefully selected imagery and a consistent visual system. Every element is designed to feel connected to the character of the brand while giving the website a more contemporary and recognisable presence.
- ● Consistent visual language
- ● Distinctive visual identity
- ● Refined typography
- ● Stronger brand presence
A natural and
refined visual language.
The colour palette and typography reflect Tannwerk’s connection to natural materials, traditional craftsmanship and contemporary design. A calm, earthy base is combined with muted blue tones, creating a timeless and authentic visual identity.
Strong contrast
Content areas
Borders & dividers
Buttons & highlights
Sections & details
Icons & elements
From Tanner to Tannwerk.
The new Tannwerk logo brings together the name, the craft and the story behind the brand in one distinctive mark.
A name becomes a symbol.
Tannwerk is derived from Stefan Tanner’s surname. The word Tanne (fir tree) creates a natural connection to his name, while also representing wood — the material at the heart of his work as a carpenter. This idea is expressed directly in the wordmark: the letter A becomes a stylised fir tree, making the symbol an integral part of the name rather than a separate decorative element.
A shape with meaning.
The thirteen-sided emblem draws inspiration from the traditional shape of Stefan’s handmade drums. The number thirteen connects to the lunar cycle and the shamanic traditions associated with his drum-making practice. This gives the emblem a meaning that reaches beyond its appearance, connecting the visual identity to a distinctive part of his craftsmanship.
One identity, multiple expressions.
The resulting logo combines a refined wordmark, the integrated fir-tree symbol and the thirteen-sided frame. Light and dark versions allow the identity to work across different backgrounds, while the copper-toned three-dimensional relief translates the design into a tactile, material expression. The standalone fir-tree symbol is also used as the favicon, retaining the identity in its most reduced form.
The result is a visual identity rooted in Stefan Tanner’s name, the material he works with and the traditions behind his craft.
A story told through image, movement and content.
Instead of presenting information as isolated sections, the new website connects content, imagery and movement to create a more cohesive story. The result is an experience that communicates not only what Tannwerk does, but also the craftsmanship, materials and atmosphere behind it.
- ● Visual storytelling
- ● Connected content
- ● Information & atmosphere
- ● Stronger emotional impact
A more refined visual world.
Photography became an integral part of the new visual identity. Carefully selected and professionally edited imagery creates a consistent visual language across the website, while each world retains its own atmosphere and character.
- ● Purposeful photography
- ● Professional image editing
- ● Consistent visual language
- ● Distinctive imagery for each world
- ● Material, detail & atmosphere
From explaining the work to making it tangible.
The new website puts the focus on the materials, craftsmanship and experiences behind Tannwerk. From handcrafted products and individual details to the drum-building workshop, imagery and content make the work more tangible and give visitors a better sense of what Tannwerk is about.
- ● Material & craftsmanship
- ● Handcrafted products
- ● Workshops & experiences
- ● Product details
- ● Atmosphere & authenticity
A considered experience on every screen.
The new website was designed to adapt seamlessly across desktop, tablet and mobile. Layouts, typography, imagery and interactions were carefully adjusted for smaller screens, preserving the character and usability of the experience without simply scaling down the desktop version.
- ● Responsive layouts
- ● Adapted typography
- ● Optimised imagery
- ● Touch-friendly interactions
- ● Consistent experience across devices
Previous
8-ung-steil
Next