HELIO – Gestaltung mit System HELIO / HMI Project
HELIO ist ein Editor zur Erstellung von responsiven Benutzeroberflächen für industrielle Anwendungen via Webtechnologie. Zielgruppe sind Maschinenhersteller, Systemintegratoren und UX/UI-Designer, die offen für Innovationen sind. HELIO ist aus realen Industrieprojekten heraus entstanden – als Antwort auf wiederkehrende Herausforderungen in der Gestaltung von HMIs. Statt jedes Interface bei null zu starten, macht HELIO erprobtes UX- und UI-Wissen nutzbar: als klar strukturiertes, flexibel anpassbares System. Eine durchdachte UI-Bibliothek, ein integriertes Designsystem und eine geführte Entwicklungsumgebung sorgen für Orientierung, Konsistenz und schnelle Ergebnisse. So wird UX/UI Kompetenz auch für Nutzer:innen ohne Designhintergrund nutzbar.
Praxisbezug
Als Designbüro mit über zwei Jahrzehnten Erfahrung im industriellen Interface-Design haben wir zahlreiche Projekte begleitet – von einfachen Maschinenpanels bis hin zu komplexen Anlagensteuerungen. Dabei zeigte sich immer wieder: Die funktionalen und gestalterischen Anforderungen ähneln sich – der individuelle Aufwand bleibt trotzdem hoch.
Viele Projekte starten mit denselben Diskussionen über Informationsarchitektur, Interaktionsverhalten und visuelle Standards. Gleichzeitig entstehen Abhängigkeiten durch projektspezifische Tools, individuelle Entwicklung oder technische Limitierungen – oft auf Kosten von Usability, Konsistenz und Wartbarkeit.
Viele der am Markt verfügbaren HMI-Werkzeuge sind technikgetrieben. Sie bieten zwar große Flexibilität, überlassen die Verantwortung für Gestaltung und Nutzerzentrierung aber weitgehend den Nutzer:innen – ohne methodische Führung oder strukturelle Vorgaben. Die Folge: Interpretationsspielräume, Qualitätsverluste und inkonsistente Lösungen.
Vor allem im Sondermaschinenbau zeigt sich: Selbst gut entwickelte Interfaces geraten über die Lebensdauer schnell aus dem Gleichgewicht – durch Anpassungen, Erweiterungen oder wechselnde Projektbeteiligte. Der Verlust von Konsistenz hat direkt negative Auswirkungen auf die Bedienbarkeit, das Training und die Dokumentation.
Iterativer Prozess
HELIO entstand nicht im Thinktank, sondern im Rahmen realer Projekte – als schrittweise Antwort auf wiederkehrende Herausforderungen. Über Jahre hinweg haben wir Anforderungen, Nutzungskontexte und gestalterische Entscheidungen evaluiert und systematisiert.
Der iterative Entwicklungsprozess folgt den Prinzipien nutzerzentrierter Gestaltung, den wir genauso auch auf unsere anderen Designprojekte anwenden: Bedarfserhebung, prototypisches Arbeiten, kontinuierliche Evaluation und inkrementelle Verbesserung. Aus einer anfänglich rein technischen Schnittstelle entwickelte sich so ein modulares Framework – und schließlich eine eigenständige Plattform.
Jede Komponente, jede Funktion in HELIO geht auf konkrete Anwendungsszenarien zurück. Die Plattform wurde gemeinsam mit Applikateuren und Nutzer:innen weiterentwickelt – immer mit dem Ziel, typische Design- & Usability Probleme methodisch und nachhaltig zu lösen.
Eine zentrale Herausforderung war es, stets zwei Zielgruppen mitzudenken: Für Entwicklungsteams sollte sich der Aufwand und die Komplexität bei der HMI Erstellung deutlich reduzieren. Und für Nutzer:innen sollten User Interfaces entstehen, das sich gut bedienen lassen und auch noch gut aussehen.
Produktiver Ansatz
Mit HELIO haben wir ein Werkzeug geschaffen, das gestalterische Kompetenz nicht nur abbildet, sondern produktiv nutzbar macht. Die Plattform strukturiert, was in vielen Projekten implizit bleibt: funktionierende Controls, gestalterische Prinzipien, bewährte UX-Standards.
Das Ziel waren nicht grenzenlose Gestaltungsmöglichkeiten, sondern ein System mit klaren Rahmenbedingungen, das dennoch Raum für projektspezifische Anpassung lässt. Entstanden ist ein hoch spezialisiertes Werkzeug für konsistente, wartbare und optimal benutzbare industrielle Interfaces. Getrieben durch Gestaltung als systematischer Prozess – nicht als einmaliger Kreativakt. Für uns als Designbüro bedeutet das vor allem: Unsere Erfahrung wird universell anwendbar und wir können so vielen Benutzer:innen eine positive User Experiences im Umgang mit industriellen HMIs ermöglichen.
Designsystem
Zentrale Grundlage ist eine UI-Bibliothek mit nutzungskontextbezogen entwickelten Komponenten. Alle hinterlegten Controls sind nicht nur visuell abgestimmt, sondern auch funktional durchdacht und in sich voll responsiv. Sie bilden alle typischen Bedienanforderungen der Industrie ab und können auf unterschiedlichsten Bildschirmgrößen eingesetzt werden.
Ein eingebettetes Designsystem gibt Orientierung, ohne gestalterisch zu überformen. Konsistenz entsteht durch klare Regeln und wiederverwendbare Muster – nicht durch Einschränkung. Die Trennung von Logik und Erscheinungsbild ermöglicht eine einfache visuelle Anpassung per Theming, ohne funktionale Redundanz.
Branchenspezifische Projekt-Templates und Seitenvorlagen bieten einen erprobten Ausgangspunkt – besonders hilfreich in frühen Phasen des Projekts, wenn noch nicht alle Details feststehen oder schnelles Prototyping gefragt ist.
Entwicklungsumgebung
Die HELIO IDE bildet den Gestaltungs- und Konfigurationsprozess ab – mit einer Oberfläche, die sich an den Anforderungen interdisziplinärer Teams orientiert. Die Nutzerführung folgt dabei Prinzipien wie Fehlervermeidung, Sichtbarkeit des Systemstatus und klarer Rückmeldung.
Visuelle Konfiguration, strukturierte Abläufe und eine Live-Vorschau erleichtern den Einstieg, vermeiden typische Missverständnisse und machen Ergebnisse sofort sichtbar. Statt eines leeren Canvas bietet HELIO eine vorbefüllte und geführte Arbeitsumgebung – ideal auch für User mit wenig Praxiserfahrung im Bereich User Interface Entwicklung.
Erweiterbarkeit
Trotz klarer Struktur ist HELIO offen für individuelle Anforderungen. Für besondere Projektanforderungen oder markenspezifisches Design lässt sich die Plattform gezielt erweitern – sei es durch eigene Komponenten, oder ergänzende UX/UI-Services. Die offene Architektur, ein leistungsfähiges SDK und standardisierte Schnittstellen erlauben Erweiterungen, ohne die Wartbarkeit zu gefährden. So bleibt HELIO auch über längere Produktzyklen hinaus konsistent – methodisch, technisch und gestalterisch.
Nachhaltigkeit
HELIO reduziert nicht nur den initialen Entwicklungsaufwand industrieller HMI Projekte deutlich, sondern spart vor allem langfristig wertvolle Ressourcen – in Wartung, Pflege und Weiterentwicklung über den gesamten Produktzyklus hinweg.
Wiederverwendbare Komponenten vermeiden Redundanzen und senken den Aufwand bei der Adaption auf neue Maschinentypen oder bei der Skalierung auf größere Produktfamilien. Der No-Code-Ansatz reduziert typische Fehlerquellen und minimiert Debugging-Aufwände. Updates lassen sich auf dem stabilen System risikofrei ausrollen. Dank der konsequenten Trennung von Funktion und Gestaltung sind nachträgliche Designanpassungen – etwa bei Facelifts oder CI-Wechseln – jederzeit möglich, ohne Auswirkungen auf die Funktionalität. Auch der Wissenstransfer innerhalb von Teams wird durch die klare Systematik erleichtert. Der intuitive Aufbau von HELIO reduziert zudem Einarbeitungs-, Schulungs- und Serviceaufwand deutlich.
So trägt HELIO dazu bei, langlebige und strategisch nachhaltige Interfaces zu schaffen – gestalterisch, technisch und wirtschaftlich.
Brand Design
Das Brand Design von HELIO ist disruptiv in diesem Marktsegment. Da HELIO von User-Interface Designern für aufgeschlossene Zielgruppen entwickelt wird, hat es seinen Fokus auf zeitgemäßem Design, Usability und Responsivität. Dies spiegelt sich stark im Brand Design wider. Durch die Verwendung des dunklen Standard-Themes mit Farbverläufen statt Volltonfarben, die Verwendung einer funktionalen Schriftart und durch ein vollständig responsives Logo setzt HELIO ein klares Statement in einem Umfeld, das eher konservative Designlösungen gewohnt ist.
Das System fordert mit seinem polarisierenden No-Code-Ansatz und innovativem Bedienkonzept die alteingesessenen Player heraus. Deshalb auch die Entscheidung zu einem progressives Brand Design. Das Ergebnis ist so flexibel, spielerisch und individuell anpassbar wie das Produkt selbst. Es macht sichtlich Spaß das Brand Design auf Marketing-Materialien und Merchandise-Artikel anzuwenden.
Showreel
Vimeo
Externes Video
Wir hosten unsere Videos auf Vimeo. Beim Laden der Videos wird eine Verbindung zu Vimeo-Servern hergestellt. Hierbei werden Cookies (ggf. auch von Vimeo) gesetzt.
Datenschutz