das DesignsystemPl.: DesignsystemeB2
Eine Sammlung von Regeln, Komponenten und Stilen, die ein einheitliches Aussehen eines Produkts sicherstellt.
„Unser Designsystem enthält alle Buttons, Farben und Schriftgrößen für die App.“
die KomponentePl.: KomponentenB1-B2
Ein wiederverwendbarer Baustein eines Interfaces, zum Beispiel ein Button oder ein Formularfeld.
„Statt jeden Button neu zu gestalten, verwenden wir eine zentrale Komponente.“
die VariantePl.: VariantenB1-B2
Eine leicht abgewandelte Version einer Komponente, zum Beispiel für einen anderen Zustand oder eine andere Größe.
„In Figma haben wir für jeden Button mehrere Varianten angelegt, etwa für aktiv und deaktiviert.“
der StyleguidePl.: StyleguidesB2
Ein Dokument, das festlegt, wie Farben, Schriften und Abstände in einem Produkt verwendet werden.
„Bevor sie neue Screens gestaltet, schaut die Designerin im Styleguide nach, welche Farben erlaubt sind.“
die SchriftartPl.: SchriftartenB1
Die Form, in der Buchstaben und Zahlen dargestellt werden, zum Beispiel eine bestimmte Schrift für eine Marke.
„Für die neue Website haben wir eine moderne, gut lesbare Schriftart ausgewählt.“
der SchriftschnittPl.: SchriftschnitteB2
Eine bestimmte Ausprägung einer Schriftart, etwa fett, kursiv oder besonders dünn.
„Für Überschriften nutzen wir den fetten Schriftschnitt, für Fließtext den regulären.“
der SchriftgradPl.: SchriftgradeB2
Die Größe der Schrift, meist in Pixel oder Punkt angegeben.
„Der Schriftgrad für den Fließtext liegt auf allen Screens einheitlich bei sechzehn Pixel.“
der ZeilenabstandPl.: ZeilenabständeB2
Der senkrechte Abstand zwischen zwei Textzeilen, der die Lesbarkeit beeinflusst.
„Ein größerer Zeilenabstand macht lange Texte auf dem Bildschirm angenehmer zu lesen.“
Die Ordnung von Überschriften und Texten nach Größe und Gewicht, damit Wichtiges sofort erkennbar ist.
„Eine klare Schrifthierarchie hilft den Nutzern, Überschriften und Fließtext auf einen Blick zu unterscheiden.“
das RasterPl.: RasterB2
Ein unsichtbares Gitter aus Spalten und Zeilen, an dem sich Elemente auf einer Seite ausrichten.
„Alle Elemente auf der Startseite folgen einem zwölfspaltigen Raster.“
Der leere, freie Bereich zwischen und um Elemente herum, der ein Layout ruhig und übersichtlich wirken lässt.
„Mit mehr Weißraum um die Produktbilder wirkt die Seite viel aufgeräumter.“
der AbstandPl.: AbständeB1
Der Raum zwischen zwei Elementen auf dem Bildschirm.
„Zwischen den Buttons brauchen wir einen größeren Abstand, damit man sie leichter antippen kann.“
der FarbtonPl.: FarbtöneB1-B2
Eine bestimmte Abstufung einer Farbe, zum Beispiel ein helleres oder dunkleres Blau.
„Für Fehlermeldungen verwenden wir immer denselben roten Farbton.“
die AkzentfarbePl.: AkzentfarbenB2
Eine zusätzliche Farbe, die einzelne Elemente hervorhebt und Aufmerksamkeit lenkt.
„Mit einer kräftigen Akzentfarbe heben wir wichtige Aktionen wie Kaufen oder Speichern hervor.“
das SymbolPl.: SymboleB1
Ein kleines Bildzeichen, das eine Funktion oder Information ohne viel Text darstellt.
„Für die Suche verwenden wir das bekannte Symbol einer Lupe.“
die IllustrationPl.: IllustrationenB2
Eine gezeichnete oder digital erstellte Grafik, die eine Situation oder einen Zustand anschaulich zeigt.
„Auf der leeren Startseite zeigt eine freundliche Illustration, dass noch keine Einträge vorhanden sind.“
einheitlichB1-B2
Überall auf die gleiche Art gestaltet, ohne Unterschiede.
„Alle Formulare in der App sollen einheitlich gestaltet sein, damit sich Nutzer schnell zurechtfinden.“
Elemente so anordnen, dass sie an einer Linie oder Kante genau übereinstimmen.
„Wir müssen die Buttons noch am linken Rand ausrichten, damit das Layout ordentlich aussieht.“
die AusrichtungPl.: AusrichtungenB2
Die Position von Elementen zueinander, zum Beispiel links, rechts oder mittig.
„Die Ausrichtung der Textblöcke wirkt auf dem Screen momentan noch uneinheitlich.“
das LayoutPl.: LayoutsB1-B2
Die Anordnung aller Elemente auf einer Seite oder einem Bildschirm.
„Für die Produktseite haben wir drei verschiedene Layouts entworfen und im Team verglichen.“
So gestaltet, dass sich ein Layout automatisch an verschiedene Bildschirmgrößen anpasst.
„Die Website muss responsiv sein, damit sie auf dem Handy genauso gut funktioniert wie am Desktop.“
die VorlagePl.: VorlagenB1-B2
Ein fertig gestaltetes Muster, das als Ausgangspunkt für neue Screens oder Dokumente dient.
„Für neue Landingpages nutzt das Team immer dieselbe Vorlage, um Zeit zu sparen.“
das Design-TokenPl.: Design-TokenB2
Ein benannter, wiederverwendbarer Wert für Farbe, Abstand oder Schrift, der in Design und Code gleichermaßen genutzt wird.
„Statt eines festen Farbwerts verwendet die Entwicklung das Design-Token für die Primärfarbe.“
Die Anordnung von Elementen so, dass wichtige Inhalte durch Größe, Farbe oder Position zuerst auffallen.
„Durch eine klare visuelle Hierarchie sieht der Nutzer sofort, welcher Button die Hauptaktion ist.“
der DunkelmodusB1-B2
Eine dunkle Darstellung der Oberfläche mit hellem Text auf dunklem Hintergrund.
„Viele Nutzer wünschen sich einen Dunkelmodus, damit die App nachts weniger blendet.“
Teste dich: 5 Fragen
Was bedeutet „einheitlich“?
Was bedeutet „die Akzentfarbe“?
Was bedeutet „responsiv“?
Was bedeutet „der Schriftschnitt“?
Was bedeutet „der Abstand“?
Diese Wörter als Karteikarten lernen
Kostenlos startenHäufige Fragen
- Was bedeutet „das Designsystem“?
- Eine Sammlung von Regeln, Komponenten und Stilen, die ein einheitliches Aussehen eines Produkts sicherstellt.. Beispiel: „Unser Designsystem enthält alle Buttons, Farben und Schriftgrößen für die App.“
- Was bedeutet „die Komponente“?
- Ein wiederverwendbarer Baustein eines Interfaces, zum Beispiel ein Button oder ein Formularfeld.. Beispiel: „Statt jeden Button neu zu gestalten, verwenden wir eine zentrale Komponente.“
- Was bedeutet „die Variante“?
- Eine leicht abgewandelte Version einer Komponente, zum Beispiel für einen anderen Zustand oder eine andere Größe.. Beispiel: „In Figma haben wir für jeden Button mehrere Varianten angelegt, etwa für aktiv und deaktiviert.“