Wie oft haben wir alle schon versucht spezifisch und intelligent zu reden, aber uns hat einfach die richtige Sprache gefehlt? Zum Beispiel, wenn man dem Mechaniker sagt, dass das “Ding” im Motor wahrscheinlich kaputt ist, ist diese Information oft nicht sehr hilfreich. Ähnlich ist es, wenn man mit Designern kommuniziert. Je genau mit seine Anforderungen mitteilen kann, desto besser ist die Chance, dass der Designer am Ende auch die Erwartungen trifft und so wenig Anpassungen wie möglich vornehmen muss.

Daher wiederholen wir hier etwas Design-Vokabular, das Designer bei der Erstellung von Logos, Werbeanzeigen oder Websiten verwenden. Keine Sorge – es ist nur ein kleines Lexikon.

Farbschemen und Farbpaletten

Sobald man zwei oder mehr Farben aus dem Farbkreis (siehe unten) nutzt, umfassen diese Farben das gesamte Schema. Die Farbpalette ist Auswahl an Farben, die in diesem Schema genutzt werden (z.B. von pink bis violett, von waldgrün bis türkis).

Screen-Shot-2014-09-30-at-10.21.51-AM

Bildquelle: Seven Swans Collection

Farbkreis

Dies ist die grafische Darstellung vo primären, sekundären und tertiären Farben. Jede Farbe ist wie die Umgebung zwischen zwei Speichen des Rades und folgt ununterbrochen dem Lichtspektrum. Komplementärfarben finden sich auf den gegenüberliegenden Seiten des Rades. Analoge Farben grenzen an die bestimmte Farbe an. Rechteckige (oder Tetradische) Farben sind vier Farben, die jeweils zwei Komplementärfarben umfassen. Teil-Komplementärfarben beinhalten die Grundfarbe und zusätzlich zwei Farben, die neben dessen Komplementärfarbe liegen.

CMYK (vs. RGB)

CMYK steht für Cyan, Magenta, Yellow (Geld) und Black (Schwarz) (ja, wir wissen, dass “black” mit einem B beginnt) und repräsentiert die Farben, die im Print Design genutzt werden, von Broschüren bis Verpackungen. RGB (Rot, Grün, Blau) ist das zusätzliche Farbmodell, welches von elektronischen Medien genutzt wird, wie Kameras, Video und TV. Grundsätzlich gilt: Wenn es um Print geht, geht es auch immer um CMYK.

CSS Code

Ein Teil des Codes, der dazu genutzt wird, um das Aussehen und Gefühl der Website festzulegen, getrennt vom eigentlichen Inhalt dieser Website.

Schriftart

Eine Schriftart hat einen festgelegten Stil und Größe. Zum Beispiel, Times New Roman Semi Bold, Größe 14

16

Bildquelle: Fontfabric 

HTML Code

Die grundlegende Computersprache, durch die Text, Bilder und Links ausgedrückt werden können.

Bilddateien

Es gibt verschiedene Dateitypen, die zur Darstellung von Bildern genutzt werden. GIF Dateien eignen sich am besten für kleine Dateien mit einer einfachen Farbpalette und einfachen Formen. GIF Dateien können auch animiert sein. Beim JPEG gilt das Prinzip, je größer die Datei, desto mehr Details enthält sie, und andersrum).

JPEGs sind einfach zu manipulieren und können für verschiedene Zwecke angepasst werden (so kann ein Icon einfach in ein Werbebanner umgewandelt werden). PNG Dateien eignen sich ambesten, wenn man große Bereiche hat, die einheitlichn gefärbt sind oder bei Bildern mit einem transparenten Hintergrund (nicht wie JPEGs). TIFF Dateien, im Gegensatz zu JPEGs, verlieren keine Daten, wenn sie komprimiert werden, und werden normalerweise für große Dateien genutzt, wo Details sehr wichtig sind. Sie wissen nicht welche Dateien Sie brauchen? Schauen Sie einmal in unseren detaillierten Artikel zu Design-Datei-Typen rein.

Kerning

Der Raum zwischen eigenständigen Buchstaben.

IC581877

Bildquelle: Microsoft; das obere Bild repräsentiert Kerning

Leading

Der Raum zwischen Linien und Text.

Live Area

So nennt man den Bereich eines Printproduktes oder einer Website, der innerhalb der Ränder liegt. Somit ist dies der Bereich, der den Design-Elementen zur Verfügung steht, wie Text, Banner, Sidebars und Bilder.

PDF Dateien

Ein passendes Format, um vielseitige Dokumente oder Broschüren elektronisch darzustellen. In PDF Dateien kann man auch die Suchfunktion anwenden.

Pixel

Das kleinste Element eines Bildes oder eines Computer Bildschirms. Bilder werden eher in Pixel Höhe und Weite, als in anderen Größenangaben beschrieben.

Sättigung

Die Farbintensität. Ein vollständig gesättigtes Bild zum Beispiel würde aus schwarz, weiß und grau Tönen bestehen.

Schatten

Der Schwarz-Anteil, der mit einem bestimmten Farbton gemischt wurde.

Buchstaben

Jeder Buchstabe einer Schrift hat anatomische Eigenschaften, ähnlich wie ein Körper.

Die Grundlinie, zum Beispiel, ist die unsichtbare Linie, auf der jeder Buchstabe sitzt. Die Mittelline ist die Höhe des Kleinbuchstabens “a”. Manche Buchstaben, wie “p” haben Unterlängen – ein Teil des Buchstabens, der unterhalb der Grundlinie liegt.

Andere, wie “d” haben Oberlängen – hier erstreckt sich der Buchstabe über die Mittelline. Der Stamm eines jeden Buchstabens ist die Hauptlinie oder die am meisten vertikale Linie. Das Gewicht eines Buchstabens bezieht sich auf die Breite dieser Linie. Beispiele hierfür sind halbstark, leicht und stark.

Screen-Shot-2014-09-30-at-5.15.13-PM

Bildquelle: http://sabaki.aisites.com/endymion/anatomy.html

Vektor Bild

Anstatt Bilder durch Pixel darzustellen, nutzen Vektoren Linien und Formen. Gerade weil sie nicht auf Pixel basieren, behalten vergrößerte Vektor Bilder immer das Originalbild und dessen Qualität.

Visuelle Hierarchie

Ein Design-Prinzip, das visuell bestimmte Teile der Botschaft durch die Nutzung von Farben, Größen und Layouts hervorhebt.

week19-c067d1e511e5098dc348507930805de0

Bildquelle: Larry Buchanan

Wasserzeichen

Um Urheberrechtsverletzungen vorzubeugen, kann es sein, dass der Besitzer eines Bildes dieses mit einem Copyright oder einer anderen Art der Identifizierung überdeckt.

White Space

Der freie Bereich, der ein Objekt oder Element umgibt.

Verlangen nach mehr Design-Wissen? Mehr Informationen gibt es im Hubspot’s Glossary of Web Design Terms.

Die Grundlage ist geschaffen, jetzt kann der Design-Wettbewerb gestartet werden!