Close

Kategorien

Vorlage: Designkomponente

von Tony Starr, Lead Content Designer @ Atlassian

Erstelle eine Bibliothek sorgfältig dokumentierter Designkomponenten.

Vorlage verwenden
Vorlage: Designkomponente

Es kann schwierig sein, den Überblick über alle Komponenten zu behalten, die dein Team in seinen Entwürfen verwendet – besonders wenn dein Team wächst. Die Designkomponentenvorlage hilft dir, jede einzelne Komponente zu dokumentieren, angefangen von den Grundlagen, wie z. B. deren Funktion und Anatomie, bis hin zu Details darüber, wie sie in verschiedenen Kontexten aussieht und sich verhält. Es gibt sogar einen Abschnitt für zusätzliche Anleitungen, in dem du komponentenspezifische Regeln für Inhalt, Zugänglichkeit, mobile Geräte und mehr erklären kannst. Erstelle eine komplett neue Komponentenbibliothek!

So verwendest du die Vorlage Designkomponente

Schritt 1: Beginne mit den Grundlagen

Bevor man sich mit den Details der Spezifikationen einer Komponente befassen kann, sollte man die Grundlagen kennen. Fülle daher zunächst die Zeilen in Komponentengrundlagen aus: Gib der Komponente einen Namen, erkläre ihre Funktion und lade ein Anatomiediagramm mit nummerierten Beschriftungen hoch. Verwende diese Beschriftungen, um einen Schlüssel zu erstellen und jedes Element der Anatomie der Komponente zu definieren. Dieser Abschnitt soll den Personen, welche die Komponente verwenden, ein Verständnis dafür vermitteln, wie die einzelnen Elemente in der Komponente zusammenwirken.

Schritt 2: Gib die Spezifikationen an

An dieser Stelle steigst du in die verschiedenen Möglichkeiten ein, eine Komponente als Teil deiner Designs für ein größeres Feature zu verwenden. Beschreibe, wie die Komponente verwendet wird, einschließlich ihres Zwecks in deinem Design als Ganzes, und gehe dann darauf ein, wie sie in verschiedenen Kontexten angezeigt wird und sich verhält. Verwende für dein Designsystem Live-Code aus dem Repository, um verschiedene Varianten anzuzeigen. Beschreibe zum Schluss den visuellen Stil der Komponente. Achte darauf, Beispiele für empfohlene und nicht empfohlene Vorgehensweisen anzugeben.

Schritt 3: Dokumentiere Tipps, Tricks und Best Practices

Jede Komponente hat ihre Eigenheiten. Auf diese kannst du im Abschnitt Additional guidance (Zusätzliche Anleitungen) eingehen. Beginne mit dem Inhalt: Gibt es spezielle Zeichensetzungsregeln für diese Komponente? Was ist mit Standardlabels? Schreibe sie auf, zusammen mit allen Bedenken bezüglich der Zugänglichkeit und Tipps zur Anwendung der Komponente in mobilen Umgebungen. Wenn es branchenübliche Best Practices für die Verwendung der Komponente gibt, liste diese ebenfalls auf. Füge zum Schluss Links zu allen verwandten Komponenten oder Mustern hinzu.

Schritt 3: Dokumentiere Tipps, Tricks und Best Practices
Atlassian

Tony Starr

Lead Content Designer @ Atlassian


Tony ist Lead Content Designer bei Atlassian. Als technischer Redakteur und Autor verfasst er Texte zu verschiedenen Fachbereichen. Er setzt gerne Maßstäbe und dehnt die Grenzen von Content-Anleitungen aus.

  • Glossar zum Inhaltsdesign

    Atlassian

    Glossar zum Inhaltsdesign

    Bringe Autoren mithilfe eines umfassenden Leitfadens bei, wie sie Produktnamen, Branchenbegriffe und andere Inhalte richtig verwenden.

  • Inhaltsstrategie

    Atlassian

    Inhaltsstrategie

    Erstelle einen Plan für Inhaltsstrategien und organisiere deinen redaktionellen Kalender.

  • Bericht zum Kundeninterview

    Atlassian

    Bericht zum Kundeninterview

    Aufschlussreiche Erkenntnisse aus Kundeninterviews mit dem Bericht zum Kundeninterview