Webdesign ist eine faszinierende, aber oft auch komplexe Welt voller Fachbegriffe und technischer Konzepte. Begriffe wie Responsive Design, UX/UI, CMS oder SEO begegnen uns ständig – doch was bedeuten sie eigentlich genau?

In diesem Beitrag erklären wir die wichtigsten Begriffe aus dem Webdesign verständlich und praxisnah. Egal, ob Sie gerade erst in die Materie einsteigen oder Ihr Wissen auffrischen möchten – mit diesem Lexikon behalten Sie den Durchblick und können Ihr nächstes Webprojekt mit mehr Know-how angehen.

 

Accessibility (Barrierefreiheit)
Barrierefreiheit bedeutet, dass eine Website auch für Menschen mit Einschränkungen (z. B. Sehbehinderungen) gut nutzbar ist. Dazu gehören Funktionen wie alternative Bildbeschreibungen, klare Kontraste und eine einfache Navigation per Tastatur oder Screenreader.

Breadcrumbs
Breadcrumbs (auf Deutsch „Brotkrümelnavigation“) sind eine Navigationshilfe auf Websites, die dem Nutzer zeigt, wo er sich innerhalb der Seitenstruktur befindet. Sie stellen eine Art „Pfad“ dar, den der Nutzer zurückverfolgen kann, und ermöglichen es ihm, schnell zu übergeordneten Seiten zu navigieren. Ein Beispiel: Home > Blog > Webdesign-Tipps.

Browser
Ein Browser ist eine Software, die es Nutzern ermöglicht, Webseiten zu durchsuchen und darzustellen. Beispiele sind Google Chrome, Mozilla Firefox, Safari und Microsoft Edge. Browser interpretieren den HTML- und CSS-Code einer Website und zeigen den Inhalt an, den der Server sendet.

Call-to-Action (CTA)
Ein CTA ist ein auffälliger Button oder Link, der Nutzer zu einer Handlung auffordert, z. B. „Jetzt kaufen“ oder „Kontakt aufnehmen“.

Cache
Der Cache ist ein Zwischenspeicher für Website-Daten. Er hilft, Ladezeiten zu verkürzen, indem er oft genutzte Inhalte speichert, anstatt sie bei jedem Besuch neu zu laden.

CMS (Content Management System)
Ein CMS ist eine Software, mit der Inhalte auf Websites einfach verwaltet werden können. Beliebte CMS wie WordPress oder Joomla ermöglichen es Nutzern ohne Programmierkenntnisse, Inhalte zu erstellen und zu aktualisieren.

Color Scheme (Farbschema)
Das Farbschema einer Website beeinflusst die Markenwahrnehmung und Benutzererfahrung. Gut gewählte Farben erzeugen Harmonie und lenken die Aufmerksamkeit auf wichtige Inhalte.

Cookies
Cookies sind kleine Textdateien, die von einer Website auf dem Gerät des Nutzers gespeichert werden. Sie speichern Informationen, wie z. B. Anmeldeinformationen, Spracheinstellungen oder Nutzerverhalten, um die Nutzung der Website zu erleichtern. Sie können auch verwendet werden, um personalisierte Werbung anzuzeigen.

CDN (Content Delivery Network)
Ein CDN ist ein Netzwerk von Servern, das Website-Inhalte weltweit verteilt. Dadurch können Nutzer unabhängig von ihrem Standort schneller auf eine Website zugreifen.

CSS (Cascading Style Sheets)
CSS ist eine Stylesheet-Sprache, die das Design von HTML-Elementen steuert. Damit werden Farben, Schriftarten, Abstände und Layouts festgelegt. Moderne Websites nutzen CSS, um ansprechende und dynamische Designs zu erstellen.

DSGVO (Datenschutz-Grundverordnung)
Die Datenschutz-Grundverordnung ist eine EU-Verordnung, die Regeln zum Schutz personenbezogener Daten festlegt. Sie verpflichtet Unternehmen, transparent mit Nutzerdaten umzugehen, diese zu schützen und den Nutzern mehr Kontrolle über ihre Daten zu geben. Eine Website muss sicherstellen, dass sie DSGVO-konform ist, insbesondere bei der Erhebung von personenbezogenen Daten.

Domain
Die Domain ist die Adresse einer Website, unter der sie im Internet erreichbar ist (z. B. www.deineseite.de). Sie sollte kurz, einprägsam und gut lesbar sein.

Favicon
Ein Favicon ist das kleine Symbol, das im Browser-Tab neben dem Seitentitel erscheint. Es hilft Nutzern, eine Website schneller zu erkennen.

Frontend
Das Frontend ist der Teil einer Website, den Nutzer direkt sehen und mit dem sie interagieren. Es wird mit Technologien wie HTML, CSS und JavaScript erstellt und sorgt dafür, dass Inhalte optisch ansprechend dargestellt und bedienbar sind.

Grid-System
Ein Grid-System ist ein Rasterlayout, das hilft, Inhalte strukturiert und ausgerichtet anzuordnen. Es sorgt für ein einheitliches Design.

Hamburger-Menü
Das Hamburger-Menü ist ein Symbol mit drei horizontalen Linien, das auf mobilen Websites ein verstecktes Navigationsmenü öffnet.

Hosting
Webhosting ist der Service, bei dem eine Website auf einem Server gespeichert wird, damit sie online erreichbar ist. Hosting-Anbieter stellen Speicherplatz, Serverleistung und Sicherheitsfunktionen bereit.

JavaScript
JavaScript ist eine Programmiersprache, die Websites interaktiv macht. Es ermöglicht Animationen, dynamische Inhalte und Benutzerinteraktionen, wie das automatische Aktualisieren von Inhalten oder das Öffnen von Pop-ups.

JPG (JPEG)
JPG oder JPEG (Joint Photographic Experts Group) ist ein weit verbreitetes Bildformat, das insbesondere für Fotografien oder Bilder mit vielen Farben geeignet ist. Es komprimiert Bilder, wodurch die Dateigröße reduziert wird, jedoch auf Kosten von etwas Bildqualität. Es ist das bevorzugte Format für Bilder im Web.

Landing Page
Eine Landing Page ist eine speziell gestaltete Webseite, auf die Nutzer „landen“, wenn sie auf einen Werbe- oder Suchmaschinenlink klicken. Sie dient in der Regel einem bestimmten Ziel, wie etwa dem Sammeln von E-Mail-Adressen, der Förderung eines Produkts oder der Bewerbung eines Events. Sie ist oft zielgerichtet und auf eine Handlungsaufforderung (Call-to-Action) ausgerichtet.

Lorem Ipsum
„Lorem Ipsum“ ist ein standardisierter Blindtext, der in der Design- und Druckbranche verwendet wird, um die Platzierung von Text auf Seiten zu demonstrieren. Es handelt sich um zufällig zusammengesetzte lateinische Worte, die keine sinnvolle Bedeutung haben, aber als Platzhalter für den eigentlichen Text dienen.

Microinteractions
Microinteractions sind kleine Animationen oder Effekte, die die Benutzererfahrung verbessern, z. B. eine Farbänderung beim Überfahren eines Buttons mit der Maus.

Mobile First
„Mobile First“ ist eine Designstrategie, bei der Websites zuerst für mobile Endgeräte (Smartphones und Tablets) entwickelt werden, bevor sie für größere Bildschirme wie Desktops angepasst werden. Diese Herangehensweise stellt sicher, dass die Website auf mobilen Geräten benutzerfreundlich und gut nutzbar ist, da immer mehr Nutzer über Smartphones auf das Internet zugreifen.

Mockup
Ein Mockup ist eine detailreiche, visuelle Vorschau des Webdesigns, die das Farbschema, die Typografie und andere Designelemente zeigt. Es wird oft genutzt, um Kunden oder Teams eine Vorstellung vom finalen Look der Website zu geben.

PNG
PNG (Portable Network Graphics) ist ein Bildformat, das verlustfreie Kompression bietet, d. h. die Bildqualität bleibt vollständig erhalten. PNG unterstützt auch transparente Hintergründe, was es ideal für Grafiken, Logos und Icons auf Webseiten macht.

Plugin
Ein Plugin ist eine Softwareerweiterung, die einer bestehenden Anwendung (z. B. WordPress oder ein Webbrowser) zusätzliche Funktionen hinzufügt. Im Webdesign können Plugins genutzt werden, um Websites mit neuen Features wie Kontaktformularen, Social-Media-Integration oder SEO-Tools auszustatten, ohne dass die gesamte Website neu entwickelt werden muss.

Prototype
Ein Prototyp ist eine interaktive Simulation einer Website, mit der Nutzer durchklicken und Funktionen testen können. Er dient zur frühzeitigen Überprüfung der Benutzerführung und erleichtert Anpassungen vor der eigentlichen Entwicklung.

Responsive Design
Diese Technik stellt sicher, dass eine Website auf allen Geräten – ob Desktop, Tablet oder Smartphone – gut aussieht und funktioniert. Durch flexible Layouts und skalierbare Bilder passt sich das Design dynamisch an verschiedene Bildschirmgrößen an.

SEO (Search Engine Optimization)
SEO umfasst alle Maßnahmen, um eine Website für Suchmaschinen wie Google besser auffindbar zu machen. Dazu gehören technische Optimierungen, die richtige Nutzung von Keywords und eine benutzerfreundliche Gestaltung.

Server
Ein Server speichert Daten und Informationen, auf die Nutzer über das Internet zugreifen können.

Sitemap
Eine Sitemap ist eine strukturierte Übersicht aller Seiten einer Website, die den Suchmaschinen hilft, die Seiteninhalte zu indexieren. Es gibt zwei Arten von Sitemaps: eine XML-Sitemap für Suchmaschinen und eine HTML-Sitemap für Benutzer. Sie erleichtern sowohl die Suchmaschinenoptimierung (SEO) als auch die Benutzerführung.

SSL (Secure Sockets Layer)
SSL ist ein Sicherheitsprotokoll, das Daten zwischen einem Webbrowser und einem Webserver verschlüsselt. Websites, die SSL verwenden, zeigen ein „https://“ in der URL an und haben ein Schloss-Symbol im Browser. SSL schützt Daten wie Passwörter und Kreditkartendaten vor dem Abfangen durch Dritte und trägt so zur Sicherheit und Vertrauenswürdigkeit einer Website bei.

SVG (Scalable Vector Graphics)
SVG bezeichnet eine Art von Grafik, die ohne Qualitätsverlust vergrößert oder verkleinert werden kann, was sie ideal für Webseiten-Logos oder Icons macht.

Theme
Ein Theme ist eine Sammlung von Design- und Funktionselementen, die das Aussehen und Verhalten einer Website bestimmen. Themes werden oft in Content-Management-Systemen (z. B. WordPress) verwendet und beinhalten Layouts, Farbpaletten, Schriftarten und andere visuelle Gestaltungselemente. Sie können angepasst oder gewechselt werden, um das Design einer Website schnell zu ändern.

Typography (Typografie)
Die Wahl und Gestaltung von Schriftarten ist ein wichtiger Aspekt des Webdesigns. Eine gute Typografie verbessert die Lesbarkeit und trägt zur Markenidentität bei.

UX/UI
UX (User Experience) beschreibt das gesamte Nutzungserlebnis einer Website oder App und stellt sicher, dass sie intuitiv, benutzerfreundlich und effizient ist. UI (User Interface) bezieht sich auf die visuelle Gestaltung und die interaktiven Elemente, die eine ansprechende und verständliche Bedienoberfläche ermöglichen.

Whitespace (Weißraum)
Weißraum ist der bewusste Einsatz von leeren Flächen im Design. Er verbessert die Lesbarkeit und schafft ein ästhetisch ansprechendes Layout.

Webdesign
Webdesign umfasst die visuelle Gestaltung, Strukturierung und Benutzerführung von Websites. Ziel ist es, eine ansprechende und funktionale Benutzererfahrung zu schaffen. Es kombiniert kreative Gestaltung mit technischer Umsetzung und berücksichtigt Faktoren wie Layout, Farben, Typografie und Navigation.

Wireframe
Ein Wireframe ist eine schematische Skizze oder ein digitales Modell, das die Grundstruktur einer Website darstellt. Es hilft Designern und Entwicklern, das Layout und die Navigation einer Website zu planen, bevor mit der eigentlichen Gestaltung begonnen wird.

Ich hoffe, dass die Erklärungen zu den wichtigsten Begriffen aus dem Webdesign Ihnen weitergeholfen haben und Ihnen einen besseren Überblick über diese spannende Welt verschaffen konnten. Falls Sie noch Fragen haben oder weitere Details benötigen, stehe ich Ihnen gerne zur Verfügung. Zögern Sie nicht, mich zu kontaktieren – ich freue mich, Ihnen weiterzuhelfen!