33 Wichtige Webdesign Begriffe und Abkürzungen erklärt

Im Bereich Webdesign gibt es viele Fachbegriffe. Wenn man neu in diesem Bereich ist, kann es ziemlich überwältigend sein, was alle diese Definitionen bedeuten. Zu wissen was die wichtigsten und am häufigsten verwendeten Fachbegriffe bedeuten, kann ein großer Vorteil bei der Zusammenarbeit zwischen Marketing, Design und Entwicklung sein. 

‍

Above the Fold

Above the Gold bezeichnet den oberen Bereich einer Webseite, den der User sieht, ohne scrollen zu müssen. Alles, was unter diesem Bereich liegt, wird als „Below the Fold“ bezeichnet.

A/B-Test

Bei einem A/B-Test werden Usern zwei unterschiedliche Designs gezeigt, bei dem sich einzelne Elemente unterscheiden. Beispielsweise ein Button mit unterschiedlichen Texten. Ziel bei dem Test ist herauszufinden, welches Element mehr Engagement bei der Zielgruppe auslöst.

Barrierefreiheit

Barrierefreiheit bedeutet im Webdesign, wie zugänglich eine Webseite mit Einschränkungen ist. Bei der Erstellung einer Webseite ist es wichtig, auch Menschen mit einer Hör- oder Sehbehinderung zu berücksichtigen. Wichtig hierbei sind ausreichende Farb-Kontraste und die Vergabe von Alt-Texten bei Bildern. 

Backend

Das Backend ist praktisch der nicht sichtbare Teil einer Webseite. In diesem Bereich werden Daten, Informationsstruktur oder das CMS verwaltet. Das Frontend ist das Gegenstück dazu und ist der sichtbare & grafische Teil einer Webseite. Stell dir den Motorraum eines Autos als Backend vor und den Innenraum mit Außenseite als Frontend. 

Backlink

Links, die von einer anderen Webseite auf deine Webseite verlinken, werden als Backlinks bezeichnet. Diese sind wichtig, um ein gutes Ranking in Suchmaschinen zu erhalten. Je mehr Backlinks du von vertrauenswürdigen Webseiten erhältst, desto besser ist das für die Sichtbarkeit deiner Webseite.

Breadcrumb

Breadcrumb ist eine Darstellungsart einer Websitenavigation. Meistens wird eine Breadcrumb-Navigation am oberen Teil einer Unterseite angezeigt. Diese soll dem User anzeigen, auf welcher Seite er sich gerade befindet. Ein Beispiel könnte so aussehen: „Startseite > Blog > Reisen > Sommerurlaub > Urlaub am Strand“

‍

Browser

Ein Browser ist ein Programm, mit dem Webseiten angesehen werden können. Die bekanntesten Browser sind: Safari, Google Chrome, Firefox, Internet Explorer, Opera, Edge, Brave.

‍

Cache 

Cache sind Daten, die von einem Browser gespeichert werden. Sie helfen dabei, dass Webseiten bei einem erneuten Besuch schneller geladen werden oder du dein Passwort nicht immer neu eingeben musst. Der Cache kann in dein Einstellungen des Browsers einfach wieder gelöscht werden.

CTA

Ein Call to Action (CTA) ist ein Element, welches den User zu einer Handlung auffordern soll. Das ist in der Regel ein Textlink, ein Button oder eine Art Banner. Ein typisches Beispiel ist ein Button mit dem Text „Jetzt kaufen“ auf einer E-Commerce Webseite. 

CMS

Mit einem Content Management System (CMS) können Inhalte einer Webseite verwaltet werden. Ein CMS ermöglicht, die Einpflege und Aktualisierung von Inhalten – ohne Erfahrung in HTML oder Entwicklung haben zu müssen. Ein Beispiel wäre: Du legst mit WordPress einen neuen Artikel für deinen Blog an.

Domain

Die Domain ist der Name einer Webseite. Diese kann aus einer beliebigen Kombination aus Buchstaben, Bindestrichen und Zahlen bestehen. Eine Domain ist folgendermaßen aufgebaut:

• Tird-Level-Domain: www.
• Second-Level-Domain: meine-webseite
• Top-Level-Domain: .de (.com, .net, .org, .biz)

Farb-Kontrast

Der Farb-Kontrast ist der Unterschied zwischen zwei Farben. Schwarz und Weiß bilden den größten Farb-Kontrast. Der Kontrast kann sich in Farbton, Wert oder Sättigung unterscheiden. Für eine gute Lesbarkeit von Texten will man meistens einen starken Kontrast erreichen. Durch einen zu schwachen Kontrast zwischen Text ist es schlecht für die Lesbarkeit & damit der Usability. Der Farbkontrast ist daher ein wesentliches Stilmittel im Design, um eine Webseite ansprechend zu gestalten. 

Favicon

Ein Favicon ist ein kleines Bild, das im Tab deines Browsers angezeigt wird. Das Bild ist 16x16 Pixel groß und kann als ICO, PNG, GIF, oder JPG abgespeichert werden.

HTML

Hypertext Markup Language (HTML) ist wohl die wichtigste Programmiersprache, um Webseiten zu entwickeln. In einem HTML-Dokument wird die Struktur von Texten, Bildern oder Links angegeben. HTML ist textbasiert und gilt als Grundlage des World Wide Web.

Hyperlink

Ein Hyperlink ist ein Link auf einer Webseite. Die Verlinkung kann auf einen anderen Teil der Webseite oder auf eine komplett andere Webseite verweisen. In der Regel ist die Verlinkung ein Text oder Bild und ist visuell markiert (Unterstrichener Text, andere Farbe oder Schriftgröße).

‍

Heatmap

Eine Heatmap ist eine grafische Darstellung von Bereichen auf einer Webseite, mit denen die User am meisten interagieren. Die Bereiche, auf denen User die meiste Zeit verbringen, werden rot dargestellt, Bereiche mit weniger Aufmerksamkeit werden blau dargestellt. Am Ende ergibt es ein Bild ähnlich einer Wärmekamera. So erhalten Designer wertvolle Informationen, wie gut eine Webseite funktioniert. 

JPG

Joint Photographic Experts Group (JPG) ist wohl eines der bekanntesten digitalen Bildformate. Ein JPG wird im Farbraum Rot, Grün, Blau (RGB) dargestellt und basiert auf Pixeln. 
‍

‍

Landing Page

Eine Landingpage ist eine Seite einer Webseite, die mit einem bestimmten Werbeziel erstellt wurde. Ein gutes Beispiel hierfür ist eine Landingpage von Apple für das neueste iPhone. Der User erhält wichtige Informationen über die Funktionen eines Produktes und soll am Ende angeregt werden, einen Kauf zu tätigen oder sich für einen Service anzumelden. 

Mockup

Ein Mockup ist eine grafische Simulation einer Webseite oder eines Produktes, um ein Gefühl für das finale Ergebnis zu erhalten. Bei Mockups arbeitet man normalerweise mit Platzhalterdaten und ist wie ein erster Prototyp eines Designs. 

Moodboard

Auf einem Moodboard sammelt man visuelle Elemente wie Bilder, Texte, Farben oder Grafiken, um den Stil eines Brand-Designs zu definieren. Moodboards helfen bei der Abstimmung von Designrichtungen mit dem Kunden. 

Plug-In

Mit einem Plug-In ist es möglich, ein Programm mit einer zusätzlichen Funktion zu erweitern. Bei Webseiten können so Funktionen wie Mehrsprachigkeit, Cookie-Banner oder eine Newsletter-Funktion integriert werden. 

Responsive 

Responsive bedeutet, dass deine Webseite auf jedem Gerät (z.B. Desktop, Tablet, Smartphone) optimal angezeigt wird. Da Webseiten immer häufiger auf mobilen Bildschirmen angesehen werden, ist es umso wichtiger, Webseiten responsiv zu gestalten. 

SaaS

Software as a Service (SaaS) ist ein bestimmtes Software-Vertriebsmodell. Dabei können User eine Software durch ein Abonnement lizenzieren. Dabei wird die Software auf einem externen Server gehostet und der User kann darauf zugreifen. 

SVG

Ein SVG ist eine skalierbare, zweidimensionale Vektorgrafik (engl. Scalable Vector Graphic). SVG basiert auf dem text-basierten Format XML. Der Vorteil eines SVGs ist, dass es ohne Qualitätsverlust beliebig skaliert werden kann. 

‍

SSL

Secure Sockets Layer (SSL) ist ein Protokoll zur sicheren Übertragung im Internet. Webseiten mit einer SSL-Verschlüsselung erkennst du an dem grünen Schloss-Icon neben der Adresszeile. Eine SSL-Verschlüsselung gilt bei Webseiten als Sicherheits-Standard. Bei Webseiten ohne das Schloss-Icon solltest du also vorsichtshalber skeptisch sein.

Sitemap

Die Sitemap bildet die gesamte Struktur mit allen Seiten einer Webseite ab. Sie ist wichtig in der Planungs- und Erstellungsphase einer Webseite und damit Suchmaschinen den Aufbau deiner Webseite verstehen können. 

Usability

Die Usability beschreibt die Nutzerfreundlichkeit einer Webseite oder App. Ziel ist, es ein möglichst intuitives Konzept zu erstellen, damit sich User auf einer Webseite alleine zurecht finden. Als Designer benötigt man ausreichend Empathie, um sich in die Lage eines Users hineinzuversetzen und ein benutzerfreundliches Konzept zu erstellen. 

User Flow

Der User Flow ist oft eine schematische Darstellung von Schritten, die ein User auf einer Webseite ausführen kann. Ein User Flow wird während der Entstehung einer Webseite oder App erstellt. Ein Beispiel für ein Flow kann sein: Der User soll auf einer E-Commerce Webseite ein Artikel in den Warenkorb legen. 

UX

Bei User Experience (UX) geht es darum, eine Webseite oder App so zu gestalten, dass der User das beste Erlebnis erhält. Die Funktionalität sollte dabei am User orientiert sein. Die Begriffe UX und UI werden oft im Bereich Webdesign genannt und gehören zusammen.  

UI

Mit dem User Interface (UI) ist im Webdesign das visuelle Erscheinungsbild eines Produktes gemeint. Das UI umfasst alles von Farben, Schriften, Bilder, Icons, Buttons und Grafiken. UI ist immer mit UX verbunden. Zum Beispiel: Ein User reagiert mit einem Button – dieser löst eine bestimmte Funktion aus. Das UI-Design einer Webseite beeinflusst neben dem UX das Verhalten der User.

Wireframe

Ein Wireframe ist ein schametischer Entwurf einer Webseite oder App. Es ist eine schnelle und einfache Art den Aufbau darzustellen. Ein Wireframe kann einfach mit Stift und Papier oder aufwändiger in Grafikprogrammen konzipiert werden. 

404-Fehlerseite 

Diese Situation kennst du bestimmt – du klickst auf einen Link und landest plötzlich auf einer 404-Fehlerseite. Diese Seiten werden immer angezeigt, wenn ein URL-Pfad falsch eingegeben wird, die gesuchte Seite nicht mehr verfügbar ist oder gelöscht wurde.

‍

Weitere hilfreiche Artikel für Beginner findest du in "SEO Meta Tags: Ein Basic Guide für Anfänger" & "Die besten 10 UI/UX & Webdesign Blogs für Anfänger"