Webdesign

Above-the-fold bezeichnet den Bereich einer Webseite, welcher ohne zu scrollen sichtbar ist. Dieser Bereich könnte man auch als den "ersten Eindruck" einer Webseite bezeichnen.
Hero-Bereich ist eine verbreitete Bezeichnung für das "Willkommens-Element" ganz oben einer Webseite. Typischerweise ein Banner unter dem Menü, ein Video oder Willkommens-Text und Bild. Der Hero-Bereich sollte above-the-fold sein, muss aber nicht zwingend einen ganzen Bildschirm füllen, auch wenn das sehr beliebt ist.

Unter Barriere-freiem Webdesign versteht man sämtliche Bemühungen, Webseiten für möglist alle Personen zugänglich zu machen. Haupt-Augenmerk liegt hierbei auf Seh-Beeinträchtigungen von Farbenblindheit bis zur kompletten Blindheit.
Sehbeeinträchtigte Personen lesen und navigieren Webseiten mittels Screenreader. Dank geeingeter Tastatur-Navigation und ARIA-Technologien kann diesen Leuten enorm geholfen werden.

Unter Call to Action, kurs CTA oder C2A versteht man eine Handlungsaufforderung an die Webseiten-Besucher.
Dies kann zum Beispiel eine Eintragung für einen Newsletter sein oder der Kauf in einem Webshop.
Durch gut platzierte C2As können Webseiten ihre Ziele schneller erreichen.

Das Content-Management-System (CMS) ermöglicht es, Inhalte einer Webseite (insb. Texte und Bilder) ohne Programmier-Kenntnisse zu bearbeiten. In der Regel erlaubt das CMS weitere Funktionalitäten, zum Beispiel das Versenden von Newsletter.

Als Frontend bezeichnet man den für Webseiten-Besucher/innen sichtbare Teil.
Als Backend wird der für Besuchende nicht sichtbare Teil bezeichnet. In der Regel besteht das Backend aus einem CMS, der Webseiten-Administration, sowie diverse Hintergrund-Skripte zur Analyse und Automatisierung von Webseiten-Vorgänge.

Graphic Design im Konzext zu Webdesign bezeichnet die Gestaltung von einzelnen Web-Elementen. Graphic-Design für sich ist eine eigene Disziplin, welche sich nicht auf Webdesign beschränkt.
Für Webseiten werden regelmässig Illustrationen und graphische Darstellung benutzt.

Bezeichungen für typische Teile einer Webseite
Header:Der Bereich ganz oben einer Webseite. Für gewöhnlich werden hier das Logo, das Hauptmenü, schnelle Kontaktmöglichkeiten (E-Mail,Tel.) und Links zu Social-Media-Kanälen platziert. Bei einem Webshop findet man gewöhnlich den Warenkorb.
Body: Der Hauptteil einer Webseite oder alles zwischen Header und Footer.
Footer: Der Teil einer Webseite ganz unten, der normalerweise auf jeder einzelnen Seite gleich ist. Gewöhnlich stehen hier Unternehmensdaten und rechtliche Dinge (Impressum, AGBs, Datenschutz). Da der Footer das letzte ist, was Besucher/innen sehen, wenn sie ganz nach unten scrollen, ist es ratsam hier ein paar interessante Links zu platzieren, dadurch mindern Sie die Absprungrate.

Gerade in der Schweiz wird unter Homepage (fälschlicherweise) ein kompletter Webauftritt verstanden. Ursprünglich und im eigentlichen Sinn immernoch wird als Homepage lediglich die Startseite verstanden. Es handelt sich um die Seite, welche vom Server ausgespielt wird, wenn Sie eine (blanke) Domain ohne weitere Informationen aufrufen.

Das Favicon finden Sie in der Tab-Leiste Ihres Browsers neben dem Seitentitel einer Webseite. In meinem Fall ist dies das kleine Icon mit dem weissen Zahnrad auf blauem Hintergrund.
Sie können neben dem Favicon noch weitere Icons hinterlegen. So erscheint an diversen Stellen in vielen Applikationen Ihr Icon. Zum Beispiel in der "Favorite-Seiten", welche möglicherweise von Ihrem Browser bei Start gezeigt werden oder bei verschiedenen Preview-Ansichten, wenn Sie zum Beispiel einen Webseite-Link via Messanger verschicken.

Eine Landing-Page bezeichnet eine einzelne Seite (Unterseite), welche das Eingangstor zu einem Webauftritt ist. Besucherinnen und Besucher werden - abhängig - von der Quelle auf diese Seiten geleitet. Zum Beispiel gelangen Besucher/innen, welche auf einen bestimmte Google-Ads-Link geklickt haben auf einer speziellen Landing-Page.
Im Gegensatz zur Homepage kann eine Landing-Page jede weitere Unter-Seite sein.

Mobile First bezeichnet ein Webdesign-Prizip, nach welchem die Gestaltung der Webseite geplant wird. Bei diesem Ansatz wird zuerst die mobile Version geplant und gestaltet und erst anschliessend die Versionen für Tablet, Notebooks und Desktops.
Da der Online-Traffic zunehmend - und mittlerweile mehrheitlich - via mobile Geräte stattfindet, wird mobil-first immer wichtiger.

Ein Mockup ist eine Erweiterung des Wireframes, aber immer noch eine Vorbereitung für das Webdesign. Das Grundlayout des Wireframes wird nun erweitert mit verschiedenen Design-Festlegungen zum Beispiel Farbkomponeneten. Auch Gestaltungs-Ideen werden skizziert und festgehalten.

Ein Onepager - auch OnePage-Webseite ist eine Form von Webseite, bei welcher sämtliche Inhalte auf eine einzige Webseite gebracht werden. Man verzichtet somit weitgehend auf Unterseiten und setzt stattdessen auf Scroll-Animierte Verlinkungen. In der Regel gibt es trotzdem ein Menü. Dieses ruft jedoch keine weiteren Seiten auf, sondern scrollt die Webpage an den entsprechenden Ort der Page.
Der Vorteil liegt darin, dass insgesamt nicht sehr viel Inhalt erstellt weden muss, der User sich nicht "verirren" kann und blitzschnell ein Bild des gesamten Inhalts der Webseite erhält.

Als responsives Webdeisgn wird verstanden, dass eine Webseite für möglichst alle Geräte - Desktop, Laptops, Tablets, Smartphones und manchmals sogar Smartwatch - gut dargestellt wird.
Der Hauptunterschied aller Devices (Geräten) liegt insbesondere in der unterschiedlichen Breiten (die Höhe ist dank Scroll-Möglchkeit weniger relevant). Einzelne Elemente einer Webseite können auf dem Desktop noch problemlos nebeneinander platziert werden. Auf dem Smartphone reicht der Platz nicht und sie müssen übereinander liegen. Ein Prinzip, welches diesem Umstand Rechnung trägt ist das Mobil-First-Prinzip.

Die Abkürzung RGB steht für Rot-Grün-Blau. Farbcodes werden in der Webprogrammierung meistens als hexadezimalen Code angegeben. Hexadezimal ist eine alternative zu unserem gewohnten Dezimalsystem, bei welchen neben den Ziffern 0...9 noch die Ziffern a,b,c,d,e und f folgen. So gibt es insgesamt 16 Ziffern. Dies reicht, um mit zwei Ziffern insgesamt 256 (16 x 16) Intensitäten anzugeben. Mit 6 Ziffern kann man somit pro RGB-Farbe 256 Intensitäten und damit insgesamt 16'777'216 (256 x 256 x 256) verschiedene Farb-"Mischungen" ausdrücken.

Ein Template oder Theme ist eine Design-Vorlage, welche genutzt werden kann, um eine komplette Webseite zu erstellen. In einem Template werden lediglich alles Design-Elemente definiert und vorprogrammiert.
Für eine neue Webseite kann man ein solches Template kaufen und anschliessend mit dem eigenen Inhalt (eigene Texte, Bilder, Grafiken) füllen. So lässt sich eine äusserst kostengünstige Webseite erstellen, die trotzdem wunderbar gestaltet ist.
Einziger Nachteil ist, dass möglicherweise irgendwo auf der Welt mehrere Webseiten ähnlich aussehen.
Selbstverständlich lassen sich auch Template-basierte Webseiten individuell ausbauen und abändern.

Häufig begegnet man in Zusammenhang zu Webdesign dem Begriff UI/UX. Diese stehen kurz für User Interface und User Experience
UI: Diese Seite beschäftigt sich damit, dass eine Webseite bzw. einzelne Webelemente gut aussehen. Ziel ist, dass den Besuchenden eine Webseite gefällt.
UX: Diese Seite beschäftigt sich damit, dass die Darstellung für die Besuchenden verständlich und logisch ist. Ziel ist, dass eine Webseite intuitiv bedienbar ist und das Vorhaben der Webseite (Kauf, Kontakt, Anmeldung) unterstützt wird.

Immer häufiger kommen statt den traditionellen Bildformaten (.png, .jpg oder .gif) sogenannte Vektorgrafiken zum Zuge. Das verbreitetste Format ist das .svg-Format (steht für Scalable Vector Graphics). Der Vorteil von Vektorgrafiken liegt darin, dass sie unabhängig von der Bildgrösse in optimaler Auflösung erzeugt werden.
Ich empfehle Ihnen, wenn möglich das Logo und kleine Webgrafiken (z.B. Icons) im .svg-Format für die Webseite zur Verfügung stellen. Auf Wunsch können wird das für Sie erstellen.

Ein Wireframe ist eine abstrakte Planungsform einer Webseite. Das Ergebniss soll lediglich darstellen, was auf der Webseite wo geplant ist, ohne konkrete Texte, Bilder oder Grafiken zu verwenden.
Ein Wireframe hilft, die Kernelemente einer Webseite zu erfassen und das Nutzerverhalten zu planen - ohne zu sehr von gestalterischen Aspekten abgelenkt zu werden.

In Zusammenhang zu CMS-Systemen liest man oft den Begriff WYSIWYG-Editor. Die Abkürzung steht für What you see is what you get.
Das Ziel eines Editors im Backend ist demnach einen Editor zu haben, der möglicht gut darstellt, was auf dem Frontend zu sehen ist.