Designer haben ihr ganz eigenes Vokabular. Wenn du mit einem Designer arbeitest, wird dir das Wissen um die richtigen Fachausdrücke dabei helfen, miteinander zu kommunizieren und die Ergebnisse zu erzielen, die du dir vorstellst. (Wir versprechen, es wird wesentlich einfacher als der Französisch-Unterricht in der Oberstufe.)

Schau dir diese Designbegriffe an. Präge sie dir ein. Lerne sie auswendig. Ähm… Das ist viel zu viel Arbeit. Speichere einfach diese Seite als Lesezeichen und nutze sie als Design-Spickzettel.

Design-Grundlagen

Design von robbyprada

Komposition und Layout

Die Komposition ist die Anordnung von Designelementen, die ein ganzes Bild ergeben. Eine erfolgreiche Komposition fesselt den Betrachter und führt seinen Blick über das Design. In der bildenden Kunst hörst du eventuell den Begriff „Form“. Im Grafikdesign nennt man es oftmals Layout. Die Komposition besteht aus einer Anzahl verschiedener visueller Designelemente, einschließlich Gleichgewicht, Nähe, Ausrichtung, Wiederholung, Kontrast und Weißraum.

Gleichgewicht

Hier geht es nicht darum, ob du nach drei Bier noch gerade auf einer Linie laufen kannst. Im Designbereich bedeutet Gleichgewicht die Platzierung von Elementen auf der Seite, sodass Text und Grafik gleichmäßig verteilt sind. Es gibt drei Wege, um Gleichgewicht zu erreichen: symmetrisch, asymmetrisch und radial.

Symmetrical logo by Mad pepper
Asymmetrically balanced logo by artsigma
Radially symmetrical logo by stevanga

Symmetrisch

Symmetrie erreicht man, wenn alle Designelemente auf beiden Seiten einer mittigen Linie gleichmäßig sind.

Asymmetrisch

Wenn Grafiken und Texte nicht gleichmäßig auf beiden Seiten einer mittigen Linie sind, spricht man von einem asymmetrischen Design. Im obigen, mittleren Beispiel gibt es immer noch eine Balance, aber auf der einen Seite befinden sich Grafiken und auf der anderen Text.

Radial

Ein radiales Design ist eines, in dem die Elemente sich von einem mittigen Punkt aus verbreiten und so Gleichgewicht erzeugen.

Nähe

Die Art, wie Designelemente auf einer Seite gruppiert oder in Abständen platziert sind, nennt man Nähe.

Ausrichtung

Ausrichtung ist die Position des Textes oder der Grafiken, ob linksbündig, rechtsbündig, zentriert oder Blocksatz.

Wiederholung

Um einen einheitlichen Look zu erhalten, wiederholen Designer Elemente durch das gesamte Design hindurch. (Wiederholung definiert man auch als die Anzahl der Male, die dein Kind dich nach noch einem Keks fragt.)

Kontrast

Kontrast wird erzielt, indem man Elemente in das Designs einfügt, die sich deutlich voneinander unterscheiden. Ein Designer kann Farbe, Form, Textur, Größe oder Schrift verwenden, um Kontrast zu erzeugen.

Leerraum

Leerraum – manchmal auch Negativraum genannt – ist der Teil eines Designs, der unberührt von Bildern oder Text ist.

rule of thirds

Drittel-Regel

Die Drittel-Regel ist eine Technik, die Designer nutzen, um Fokuspunkte zu setzen. Wenn man ein Raster bestehend aus drei Spalten und Zeilen benutzt, liegen die Fokuspunkte dort, wo sich die Linien berühren. Designer benutzen dies als Hilfe, um festzulegen, an welcher Stelle wichtige Elemente in ihrem Design platziert werden müssen.

Raster

Ein Raster ist eine Reihe sich kreuzender, vertikaler, horizontaler, schräger oder gekrümmter Linien, die dazu benutzt werden, grafische Elemente auf einer Seite und in Bezug zueinander anzuordnen.

Hierarchie

Im Design ist die Hierarchie die Anordnung von Elementen ihrer Wichtigkeit nach. Das Design von Zeitungen, Magazinen oder Filmplakaten ist ein gutes Beispiel für die Verwendung von Designhierarchie. Überschriften (auch Auszeichnungsschrift genannt) sind üblicherweise oben, während Zwischenüberschriften und Textkörper darunter kommen.

boy and giraffe

Maßstab

Der Maßstab ist die Größe eines Objekts in Relation zu einem anderen Objekt. Maßstab kann dazu verwendet werden, Interesse zu wecken und die Aufmerksamkeit eines Betrachters zu erregen.

Aufriss-Skizze

Während sie ein Konzept entwerfen, erstellen Designer oftmals kleine, grobe Zeichnungen – Aufrisse, auch Sketch oder Abriss genannt – um Ideen zu erkunden.

Mock-up

Ein Mock-up ist ein echtes oder digitales Modell, das dazu verwendet wird, frühe Designideen zu testen und darzustellen, wie sie in echt aussehen werden.

Fotografie & künstlerische Arbeit

Auflösung

Das Detail eines Bildes, basierend auf der Anzahl der Pixel, ist die Auflösung. Ein Bild sieht schärfer aus, wenn es eine höhere Auflösung hat.

DPI

DPI steht für „dots per inch“. Damit misst man die Qualität eines Druckers. Für hochwertige Drucke werden 300dpi empfohlen. Ein Bild mit 300dpi bei 1200×1800 Pixeln wird beispielsweise zu einem 10x15cm Druck.

PPI

PPI steht für „pixels per inch“. Es ist eine Maßeinheit für die Pixeldichte bei elektronischen Bildgeräten. Du wirst es bei Scannern, Kameras, Fernsehgeräten oder Monitoren finden. Erfahre mehr über den Unterschied zwischen DPI und PPI.

Anschnitt und Beschnitt Design Begriffe

Anschnitt

Der Anschnitt (auch Bleed genannt) ist, wenn ein Design eigentlich über seine gedruckten Ecken hinausreicht, damit es keine Möglichkeit für weiße Ränder gibt, wenn es nach dem Druck beschnitten wird.

Beschnitt

Die Beschnittgröße ist die finale Größe eines gedruckten Werks, nachdem es zurechtgeschnitten wurde. Der Beschnitt (auch Trim genannt) erfolgt entlang von Beschnittzeichen, die zeigen, wo geschnitten werden soll.

Pixel

Pixel sind quadratische Punkte, die ein digitales Rasterbild ergeben (nicht zu verwechseln mit „Pixels“, einem wirklich schlechten Film mit Adam Sandler.) Je mehr Pixel ein Bild hat, umso höher ist die Auflösung.

Crop / Zuschnitt

Ein Designer kann unnötige Teile eines Bildes zuschneiden, um die Bildeinstellung zu verbessern, einen bestimmten Gegenstand hervorzuheben oder das Seitenverhältnis zu ändern.

Stock-Fotos

Stock-Fotos sind lizenzierte Bilder, die durch Dritte erzeugt wurden. Die Verwendung von Stock-Material spart die Kosten für ein professionelles Fotoshooting. Schau dir einige unserer Lieblingsseiten für gute, kostenlose Stock-Fotos an.

Typographie

Schriftarten

Die meisten Schriften fallen in eine von vier Kategorien von Schriftarten.

Serifen-Schriften

Serifen sind kleine Linien und Haken am Ende eines Strichs in einigen Buchstaben.

Serifenlose Schriften

Eine serifenlose Schrift hat keine Serifen.

Handschrift (Script)

Handschriften haben einen fließenden, kursiven Strich.

Blockserifen (Egyptienne)

Blockserifen-Schriften (auch Egyptienne oder serifenbetonte Linear-Antiqua genannt) haben betonte, blockartige Serifen.

Bestandteile von Schrift

Alle Schriftarten bestehen aus den gleichen grundsätzlichen Bestandteilen.

Typographie Design Begriffe

Oberlänge

Die Oberlänge (auch Ascender genannt) ist der Teil eines Kleinbuchstaben, der über den Hauptteil des Buchstabens hinausragt. Denke zum Beispiel an das „b“ oder „h“.

Grundlinie

Alle Buchstaben sitzen auf einer Grundlinie, der niedrigste Punkt aller Großbuchstaben und der meisten Kleinbuchstaben.

Unterlänge

Die Unterlänge (auch Descender genannt) ist der Teil eines Kleinbuchstabens, der unter den Hauptteil eines Buchstabens abfällt. Denke an „g“ oder „p“.

Mittellänge / x-Höhe

Die Mittellänge oder x-Höhe ist die Stelle, an der die meisten Kleinbuchstaben ihre Maximalhöhe erreichen sollen. Sie wird von der Höhe eines x in einer Schriftart abhängig gemacht.  

Schriftabstand

Der vertikale und horizontale Abstand einer Schriftart wird oftmals verändert, um ihre Erscheinung zu ändern.

Design Begriffe

Unterschneidung

Als Unterschneidung bezeichnet man den Raum zwischen Paaren von Buchstaben im selben Wort. Bestimmte Paare von Buchstaben erzeugen einen ungünstigen Raum und Unterschneidung hilft, Raum zwischen ihnen hinzuzufügen oder wegzunehmen, um einen visuell ansprechenderen und besser lesbaren Text zu erzeugen.

Zeilenabstand

Der Zeilenabstand, auch Zeilenhöhe genannt, bezeichnet den Raum zwischen zwei Textzeilen.

Laufweite

Nicht zu verwechseln mit Unterschneidung, ist die Laufweite die Anpassung von Abständen für Gruppen von Buchstaben und ganzen Textblöcken. Die Laufweite beeinflusst jedes Zeichen im ausgewählten Text und wird verwendet, um die ganzheitliche Erscheinung zu verändern.

Buchstabengröße

In der Regel gibt es Buchstaben in zwei Formen.

Majuskel (Großbuchstaben)

Die Großbuchstaben einer Schrift. Sie werden auch von deiner Mutter verwendet, um DICH VERSEHENTLICH ANZUSCHREIEN, WENN SIE DIR SCHREIBT.

Minuskel (Kleinbuchstaben)

Minuskel sind die Kleinbuchstaben einer Schrift.

Kapitälchen

Kapitälchen sind Großbuchstaben, welche dieselbe Größe wie Kleinbuchstaben haben. Sie werden verwendet, um zu verhindern, dass großgeschriebene Wörter auf einer Seite zu groß wirken. Beispiel gefällig? In vielen Büchern findest du sie bei den ersten Wörtern eines Kapitels.

Schriftstil

Neben Laufweite und Größe, können Schriftarten auch in ihrem Maßstab, ihrer Stärke und ihrem Stil verändert werden.

Schriftgröße

Die Schriftgröße ist die Größe eines Textes nach Punkten (pt). Es gibt ungefähr 28 (28,35) Punkte in einem Zentimeter.

Schriftstärke

Die Schriftstärke beschreibt die Dicke bzw. Stärke der Schrift. 

Kursiv

Wenn Buchstaben sich nach rechts neigen sind sie kursiv, eine visuelle Technik, die dazu verwendet wird, Aufmerksamkeit auf bestimmte Wörter oder Sätze innerhalb eines Absatzes zu lenken.

 Witwen & Schusterjungen

Witwen und Schusterjungen machen Designer sehr traurig. Das rührt daher, dass sie arme, einsame Wörter am Anfang oder Ende eines Absatzes sind, die vom Rest des Textes getrennt sind.

 

Witwen

Eine Zeile am Ende eines Paragraphs, die an den Beginn der folgenden Seite oder Spalte fällt und dadurch vom Rest des Textes getrennt ist.

Schusterjungen

Eine Zeile am Beginn eines Paragraphs, die ans Ende einer Seite oder Spalte fällt und dadurch vom Rest des Textes getrennt ist.

Lorem ipsum

Lorem ipsum (auch bekannt als Leertext) wird als Platzhalter verwendet, der später durch den eigentlichen Text ersetzt wird. Der Lorem-ipsum-Text kommt von Ciceros Werk „Vom höchsten Gut und vom größten Übel“, geschrieben im Jahr 45 v. Chr.

Farbe

Farblehre

Die Lehre darüber, wie Farben Menschen beeinflussen und ihre Auswirkungen auf ein Design, ist bekannt als Farbenlehre. Farbenlehre wird verwendet, um herauszufinden, welche Farben am besten für welches Design funktionieren. Beispielsweise nutzt man sie, wenn man ein Pastell-Schema für eine Website wählt, die sich zart anfühlen soll, oder Rot und Gelb für eine Magazinwerbung, die Energie vermitteln soll.

Farbton, Tönung, Ton und Schattierung

Der Farbton ist reine Farbe. Die Tönung ist eine Farbe mit beigemischtem Weiß. Der Ton ist eine Farbe mit beigemischtem Grau. Die Schattierung ist eine Farbe mit beigemischtem Schwarz.

Sättigung

Sättigung definiert die Intensität einer Farbe.

Palette

Eine Palette ist die Bandbreite von Farben, die im Design verwendet werden. Dies sind Farben, die gut zusammen funktionieren und oftmals ästhetisch ansprechend sind. Designer definieren eine Palette für ein Projekt, um Konsistenz und ein bestimmtes Gefühl zu erzeugen.

 Warme und kalte Farben

Warme Farben findet man in der einen Hälfte des Farbkreises (Rot, Orange, Gelb und Pink). Kalte Farben belegen die andere Hälfte (Blau, Grün und Violett).

Monochromatisch

Eine monochromatische Farbpalette oder einfarbige Palette verwendet nur eine einzige Farbe.

Graustufe

Eine monochromatische Farbpalette, welche auf Grau basiert, nennt man Graustufe.

 Analog

Farben, die im Farbkreis nebeneinander liegen, (z. B. Rot-Violett, Rot und Rot-Orange) sind analog.

Komplementär

Komplementärfarben liegen sich im Farbkreis gegenüber. Diese Beziehung erzeugt visuelle Spannung und Überraschung.

Triadisch

Triadische Farben sind drei Farben, die gleichmäßig verteilt im Farbkreis liegen. Eine Farbe dominiert, die zweite unterstützt und die dritte akzentuiert.

Farbverlauf

Der Farbverlauf ist eine stufenweise Veränderung von einer Farbe zur nächsten. (Zum Beispiel geht Blau nach und nach zu Grün über).

Deckkraft

Deckkraft ist gleichbedeutend mit Undurchsichtigkeit. Je transparenter ein Bild, umso niedriger die Deckkraft.

CMYK

CMYK ist ein 4-Farb-Druckprozess, bestehend aus Cyan, Magenta, Gelb und Schwarz (auch Key Black genannt). CMYK-Farben im Druck werden niemals so kräftig erscheinen wie RGB-Farben auf dem Bildschirm, da das CMYK-Prinzip dadurch Farbe erzeugt, dass es Farben zusammen mischt (und das Bild dunkler macht), während RGB-Farben durch Licht entstehen.

RGB

RGB steht für Rot, Grün und Blau, die drei Farben des Lichts, die normalerweise verwendet werden, um Bilder auf Bildschirmen darzustellen.

Pantone

Entwickelt von der Pantone Corporation, einer professionellen Farbfirma, ist Pantone das am weitesten verbreitete, proprietäre  Farbsystem für Mischfarben. Das System beinhaltet Farben, die nicht in CMYK gemischt werden können.

Web & Digital

 Webseitenelemente

Die meisten Website-Designs beinhalten eine Kombination dieser Elemente.

website elements gif

Header (Kopfzeile)

Designelemente, die sich oben auf jeder Seite wiederfinden, werden Header oder Kopfzeile genannt.

Navigation & Navigationsleiste

Die Navigation ist der Wegweiser zu den wichtigsten Teilen einer Website und sollte visuell gleichmäßig durch alle Seiten hinweg sein. Eine Navigationsleiste ist eine Reihe von Links, die auf jeder Seite wiederkehrt und oftmals auf Seiten wie „Über uns“, „Produkte“, „Kontakt“ und „Referenzen“ verlinkt.

Breadcrumb Trail (Brotkrümelnavigation)

Breadcrumb Trails sind Navigationselemente, die üblicherweise in der Nähe des Seitenkopfes erscheinen, um dem Benutzer zu zeigen, wo die aktuelle Seite sich in der Hierarchie der Seiten befindet.

Body Text (Textkörper)

Der Textkörper ist der Hauptteil des geschriebenen Inhalts auf einer Seite.

Links

Jedes Wort oder Bild kann ein Link sein, der den User zu einer anderen Seite führt.

Sidebar (Seitenleiste)

Eine Sidebar ist die links- oder rechtsseitige Spalte einer Seite und wird in der Regel entweder für vertikale Navigationslinks oder Werbung verwendet. Sie kann auch die Seitensuche, Abo-Links (RSS, Newsletter, etc.) oder Social-Network-Buttons enthalten.

Banner

Befinden sich üblicherweise oben auf der Seite oder in einer Sidebar. Banner sind Werbungen, die auf andere Webseiten verlinken.

Footer (Fußzeile)

Designelemente, die sich am Ende jeder Seite wiederholen, nennt man Footer.

HTML

HTML steht für Hypertext Markup Language. Dies ist die Standardprogrammiersprache für Webseiten, die sämtliche Schriften, Farben, Grafiken und Links, die du online siehst, erzeugt.

Landingpage

Eine Landingpage ist eine einzelne Seite, die als Antwort auf eine Suche in einer Suchmaschine erscheint. Landingpages werden zur Leadgenerierung verwendet.

User interface (UI / Benutzeroberfläche)

User Interface ist das Design von Anwendungen für Computer, Mobilgeräte und andere Geräte, um ihre Benutzerfreundlichkeit und das Nutzererlebnis zu maximieren.

Wireframe (Gitternetzmodell)

Grundlegende Bilder, welche die essenziellen Funktionen einer Website darstellen, werden Wireframe genannt. Designer nutzen diese Gitternetzmodelle, um zu zeigen, wie eine Seite funktioniert.

Bilddateiformate

Ein Bilddateiformat ist ein standardisierter Weg, um Grafiken und Fotos digital zu kodieren.

Vektorgrafiken

Vektorgrafiken sind kleine Grafiken, welche Mathematik verwenden, um Bilder darzustellen. Sie können vergrößert werden, ohne an Qualität zu verlieren und sind essenziell für plattformübergreifende Designs (z. B. Werbetafeln, Visitenkarten, etc.).

AI

AI steht für Adobe Illustrator Document. Dies ist ein Dateiformat, welches von Adobe Systems entwickelt wurde, um einseitige Vektordesigns darzustellen.

EPS

EPS steht für Encapsulated Post Script. Dies ist ein größenveränderbares Dateiformat, welches üblicherweise für Vektordesigns verwendet wird. Aufgrund seiner hohen Qualität wird es in der Regel für Druckelemente wie Logos, Visitenkarten oder Broschüren verwendet.

PDF

PDF bedeutet Portable Document Format und wurde von Adobe entwickelt. Es kann auf jedem Computer heruntergeladen und betrachtet werden. PDFs eignen sich am besten für die Vorschau einer Arbeit und lassen sich universell öffnen und anschauen.

Rastergrafiken

Rastergrafiken bestehen aus Pixeln auf einem Gitternetz, wo jedem Pixel ein Farbwert zugewiesen ist. Sie eignen sich gut, um Spezialeffekte festzulegen, für Farbkorrekturen und um Fotos zu manipulieren. Sie sind abhängig von der Auflösung, was bedeutet, dass sie nicht vergrößert werden können, ohne an Qualität zu verlieren.

GIF

GIF oder Graphics Interchange Format ist ein Rasterformat, welches Animationen und Transparenz unterstützt. GIFs können nur bis zu 256 Farben anzeigen und ermöglichen nur geringe Dateigrößen. (PS: Laut GIF-Erfinder Steve Wilhite spricht man es „JIF“ aus, im Gegensatz zur weit verbreiteten Meinung.)

JPEG

Joint Photographic Electronic Group, auch bekannt als JPEG, das am weitesten verbreitete Rasterformat für webbasierte Designs. JPEGs sind komprimierte Dateien, die schnell laden. Man findet sie üblicherweise in E-Mails, Banner-Ads, Onlinefotos und überhaupt so ziemlich überall. Im Gegensatz zu GIFs, können sie keinen transparenten Hintergrund haben (es wird automatisch ein weißer Hintergrund hinzugefügt).

PNG

PNG steht für Portable Network Graphics, einem webbasierten Format, welches keine Qualität verliert, wenn es komprimiert wird. PNG-Dateien wurden erfunden, um die Qualität von GIF-Dateien zu verbessern.

PSD

PSD (oder Photoshop Document) ist die unkomprimierte Rasterbilddatei, die in Adobe Photoshop erzeugt wird.

TIFF

TIFF steht für Tagged Image File Format, einem geläufigen Format, um Rasterbilder zwischen Anwendungen auszutauschen. TIFF erzeugt Bilder mit einer höheren Qualität als JPEG oder PNG und ist unter Verlegern und Fotografen weit verbreitet.

Logotypen

Alle Logos bestehen aus Typografie, Formen und/oder Bildern und passen in der Regel in eine dieser sechs Standardkategorien für Logotypen. Jedes wird deiner Marke oder deinem Unternehmen ein anderes Feeling verpassen. Diese sechs Logotypen können auch miteinander kombiniert werden, um ein noch einzigartigeres Logo zu erzeugen.

circle logo
logo design by goopanic
EMBLEM LOGO
Emblem logo design by Neatlines for Palouse Pint
LETTER MARK LOGO
Lettermark logo design by arkum

Abstraktes Logo

Ein abstraktes Logo ist ein Logo, welches gefühlsbedingte Qualitäten von Farbe und Form verwendet, um deine Marke zu vermitteln. Statt eines wiedererkennbaren Bildes wie ein Apfel oder ein Huhn, nutzen abstrakte Logos Formen, um dein Unternehmen zu verkörpern.

Emblem

Embleme nutzen Rahmen und Formen, um den Namen des Unternehmens oder der Organisation zu umschließen. Denk dabei an Plaketten, Siegel oder Wappen.

Lettermark-Logo

Lettermark-Logos haben einen oder mehrere stilisierte Buchstaben (beispielsweise die Initialen eines Unternehmens), um eine Marke zu identifizieren. Zu den berühmten Lettermark-Logos gehören die von IBM, CNN, HP und H&M.

giraffe logo
Pictorial logo design by SpoonLancer
moose MASCOT LOGO
Mascot logo design by Nico Strike
wordmark mexican restaurant logo
Wordmark logo design by nnorth

Bildmarken oder Symbole

Bildmarken und Symbole sind nicht-abstrakte, visuelle Bilder, welche deinen Unternehmensnamen oder deine Dienstleistung repräsentieren. Du siehst das beispielsweise beim Apple-Logo und dem Twitter-Vögelchen.

Maskottchen

Maskottchen bauen auf einen Charakter oder einen Firmensprecher, um ein Unternehmen zu repräsentieren. Zu den berühmten Maskottchen gehören der McDonalds-Clown, der Frosties-Tiger und Mr. Peanut.

Wortmarke

Eine Wortmarke setzt auf maßgeschneiderte Typographie des Textes, um eine Marke darzustellen. Denke nur mal an VISA, Google oder Coca Cola.

Puh, du hast es geschafft! Nun, da du dich mit Designbegriffen auskennst, starte noch heute einen Designwettbewerb!

 Dieser Artikel wurde ursprünglich von Alex Bigman verfasst und 2014 veröffentlicht. Die aktuelle Version wurde überarbeitet und um neue Informationen und Beispiele ergänzt.