Close

Kategorien

Vorlage: Designsystem

von InVision

Entwickle zusammen mit den Profis ein einheitliches Designsystem, um dein Designteam zu erweitern.

Vorlage verwenden
Vorlage: Designsystem

Wenn deine Organisation wächst und gedeiht, musst du wahrscheinlich auch deine Marke und dein Design weiterentwickeln. Mit einem Designsystem beschleunigst du nicht nur den Designprozess, sondern beseitigst auch Unstimmigkeiten und reduzierst unternehmensweit die technische Schuld. Die Designsystem-Vorlage von InVision gibt dir die Hilfsmittel, um deine Designprinzipien und Dokumentenkomponenten zu definieren sowie Regeln und Best Practices für Design, Schreiben und mehr zu erklären. Das ist der perfekte Ausgangspunkt für jedes Designsystem.

So verwendest du die Vorlage Designsystem

Schritt 1. Designprinzipien definieren

Dein Designsystem basiert auf deinen Designprinzipien. An diesen Werten kannst du dich orientieren, wenn du neue Produkte, Funktionen und Funktionalitäten entwickelst. Sie interagieren miteinander und erschaffen dein einzigartiges Erscheinungsbild. Entscheide dich für konkrete Prinzipien, die die einmalige Perspektive deines Unternehmens zeigen und mit denen Designer Spannungen oder Konflikte lösen können.

Schritt 2: Visuelle Sprache beschreiben

Nach den Designprinzipien geht es nun um die visuelle Sprache. Dazu gehören deine Farbpalette, Typographie, Regeln zu Größe und Abstand sowie deine Bibliotheken für Symbole und Abbildungen. Jetzt musst du für jedes Designelement die Regeln festlegen, die Designer anwenden sollen. Vergiss aber auch nicht, einige Verhaltensregeln hinzuzufügen, um zu zeigen, wie die Elemente in der Praxis verwendet werden.

Schritt 3: Schreibregeln verfassen

Nach der visuellen Ebene geht es weiter zum Text. Jede Organisation hat einen anderen Schreibstil und eine andere Stimme. Selbst Regeln für Groß- und Kleinschreibung Interpunktion und Zahlen können von einem Designteam zum nächsten variieren. Notiere die wichtigsten Schreibregeln, füge Markenbegriffe zu deinem Lexikon hinzu und erstelle am Seitenanfang einen Spickzettel, um die wichtigsten Fragen zu beantworten oder das Designteam an wichtige Schreibkonventionen zu erinnern.

Schritt 3: Schreibregeln verfassen

Schritt 4: Best Practices ausbauen

Du weißt, was für dein Designteam funktioniert und was nicht. Notiere im nächsten Abschnitt unter anderem deine Best Practices für Zugänglichkeit, Browser-Support und mobiles Design. Damit haben Designer einen kleinen Spickzettel, mit dem sie bewährte Designs entwickeln können, die sowohl wunderschön als auch integrativ sind.

Schritt 5: Komponenten dokumentieren

Jetzt kann es losgehen. Füge für jede Komponente in deinem Designsystem einen Code-Schnipsel ein und beschreibe anhand der Tabellen in diesem Abschnitt die Möglichkeiten, wie er in verschiedenen Designkontexten bearbeitet werden kann. Mit diesem Abschnitt gewährleistest du, dass die Entwickler in deiner Organisation deine Designs korrekt und einheitlich implementieren – er hat also deine volle Aufmerksamkeit verdient.

Schritt 5: Komponenten dokumentieren

Die digitale Produktdesignplattform InVision ist der Anlaufpunkt für das weltweit beste Kundenerlebnis.

  • Customer interview report template

    Atlassian

    Bericht zum Kundeninterview

    Aufschlussreiche Erkenntnisse aus Kundeninterviews mit dem Bericht zum Kundeninterview

  • Design component template

    Tony Starr

    Lead Content Designer
    Atlassian

    Designkomponente

    Dokumentiere Komponenten aus deinem Designsystem mit dieser praktischen Vorlage.

  • Design sprint template

    Figma

    Designsprint

    Schaffe einen Rahmen, in dem du im Laufe des Designs und der Tests wichtige geschäftliche Fragen beantworten kannst.