Beitragstyp ”neue Design-Komponente”

Einstieg

Hier erwarten dich hilfreiche Informationen darüber, wie du neue Komponenten anfordern oder beitragen kannst. Um dir den Einstieg zu erleichtern, empfehlen wir dir, zunächst einen Blick in den Abschnitt „So kannst du mitwirken" zu werfen. Dort findest du wertvolle Hinweise, die dir den Prozess erklären und dich optimal vorbereiten.

Wir freuen uns auf deine kreativen Ideen und dein Engagement!

Anforderungskriterien

Wie wird entschieden, ob eine Komponente ins UI-Kit aufgenommen wird oder nicht?

• Alternativen: Es wir überprüft, ob der Anwendungsfall mit einer anderen Komponente abgebildet werden kann oder ob dazu eine weitere (universellere, einfachere) Komponente benötigt wird.
• Skalierbarkeit: Der Vorschlag muss für mehrere Anwendungsfälle gebraucht werden und sollte zukünftig universell einsetzbar sein.
• Usability: Der Vorschlag sollte zukünftig die Benutzerfreundlichkeit von Anwendungen verbessern.

Vorgehen

Das Vorgehen beginnt mit einem Kick-off-Termin, bei dem wir uns kennenlernen, die Ziele besprochen und organisatorisches geklärt werden. Wir erklären unser Vorgehen und wie wir zusammenarbeiten, einschließlich der Figma-Datei, die wir benutzen werden. Dies halten wir in einem Plan fest. Außerdem klären wir organisatorische Dinge wie eure Verfügbarkeit.

Anschließend folgt eine Phase selbstorganisierter Arbeitszeit. Hier unterstützen wir euch mit einem Template in Figma mit vielen Beispielen und hilfreichen Links.

Gewinne möglichst viele Erkenntnisse aus bestehenden Design-Systemen.

In welchem Kontext wird die Komponente gebraucht, bzw. schon genutzt in digitalen Dienstleistungen?

Leite Anforderungen aus Research und Use Cases ab und dokumentiere sie. In einem Scope-Termin werden daraufhin die Anforderungen präzisiert und der Projektumfang festgelegt. Danach folgt eine weitere selbstorganisierte Arbeitsphase, in der ihr die Komponente zum Leben erweckt.

Überlege mit abstrakten Bausteinen, wie du die Komponente aufbauen möchtest. Schau dir andere Komponenten im UI-Kit und in anderen Design-Systemen an.

Basierend auf den vorangegangenen Schritten, erwecke deine Komponente zum Leben. Hier ist Raum zum Ausprobieren.

Dokumentiere die getroffenen Entscheidungen zu Aufbau und Funktion der Komponente. Diese Informationen dienen als Basis für die Dokumentation auf kern-ux.de und helfen anderen später, nachzuvollziehen, warum du dich für oder gegen einzelne Varianten entschieden hast.

Eine anschließende Design Critique dient dem Austausch über die bisherigen Entwürfe und ermöglicht es, Feedback einzuholen und offene Fragen zu klären. In der nächsten Arbeitsphase wird die Komponente finalisiert oder ihr dreht noch eine weitere Schleife mit einer Design-Critique.

Zum Abschluss findet ein Übergabe-Termin statt, bei dem die Ergebnisse vorgestellt werden. Wir haben auch erste Qualitätskriterien entwickelt, die uns bei der Finalisierung helfen sollen.

Eine Retrospektive rundet den Prozess ab und bietet Raum für Reflexion über den Verlauf und Verbesserungsmöglichkeiten für zukünftige Zusammenarbeit.

Qualitätskriterien

Um sicherzustellen, dass alle erstellten Komponenten den festgelegten Qualitätskriterien entsprechen, werden sie auf Funktion, Design, Barrierefreiheit und Dokumentation geprüft.

Sowohl in Figma als auch im Code werden entsprechende Tests durchgeführt. Diese Akzeptanzkriterien werden während der Entwicklung der Komponente gemeinsam festgelegt.

Dazu gehören in Figma der Komponentenaufbau, die Verwendung der Tokens und Icons, Benennungskonventionen und die Einhaltung der Gestaltungsprinzipien.

Nach Umsetzung wird jede Komponente im Code auf Barrierefreiheit geprüft. Die KERN Komponenten erfüllen mindestens das AA-Level nach BITV 2.0.

Jede Komponente wird sowohl im Code als auch im Design und auf kern-ux.de dokumentiert.