Webprojekt für ein spirituelles Angebot

von

Für meinen Chef Bernhard Zemp habe ich die Website zumirzurück.ch gestaltet. Gemeinsam definierten wir die Ziele und Inhalte der Seite. Anschliessend habe ich die Texte formuliert, das Porträtbild erstellt sowie das Design entworfen und umgesetzt, damit sein spirituelles Angebot online sichtbar wird.

Die Website ist unter folgender Domain abrufbar:
www.zumirzurück.ch

Vorgehen

Zuerst habe ich die Domain zumirzurück.ch gekauft und die Website über das Webhosting «Cyon» aufgesetzt. Die Website habe ich schlussendlich mit WordPress umgesetzt. Als Basis habe ich das Enfold Theme verwendet, da es viele Gestaltungsmöglichkeiten bietet und sich gut an individuelle Bedürfnisse anpassen lässt.

Zu Beginn des Projekts habe ich gemeinsam mit Bernhard Zemp das Ziel und die Inhalte der Website definiert. Danach hat er mir erzählt, welche Botschaften er auf den einzelnen Seiten vermitteln möchte. Daraus habe ich schliesslich die Texte für die Website formuliert.

Für das Design habe ich meinem Chef verschiedene Farbkombinationen vorgeschlagen. Schlussendlich haben wir uns für ein Pastellrosa in Kombination mit kräftigeren Pinktönen entschieden. Aus unserer Sicht hat das am besten zu dem spirituellen Angebot gepasst. Da es um Rückführungen geht, habe ich mich schnell für eine Spirale als Layout-Element entschieden. Diese wird auf der Website immer wieder in verschiedenen Varianten aufgegriffen. Davon war Bernhard Zemp von Anfang an begeistert.

Zusätzliche Programmierung

Um die Seite noch gezielter nach meinen Vorstellungen zu gestalten, habe ich neben dem Enfold-Theme auch eigenen Code im Bereich «Zusätzliches CSS» ergänzt. So konnte ich das Design an mehreren Stellen individuell anpassen:

  • Titelbild und Startseite:
    Das Titelbild habe ich so gestaltet, dass es beim Öffnen der Seite optimal dargestellt wird. Durch gezielte CSS-Anpassungen bleibt der begleitende Text stets gut lesbar und harmonisch im Layout eingebunden.
  • Footer:
    Den Footer habe ich bewusst selbst per CSS und HTML gestaltet, um einen klaren und professionellen Abschluss der Seite zu schaffen. So hebt er sich visuell ab und bleibt konsistent im Gesamtbild der Website.
  • Schriftarten und Typografie:
    Ich habe zwei eigene Webfonts eingebunden (Cherry Blossoms und Avenir Next) und die Typografie für alle Elemente gezielt definiert. Dadurch entsteht eine ruhige und vertrauensvolle Grundstimmung, die gut zum Thema und zur Botschaft der Seite passt.
  • Responsives Verhalten:
    Für verschiedene Bildschirmgrössen (Desktop, Tablet, Smartphone) habe ich eigene CSS-Regeln ergänzt, damit die Schriftgrössen und Abstände jeweils stimmig wirken.

Diese Anpassungen haben es mir ermöglicht, das Design der Seite deutlich individueller und passgenauer umzusetzen, als es rein mit den Enfold-Theme-Einstellungen möglich gewesen wäre.

Porträt fotografieren

Das Porträtbild von Bernhard Zemp auf der «Über mich»-Seite habe ich selbst fotografiert und eingebunden. So sieht die Unterseite nun aus:

Visitenkarte zur Ergänzung

Neben der Website habe ich auch eine passende Visitenkarte für Bernhard Zemp gestaltet und umgesetzt. Sie greift das Design der Website auf und bietet eine zusätzliche Möglichkeit, das Angebot offline bekannt zu machen.

So sieht die Visitenkarte aus:

Für mich war das Projekt nicht nur eine spannende Webdesign-Aufgabe, sondern auch eine tolle Gelegenheit, praxisnah mit WordPress, CSS, Fotografie und Textgestaltung zu arbeiten.
Ich konnte kreativ sein, verschiedene Ansätze ausprobieren – und habe dabei viel gelernt, was ich in zukünftigen Web- und Designprojekten gut einsetzen kann.

(abb)

Das Projekt hat mir in vielerlei Hinsicht neue Einblicke gebracht. Besonders spannend war für mich der Umgang mit WordPress. Ich habe gelernt, wie eine Website aufgebaut ist und was es alles dafür braucht. Dieses Wissen lässt sich auch gut auf Seiten anwenden, die man von Hand programmiert. Besonders Freude hatte ich an der Designentwicklung im Adobe Illustrator. Obwohl das Design eher schlicht und technisch nicht besonders schwierig war, bin ich sehr stolz darauf. Für mich war es ein neues Gebiet, und umso mehr hat es mich gefreut, dass das Ergebnis sowohl bei meinem Chef Bernhard Zemp als auch bei anderen Personen gut angekommen ist.

Ein weiterer spannender Aspekt war das Hinzufügen von eigenem Code. Das hatte ich zuvor noch nie gemacht, sondern mich jeweils an die fixen Layouts der Themes gehalten. Durch den Einsatz von Custom CSS konnte ich deutlich mehr Freiheiten nutzen und individuelle Lösungen umsetzen.

Die Zusammenarbeit mit meinem Chef hat sehr gut funktioniert. Sie basierte auf gegenseitigem Vertrauen, und er hat mir viel Freiheit gelassen. Ein besonderes Erfolgserlebnis war das Lob meines Chefs für die gelungen formulierten Texte auf der Website. Es hat mich sehr gefreut, dass er die Inhalte als passend und stimmig empfunden hat.

Herausfordernd war es hingegen, das Titelbild und den Text auf der Startseite so einzubinden, dass die Darstellung wirklich stimmig wirkt. Dank dem gezielten Einsatz von Custom CSS habe ich schliesslich eine zufriedenstellende Lösung gefunden. Nicht gelungen ist mir hingegen das Vorhaben, die Spirale beim Öffnen der Seite zu animieren. Ich wollte einen Effekt einbauen, bei dem die Spirale gezeichnet wird. Trotz mehrstündigem Ausprobieren konnte ich kein zufriedenstellendes Ergebnis erzielen – entweder war die Spirale verschoben oder der Text wurde beeinflusst. Daher habe ich mich letztlich entschieden, auf diese Animation zu verzichten. Auch die Idee, kleinere Spiralen als animierte Elemente für die Verlinkung zu den Unterseiten zu verwenden, konnte ich bis zur Abgabe noch nicht umsetzen.

In technischer Hinsicht habe ich im Projekt sehr viel gelernt: über CSS, das Enfold Theme, Designarbeit in Adobe Illustrator, die Arbeit mit WordPress und das Aufsetzen einer Website bei Cyon. Für zukünftige Projekte würde ich mir überlegen, eine handgefertigte Seite zu entwickeln, da man mit dem Enfold Theme zwar viele Möglichkeiten hat, aber in gewissen Punkten doch eingeschränkt ist. Ausserdem würde ich versuchen, Animationen wie die Spirale frühzeitig anzugehen, um genügend Zeit für verschiedene Lösungsansätze zu haben.

Die Website ist insgesamt sehr gut angekommen, sowohl bei meinem Chef als auch bei Kundinnen und Kunden, was mich sehr freut. Für meine weitere Arbeit nehme ich aus diesem Projekt mit, dass es sich lohnt, eigene Ideen wie individuelles Design und eigenen Code einzubringen und neue Dinge auszuprobieren. Auch die Erkenntnis, wie wertvoll eine gute und offene Zusammenarbeit mit dem Auftraggeber ist, nehme ich für zukünftige Projekte mit.