Webdesign & Medien für die Rudi Hutt Unternehmensgruppe
Drei Webseiten, ein durchgängiges Konzept. Wie wir für Rudi Hutt, Linematic und Hutt Zuführtechnik eine moderne, einheitliche und medienstarke Webpräsenz geschaffen haben.
– Kunde
Rudi Hutt Maschinenbau, Hutt Zuführtechnik, Linematic
Die drei Unternehmen bilden gemeinsam eine langjährig etablierte und international erfolgreiche Unternehmensgruppe im Bereich Maschinenbau, Automatisierung und Zuführtechnik. Obwohl sie unterschiedliche, hochspezialisierte Aufgabenbereiche abdecken, verbindet sie ihr Anspruch an höchste technische Präzision und Qualität in der Fertigung.
– Anlass
Die Unternehmensgruppe trat digital bislang sehr anonym auf. Es fehlten authentische Einblicke in die Produktion. Zudem mussten zwei Webseiten strukturell und technisch (Responsive Design) dringend modernisiert werden, während für das dritte Unternehmen noch gar keine Online-Präsenz existierte.
– Lösung
Wir haben ein einheitliches Webdesign entwickelt, das die drei Firmen optisch klar verbindet. Um die digitale Anonymität aufzubrechen, haben wir hochwertiges Bild- und Videomaterial produziert. Diese neuen Medien machen die Qualität und Präzision der Maschinen nun auf allen Seiten direkt erlebbar.
.gallery-container {
display: flex;
height: 80vh;
overflow: hidden;
align-items: center;
justify-content: center;
}
.gallery-wrapper {
display: flex;
width: 100%;
height: 60vh;
gap: 10px;
}
.image-column {
flex: 0.3;
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 10px;
}
/* Die aktive Spalte */
.image-column.expanded {
flex: 2.5;
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
pointer-events: none; /* Verhindert Drag-Probleme */
}
/* Responsive Design: Tablet */
@media (max-width: 900px) {
.gallery-container {
margin-left: 5%;
margin-right: 5%;
}
.gallery-wrapper {
flex-direction: column;
height: 70vh;
}
.image-column.expanded {
flex: 4;
}
}
/* Responsive Design: Mobile */
@media (max-width: 600px) {
.gallery-wrapper {
height: 75vh;
}
.image-column.expanded {
flex: 3;
}
}
function expandColumn(element) {
// Entferne ‚expanded‘ von allen Spalten
const columns = document.querySelectorAll(„.image-column“);
columns.forEach((col) => {
col.classList.remove(„expanded“);
});
// Füge ‚expanded‘ zur aktuellen Spalte hinzu
element.classList.add(„expanded“);
}
// Unterstützung für Klick auf Mobilgeräten
document.querySelectorAll(„.image-column“).forEach((column) => {
column.addEventListener(„click“, function () {
expandColumn(this);
});
});
– Webseite Rudi Hutt Maschinenbau
Struktur und Design: Klarheit auf allen Ebenen
Für das Stammunternehmen lag der Fokus auf der kompletten Restrukturierung der bestehenden Website. Die Inhalte wurden in eine logische Navigation überführt und das Design für alle Endgeräte responsiv und zeitgemäß aufgebaut. Die neu integrierten Bilder und Bewegtbildformate aus der Fertigung holen die Präzision des Maschinenbaus direkt auf den Bildschirm und geben dem Unternehmen online ein authentisches Gesicht.
– Kontakt
Dein Unternehmen soll digital genauso persönlich auftreten wie in Person?
Ob die Modernisierung bestehender Seiten, der komplette Neuaufbau oder ein einheitliches Konzept für eine ganze Unternehmensgruppe – wir verbinden klares Webdesign mit authentischer Medienproduktion. Lass uns gemeinsam planen, wie wir die Qualität und die Menschen hinter deinem Unternehmen digital sichtbar machen.
– Webseite Hutt Zuführtechnik
Struktur und Design: Klarheit auf allen Ebenen
Da für dieses Tochterunternehmen bisher keine eigene Website existierte, erfolgte der Aufbau komplett neu. Die Seite wurde von Grund auf konzipiert, strukturiert und gestaltet. Dabei kam das übergreifende Designsystem der Gruppe zum Einsatz. So fügt sich die Hutt Zuführtechnik nun nahtlos und professionell in die gemeinsame digitale Identität der Unternehmensgruppe ein.
– Webseite Linematic
Struktur und Design: Klarheit auf allen Ebenen
Auch die bestehende Webseite der Linematic wurde technisch und optisch auf den neuesten Stand gebracht. Um die hohe Qualität und die komplexen Automatisierungsprozesse für eine internationale Zielgruppe greifbar zu machen, haben wir die echten Arbeitsabläufe direkt am Standort in Sevelen filmisch und fotografisch dokumentiert. Diese neuen Medien bilden nun das Herzstück des neuen, responsiven Webauftritts.
.gallery-container {
display: flex;
height: 80vh;
overflow: hidden;
align-items: center;
justify-content: center;
}
.gallery-wrapper {
display: flex;
width: 100%;
height: 60vh;
gap: 10px;
}
.image-column {
flex: 0.3;
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 10px;
}
/* Die aktive Spalte */
.image-column.expanded {
flex: 2.5;
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
pointer-events: none; /* Verhindert Drag-Probleme */
}
/* Responsive Design: Tablet */
@media (max-width: 900px) {
.gallery-container {
margin-left: 5%;
margin-right: 5%;
}
.gallery-wrapper {
flex-direction: column;
height: 70vh;
}
.image-column.expanded {
flex: 4;
}
}
/* Responsive Design: Mobile */
@media (max-width: 600px) {
.gallery-wrapper {
height: 75vh;
}
.image-column.expanded {
flex: 3;
}
}
function expandColumn(element) {
// Entferne ‚expanded‘ von allen Spalten
const columns = document.querySelectorAll(„.image-column“);
columns.forEach((col) => {
col.classList.remove(„expanded“);
});
// Füge ‚expanded‘ zur aktuellen Spalte hinzu
element.classList.add(„expanded“);
}
// Unterstützung für Klick auf Mobilgeräten
document.querySelectorAll(„.image-column“).forEach((column) => {
column.addEventListener(„click“, function () {
expandColumn(this);
});
});
