Warum wir Storybook nutzen

Wie wir es schaffen, mit Storybook effizient und nachhaltig zu entwickeln und trotzdem individuelle UI-Komponenten erstellen können.

Radio Button, Toggle Button, Accordion - all dies sind UI-Komponenten, die eine Navigation in einer App ermöglichen. Um diese Komponenten für unsere Web Apps nachhaltig zu entwickeln, nutzen wir Storybook.
Storybook ist ein Open Source Tool, welches die isolierte Erstellung von UI Komponenten ermöglicht. Dazu gehört nicht nur die visuelle Erscheinung an sich, sondern beispielsweise auch die möglichen Zustände einer jeweiligen Komponente (z.B. aktiv/inaktiv).

Beispielhafter Screen in Storybook
Dynamische Interaktion mit den UI-Komponenten über die grafische Benutzeroberfläche von Storybook

Das als Website eingesetzte Design System kann mit Hilfe von Storybook auch als Komponentenbibliothek genutzt werden und dadurch in der Entwicklung Kosten einsparen. Die Komponenten werden, wie bisher auch, mit Angular entwickelt. Storybook stellt lediglich ein Hilfsmittel zur kontextfreien Visualisierung der Komponenten dar. Dies erleichtert die Entwicklung von wiederverwendbarem Code. Die angefertigten Komponenten sind von der Logik der jeweiligen App losgelöst. Sie sind modular angelegt und können innerhalb der Anwendung ausgetauscht werden. Dies ermöglicht zusätzlich ein einfaches Testen der jeweiligen Komponenten. Neben der Umsetzung des Designs ist aber auch die Ein- und Ausgabe von Daten zu berücksichtigen. Die Bausteine bekommen daher bereits im Code die Grundsteine gelegt, um diese Informationen einheitlich verarbeiten zu können.
Aufgrund dieser Vorgehensweise kann von einer erhöhten Konsistenz der Bausteine ausgegangen werden. Die Wiederverwendbarkeit wiederum sorgt dafür, dass die Komponenten mehrfach überprüft und stetig weiterentwickelt werden. Auch Änderungen, beispielsweise der Farbe, können auf diese Weise vergleichsweise schnell vorgenommen und Doppelentwicklungen vermieden werden.
Bevor unsere Entwickler:innen die Komponenten allerdings anlegen können, benötigen sie Informationen darüber, wie diese aussehen sollen. Die Design-Entwürfe werden von unseren UX/UI-Designer:innen in Figma hinterlegt. Um etwa Maße, Farbe und Icons korrekt umsetzen zu können, erhalten unsere Entwickler:innen einen (read-only) Zugriff auf Figma.

Beispielhafte Darstellung des Inspect Modes in Storybook
Readonly-Zugriff auf die Design-Entwürfe in Figma aus Entwicklersicht

Um auf Entwickler:innen-Seite überprüfen zu können, ob die Designanforderungen aus Figma exakt so in Storybook umgesetzt wurden, wie das Design es vorgibt, nutzen wir zusätzlich ein Figma-Plug-In in Storybook. Auf diese Weise kann schnell visuell überprüft werden, ob entwickelte Komponenten der Design-Vorlage entsprechen.

Screen in Storybook mit Figma Plugin
Überprüfung des Designs über ein Figma-Plugin in Storybook

Um den Design & Entwicklungs-Prozess der Komponenten nachhaltig zu gestalten, legen wir die Dokumentation in Zeroheight ab. Diese Plattform ermöglicht die automatische Synchronisation der Figma-Design-Library, sodass die Design-Vorlagen (Farben, Schriften, Abstände, etc.) einfach integriert werden können. Zusätzlich bietet Zeroheight die Möglichkeit, ein Live Preview sowie Code Snippets aus Storybook anzeigen zu lassen. Allen Beteiligten soll dadurch ermöglicht werden, die benötigten Informationen zentral und übersichtlich abrufen zu können.
Auf diese Weise ist es uns möglich effizienter und somit am Ende kostengünstiger zu entwickeln.

Kurz zusammengefasst

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is Webflow and why is it the best website builder?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

What is your favorite template from BRIX Templates?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you clone a template from the Showcase?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Why is BRIX Templates the best Webflow agency?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

When was Webflow officially launched?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

How do you integrate Jetboost with Webflow?

Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.

Entdecken
Zurück zur Stories-Übersicht
Interessiert?
Wir freuen uns auf Sie!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
Kontakt
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung
Teaser Bild der Story oder des Projektes
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Agile Softwareentwicklung

Die Barrierefreiheit in der Webentwicklung beschäftigt sich mit der Gestaltung von Websites und Webanwendungen, die für alle Menschen zugänglich sind. Damit soll sichergestellt werden, dass Menschen mit Beeinträchtigungen die gleiche Möglichkeit haben, auf das Internet zuzugreifen.

Entdecken
Entdecken
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Teaser Bild der Story oder des Projektes
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Digitale Assistenten

Mit unserer langjährigen Erfahrung im Bereich öffentlicher Verkehrsmittel und der Entwicklung von KI-Assistenten bieten wir Ihnen eine individuelle, intelligente Lösung für alle Fragen rund um das D-Ticket an. Mehr dazu auf unserer 1KLANG-Produktseite.

Entdecken
Entdecken
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
Teaser Bild der Story oder des Projektes
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Digitale Assistenten

Unsere Software-Entwicklerin Lotte zeigt in ihrer Bachelorarbeit, wie man die Fehlerquote der KI-Spracherkennung für virtuelle Assistenten im ÖPNV von 30% auf 3% reduzieren kann.

Entdecken
Entdecken
Abstrakte Darstellung eines Flowcharts
Abstrakte Darstellung eines Flowcharts
Teaser Bild der Story oder des Projektes
Abstrakte Darstellung eines Flowcharts
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
UX-/UI-Design

Unseren Designer:innen begegnet häufig das Vorurteil, Design sei das „schön machen“ oder nur das Aussehen der Oberfläche. Dass wesentliche Aspekte des Designprozesses jedoch der visuellen Ausgestaltung vorausgehen, wollen wir in diesem Artikel zeigen.

Entdecken
Entdecken

Kontakt

Wir freuen uns auf Sie!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).