Neue Webseite für Kammermann Gartenbau & Gartenpflege

von

Beitragsbild_Digezz_garten-mann

Seit Beginn meines Studiums zur Multimediaproducerin freut sich mein Vater auf seine neue Webseite. Anfänglich musste ich ihn beschwichtigen, da ich nicht wusste, ob ich überhaupt jemals fähig sein werde, eine eigene Webseite zu bauen. Dann kam Interaktive Medien. Und eine Hass-Liebe.

Nach wie vor verzweifle ich an den vielen verschiedenen HTML- , CSS- und JS-Methoden und Befehlen. Gleichzeitig verspüre ich aber auch eine grosse Faszination, wenn ich etwas als Code im Editor schreibe und mir den «Zauber» der Zeilen dann direkt im Browser anschauen kann.

Nun aber zu meinem Digezz-Projekt. Mein Vater ist Gärtner und führt selbstständig einen Mikro-Betrieb. Seite alte Website garten-mann.ch, die zurzeit noch online ist, ist etwas lieblos und das wollten wir ändern. Mein Ziel war es, einerseits den grosszügigen Weissraum zu beseitigen und der Website einen modernen Look zu verleihen. Mit ein paar neuen Bildern wollte ich der Website einen professionelleren Touch geben.

Die neue Website findest du aktuell noch hier. Die Seite wird ASAP auf die korrekte Domain verschoben.

(mou)

Idee & Planung

Die Idee, die Webseite meines Vaters neu zu gestalten, ist schon länger präsent. Mit den gelernten HTML-, CSS- und JS-Skills wurde dies nun endlich möglich.

Ich wollte folgende Dinge umsetzen bzw. ändern:

  • Neugestaltung des Logos
  • Neugestaltung der Webseite
  • Content überarbeiten (mit Berücksichtigung auf UX)
  • Neue Porträtbilder

Umsetzung

Neugestaltung Logo
Schnell musste ich feststellen, dass sich das Logo Redesign als schwierig herausstellen wird. Mein Vater verwendet sein Logo auf Briefkuverts, Visitenkarten und als Werbeschrift auf seinem Firmenauto. Natürlich lässt sich das alles austauschen, war aber nicht im Sinne meines Vaters. Daher musste ich mich dafür entschieden, dass Logo so zu belassen wie es ist und mein Layout-Konzept um das «retro-Logo» herumzubauen.

Neugestaltung Webseite
Ich habe direkt damit begonnen zu coden. Nach mehr als 300 Zeilen CSS-Code musste ich mich bremsen. Was ist, wenn ich das Gerüst nicht mehr responsive kriege? Ich hatte Angst, dass ich mit meinen x-Befehlen, die teilweise ein «!important» benötigten, einzelne Zeilen Code zu unterdrücken, die dann in der Mobile-Version nicht mehr funktionieren würden. Daher habe ich nach dieser Erkenntnis quasi nochmals von vorne begonnen. Allerdings mit ein paar Tipps aus dem World Wide Web.

Im zweiten Anlauf habe ich leider viel Zeit damit verbraten, im Editor etwas zu schreiben, um danach im Browser die visuelle Wirkung zu überprüfen. Wenn ich davor einen Klick-Dummie mit Adobe XD oder Ähnlichem erstellt hätte, dann hätte ich von Anfang an einen klar definiertes Layout-Konzept gehabt. Schlussendlich habe ich aber dennoch ein Layout entwickeln können, dass mir gefällt und zudem problemlos Responsive funktioniert.

Das Kontaktformular ist aktuell mehr Schein als Sein. Ich wusste zu beginn nicht, dass ich für die Verknüpfung PHP benötigen werde. Ich werde mich hierfür noch einlesen und die Verknüpfung beim Übertrag auf die korrekte Domain nachholen.

Content überarbeiten
Die Überarbeitung des Webseiten-Inhalts verlief problemlos. Das Überflüssige habe ich gestrichen, zusammengehörigen Inhalt fusioniert und nach den gelernten Usability-Regeln angeordnet. Gewisse Inhalte wie Überschriften und Meta-Bezeichnungen mussten neu geschrieben werden.

Um noch etwas Multimedialer zu werden, wollte ich ein GIF integrieren. Die Skills dazu haben wir gerade dieses Semester im Modul Visualisieren, Sketch & Draw gelernt. Zur Animation hat sich für mich das Logo angeboten, da es sehr «Comic-mässig» wirkt. Die Logo-Animation habe ich mit Procreate auf dem iPad erstellt. Sie ist nicht perfekt, aber dennoch gelungen.

Neue Porträtbilder
Porträtbilder mussten unbedingt neue her. Die alten Bilder hatten alle eine andere Lichteinstrahlung. Einmal Halbschatten, einmal Golden-Hour und einmal normale Lichteinstrahlung. Jedenfalls nicht schön.

Das Fotoshooting habe ich leider immer etwas nach hinten geschoben, bis der unglückliche Zufall kam, dass mein Vater drei Wochen in den Ferien ist. Ich musste die Porträtbilder also ohne ihn schiessen. Was natürlich ziemlich schade ist, da er die wichtigste Person im Unternehmen ist. Dennoch habe ich am besagten Tag seine zwei Mitarbeiter fotografiert, die Bilder bearbeitet und im HTML eingefügt. Das Foto von ihm existierte schon und passte von der Belichtung her ins Bild, leider ist es etwas unscharf. Ich werde meinen Vater auf alle Fälle auch noch fotografieren!

Feinschliff

Am Ende bemerkte ich, dass die Ladezeit der bestehenden Bilder etwas langsam ist. Daher habe ich alle zu schweren Bilder im Photoshop überarbeitet und webtauglich heruntergerechnet. Auch das Logo mit Schriftzug «Kammermann Gartenbau & Gartenpflege» musste ich einige Male neu ausrichten mittels Photoshop, damit es in der Navigationsleiste gut zur Geltung kommt.

What’s next?

  • Porträtbild von meinem Vater schiessen
  • eigenes Bannerbild schiessen
  • Kontaktformular mit PHP verbinden
  • Webseite auf die Domain garten-mann.ch wechseln
  • Link im Digezz-Beitrag ändern

Learnings

Planung is Key! Das nächste Mal investiere ich mehr Zeit in die Planung und Absprache mit Personen, von denen mein Projekt abhängig ist. Meine bisherige Arbeitsweise «drauf los», verlängerte den Entstehungsprozess schlussendlich nur. Für mein erstes Digezz-Projekt bin ich aber voll und ganz zufrieden. Und auch mein Vater ist glücklich und das ich das Wichtigste!