Screenshot WordPress Website “Biografische Wanderungen”

„Biografische Wanderungen“ Website für Biografiearbeit

Helmut Gabel

Projektübersicht

Ziel bei der Konzeption, Gestaltung und Umsetzung dieses Projektes, war ein neues Konzept für Biografiearbeit des Kunden zu vermitteln. Das Design betont die Naturnähe und die Prozesshaftigkeit des Angebots, da die „Biografischen Wanderungen“ in aller Regel in der Natur stattfinden. Dies wurde durch die Farbwahl, eine handgezeichnete geschwungene grafische Linie sowie Fotos in den Schweizer Bergen erreicht.
Der Videohintergrund auf der Startseite trägt dazu bei, die Stimmung des Angebots zu unterstützen und konnte trotz der hohen Datenmenge ohne Performance-Einbußen umgesetzt werden.

Eine Optimierung für Barrierefreiheit und Nachhaltigkeit war nicht Teil des Projektumfangs für diese Website.

Leistungen

  • CMS: WordPress
  • Konzeption, Design, Umsetzung
  • Video & Audio Feature
  • Interaktive Landkarte
  • Blog
  • Website besuchen

Im Rahmen dieses Projekts wurde die Website für das Biografiearbeit-Projekt „Biografische Wanderungen“ von Business-Coach Helmut Gabel konzipiert und umgesetzt. Die Hauptaufgabe bestand darin, das neuartige Konzept für Biografiearbeit auf der Website klar und verständlich für die Zielgruppe zu präsentieren. Die umfassende Konzeption, das Design und die technische Umsetzung der Website waren Teil meiner Verantwortung in diesem Projekt. Zusätzlich habe ich in Bezug auf die Inhalte und deren Struktur beraten, um sicherzustellen, dass die Informationen effektiv vermittelt werden.

Website-Ansicht in Laptop Mockup

Da die „Biografischen Wanderungen“ in der Regel in der Natur stattfinden, wurde das Design sorgfältig gestaltet, um diesen Bezug widerzuspiegeln. Dies erfolgte durch die gezielte Farbwahl, Verwendung von Naturfotografien in den Schweizer Bergen und die Integration von Vogelstimmen, um das Erlebnis für die Website-Besucher:innen zu bereichern. Dabei wurde darauf geachtet, dass die Gestaltung klar und modern, und nicht “alternativ” wirkt.

In den Hero-Sections auf den Unterseiten wird ein leichter Parallaxe-Effekt eingesetzt, um den Eindruck von Tiefe zu erzeugen. Die Bilder verschwimmen während des Scrollen, um den Lauf der Zeit zu illustrieren.

Website-Ansicht in Laptop Mockup

Die prozesshafte Charakteristik biografischer Wanderungen wurde auch durch eine geschwungene, handgezeichnete Linie betont. Diese Linie zieht sich durch den Inhalt, verbindet diesen, und animiert Benutzer:innen, weiter zu scrollen um mehr über das Angebot zu erfahren.

Website-Ansicht in Laptop Mockup

Die Website enthält auch interaktive Europa-Karten mit Pins, die verschiedene Standorte für die „Biografischen Wanderungen“ darstellen. Durch Klicken auf diese Pins können die Besucher:innen Details zu den jeweiligen Orten entdecken.

Website-Ansicht in Laptop Mockup

Eine Herausforderung bestand in der Integration eines Videohintergrunds in die Hero-Section der Startseite, ohne die Website-Performance zu beeinträchtigt. Diese Aufgabe wurde erfolgreich gelöst, und die Website erzielt 100 % im „Google-Lighthouse“ Performance-Test.

Kontakt

Hej, ich bin Jan-Hinrich, schreiben Sie mir, um Ihr nächstes Projekt zu besprechen!

Oder rufen Sie an unter: +49 511 10593812

Porträt UI/UX Designer Jan-Hinrich Fehlis