Webdesign gibt es nun schon eine ganze Weile und in dieser Zeit hat sich eine komplexe Sprache voller Fachbegriffe entwickelt. Sobald du auch nur den kleinsten Schritt in die Welt des Webdesigns setzt, hörst du „Welches CMS möchtest du benutzen?“, „Soll das above the fold oder below the fold?“, Möchtest du ein Fixed Layout?“, „Welches Webhosting möchtest du nutzen?“ und du fragst dich, was das alles bedeuten soll. Wir wissen, dass es einen ziemlich überwältigen kann herauszufinden, was all diese Webdesign-Begriffe bedeuten, besonders wenn alles neu ist.

Webdesign deckt viele Arbeitsbereiche ab, von Webentwicklern, die programmieren, bis hin zu UI- und UX-Designern, die an Benutzeroberflächen arbeiten, und Webdesignern, die sich um das Aussehen deiner Seite kümmern. Viele Menschen haben mit Webdesign zu tun.

Computerbildschirm mit Suchleiste und Text-Webdefinitionen
Illustration von OrangeCrush

Wenn du wenigstens ein paar Akronyme und Fachbegriffe im Webdesign kennst, erleichtert das die Zusammenarbeit mit deinem Designer und Entwickler ungemein und kann außerdem dabei helfen zu verstehen, wie deine eigene Website funktioniert. Also egal ob du Hilfe engagierst oder es selbst machst, es kann sehr praktisch sein, die gebräuchlichsten und am häufigsten missverstandenen Begriffe aus den Bereichen Webdesign und -entwicklung zu kennen:

Webdesign-Begriffe

Illustration: Person, die auf Laptop tippt und Begriffe nachschlägt
Illustration von OrangeCrush

Accessibility (Barrierefreiheit)

Accessibility ist heutzutage im Webdesign von großer Bedeutung. Es beschreibt im Grunde, wie barrierefrei deine Website für Menschen ist, einschließlich Menschen mit eingeschränktem Hör- oder Sehvermögen. Daran musst du vor und während der Erstellung deiner Website denken. Schau dir diese sechs Schritte an, mit denen du dein Webdesign barrierefrei machst, wenn du dir nicht sicher bist, wo du anfangen sollst.

Auflösung

Die Auflösung ist die Anzahl der auf einem Bildschirm dargestellten Pixel. Auf diese Weise werden im Webdesign standardmäßig Bildgrößen angegeben. Die Qualität eines Bildes wird in der Regel in Pixel pro Zoll angegeben, wobei eine größere Anzahl an Pixeln einer besseren Bildqualität entspricht.

Below the fold (und Above the fold)

Below the fold und Above the fold sind zwei Begriffe, die ihren Ursprung im Zeitungswesen haben. Die „fold“ ist der Bereich, an dem die Zeitung gefaltet wird. Above (oberhalb) und Below (unterhalb) beschreiben, ob die Information in der oberen oder unteren Hälfte des Falz erscheint. Bei Webseiten ist die „fold“ in der Regel die Stelle, an der du anfangen musst zu scrollen, aber das Prinzip ist dasselbe – Informationen, die sich „Above the fold“ (ATF), also oberhalb des Falz befinden, sind leichter zugänglich und sichtbarer als Informationen „Below the fold“ (BTF).

Elastisches Layout

Ein elastisches Layout ist ein Weg, Webseiten zu designen. Es gibt das Verhältnis zwischen Elementen und ihren Positionen auf der Seite in Prozent und nicht als feste Abstände und Größen an. Das bedeutet, dass Webseiten sich besser anpassen – sowohl an die Einstellungen deiner Besucher in Sachen Schriftgröße und Laufweite als auch was die Optimierung der Seite angeht, um sie auf Smartphones oder Tablets anzuzeigen.

Heutzutage sind elastische Layouts ein wichtiger Teil responsiven Designs. Bevor es responsives Design gab, boten elastische Layouts einen einfachen Weg, um Webseiten anpassungsfähig zu gestalten.

Ex

Ein Ex ist eine Maßeinheit, die das kleine „x“ einer Schriftart als Standardmaß nutzt.

Feste Breite (Layout)

Ein Layout mit fester Breite ist eine Art, Webseiten zu designen, bei der ein Designer festlegt, wie groß eine Website ist und wo genau sich die Elemente befinden. Dies gibt Designern viel mehr Kontrolle über das Design einer Website als ein elastisches Layout, allerdings passen sich Webseiten dadurch schlechter an unterschiedliche Bildschirmgrößen an.

Hexadezimal

Hexadezimalzahlen, auch bekannt als „Hex“-Code, sind ein Stellenwertsystem zur Basis 16. Dies bedeutet, dass sie 16 Zeichen nutzen, um Farben zu definieren. Hex-Codes bestehen aus Zahlen von 0 bis 9 und Buchstaben von A bis F. Jede Farbe wird mit drei Paaren von Hexadezimalzahlen definiert. Das erste Zahlen- oder Buchstabenpaar bezieht sich auf einen roten Farbton, das zweite Paar auf einen Grünton und das dritte auf einen Blauton.

Infinite Scrolling (Unendliches Scrollen)

Beim Infinite Scrolling wird neuer Content in dem Moment geladen, in dem du weiterscrollst. Dadurch entsteht ein „unendliches“ Scrollen. Einige bekannte Beispiele dafür sind die Facebook Timeline, Pinterest oder Twitter Feeds.

Parallax Scrolling

Diese Scroll-Methode erzeugt bei einem Seitendesign ein Gefühl von Tiefe. Während der Nutzer scrollt, entsteht der Eindruck, dass die Elemente unterschiedlich weit voneinander entfernt sind und sich unterschiedlich schnell bewegen. Dadurch entsteht die Illusion von Tiefe und Entfernung auf einer Website.

Responsive / mobilfreundlich / optimiert für Mobilgeräte

Stand 2020 kommt mehr als die Hälfte des Web-Traffics von Smartphones. Das bedeutet, dass es für Webseiten zunehmend wichtiger wird, auf dem Mobilgerät genau so gut auszusehen wie auf dem Desktop. Webseiten responsiv / mobilfreundlich / optimiert für Mobilgeräte zu gestalten bedeutet, eine Seite zu designen und entwickeln, die sich an den Bildschirm des Geräts anpasst, auf dem sie betrachtet wird.

Usability (Benutzerfreundlichkeit)

Usability ist ein Konzept im Webdesign, das beschreibt, wie benutzerfreundlich deine Seite für die Besucher ist, für die sie designt wurde. Im Idealfall kann ein Besucher deine Seite mühelos nutzen, wenn er das erste Mal mit ihr interagiert, mit möglichst wenigen Hindernissen und ohne Frust oder nach Hilfe fragen zu müssen. Die Grundprinzipien der Usability zu kennen ist ein wichtiger Schritt zu einer tollen Website.

UX (User Research) / UI (User Interface)

UX- und UI-Design verbessern das Erlebnis der Nutzer. Du musst die Unterschiede zwischen UX und UI kennen, um zu wissen, wie sie zusammenarbeiten.

UX, User Research, umfasst alle Aspekte der Interaktion des Nutzers mit der Website. Das Ziel besteht darin, die Qualität der Interaktion zwischen Nutzer und Website zu verbessern.

UI, User Interface, konzentriert sich auf die visuellen und interaktiven Elemente  einer Website wie Buttons, Icons und Typografie. Das Ziel ist, das Aussehen und die Funktionalität der Website zu verbessern.

Frontend einer Website

Illustration: Ein Mann in einem Video mit einer Sprechblase
Illustration von OrangeCrush

Breadcrumb-Navigation (Brotkrümelnavigation)

Wenn Webseiten den Nutzern zeigen, wie sie auf einer Website navigiert haben und wie sie wieder zurück zur Hauptseite kommen, passiert dies häufig durch eine Breadcrumb-Navigation. Dies wird in der Regel als Reihe verschachtelter Kategorien angezeigt, zum Beispiel Home > Kategorie > Jahr > Monat > Post.

Favicon

Ein Favicon ist ein winziges Symbol, welches in der Tab-Leiste deines Browsers angezeigt wird. Sie sind in der Regel 16×16 Pixel groß (also wirklich sehr klein) und werden in den Formaten .ico, .gif, oder .png gespeichert. Du kannst so gut wie jedes Bild als Favicon nutzen, solange es die richtige Größe hat und im richtigen Format gespeichert wird.

Focal Point (Mittelpunkt)

Der Focal Point einer Website ist der Teil, auf den dein Blick gelenkt wird. Designer wenden viel Zeit auf, um einen Focal Point zu designen, der die Aufmerksamkeit der Betrachter auf sich zieht, um dann das Wichtigste auf der Seite um diesen Focal Point herum zu platzieren. Das stellt sicher, dass es von möglichst vielen Leuten gesehen wird.

Frontend

Das sind alle Elemente wie Bilder, Text und Seiten, die die Leute sehen, wenn sie deine Seite besuchen. Im Grunde ist es das, womit die Leute auf einer Website interagieren.

Hamburger-Icon

Ein Hamburger-Icon ist ein Menüsymbol, das sich üblicherweise in neueren Programmen findet. Es besteht aus drei horizontalen Strichen (daher der Name „Hamburger“) und versteckt das klassische Navigationsmenü hinter einem einzigen Symbol.

Landingpage

Das ist die allererste Seite, die Besucher deiner Website zu Gesicht bekommen. Auf vielen Webseiten wird eine spezielle Landingpage genutzt, um dem Besucher etwas zu entlocken (beispielsweise seine E-Mail-Adresse) oder eine Seite, die speziell auf ein Produkt zugeschnitten ist. Deine Landingpage ist eine der wichtigsten Seiten auf deiner Website und du solltest dir genügend Zeit nehmen, sie zu optimieren.

Navigation

Die Navigation ist das System, das genutzt wird, um sich zwischen Elementen deiner Website zu bewegen. Sie ist eines der wichtigsten Elemente einer Website. Deshalb ist es wichtig, die Grundregeln der Website-Navigation zu kennen. Das offensichtlichste Beispiel für Navigation sind die Menüs, die auf den meisten Webseiten erscheinen. Achte aber auch darauf, wie Seiten und die Links zwischen ihnen angeordnet sind. Diese können Besuchern das Navigieren auf einer Website ebenfalls erleichtern.

Backend einer Website

Illustration: Ein Laptop-Bildschirm mit Symbolen über Back-End-Websites
Illustration von OrangeCrush

Backend

Dies ist der Teil deines System, der deine Website quasi am Laufen hält, den dein Besucher aber nicht sieht. Es gibt viele verschieden Backends, aber sie enthalten im Grunde alle dieselben Dinge – Anwendungen, Informationsstruktur und dein CMS.

CMS

Content Management System – Das ist ein Backend-Tool, um den Content deiner Seite zu betreiben, Nutzer hinzuzufügen, Kommentare zu managen und noch vieles mehr. Wenn du jemals WordPress benutzt hast, hast du ein CMS benutzt. Ein CMS macht das Designen und Erstellen einer Website sehr viel leichter, da es den Großteil des reinen Codes einer Website versteckt.

E-Commerce

E-Commerce steht für „Electronic Commerce“ so wie E-Mail für „Electronic Mail“ steht. Du kannst deiner Website einen E-Commerce Shop hinzufügen, der Produktbeschreibungen, Kauf und Verkauf und deine Kundendaten handhabt.

HTTP / HTTPS

Dieses System kümmert sich um den Datenaustausch zwischen Browsern, Servern und Web Apps. Es definiert, wie Daten verpackt und gesendet werden müssen.

HTTPS ist eine Erweiterung von HTTP, die Verbindungen über SSL (Secure Socket Layer) herstellen kann. Dies ist ein wesentlich sichererer Weg, um online Daten auszutauschen. Viele moderne Webbrowser warnen dich, wenn eine Website nur HTTP statt HTTPS verwendet.

Als Besitzer einer Website kannst du SSL-Zertifikate von verschiedenen Anbietern kaufen. Diese werden benötigt, um HTTPS zu nutzen. Sobald du diese hinzugefügt hast, ist deine Seite sicherer und Kunden werden ihr eher vertrauen.

Plugin

Ein kleines Programm, das deiner Seite zusätzliche Funktionalität und Sicherheit bietet. Plugins gibt es für die beliebtesten CMS-Plattformen und können für eine Vielzahl an Funktionen genutzt werden, von automatisierten Blog-Posts bis hin zur Verwaltung von Kunden.

Template

Templates, also Vorlagen, werden im Webdesign auf dieselbe Weise verwendet wie für Dokumente und Bilder – um ein einheitliches Design auf allen verschiedenen Seiten zu gewährleisten. Die meisten CMS-Plattformen bieten dir eine Reihe von Templates für deine Website, um deine Seiten und dein Design einheitlich zu halten.

Technische Internet-Begriffe

Illustration: Zwei Personen sitzen mit dem Rücken nach oben auf verschiedenen Symbolen zum Hochladen, Links, URLs
Illustration von OrangeCrush

Anchor Text (Ankertext)

Ein Ankertext ist ein Satz oder ein paar Worte, die einen Hyperlink enthalten. So zum Beispiel: Das ist ein Ankertext. Den richtigen Ankertext zu verwenden, kann einen großen Unterschied darin ausmachen, wie gut deine Seite bei Suchmaschinenergebnissen abschneidet.

Backlink

Dies sind Links von anderen Webseiten, die auf deine Seite führen. Wenn beispielsweise eine andere Seite auf deine Seite verlinkt, um ihre Leser zu einer Quelle zu führen, hast du einen Backlink erhalten. Backlinks sind äußerst wichtig, um dein Ranking in den Suchmaschinen zu verbessern, da es der Sichtbarkeit deiner Seite hilft, wenn mehrere vertrauenswürdige Seiten auf sie verlinken.

Bandbreite

Bandbreite ist ein Begriff, der in vielen verschiedenen Zusammenhängen verwendet wird, aber im Wesentlichen beschreibt er die Menge an Daten, die über einen bestimmten Zeitraum versendet oder empfangen wird. Er kann zum Beispiel verwendet werden, um deine Internetgeschwindigkeit zu beschreiben, und wird in diesem Fall in der Regel in Kilobits pro Sekunde (kbs) angegeben. Hin und wieder wird er allerdings auch genutzt, um anzugeben, wie viele Daten du pro Monat als Teil deines Webhosting-Pakets nutzen kannst.

Cache

Ein Cache ist eine Ansammlung von Daten, die von einem Webbrowser gespeichert werden. Das bedeutet, dass wenn ein Nutzer das nächste Mal eine Seite besucht, diese schneller lädt, da sie aus dem lokalen Speicher geladen wird.

DNS

DNS steht für „Domain Name Service“. In diesem System schaut dein Webbrowser nach, wo sich eine Website befindet. Wenn du 99designs.de eingibst, wird dein Browser in einer „DNS-Tabelle“ nachschauen und diese menschenfreundliche Adresse in eine computerfreundliche Adresse (die aus Zahlen besteht) umwandeln. Das DNS-System speichert, wo sich die Webseiten dieser Welt befinden, damit dein Browser sie finden kann.

Domain

Dies ist der Name deiner Website. Du kannst Domains von vielen Unternehmen kaufen. Sie können höchstens aus 63 Zeichen bestehen. Unser Domain-Name lautet beispielsweise 99designs.de.

FTP

FTP steht für „File Transfer Protocol“ und ist ein System, um Dateien und Daten vom lokalen Speicher (sagen wir deinem Computer) zu deinem Webserver zu übertragen. Um FTP nutzen zu können, musst du ein kleines Programm herunterladen, welches FTP Client heißt.

Permalink

Ein Permalink, also ein permanenter Link, ermöglicht es dir, eine Adresse festzulegen, die immer zu einem bestimmten Blog Post oder einer Seite führt, unabhängig davon, wie du die Struktur deiner Seite veränderst. Dies ist äußerst nützlich, wenn du Blog Posts nutzt, um den Traffic deiner Seite zu verbessern, da du nicht manuell Dutzende (oder Hunderte) Links ändern musst, falls du dich dazu entscheidest, deine Seite umzugestalten oder deinen Domainnamen zu ändern.

URL

Eine Adresse, die angibt, wo eine bestimmte Seite oder andere Quelle gefunden werden kann.

Webhosting

Ein Webhost ist ein Unternehmen, welches die Server betreibt, auf denen deine Seite gespeichert ist. Wie wir in unserem Artikel „Was ist Webhosting“ erklären, können Webhosts unterschiedliche Services anbieten. Ein guter Webhost kann sicherstellen, dass deine Seite 99,9 % der Zeit erreichbar ist, und stellt Tools zur Verfügung, mit denen du deine Seite sicher und effektiv betreiben kannst.

Webserver

Ein Webserver ist der Computer, auf dem deine Website gespeichert ist. Er befindet sich wahrscheinlich in einer Serverfarm deines Webhosts, auch wenn du durchaus deinen eigenen Server betreiben kannst.

Begriffe aus der Webentwicklung

Illustration: Laptop mit Codezeilen und Mann, der auf dem Boden sitzt und codiert
Illustration von OrangeCrush

CSS

CSS steht für Cascading Style Sheets und ist zusammen mit HTML der fundamentalste Teil jeder Website. Noch vor zehn Jahren wurde die Formatierung einer Website – also beispielsweise wie groß Überschriften sein sollen oder ob Bilder einen Rand haben – innerhalb des HTML-Codes definiert. Dadurch war jede Veränderung der Formatierung ein mühevoller Prozess, bei dem man jedes Element einer Seite durchgehen und den Code ändern musste.

Mit CSS ist das alles viel einfacher. Der Stil einer Seite ist in einer (oder mehreren) CSS-Datei gespeichert, in der festgelegt ist, wie Überschriften aussehen, wie Bilder dargestellt werden und weiteres. Diese sagen einem Browser, wie eine Website dargestellt werden soll. Auf diese Weise kann das Format der gesamten Website angepasst werden, indem man nur ein einziges Stück Code ändert.

DHTML

DHTML steht für Dynamic HyperText Markup Language. Dies ist ein Begriff für eine Sprache, die mehrere Webdesignsprachen – HTML, JavaScript und CSS – zu einer Sprache vereint. Ein moderner Webentwickler wird in der Regel diese Sprache nutzen, um eine Website für dich zu erstellen.

Doctype

In HTML ist ein Doctype eine Beschreibung dafür, welche Art HTML und welche Version von einer Website verwendet wird. Es wird von Browsern genutzt, um die Integrität einer Seite zu kontrollieren, und kann zu Sicherheitsfehlern führen, wenn es falsch ist.

EM

EM wird verwendet, um die Größe einer Schrift im Verhältnis zur „Parent-Schrift“ einer Seite zu beschreiben. 1Em bedeutet, dass eine Schrift (oder manchmal auch andere Elemente) dieselbe Größe haben wie ihr Parent-Element, 2Em bedeutet, dass sie doppelt so groß ist und so weiter.

Embedded style

Obwohl CSS (siehe oben) verwendet werden kann, um das Format aller Seiten gleichzeitig zu beschreiben, musst du manchmal nur den Stil einer einzigen Seite ändern. Dann wird Embedded Style verwendet. Ein Embedded Style ist ein Stück CSS-Code, der in den Header einer Webseite geschrieben wird und nur Auswirkungen auf die Elemente hat, die sich auf dieser Seite befinden.

HTML

Hypertext Markup Language – dies ist das Fundament des Internets. Alle Webseiten werden, zumindest zu einem bestimmten Grad, in HTML geschrieben, welches entwickelt wurde, um sich so leicht wie möglich schreiben zu lassen. Tatsächlich solltest du mal ein HTML-Tutorial probieren, um zu sehen, wie einfach es ist – du wirst überrascht sein, was du alles in nur wenigen Stunden umsetzen kannst!

Metadaten

Metadaten sind Daten im Header von Webseiten. Diese Daten stehen deinem Browser zur Verfügung, werden aber nicht als Teil der Website angezeigt, die du dir ansiehst. Du musst dir den Quellcode ansehen, um auf sie zugreifen zu können.

Open Source

Open-Source-Software wird von Nutzern gepflegt und darf kostenlos genutzt und modifiziert werden. Dies steht im Gegensatz zu proprietärer Software, die einem bestimmten Unternehmen gehört. Die meisten Webentwickler werden hin und wieder Open-Source-Software nutzen, da sie nicht nur günstiger ist, sondern auch sicherer sein kann. Heutzutage minimieren die meisten Webentwickler Sicherheitslücken, indem sie Container nutzen, die in Open-Source-Sprachen programmiert sind.

Schriftfamilie / Stil / Stärke

Webdesigner und Entwickler arbeiten oftmals nicht mit bestimmten Schriftarten, weil unterschiedliche Browser nicht immer exakt dieselben Schriftarten enthalten. Deshalb wird in einem CSS-Dokument die verwendete Schrift als Schriftfamilie angegeben – also eine Gruppe von Schriftarten, die genutzt werden kann, statt einer bestimmten Schriftart. Neben dieser Definition ist im CSS-Dokument auch der Schriftstil (kursiv, unterstrichen etc.) und die Stärke (fett, dünn etc.) festgelegt.

Staging

Beim Staging einer Website wird eine beinahe finale Version von ihr erstellt und diese getestet, bevor die Live-Version der Seite veröffentlicht wird. Die meisten Webentwickler „stagen“ eine Website, bevor sie veröffentlicht wird, um zu kontrollieren, ob alles korrekt funktioniert. Und oftmals werden größere Veränderungen an einer Website auf der Staging-Seite vorgenommen statt an der Live-Seite.

Valid

Im Webdesign sind valide Webseiten solche, die keinerlei Fehler enthalten. In der Praxis sind dies Webseiten, die den Standards der HTML-Spezifikationen entsprechen, welche von der W3C veröffentlicht werden, der Community, die die Standards für Webentwicklung festlegt.

XML

XML steht für Extensible Markup Language. XML ist ein fundamentaler Teil des Webdesigns, da es als „Meta-Sprache“ fungiert, die die Elemente einer Sprache in eine andere übersetzt. Dies bedeutet, dass Webseiten mit vielen verschiedenen Sprachen erstellt werden können, die jeweils via XML kommunizieren.

Schlusswort

Natürlich musst du nicht all diese Webdesign-Begriffe kennen, um eine Website zu designen – egal ob mit Hilfe oder ohne. Letzten Endes ist Webdesign ein Lernprozess und die besten Designs sind Kunstwerke, die stetig verbessert werden, während du Neues lernst.

Dennoch kann es sehr hilfreich sein, einen Guide für die manchmal sehr komplexe Welt des Webdesigns zu haben, besonders wenn du gerade am Anfang stehst. Unsere professionellen Webdesigner können dir Starthilfe geben.

Du möchtest die perfekte Website für dein Unternehmen?
Dann arbeite mit unseren talentierten Designern.