Wenn die eigene Website faltig und alt wird, dann braucht es eine Neue. Doch was hat Herr Bürli der Welt der Gestaltung relevantes mitzuteilen? Und wie könnte  das aussehen? Von Webdesign und Durchhaltevermögen.

Herr Bürlis Website glich einer stillgelegten Kohlemine. Es ist nur ein kleiner Trost, dass dieses Phänomen auch bei grossen Agenturen auftaucht. Doch ist eine verkümmerte Webseite Grund genug, eine Neue zu realisieren? Und überhaupt, neu heisst ja nicht unbedingt besser.

Beim Durchsehen abgeschlossener Arbeiten ist mir aufgefallen, dass über die Jahre eine Palette an freien Arbeiten entstanden ist. So wuchs in mir die Idee, über die Besten dieser Arbeiten zu schreiben. Die Webseite soll nicht einfach eine Nabelschau von ästhetischen Arbeiten sein, sondern aufzeigen, wie ich vorgegangen bin. Und im besten Fall die Besucher inspirieren.

herrbuerli_skizze_webkonzept_layout_7

Herr Bürlis Pullover, quasi das Branding, versuchte ich mit dem Layout zu verflechten.

herrbuerli_skizze_webkonzept_layout_8

Da das Hochziehen des Pullovers schon eine Bewegung suggeriert, war der Weg zur animierten Navigation schnell gefunden.

herrbuerli_skizze_webkonzept_layout_5

Die Artikel wollte ich kachelhaft anordnen. Zwei Möglichkeiten, die ich dann wieder verwarf.

herrbuerli_skizze_webkonzept_layout_6

herrbuerli_skizze_webkonzept_layout_1

Bei den Artikelseiten wollte ich maximale flexibilität in der Gestaltung. So habe ich vier Templates erstellt, die wiederum verschiedene Inhaltskomponenten beinhalten. Dieses Template beginn mit einem vollflächigem Header.

herrbuerli_skizze_webkonzept_layout_2

Templatevariante der Artikelseite mit quadratischem Bild und überlappendem Titel.

herrbuerli_skizze_webkonzept_layout_3

Templatevariante der Artikelseite mit hochformatigem Bild und zentriertem Titel.

herrbuerli_skizze_webkonzept_layout_4

Templatevariante der Artikelseite mit zentriertem Titel und Bild untereinander.

herr-buerli-website-design-1

Früher Entwurf der Webseite im Sketch. Bei Screendesigns gehe ich mittlerweile nicht mehr ins Detail, sondern wechsle möglichst rasch zum Code.

Gestaltungskonzept – unter dem Pullover

Das Inhaltsformat stellte ich mir als eine Mischung aus Designblog und Webmagazin vor. Wenige, dafür gehaltvolle Artikel über meine gestalterischen Arbeiten, erzählt aus der Perspektive meiner Kunstfigur «Herr Bürli».

Der hochgezogene Pullover soll sinnbildlich Einblicke in meine Gedankengänge und Ideen gewähren. So kam mir beim skizzieren die Idee, das Layout als Schichten vom Pullover bis zur Hose abzubilden. Für die Gestaltung wählte ich einen illustrativen und flachen Stil.

Da ich die Website von Anfang an so kompakt wie möglich halten wollte, wählte ich eine simple Struktur: die Startseite als Onepager und die Unterseite mit den Artikeln. Da die Beiträge das Herzstück der Webseite sind, strebte ich dort ein flexibles Layout an – ohne zu wissen, wie ich das technisch umsetzen sollte.

herrbuerli-fotoshoot-prozess-1
herrbuerli-fotoshoot-prozess-3

Unbearbeitet und bearbeitet: Fotoserie für die Startseite von Herr Bürli am Küchentisch im 70er Jahre Pullover. Die ursprünglich violette Wand habe ich nachträglich im Photoshop umgefärbt.

Technische Umsetzung – auch Irrwege führen nach Rom

Nach dem ich die Struktur und das Design erstellt hatte, kam die Frage nach der technischen Umsetzung und dem CMS (Content Management System) auf. Da mein Knowhow eher im Design als im Coden liegt, sah ich folgende Möglichkeiten:

  1. Ich ziehe ein Programmierer hinzu.
  2. Ich modifiziere eine bestehendes Template.
  3. Ich bringe mir WordPress bei.

Natürlich habe ich mich aus Bequemlichkeit für Variante 2 entschieden und leider viel zu spät realisiert, dass ich die verlorene Zeit lieber für Variante 3 eingesetzt hätte. Schlussendlich war es auch die Herausforderung, die mich doch noch motivierte, ein «Herr Bürli» Template in WordPress zu erstellen.

Herr Bürli Webdesign Pinegrow

Nachdem ich das statische Front End erstellt hatte, konnte ich mit Hilfe des Codeeditor «Pinegrow» und dem Wordpress Plugin das Template programmieren.

Herr Bürli Webdesign WordPress

Wordpress zu lernen, war für mich die eine Herausforderung. Zu entscheiden, welche Inhalte vom System wie angesteuert werden, die Andere.

Herr Bürli Webdesign WordPress

Im Back End habe ich die Möglichkeit, aus vielen Layoutkomponenten den Artikel zusammen zu stellen. Somit kann ich jeden Artikel individuell gestalten.

Herr Bürli Webdesign WordPress

Im Front End habe ich die Möglichkeit, kleinere Textanpassungen vorzunehmen.

Inhalte erstellen – Wortakrobatik und Inszenierung

Eigene Arbeiten zu dokumentieren, kenne ich von Studium und Bewerbungen. Und jedes mal realisiere ich wieder neu, welchen Aufwand es beinhaltet: Gute Texte schreiben, qualitatives Bildmaterial erstellen, unterhaltsam und gut gestaltet zu präsentieren – eine Herausforderung.

Zuerst habe ich meine Arbeiten nach Sparten geordnet. Dann habe ich eine Auswahl getroffen und begonnen, Bildmaterial und die Texte zu erstellen. Was ist interessant am Projekt? Und was würde ich gerne lesen? Solche Fragen stellte ich mir. Das Risiko ist immer, hohle Phrasen zu produzieren.

Herr Bürli Shooting Gemüsebouillion

Bei jeder Arbeit überlege ich mir, wie ich diese angemessen Inszenieren könnte. Heller oder dunkler Hintergrund, Umfeld, Perspektive, Komposition etc.

Herr Bürli Shooting Niddletäfeli

Inszenierung der Nidletäfelis auf dem Fussboden. Mit einfachen Hilfsmitteln wie weissem Papier, lassen sich schöne Reflektionen auf Gläser zeichnen.

Eine Webseite ist nie abgeschlossen. Und wenn sie abgeschlossen ist, dann braucht es eine Neue.

Erik Spiekermann

Ein Anfang ohne Ende

Das Webseitenprojekt hat sich über zwei Jahre hinweg gezogen. Nicht nur, weil immer wieder andere Projekte dazwischen gekommen sind. Sondern auch, weil die «Learnings» notwenig waren, um die Website wie angedacht umzusetzen.

Das Resultat ist kein Novum, doch ich bin happy. Mein Konzept sieht vor, regelmässig – was das auch heissen mag – neue Projekte zu publizieren und die Website stetig weiter zu entwickeln. Wir werden sehen, wo die Reise hingeht. Feedback herzlich willkommen.

Beitrag auf «Pinegrow Web Editor»