Webdesign ist in gewisser Weise vergleichbar mit der Zubereitung von Speisen. Nur wenn die Zutaten wohl dosiert, frisch und „geschmackvoll“ sind, kann das Endprodukt zum Erlebnis werden.

User Experience

wenn Nutzung zum Erlebnis wird

Der Begriff User Experience (UX) vereint im Kontext von Webdesign alle Aspekte der Eindrücke und Erlebnisse eines Nutzers bei der Interaktion mit einer Webseite.

Neben der ästhetischen Wahrnehmung steht die Erfahrung beim Gebrauch (Usability) im Vordergrund, wesentlich geprägt durch die Informationsarchitektur und die Gestaltung der Benutzerschnittstellen.

Die modernen Funktionen von HTML und CSS eröffnen eine Vielzahl neuer Möglichkeiten zur Verbesserung der User Experience von Webseiten. Wohl dosiert, frisch und „geschmackvoll“ zum Einsatz gebracht, bereichern sie jeden Internetauftritt.

Responsive design

immer in der richtigen Größe

Webseiten, die in responsivem Webdesign angelegt wurden, reagieren auf unterschiedliche Anforderungen von Endgeräten in Form von gerätespezifischen Layouts.

Kriterien für das angepasste Erscheinungsbild sind neben der Größe des Anzeigegerätes auch die verfügbaren Eingabemethoden (bspw. Touchscreen oder Maus).

Dark mode

für die dunklen Zeiten des Tages

Icon surfingMaterial Symbol aus der Google Font-Library
Icon kitesurfingMaterial Symbol aus der Google Font-Library
Icon poolMaterial Symbol aus der Google Font-Library
Icon scuba divingMaterial Symbol aus der Google Font-Library
Icon sailingMaterial Symbol aus der Google Font-Library
Icon rowingMaterial Symbol aus der Google Font-Library

Pünktlich zum Sonnenuntergang können moderne Webseiten in den Dunkelmodus wechseln. Dann wird ein Farbschema aktiviert, bei dem heller Text sowie helle Symbole und grafische Bedienelemente auf dunklem Hintergrund verwendet werden. Das senkt den Stromverbrauch und schont die Augen.

Animations

Inhalte zum Leben erwecken

Im Webdesign werden im Wesentlichen zwei Arten von Animationen unterschieden, selbstständig ablaufende und jene, die mit der Scroll-Bewegung verknüpft sind. Vertikale Scroll-Effekte werden oft auch Parallax-Effekte genannt. Komplexere animierte Objekte können in speziellen Programmen erstellt und als sogenannte Lottie-Files in die Website eingebettet werden.

Videos

bewegte Bilder

Für die Integration von Videos gibt es zwei Möglichkeiten. Entweder werden diese zunächst auf Youtube oder Vimeo eingestellt und dann lediglich verlinkt, oder aber, sie werden mit der Webseite zusammen gehostet. Letzteres erleichtert die Kontrolle über den Schutz des Videomaterials.

Heutzutage ist es kinderleicht „am richtigen Ort“ nach passenden Fotos, Illustrationen und Vektorgrafiken für Webseiten zu suchen. Diese Suche ist zwar oft zeitaufwändig, lohnt sich aber in den meisten Fällen.

Neben kostenpflichtigen Datenbanken wie iStock, gibt es zahlreiche Photo Communities, so beispielsweise Pexels, Pixabay oder Unsplash, die gegen eine geringe Spende oder sogar kostenlos Bilder bereitstellen.

Vector graphic

immer genau auf der Linie

Als Vektorgrafiken werden Abbildungen bezeichnet, die aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven (Splines) zusammengesetzt sind. Der Vorteil gegenüber pixelbasierten Abbildungen besteht in der verlustfreien Skalierbarkeit und dem geringen Speicherplatz.

Icons

symbolisch betrachtet

Icons werden eingesetzt, um sprach-, schrift- und kulturneutral Informationen weiterzugeben. Die Herausforderung besteht darin, diese Infos durch eine vereinfachte grafische Darstellung zu vermitteln.

Analog zu den Bilddatenbanken gibt es zahlreiche Anbieter, die mit Icon-Bibliotheken aufwarten. Erwähnt seien an dieser Stelle die Google Fonts Icon Library, Font Awesome und Icons8.

Web fonts

für jede, jeden und jedes

Im Google Fonts Content Delivery Network werden rund 1.400 Schriftfamilien bereit gestellt, die kostenlos in jede Webseite eingebunden werden können. Für einen besseren Datenschutz und höhere Leistung können die Schriftfonts, insofern die Lizenz es erlaubt, direkt in die Website integriert und somit eigenständig gehostet werden.

Password protection

immer auf der sicheren Seite

Bereiche einer Website, die nicht öffentlich zugänglich sein sollen, können durch eine Benutzername/Passwort-Kombination geschützt werden. Somit kann festlegt werden, welche Benutzergruppen Zugang zu bestimmten Seiten haben sollen. Es ist möglich, mehrere Gruppen zu erstellen, die jeweils Zugang zu unterschiedlichen Seiten haben.

Log-In

Lorem Ipsum

Benutzername

Maxi Musterfrau

Passwort

••••••••

Passwort vergessen?

Payment

wenn es ums Bezahlen geht

menstruam feodo:  5,00 €

quando demi potest

Zahlungsschaltflächen vereinfachen den Bezahlvorgang für Produkte und Dienstleistungen, die auf Webseiten angeboten werden. Schaltflächen der Zahlungsdienstleister PayPal, Stripe, Snipcart, Ecwid, Gumroad und Paddle, für die es jeweils unterschiedliche Features, Preise und Konfigurationsoptionen gibt, können direkt auf einer beliebigen Webseite platziert werden.

Site search

auf der Suche

Für Webseiten, die viel Text enthalten, empfiehlt es sich, den Besuchern eine Suchfunktion anzubieten.

Moderne Webseiten erstellen einen Index des auf allen Seiten enthaltenen Textes, der dann schnell durchsucht werden kann. Die Ergebnisse der Suchanfrage werden auf einer gesonderten Suchergebnis-Seite angezeigt, auf der die Suchworte markiert und verlinkt sind.

Icon searchMaterial Symbol aus der Google Font-Library
Icon expand moreMaterial Symbol aus der Google Font-Library

SEO

stets gut gefunden

Search Engine Optimization (SEO) ist ein Prozess zur Optimierung von Websites mit dem Ziel, ein besseres Suchmaschinenranking zu erzielen und somit mehr Besucher zu einer Website zu führen. Eine Schlüsselrolle in diesem Prozess kommt dem gezielten Einsatz von Keywords in Überschriften, Seitentiteln und Seitenbeschreibungen zu.

Forms

in Kontakt kommen

Formulare stellen eine sichere Verbindung zwischen dem Betreiber und den Besuchern einer Webseite her. Sie enthalten Anti-Spam-Einstellungen, die verhindern, dass automatisierte Internetprogramme (Bots) Spaminhalte verteilen. Es werden keine Kontakt-Informationen an Dritte weitergegeben.

Sie können dieses Formular nutzen, um mit mir in Kontakt zu treten. Ich melde mich umgehend bei Ihnen zurück. Face Smile Wink

Ich stimme der Datenschutzerklärung zu.

webdesign

©  Dipl.-Designer Jan Petzold