Mucker - Das Design System der Stadtwerke Münster

Ein digitales Design System ist eine Sammlung von Regeln, Anweisungen und Ressourcen, die dabei helfen, ein einheitliches und professionelles Erscheinungsbild digitaler Produkte wie Websites oder Apps zu schaffen. Es beinhaltet Richtlinien für Farben, Schriftarten, Layouts und andere Designelemente, die verwendet werden, um eine konsistente Gestaltung über verschiedene digitale Plattformen hinweg sicherzustellen. Ein digitales Design System enthält auch vorgefertigte Komponenten, die wiederverwendet werden können, um Zeit und Aufwand bei der Entwicklung zu sparen. Es erleichtert die Zusammenarbeit zwischen Designern und Entwicklern und fördert eine nahtlose Benutzererfahrung. Indem es klare Richtlinien und Standards bietet, hilft ein digitales Design System dabei, die Marke zu stärken und das Erscheinungsbild der digitalen Produkte ansprechend und benutzerfreundlich zu gestalten.

Die Stadtwerke Münster verwenden das Design System, um alle digitalen Schnittstellen zu gestalten und zu programmieren. Mit den vorgefertigten Mucker-Komponenten können sie schnell und einfach erste Ideen und Konzepte in Prototypen umsetzen, ohne sich um das Design kümmern zu müssen. Durch diese Prototypen können sie effektiv mit Kollegen und anderen Abteilungen kommunizieren und sich abstimmen. Die Frontend-Komponentenbibliothek wurde in das CMS integriert und kann direkt von Redakteuren auf der Website des Stadtwerke verwendet werden. Sie dient auch als Wissensdatenbank, um zu verstehen, wie die Komponenten richtig eingesetzt werden sollten. Darüber hinaus kann sie für die Umsetzung komplett neuer digitaler Projekte verwendet werden.

Ein Design System oder Figma Zugang kann über die Hendrik Bücker von den Stadtwerken Münster angefragt werden. Nutzen Sie hierfür den Bereich Kontakte der auf der Startseite zu finden ist.

Fertig programmierte Frontendkomponenten sind bereits programmierte Bausteine, die Entwickler verwenden können, um schnell und einfach bestimmte Funktionen und Designs in ihren Webseiten oder Apps umzusetzen. Das sind vorgefertigte Elemente wie Buttons, Formularelemente, Navigationsleisten und vieles mehr. Entwickler können diese Komponenten einfach in ihre Projekte einbinden und bei Bedarf anpassen. Dies spart Zeit und sorgt dafür, dass die Benutzeroberfläche einheitlich und professionell aussieht.

Um Prototypen zu erstellen, verwenden die Stadtwerke Münster das Design-Tool Figma. Hier ist eine einfache Anleitung, um loszulegen:

Um mit der Erstellung von Prototypen in Figma zu beginnen, benötigen Sie Zugriff auf den Figma Space der Stadtwerke Münster. Sie können diesen Zugang über die Stadtwerke Münster anfragen.

Sobald Sie Zugriff auf den Figma Space haben, können Sie mit dem Erstellen von Prototypen beginnen. Figma bietet eine benutzerfreundliche Oberfläche und viele Funktionen, um ihre Ideen zum Leben zu erwecken.

Hierfür gibt es bereits die vorhandenen Komponenten des Mucker Design Systems. Diese Komponenten sind vorgefertigte Designelemente, die bereits im Mucker Design-Stil gestaltet sind und eine konsistente Ästhetik gewährleisten. Sie können sie verwenden, indem Sie sie einfach per Drag-and-Drop in ihre Designs ziehen.

Wenn Sie interaktive Prototypen erstellen möchtest, können Sie in Figma die einzelnen Screens miteinander verbinden. Das bedeutet, dass Sie einfache Aktionen wie Klicks simulieren können, um ein noch besseres Gefühl für die App oder Webseite zu bekommen. Sie können Verknüpfungen zwischen den Screens direkt in Figma erstellen, um die Navigation und Interaktion zu simulieren.