Komponentenbibliothek

Hier finden Sie eine Auflistung unserer Frontend-Komponenten inklusive HTML-Code. Orientieren Sie sich bei deren Einsatz an den User Experience Prinzipien und dem User Interface

Vorlagen & Downloads

Design System in Form einer Sketch-Library

Damit Sie schnell mit der Konzeption beginnen können, haben wir in unserem Sketch-basierten Design System alle Komponenten für Sie in einer Sketch-Library („Bibliothek“) aufbereitet.

Dies hat viele Vorteile: Die Library lässt sich schnell und einfach an jede Sketch-Datei anbinden. Synchronisierungen geschehen automatisch, sodass Sie stets Zugriff auf den aktuellsten Stand der Komponenten haben. Und das über ein einfaches Auswahlmenü. Die Library wird sukzessive weiterentwickelt, was sie zu einem lebenden Dokument macht („Living Library“). Durch die Verknüpfung erreichen Sie Überarbeitungen und Erweiterungen künftig ganz von selbst.

Zur Sketch-Library

Sketch-Library für UX, UI Designer und Screendesigner

Klicken Sie auf den Button. Hierdurch öffnet sich die Browser-Ansicht der Sketch-Library. Bei Klick auf den Button „Add Library to Sketch“ (rechts unten) fügen Sie die Library und all ihre Komponenten des Design Systems Ihrer Sketch-Datei hinzu. In Ihrer Sketch-Datei können Sie von nun an über „Insert > Symbols“ die gewünschten Komponenten verwenden. Sie müssen die „Symbols“ (Masterkomponenten) zudem in der Regel nicht auflösen: Nutzen Sie einfach die „Override“-Funktion von Sketch zur Anpassung von Texten oder Formatierungen.

Sketch-Library für Entwickler

Die Browser-Ansicht der Sketch-Library ermöglicht es Entwicklern, auf schnellem Weg eine erste Asset Inspection vorzunehmen. Klicken Sie einfach im rechten Arbeitsbereich auf „Inspection“. Features wie das Kopieren von CSS-Code sind seitens Sketch bereits in der Planung.

Gestaltung neuer Komponenten

Sollten Sie neue Komponenten benötigen, kommen Sie auf uns zu. Damit Neugestaltungen auch für andere in Zukunft zur Verfügung stehen, werden diese Komponenten geprüft und in unser Design System aufgenommen. Zudem sollten hierbei die Richtlinien zur Benamung von Komponenten und ihrer Varianten beachtet werden („Taxonomie“).

Melden Sie sich dazu bitte bei unseren Ansprechpartnern.

HTML-Code

Entwickler können mit unserem Code schnell und einfach Microsites und Webseiten erstellen. Mit dieser Musterseite wollen wir Ihnen hierzu ein Werkzeug an die Hand geben. Die Seite enthält neben Metadaten auch die wichtigsten CSS und JavaScript Bibliotheken. Achten Sie dabei auf einen ordnungsgemäßen Einsatz der Komponenten.

1.0_UI_HTML-Musterseite

Anleitung

  1. Laden Sie die HTML-Musterseite herunter. Dies ist das HTML.index Dokument, in dem einige Framework Komponenten bereits angeordnet sind. Das CSS und Javascript wird in dieser Datei nur verlinkt.
  2. Nutzen Sie den HTML-Code unter jeder Komponente der Komponentenbibliothek, um Komponenten zu Ihrer Gesaltung hinzuzufügen.
  3. Ändern Sie den Code bei Bedarf gemäß der Vorgaben der jeweiligen Komponente und dem User Interface ab. Achten Sie dabei auf das Einhalten der Prinzipien zu den Basis- und Grafikelementen
  4. Sollten Sie eine neue Komponente benötigen, kontaktieren Sie unsere Ansprechpartner.