Design Begriffe, die du kennen solltest

Die komplexe Sprache der Designwelt kann schon mal überwältigend sein. Sätze wie „Ist die Website auch responsiv?“ oder „Lösch bitte das Hurenkind!“ sind hier keine Seltenheit. Falls du dich jetzt fragst, was das alles bedeutet, solltest du unbedingt weiterlesen. Ob Grafik- oder Webdesign – die Liste der Fachbegriffe ist ziemlich lang. Wenn du also neu in einem dieser Bereiche bist oder mit einem Designer zusammenarbeitest, kann unser kleines Lexikon die Arbeit und die Kommunikation deutlich vereinfachen. Ein paar der wichtigsten Design Begriffe haben wir hier zusammengefasst:

Allgemeines

• Komposition & Layout: Kompostionen sind Anordnungen verschiedener Designelemente, die gemeinsam ein Ganzes ergeben. Eine gute Komposition ist hierarchisch so aufgebaut, dass der Blick der Betrachter:innen über das Design geführt wird.
• Raster: Ein Raster ist eine Reihe vertikaler und horizontaler Linien, die verwendet werden, um grafische Elemente auf einer Seite im Bezug zueinander anzuordnen.

• Weißraum: Der ungenutzte Teil einer Druck- oder Bildschirmseite ist ein Stilmittel minimalistischen Designs und dient dazu, der Gestaltung Raum zu geben.

• Drittel-Regel: Diese Regel hilft Designer:innen Fokuspunkte zu setzen, welche dort liegen dort, wo die Linien sich in einem 3-spaltigen Raster berühren. An diesen Stellen werden wichtige Elemente platziert, um sie in der Gestaltung hervorzuheben.

• Bildmarken: Bildmarken sind visuelle Bilder oder Symbole, die einen Unternehmensnamen repräsentieren und eine Wortmarke unterstützen können.

• Wortmarken: Eine Wortmarke ist die ausschließliche Typografie eines Textes, die eine Marke darstellt.

• Briefing: Ein Briefing enthält allgemeine Informationen, die Designer:innen zur Umsetzung eines Projektes benötigen.

• Styleguide/Manual: In diesem Handbuch wird das Corporate Design einer Marke in all seinen Elementen festgehalten. Es dient zur Orientierung und informiert über Schriften, Farben und Gestaltungselemente.

• Design Thinking: Dieser Kreativprozess dient dem Finden neuer Ideen und Lösungen. Die Design Thinking Methode beruht darauf, sich an Nutzer:innen und an deren Bedürfnissen zu orientieren, um innovative Ergebnisse herauszubringen.

• Mockup: Ein Mockup ist eine Datei, die verschiedene Platzhalter beinhaltet. Diese können durch eigenes Material ersetzt werden, um realistische Szenen nachzuahmen (z.B. Screenshots von Websites).

Fotografie

• Pixel: Quadratische Punkte, die ein digitales Rasterbild ergeben, nennt man Pixel. Je mehr Pixel ein Bild hat, umso höher ist die Auflösung.

• Auflösung: Die Qualität eines Bildes basiert auf der Anzahl seiner Pixel – die Auflösung. Je höher die Auflösung ist, desto schärfer sieht ein Bild aus.

Typografie

• Serifen-Schrift:  Schriften mit Serifen, haben in einigen Buchstaben kleine Rundungen und Kehlungen am Übergang zum angrenzenden Strich.
• Serifenlose Schrift: Serifenlose Schriften oder auch „Grotesk“, haben an den Linien keine Serifen.
• Laufweite: Mit der Laufweite kann man die Abstände von Buchstaben einer Schrift anpassen. Sie beeinflusst jedes einzelne Zeichen und kann Wörter weiter oder enger wirken lassen.
• Majuskel: Majuskel sind die Großbuchstaben einer Schrift.
• Minuskel: Minuskel sind die Kleinbuchstaben einer Schrift.
• Kapitälchen: Kapitälchen sind Buchstaben, die das Aussehen von Großbuchstaben, jedoch die Größe von Kleinbuchstaben haben.
• Schusterjunge*: Mit diesem Begriff meint man eine einsam stehende Zeile eines Absatzes.
• Hurenkind/Witwe*: So wird die letzte Zeile eines Absatzes bezeichnet, die gleichzeitig die erste Zeile einer neuen Seite oder Spalte ist.
• Blindtext: Blindtext ist ein Platzhalter, der häufig bei Entwürfen zum Einsatz kommt, bei denen der finale Text noch nicht vorliegt.

Farblehre

• Komplementär: Komplementärfarben liegen sich im Farbkreis gegenüber und erzeugen gemeinsam visuelle Spannung und Kontrast.
• CMYK: Dieses Farbmodell ist für den Druck konzipiert. Cyan, Magenta, Gelb und Schwarz bilden hierbei den 4-Farb-Druckprozess. Diese Farben sind weniger knallig als Bildschirmfarben (RGB), da sie durch Farbmischung entstehen.
• RGB: Rot, Grün und Blau sind die Farben des Lichts und werden verwendet, um Farben auf Bildschirmen darzustellen.
• Pantone: Pantone ist ein bekanntes Farbsystem für Mischfarben. Es beinhaltet Farben (wie z.B. Sonderfarben wie Gold, Silber, etc.), die nicht in CMYK gemischt werden können.

Print

• DPI: Mit „Dots per inch“ (DPI) misst man die Druckerqualität. Für einen hochwertigen Druck werden Bilder mit 300dpi empfohlen.
• Anschnitt: Wenn ein Design über seine gedruckten Ränder hinausragt, benötigt man einen Anschnitt. Er wird von Schneidemaschinen im Druck entfernt, sodass keine weißen Ränder entstehen können.
• Beschnitt: Die Beschnittgröße ist die tatsächliche und finale Größe eines gedruckten Designs, nach dem es zugeschnitten wurde.

Webdesign

• Navigation: Die Navigation ist der Wegweiser jeder Website und ist meist durch alle Seiten hinweg identisch gestaltet. Sie enthält verschiedene Links, die auf weitere Seiten verweisen.
• Burger Menü: Als Burger Menü bezeichnet man das Icon mit drei Strichen, das auf Websites die Navigation verbirgt.
• Breadcrumb: Die Brotkrümel-Navigation ist eine gegliederte Darstellung auf Seiten, die anzeigt, an welcher Stelle der Website man sich gerade befindet.
• Footer: Der Footer ist die Fußzeile jeder Website. Er enthält verschiedene Designelemente, wie z.B. Links zum Impressum, Datenschutz oder auch die Anschrift und das Logo.
• Landingpage: Eine Landingpage ist eine einzelne Seite, die zur Leadgenerierung verwendet wird. Sie erscheint als Antwort in den Suchmaschinen.
• Wireframe: Designer nutzen dieses Gitternetzmodell, um den Aufbau einer Website und wie diese funktioniert skizzenhaft zu visualisieren.
• Frontend: Frontend bezeichnet den Bereich der Website, der näher am Benutzer ist.
• Backend: Backend ist der Bereich, der „hinter“ einer Website liegt, näher am System und für den Besucher nicht sichtbar ist.
• Lazyload: Diese Technik lässt Bilder und Elemente erst dann laden, wenn sie den sichtbaren Bildschirmbereich erreicht haben. Somit kann das Laden einer Website verkürzt werden.
• Responsives Design: Responsive Websites sind an die entsprechenden Bildschirmgrößen angepasst. Sie kann auf dem Smartphone, dem Tablet und verschiedenen Desktop Größen optimiert dargestellt werden.

Dateiformate

• Vektorgrafik: Vektorgrafiken bestehen aus Pfaden und können daher beliebig vergrößert werden, ohne an Qualität zu verlieren.
• PDF: Das „Portable Document Format“ wurde von Adobe entwickelt und kann universell verwendet werden. Daher eignen sie sich besonders für die Vorschau verschiedener Arbeiten.
• GIF: Das „Graphics Interchange Format“ ist ein Rasterformat, das Animationen und Transparent unterstützt.
• JPEG: JPEG ist das am weitesten verbreitete Dateiformat. Es ist komprimiert, lädt schnell und kann universell verwendet werden. Im Gegensatz zu GIFs oder PNGs können JPEGs allerdings keine Transparenz unterstützen.
• PNG: Ein webbasiertes Format, das trotz Komprimierung nicht an Qualität verliert.

Um ein/e gute/r Designer:in zu sein, musst du natürlich nicht alle Begriffe auswendig kennen. Trotzdem kann es sehr hilfreich sein, ein kleines Handbuch parat zu haben. Speichere dir einfach diese Seite ab und schau immer mal wieder rein, wenn du Hilfe brauchst. Viel Erfolg!

*Wir wissen diese Begriffe sind diskriminierend und nicht zeitgemäß. Trotzdem sind sie im Jargon der Typografie noch immer gängig – wir hoffen, dass sich bald Alternativen durchsetzen werden und sind offen für Vorschläge.