Das Logo für das Fresh, Gesamtangebot.

Die Logos für die einzelnen Angebote. Einfache, visuelle repräsentationen vom Angebot.

Visuell wird viel mit Bildern gerbeitet. Man soll sehen, um was es geht.

Gut leserliche Schriftart, die trotzdem einen verspielten Charakter hat.

Fresh Schinznach ist der Name vom Angebot für Kinder und Jugendliche der Chile fürs Tal. Die Chile fürs Tal ist eine Freikirche in Schinznach, die Teil der Viva Kirchen Schweiz ist. Unter dem Namen Fresh kommen die Jungschar, der Jugendtreff Vamos, der Kinder-Gottesdienst Kidstreff, der Kirchunterricht YouBe und die Amesli zusammen. Das Angebot wurde 2017 gegründet.

Zum Start des Angebots war ich bereits Teil des Jungschar-Leiterteams und wurde damit beauftragt, eine Webseite für das neue Angebot zu erstellen. Ich war damals 17 Jahre als und war am Anfang meiner Lehre als Mediamatiker. Ich hatte noch keine richtigen Erfahrungen mit Webseiten und konnte somit meine ersten Schritte damit gehen.

Screenshot WIX Webseite

Die erste Seite ist teils noch über die Internet Wayback-Machine aufrufbar. Und um ehrlich zu sein… Die Seite war nicht besonders gut. Klar, sie war bunt und die Benutzerführung war ok, aber weil ich sie mit dem Website-Editor WIX erstellt habe, war die Seite nicht für Mobile Endgeräte geeignet. Dass Smartphones ein immer grösseren Teil des Webs einnehmen werden, war eigentlich damals bereits klar.

In Zussammenarbeit mit der Jugend-Pastorin auch die Logos für die Angebote gestaltet. Die Logos sollten modernen App-Icons ähneln, aber trotzdem zu einem Angebot für Kinder passen. Daher haben wir simple Icons als Grundlage verwendet. Diese wurden Negativ¹ in einem schraffierten Viereck dargestellt.

Die Wahl der Icons fiel nicht überall leicht. Für die Ameisli und Jungschar war die Grundidee recht klar. Der BESJ² hat ein Maskottchen für die Ameisli-Arbeit. Das haben wir in leicht angepasster Form übernommen. Für die Jungschar gibt es auch das universelle Symbol eines Ankers mit einem Kreuz oben. Also haben wir auch hier unsere eigene Version davon angefertigt. Und beim Vamos waren wir uns einig, dass das verkehrte Ausrufezeichen und das am Ende als Logo hinhalten können, weil es im Namen des Programmes ausgeschrieben wird und ziemlich gut in Erinnerung bleibt.

Soweit, so gut. Für die Angebote Kidstreff und YouBe gab es aber keine Vorgegebenen Ideen, was man als Logo nehmen könnte. Daher mussten wir hier etwas finden, dass sowohl leicht erkennbar ist, sodass man es selber zeichnen könnte und gleichzeitig zu den anderen Logos passst. Für den Kidstreff kamen wir auf die Idee eines Händeabdruckes. Dieser soll der Fokus auf kreative Kinderarbeit beim Kidstreff repräsentieren. Beim YouBe kam uns zu der Zeit keine gute Idee. Weshalb wir nur die Buchstaben YB als Icon nahmen.

Alte Icons

Mit der Zeit sollte sich zeigen, dass viele dieser Logos nicht besonders geeignet sind. Den Test der Zeit haben nur das Jungschar- und Vamos Logo bestanden. Aber mehr dazu später.

Aber auch für Fresh insgesamt, erstellte ich ein Logo. Da gab es auch mehrere Entwürfe. Klar war, dass es ein Schriftzug sein soll. Ich tendierte mehr in eine Richtung mit runden Formen und einem Blatt als Gestaltungselement. Das geht aber zu sehr in Richtung Outdoor, weshalb wir uns für eine Pinseloptik entschieden.

Altes Fresh Logo

Die erste Webseite stand also. Sie blieb über die ganze Zeit hinweg mehr oder weniger gleich. Das einzige, was sich wirklich änderte war, dass 2018 ein Blog dazukam. In diesem würden Updates aus Lagern gepostet werden, damit Eltern einen Einblick bekommen, während ihre Kinder weg sind.

Doch relativ bald wurde mir klar, dass diese Webseite nicht immer so bleiben kann. Ich wurde schnell unzufrieden mit dem starren Layout, dass eigentlich nur auf Desktop so richtig funktioniert. Und so habe ich Ende 2018 Mockups³ erstellt, wie man die Webseite neu strukturieren könnte. Dabei hatte ich klar den Inhalt im Fokus, also dass die Inhalte, die der Besucher der Webseite wissen will, an erster Stelle stehen.

Bilder der Website-Mockups

Diese Entwürfe habe ich der Hauptleitung gezeigt und sie waren damit Einverstanden. Sie haben noch einige Inputs gegeben und dann machte ich mich an die Umsetzung. Am 22. Januar 2019 ging dann die überarbeitete Webseite online.

Screenshot der ersten WordPress-Seite

Den ersten Relaunch habe ich mit WordPress umgesetzt. Ich hatte im Rahmen von ÜKs⁴ bereits Erfahrungen mit WordPress, weshalb ich mich dafür entschied. Damals war WordPress in seiner Grundform aber noch deutlich eingeschränkter, was die Gestaltungsmöglichkeiten von Seiten angeht. Und um meine Ideen umzusetzen, musste ich einen Website-Editor⁵ nutzen. Das Problem damit: Diese Edidoren funktionieren sehr gut, solange man ein Theme⁶ nutzt, dass kompatibel ist und die Elemente genau so einsetzt, wie es Gedacht ist. Aber es ist recht schwierig die Seite an seine Bedürfnisse anzupassen.

Und so war die Seite Rückblickend ein Kompromiss aus meinen Vorstellungen und dem Vorgaben vom Webseiten-Theme. Die Seite war insgesamt ein Fortschritt, aber in einzelnen Bereichen auch ein Rückschritt im Vergleich zu vorher. Beispielsweise wurde jeder Menupunkt mit der gleichen Farbe hervorgehoben, wenn man mit der Maus darüberfährt. Dieser individuelle Hover-Effekt war zuvor möglich.

Die neue Seite kam insgesamt gut an (Es gab wenig Rückmeldungen, was in der Regel ein gutes Zeichen ist). Das einzige, was ich mehrmals hörte war, dass die Seite nun weniger Farbenfroh sei. Und das stimmt sicher auch. Aber ich war doch zufrieden damit.

Die Idee mit den grossen Bildern auf fast jeder Seite, mit einem kleinen Text darüber haben wir von Ädu Jaggi, resp. vom BESJ übernommen. So konnte man schnell einen Eindruck von jedem Programm geben, der nicht mit Worten erklärt werden muss.

Screenshot Heder-Bilder mit Text, erste WordPress Seite

Diese Iteration bekam mit der Zeit sicher die meisten Änderungen ab. Denn es wurden immer neue Ansprüche an die Seite gestellt. Es sollte auch hier einen Blog geben, eine Übersicht über die Leiter auf einer eigenen Seite, ein Zeitstrahl, der die Programme einfacher darstellt und eine Möglichkeit auf einen Blick die nächsten Termine zu sehen, ohne das Semester- oder Jahresprogramm zu öffnen.

Also fügte ich diese Funktionalitäten alle obendrauf hinzu, ohne dass die Seite jemals dafür ausgelegt war. Vor allem der Zeitstrahl und die nächsten Termine waren ein Problem. Bei ersterem erstellte ich schlussendlich eine Grafik, ohne Interaktive Elemente und für die Temine wollte ich kleine Terminkarten auf der Seite haben, die die nächsten Programme zeigen.

Screenshot Terminkarteien, erste WordPress Seite

Hier war das Problem, dass ich keine Erweiterung fand, die das so anbietet, wie ich das haben wollte. Und so entschied ich mich, die Arbeit von Hand zu machen. Sprich ich schrieb Code von Hand und musste immer, wenn ein Programm vorbei war von Hand den alten Termin löschen und den neuen ergänzen.

Logischerweise kam ich dem nicht immer nach, sodass manchmal über zwei Monate alte Temine angezeigt wurden. Und generell war die Seite inzwischen ein rechter Flickenteppich. Plugins und Themes, für die ich einmal zahlte, die inzwischen aber nicht mehr weiterentwickelt wurden, oder wo die Lizenz ausgelaufen war. Und weil sich WordPress immer weiterentwickelt, habe ich irgendwann aufgehört, die aktuellste Version zu nutzen, da diese immer dazu führten, dass die Webseite danach entweder nicht mehr funktioniert, oder komplett falsch aussieht.

Daher begann ich im Sommer 2023 damit, die Webseite von Grund auf neu aufzubauen. Dazu erstellte ich eine Test-Webseite, oder besser gesagt, eine Developer-Version der Fresh Seite.

Screenshot Fresh Dev

Damit hatte ich eine Seite, wo ich in aller ruhe mit verschiedenen Themes herumprobieren konnte und auch diverse Plugins für meine Vorstellungen testen konnte. Das war definitiv eine sehr gute Idee, denn diese Seite liess meine Motivation, die Fresh Seite aktuell und modern zu halten, wieder neu aufblühen.

Mein Ziel war es, das Grundsäzliche Layout bezubehalten. Es sollte nicht wieder so eine Radikale neuauflage geben, wie beim letzten wal, denn die Grundstruktur, wie die Inhalte aufgebaut sind, waren an sich noch ziemlich gut und hielten stand. Das ziel war es, möglichst wenige Plugins für die Front der Seite zu nutzen, keine Plugins mit versteckten Kosten zu nutzen und die Seite möglichst einfach unterhalten zu können. Sprich sie soll auch immer auf die aktuellste Version portierbar sein.

Und so entstand nach und nach die Seite, wie sie fast genau so aktuell steht. Ich habe den Zeitstrahl selber in HTML geschrieben und zu einem interaktiven Objekt gemacht. Für die Terminkärtchen habe ich ein Plugin gefunden, womit ich genau meine Vorstellungen umsetzen konnte. Darin kann ich alle Termine einfach anlegen und sie werden mir je nach Kategorie als einfachen Text angezeigt, denn ich dann so darstellen kann, wie ich es möchte.

Woran ich am längsten zu kämpfen hatte war die Datumsanzeige oben im Kärtchen. Ich wollte, dass dort eine Zahl steht, wenn es ein Termin ist, der nur an einem Tag spielt und das Start- und Enddatum, wenn der Termin über mehrere Tage geht. Dazu wollte ich zuerst eine Funktion in Javascript oder PHP schreiben, die prüft, ob das Startdatum = Enddatum ist und enstprechend das Enddatum ausblendet, wenn es nur an einem Tag spielt. Das funktionierte aber nie, sodass ich auch hier auf eine manuelle, nicht zufriedenstellende Lösung zurückgriff. Das Datum wird nicht automatisch angezeigt, sondern ich habe oben ein Extra Feld angezeigt, dass ich manuell befüllen musste, wo ich die Zahlen fürs Datum eintrug. Auch das ist natürlich Fehleranfällig, da es das falsche, oder gar kein Datum zeigt, wenn ich vergesse, das bei einem neuen Termin einzutragen.

Es sollte sich aber heausstelle, dass es viel einfacher ist. Das Plugin generiert nämlich automatisch eine CSS-Klasse, wenn der Termin mehrere Tage geht. Als ich das entdeckte, war es sehr einfach. Das Enddtum wird generiert, aber nur angezeigt, falls die Klasse für mehrere Tage aktiv ist. Und so war die Seite fast auf einem Stand, dass ich die aktuelle mit der überabeiteten Ersetzen konnte. Einige Kleinigkeiten mussten aber noch angepasst werden.

Am 22. Januar 2024 ereignete sich jedeoch ein Datenbank-Fehler, sodass die alte, noch aktuelle Fresh-Seite nicht mehr aufrufbar war. Ich konnte und wollte in dem Moment auch nicht herausfinden, wo das Problem lag, da ich mental mit der alten Seite abgeschlossen hatte. Und so kopierte ich die Test-Seite in einer Nachtübung auf die ofizielle Fresh-Homepage. Und im März 2024 waren dann die letzten anpassungen getroffen, sodass die Seite so dastand, wie ich es mir Vorstellte.

Die Developer-Seite existiert noch immer. Die Seite nutze ich immer, um Updates zuerst dort auszurollen. Wenn die Seite dann auf einmal nicht mehr richtig funktionieren sollte, kann ich dort zuerst die Fehler beheben, bevor ich die Updates dann auf der richtigen Seite durchführe. Hier ist der Link dazu:

dev.fresh-schinznach.ch

Parallel zu der modernisierung der Webseite, erstellte ich auch ein Dokument, dass die Visuellen Grundlagen von Fresh dokumentieren sollte. Ausserdem nutzte ich die Gelegenheit und überearbeitete die Logos, die mir schon länger ein Dorn im Auge waren.

Beim Logo für die Ameisli war das Problem, das es viel zu detailliert war, dass es noch gut erkennbar ist, wenn es sehr klein dargestellt wird. Aber weil die Ursprungsidee noch immer gut war, verkleinerte ich einfach den Aussschnitt. Neu sollte nur noch der Kopf zu sehen sein.

Für den Kidstreff blieb ich auch bei der Ursprünglichen Idee, passte die Hand aber an den stilisierten und groben Ton vom Jungschar-Anker und dem Vamos-Logo an. Die Hand ist noch immer erkennbar.

Das YouBe Logo erdachte ich von Grundauf neu. Es sollte eine visuelle repräsentation vom Inhalt bieten. Weil YouBe ein Kirchunterricht, oder “Chileunti” ist, war die Idee einer stilisierten Bibel recht naheliegend. Allerdings zeigte sich, dass ein Buch, so nochmal ein Kreuz abgebildet ist, zu viel Inhalt für ein Logo ist. Daher entschied ich mich für ein aufgeschlagenes Buch. Das zeigt, dass man sich im YouBe mit der Bibel auseinandersetzt.

Vergleich alte – neue Logos

Und auch das Fresh-Logo wurde leicht überarbeitet. Dazu hatte ich die komerzielle Lizent für eine Vektorgrafik⁷ mit diesen gezeichneten Buchstaben gekauft. Im Original habe ich die Buchstaben teils verformt und strikt hintereinander gesetzt. In der neuen Version gibt es nun leicht übergänge und die Dimensionen werden beibehalten.

Vergleich altes – neues Fresh Logo

Und hier bin ich nun. Auch wenn ich aktuell die Webseite noch alleine unterhalte, ist die neue Seite so aufgebaut, dass jederzeit jemand anderes mithelfen könnte oder komplett übernehmen könnte.

1. Nevativ bedeutet hier, dass das Icon nicht an sich genommen wurde, sondern dass das schraffierte Viereck als Grundlage dient und das Icons wie bei einer Schablone nicht ausgemalt wird. Es ist Quasi Negativ in die Grundform gezeichnet.
   Hier Links das normale Beispiel-Logo, Rechts ist das Logo negativ gezeichnet:
   ↩︎
2. BESJ steht für Bund Evangelischer Schweizer Jungscharen. Unter dem BESJ versammeln sich Schweizweit viele Jungscharen, Ameisli- (Jungschar, aber für die kleineren) und Teeniegruppen. ↩︎
3. Mockup steht für Entwurf. Damit ist eine grobe Skizze gemeint, die von Hand gezeichnet sein kann, oder auch digital. Diese Skizze soll dem Betrachter eine grobe Idee geben, wie das fertige Produkt aussehen soll. In dem Fall die Webseite. ↩︎
4. ÜK steht für Überbetrieblicher Kurs. In der Schweiz ist das Ausbildungs-Modell sehr verbreitet, wo Jugenliche nach ihrer Schulzeit eine Lehre machen. Und während dieser Lehre besuchen sie dann neben der Berufsschule und den Tagen im Lehrbetrieb Kurse, wo jeder Lehrling unabhängig von den Tätigkeiten im Betrieb diselben Praktischen Arbeiten ausführt, die Wichtig für seinen Beruf sind. ↩︎
5. Ein Website-Editor, ist ein Programm, womit man seine Webseite einfach bearbeiten kann. Man kann Elemente mit der Maus packen und unmherschieben, anstatt Code zu schreiben. ↩︎
6. Themes sind Gestaltungsvorlagen in WordPress. Diese geben vor, wie die Hintergrundfarbe ist, was für Schriftart genutzt wird, wie Buttons aussehen, was für Abstand die Elemente haben, wie das Menu aussieht, etc. ↩︎
7. Eine Grafik kann entweder Pixelbasiert oder Vektorbasiert sein. Pixel-Grafiken sind bekannter. Diese speichern ein Bild in viereckigen Bildpunkten, auch Pixel genannt ab. So kann man Details auf Bildern gut darstellen. Aber wenn man ranzoomt, wird das Bild irgendwann unscharf, egal wie hochauflösend es ist.
   Vektor-Grafiken hingegen arbeiten mit Pfaden, Formen und Knotenpunkten. Das ist gut für Logos oder Symbole geeignet, da dese keine Details beinhalten (sollten) und unendlich vergrössert werdne können, ohne dass es Qualitätsverlust gibt.
   Beispielgrafik Pixel vs Vektor ↩︎