50 Wichtige Webdesign Begriffe und Abkürzungen erklärt

Im Bereich Webdesign gibt es viele Fachbegriffe. Als Webdesign-Freelancer begegnen mir diese Begriffe täglich – und ich weiß, wie verwirrend sie am Anfang sein können. 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.

‍

Analytics

Web Analytics bezeichnet die Messung, Analyse und Auswertung von Besucherdaten einer Website. Mit Tools wie Google Analytics oder Plausible lässt sich z.B. erfassen, wie viele Besucher eine Seite hat, woher sie kommen, wie lange sie bleiben und welche Seiten sie besuchen. Diese Daten sind die Grundlage für datengetriebene Designentscheidungen und SEO-Optimierungen.

‍

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.

‍

Accessibility (Barrierefreiheit)

Accessibility (kurz: a11y) ist der englische Begriff für Barrierefreiheit im Web. Eine accessible Website ist so gestaltet, dass sie von allen Menschen genutzt werden kann – unabhängig von körperlichen oder kognitiven Einschränkungen. Wichtige Maßnahmen sind ausreichende Farbkontraste, Tastaturbedienbarkeit, Alt-Texte für Bilder und ARIA-Attribute für Screenreader. Ab 2025 ist Barrierefreiheit für viele Unternehmen in der EU gesetzlich verpflichtend. Mehr zur Bedeutung von Barrierefreiheit.

‍

API

Eine API (Application Programming Interface) ist eine Schnittstelle, die es ermöglicht, dass verschiedene Anwendungen miteinander kommunizieren. Im Webdesign-Kontext: Eine API verbindet z.B. eine Website mit einem externen Dienst wie einem Zahlungsanbieter, einer Kartenlösung oder einem E-Mail-Marketing-Tool. APIs machen es möglich, komplexe Funktionen in Websites zu integrieren, ohne sie selbst entwickeln zu müssen.

‍

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. Backlinks sind ein zentrales Thema im SEO. Mehr dazu, wie ich deine Website sichtbarer mache: SEO-Leistungen entdecken

‍

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.

‍

Core Web Vitals

Core Web Vitals sind Messgrößen von Google, die die Nutzererfahrung einer Website bewerten. Sie bestehen aus drei Kennzahlen:

• ‍LCP (Largest Contentful Paint) misst die Ladezeit des größten Elements
• ‍INP (Interaction to Next Paint) bewertet die Reaktionsfähigkeit auf Nutzereingaben
• und CLS (Cumulative Layout Shift) misst visuelle Stabilität beim Laden.

Alle drei sind direkte Rankingfaktoren für Google. Mehr zur Bedeutung für dein Google-Ranking.

‍

Conversion Rate

Die Conversion Rate (auch: Konversionsrate) gibt an, wie viele Website-Besucher eine gewünschte Aktion ausführen – z.B. ein Formular ausfüllen, einen Kauf abschließen oder sich für einen Newsletter anmelden. Sie wird in Prozent angegeben: Wenn von 100 Besuchern 3 eine Anfrage stellen, beträgt die Conversion Rate 3 %. Eine hohe Conversion Rate bedeutet, dass Design und Inhalt der Website überzeugend auf die Zielgruppe wirken.

‍

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. Ein modernes CMS-Beispiel ist Webflow – es verbindet visuelles Design mit einem flexiblen CMS und gibt dir als Betreiber volle Kontrolle über deine Inhalte.

‍

Design System

Ein Design System ist eine Sammlung von wiederverwendbaren Komponenten, Regeln und Richtlinien, die das Erscheinungsbild einer Website oder App konsistent halten. Es umfasst Farben, Typografie, Abstände, Buttons, Icons und weitere UI-Elemente. Design Systems sparen Zeit, da Komponenten nicht für jede neue Seite neu erstellt werden müssen – besonders in Teams mit mehreren Designern und Entwicklern unverzichtbar.

‍

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.

‍

Grid-System

Ein Grid-System ist ein unsichtbares Rasternetz, das Designern hilft, Inhalte einer Website gleichmäßig und harmonisch anzuordnen. Im Webdesign arbeitet man meist mit 12 Spalten, da sich diese gut in 2, 3 und 4 Spalten aufteilen lassen. Ein Grid sorgt dafür, dass Abstände, Ausrichtungen und Proportionen konsistent bleiben, auch über verschiedene Bildschirmgrößen hinweg.

‍

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.

‍

HTTPS

HTTPS steht für Hypertext Transfer Protocol Secure und ist die sichere Variante des HTTP-Protokolls. Wenn eine Website HTTPS verwendet, werden alle Daten zwischen Browser und Server verschlüsselt übertragen – erkennbar am Schloss-Symbol in der Adressleiste. HTTPS ist heute Standard und wird von Google als Rankingfaktor berücksichtigt. Websites ohne HTTPS werden von vielen Browsern als "unsicher" markiert.

‍

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. 

‍

Hero Section

Die Hero Section ist der prominenteste Bereich einer Website – der erste Abschnitt, den ein Besucher nach dem Laden sieht (auch: Above the Fold). Sie enthält in der Regel eine Hauptüberschrift, einen kurzen Beschreibungstext und einen Call-to-Action-Button. Eine überzeugende Hero Section entscheidet oft darüber, ob ein Besucher weiterliest oder die Seite verlässt.

‍

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. 

‍

Lazy Load

Lazy Loading ist eine Technik, bei der Bilder und andere Medien erst dann geladen werden, wenn sie im sichtbaren Bereich des Browsers (Viewport) erscheinen. Dadurch wird die initiale Ladezeit einer Website deutlich reduziert, da nicht alle Inhalte auf einmal heruntergeladen werden müssen. Lazy Loading verbessert die Performance und damit auch das Google-Ranking.

‍

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. 

‍

Meta-Tags

Meta-Tags sind unsichtbare HTML-Elemente im Kopfbereich (<head>) einer Website. Sie liefern Suchmaschinen und sozialen Netzwerken wichtige Informationen über eine Seite. Die wichtigsten Meta-Tags sind der title (Seitentitel in den Suchergebnissen) und die meta description (kurze Beschreibung unter dem Titel). Gut formulierte Meta-Tags erhöhen die Klickrate in der Google-Suche erheblich. Mehr zu Meta-Tags im SEO-Guide

‍

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. 

‍

No-Code (Low-Code)

No-Code bezeichnet Tools und Plattformen, mit denen Websites, Apps oder Automatisierungen ohne klassische Programmierlogik erstellt werden können. Statt Code zu schreiben, arbeitet man mit visuellen Editoren, Drag-and-Drop-Elementen und vorgefertigten Bausteinen. Bekannte No-Code Tools für Websites sind Webflow, Wix oder Squarespace. No-Code macht Webentwicklung zugänglicher und deutlich schneller. Mehr zu Websites mit No-Code.

‍

Page Speed

Page Speed (Seitenladezeit) ist die Zeit, die eine Website benötigt, um vollständig im Browser geladen zu werden. Sie ist ein wichtiger Rankingfaktor für Google: Langsame Websites werden schlechter bewertet und verlieren Besucher. Einflussfaktoren sind u.a. die Dateigröße von Bildern, die Anzahl der Skripte und die Qualität des Hostings. Messen kannst du deine Ladezeit kostenlos z.B. mit Google PageSpeed Insights.

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. 

‍

Slug

Ein Slug ist der Teil einer URL, der eine bestimmte Seite beschreibt – lesbar für Menschen und Suchmaschinen. Beim Artikel "50 wichtige Webdesign-Begriffe" wäre der Slug z.B. 50-wichtige-webdesign-begriffe. Ein guter Slug ist kurz, enthält das Haupt-Keyword und verzichtet auf Sonderzeichen oder Leerzeichen.

‍

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.

‍

WebP

WebP ist ein modernes Bildformat von Google, das kleinere Dateigrößen bei vergleichbarer Qualität bietet und sowohl transparente Hintergründe als auch Animationen unterstützt. Im modernen Webdesign sollte WebP das bevorzugte Format sein.

‍

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"