Umsetzung
Frontend modernisieren
Ein abgegrenzter Teil deines bestehenden Frontends wird wartbarer aufgebaut, während das vereinbarte Nutzerverhalten erhalten bleibt.
Umsetzung / Frontend-Entwicklung & Bedienung
Umsatzsteuerbefreit gemäß § 19 UStG
Komponentenbibliothek entwickeln
Wiederkehrende Oberflächenelemente werden als gemeinsame Codebausteine umgesetzt – mit klaren Varianten, Zuständen und Dokumentation.
2.999,00 €
Gesamtpreis · einmaligUmsatzsteuerbefreit gemäß § 19 UStG
- Bis zu acht abgestimmte UI-Komponenten in einem bestehenden Frontend-Stack entwickeln
- Varianten und Zustände anhand eines vorhandenen Designsystems umsetzen
- Eine lokale Komponentenübersicht mit Anwendungsbeispielen erstellen
Du fragst unverbindlich an. Ein Auftrag entsteht erst, wenn du unser Angebot annimmst .
Bild 1 von 4
Leistungsumfang
Dein Ergebnis
- Acht oder weniger dokumentierte, wiederverwendbare Codekomponenten
- Beispielintegration und Hinweise zur Erweiterung und Versionspflege
Enthalten
- Bis zu acht abgestimmte UI-Komponenten in einem bestehenden Frontend-Stack entwickeln
- Varianten und Zustände anhand eines vorhandenen Designsystems umsetzen
- Eine lokale Komponentenübersicht mit Anwendungsbeispielen erstellen
- Integration in einen repräsentativen Ablauf und eine Korrekturrunde
Nicht enthalten
- Neues Markendesign und vollständiger Aufbau einer Figma-Bibliothek
- Umstellung aller bestehenden Seiten oder mehrerer Frameworks
- Unbegrenzte Komponentenvarianten und dauerhafte Bibliothekspflege
Für welches Vorhaben passt die Leistung?
Passt, wenn …
- Mehrere Ansichten verwenden dieselben Elemente mit unterschiedlichen Implementierungen
- Ein vorhandenes Designsystem soll verlässlich im Code ankommen
Passt nicht, wenn …
- Die gestalterischen Grundlagen müssen erst entwickelt werden
- Alle Oberflächen sollen gleichzeitig vollständig neu aufgebaut werden
Mögliche Überschneidungen mit: Frontend modernisieren. Fragst du diese Leistungen für dasselbe Projekt an, prüfen wir vor der Beauftragung, welche Arbeiten sich doppeln. Auch im Warenkorb siehst du einen Hinweis dazu.
Darum geht es
Wie vermeiden wir, dass jeder Button und jedes Formular anders gebaut wird?
Eine Komponentenbibliothek enthält gemeinsame Codebausteine für wiederkehrende Elemente. Ändert ihr etwa die Fehlermeldung eines Eingabefelds, kann dieselbe Änderung in allen Ansichten ankommen, die diesen Baustein verwenden.
Wir begrenzen das Paket auf bis zu acht Komponenten und deren vorab vereinbarte Zustände. Die Auswahl richtet sich nach tatsächlich wiederkehrenden Aufgaben. Ein vorhandenes Designsystem liefert die gestalterischen Regeln. Die Bibliothek wird mit Beispielen dokumentiert und in einem repräsentativen Ablauf eingesetzt.
Wiederverwendung braucht klare Grenzen und Zustände
Eine Komponente ist nicht dadurch gut, dass sie jede denkbare Einstellung besitzt. Zu viele Optionen erschweren Nutzung und Pflege. Wir legen deshalb fest, wofür ein Baustein gedacht ist und welche Varianten tatsächlich benötigt werden. Unterschiede zwischen Komponenten werden nicht durch beliebige Sonderparameter verdeckt.
Bedienverhalten gehört ebenso dazu wie das Aussehen. Ein Formularfeld braucht Beschriftung und Fehlerzuordnung, ein Dialog einen nachvollziehbaren Fokusablauf. Die konkreten Anforderungen werden pro Baustein vereinbart. Die dokumentierten Beispiele zeigen, wie die Komponenten richtig zusammengesetzt werden.
Kommt dir das bekannt vor?
Ähnliche Elemente verhalten sich unterschiedlich
Mehrere Implementierungen können bei Fokus, Fehlern oder Ladezuständen auseinanderlaufen. Gemeinsame Bausteine machen das vereinbarte Verhalten nachvollziehbar.
Designregeln kommen im Code uneinheitlich an
Farben und Abstände allein ergeben noch keine wiederverwendbare Oberfläche. Die Bibliothek verbindet vorhandene Gestaltungsregeln mit konkreten Komponenten.
Neue Ansichten sollen vorhandene Muster nutzen
Dokumentierte Beispiele helfen bei der Weiterentwicklung. Sie erklären, wann ein Baustein passt und welche Kombinationen bewusst nicht vorgesehen sind.
So gehen wir vor.
Wiederkehrende Bausteine auswählen
Wir vergleichen vorhandene Ansichten und legen bis zu acht Komponenten fest. Varianten, Zustände und ein repräsentativer Integrationsfall werden ausdrücklich beschrieben.
Komponenten und Beispiele entwickeln
Die Bausteine werden im vereinbarten Stack implementiert. Eine lokale Übersicht zeigt ihre zulässigen Varianten, Inhalte und Bedienzustände.
Verwendung im Ablauf überprüfen
Eine konkrete Integration prüft, ob die Schnittstellen der Komponenten im Alltag passen. Die Übergabe erklärt Erweiterung, Pflege und noch nicht umgestellte Bereiche.
Nach der Übergabe
Die Bibliothek schafft eine gemeinsame Grundlage für die vereinbarten Komponenten. Bereits vorhandene Seiten verwenden diese nicht automatisch; weitere Umstellungen müssen geplant werden.
Wiederverwendung senkt nicht jede Art von Aufwand. Pflege, Versionsänderungen und neue Anforderungen bleiben Aufgaben, deren Zuständigkeit im Team geklärt werden sollte.
Nenne den vorhandenen Stand: Design, Website oder Anwendung. Hilfreich ist ein konkreter Ablauf mit den Ansichten und Zuständen, die entwickelt oder geändert werden sollen.
Danach klären wir, mit welcher Technik die Seite arbeitet, wo wir Änderungen testen und wie du sie erhältst. Auch fehlende Inhalte besprechen wir dann. Sende keine Repository-Tokens oder Produktionszugänge über das Anfrageformular.
Begriffe aus der Leistung
Was bedeutet das?
- Komponente
- Ein wiederverwendbarer Codebaustein mit klarer Aufgabe. Er verbindet Darstellung und gegebenenfalls Verhalten, etwa für einen Button oder ein Eingabefeld.
- Variante
- Eine vorgesehene Ausprägung derselben Komponente. Beispiele sind primäre und sekundäre Buttons; nicht jede beliebige Gestaltungsabweichung wird zur neuen Variante.
- Design-Token
- Ein zentral benannter Gestaltungswert, etwa für Farbe oder Abstand. Komponenten nutzen diese Werte, damit gemeinsame Änderungen kontrolliert möglich bleiben.
Vor deiner Anfrage
Fragen zum Angebot.
Was gehört zur Leistung, was brauchst du dafür und wie geht es nach der Anfrage weiter?
Der Ablauf im Detail →Ist ein Designsystem enthalten?
Ein gestalterisches System wird vorausgesetzt. Das Paket überführt ausgewählte Regeln und Komponenten in Code; Markenentwicklung und komplette Figma-Bibliothek sind nicht enthalten.
Was zählt als eine Komponente?
Ein abgegrenzter Baustein mit vereinbarten Varianten und Zuständen. Ein komplexer Kalender ist nicht mit einem einfachen Textfeld gleichzusetzen und wird vorher passend abgegrenzt.
Brauchen wir dafür Storybook?
Eine lokale Übersicht gehört dazu. Welches Werkzeug sinnvoll ist, hängt vom bestehenden Projekt ab; neue Infrastruktur wird nicht ohne konkreten Bedarf vorausgesetzt.
Werden vorhandene Seiten automatisch umgestellt?
Enthalten ist ein repräsentativer Ablauf. Weitere Seiten werden nicht still mitmigriert; ihr Umfang hängt von vorhandenen Sonderfällen und technischen Abhängigkeiten ab.
Kann die Bibliothek mehrere Frameworks bedienen?
Dieses Paket gilt für einen vereinbarten Frontend-Stack. Mehrere Frameworks benötigen eigene Implementierungen und Tests und sind deshalb zusätzlicher Umfang.
Wann beginnt die Bearbeitung?
Start und Lieferfrist bestätigen wir nach Sichtung deiner Unterlagen schriftlich. Der vereinbarte Umfang und vollständige Ausgangsdaten bestimmen den Zeitplan.
Welche Zugänge werden benötigt?
Freigegebene Gestaltungsregeln, Komponentenliste und vorhandener Stack Beispielansichten sowie vereinbarte Tastatur- und Zustandsanforderungen Zugangsdaten gehören nicht in die Anfrage. Details werden erst nach schriftlicher Beauftragung abgestimmt.
Was passiert nach der Übergabe?
Eine schriftliche Rückfragerunde ist enthalten. Welche Analysen, Entwürfe oder technischen Änderungen zum Paket gehören, steht im Leistungsumfang. Zusätzliche Arbeiten stimmen wir mit dir ab, bevor sie beginnen.
Zum Thema weiterlesen
Komponentenbibliothek aufbauen: Wann lohnt sie sich im Frontend?
Dasselbe Formularfeld an mehreren Stellen pflegen: Wie du gemeinsame Bausteine auswählst, in einen echten Ablauf einbaust und schrittweise übernimmst.
Zum Ratgeber ↗Verwandte Leistungen
Das könnte ebenfalls passen.
Umsetzung
Website & Landingpage entwickeln
Aus einem freigegebenen Design wird eine responsive Website oder Landingpage, die auf kleinen und großen Bildschirmen bedienbar ist.