Referenzen
Der Verein „Du bist Rheinhausen“ hat es sich zum Ziel gesetzt, eben jenen Duisburger Stadtteil lebens- und liebenswert zu gestalten. Die eigene Website musste dabei leider etwas zurückstecken und daher wurde es Zeit für eine Überarbeitung. Schnell war klar, dass die erste Version auf Basis von Elementor und einer Vielzahl von teilweise gar nicht mehr notwendigen Plugins überhaupt nicht mehr richtig funktionierte und die Inhalte teilweise gar nicht mehr bearbeitet werden konnten. Da zusätzlich einige neue Funktionen benötigt wurden, trafen wir die Entscheidung, alles einmal von Grund auf neu aufzusetzen.
Um dabei nicht irgendwann erneut in dieselbe Situation der Abhängigkeit eines bestimmten Pagebuilders zu geraten, habe ich ausschließlich mit dem WordPress-eigenen Editor gearbeitet, der durch individuelle Funktionen und CSS-Anpassungen ergänzt wurde. Es gibt also keine laufenden Kosten (abgesehen vom Hosting, versteht sich) und keine Abos, die irgendwann ablaufen und den Zugriff auf die Website blockieren.
In Hinblick auf das Design gab es außer Farben und Schriften eigentlich nur wenige Vorgaben, sodass wir als Grundlage das Print-Design von Plakaten und Flyern gewählt haben – die abgerundeten Elemente in unterschiedlich satten Grüntönen sind hier das prägende Element.
Um zudem den Charakter des Vereins mit vielen Ideen und dem Motto „Machen statt Meckern“ aufzugreifen, habe ich ein paar Elemente in Anlehnung an „mal eben“ hingeklebte Post-Its gestaltet. So ist auf größeren Geräten wie Laptops und aufwärts zum Beispiel das Menü mit einem Hover-Effekt dargestellt, der das Untermenü wie einen Notizzettel überlappen lässt.
Da der Verein vor allem auf den Community-Gedanken mit regelmäßigem Austausch und gemeinsamer Aktionen setzt, gibt es auf der Startseite neben der Möglichkeit, sich für den Newsletter anzumelden, auch direkt eine Übersicht der nächsten Termine – natürlich mit Link zur jeweiligen Detailansicht mit weiteren Informationen (dazu unten mehr).
Dasselbe gilt für die aktuellen Projekte des Vereins, die ebenfalls mit ihren jeweiligen Detailseiten verlinkt sind.
Auf den Detailseiten der Projekte gibt es zunächst Informationen und ein paar Bilder und im Falle regelmäßiger Veranstaltungen auch eine individuelle Terminliste. Die Termine wurden als Custom Post Type angelegt und werden über die kostenfreien Plugins Advanced Custom Fields und dessen Erweiterung Meta Field Block entsprechend dargestellt. Ein wenig Trickserei mit dem WordPress-Editor und etwas individuelles CSS waren auch notwendig, aber nun müssen sich die Mitglieder nur noch um das Eintragen der Termine kümmern und nicht jede einzelne Projektseite zusätzlich pflegen.
Wer Fragen zu den Projekten hat, findet natürlich auch jeweils eine Kontaktperson, die im ähnlichen Stil wie die übrigen „Hingucker“-Elemente hervorgehoben werden.
Ansonsten bieten die Detailseiten der Termine natürlich auch alle relevanten Informationen auf einen Blick, insbesondere Datum und Ort sowie ggf. einen Link zur Anmeldung. Dafür nutzte der Verein bereits eine externe Plattform über beeabee.de, für die wir deshalb ganz einfach ein Custom Field ergänzt haben.
Unterhalb der Informationen zum jeweiligen Termine findet sich auch immer der aktuelle Ausblick, der ebenfalls automatisch aus den eingetragenen Veranstaltungen generiert wird.
Da der Verein vor allem seine Müllsammel-Aktionen dokumentiert, habe ich eine individuelle Erweiterung integriert. Über Custom Fields können in den jeweiligen Veranstaltungen die Anzahl der beteiligten Personen sowie die Menge des gesammelten Mülls eingetragen werden. Beim Speichern wird dann automatisch die Statistik auf der Projektseite aktualisiert. Auch hier muss also nicht mehr manuell gerechnet und geändert werden.
Für den Fall, dass es neben der Statistik auch noch einen ausführlicheren Bericht geben soll, wurde auch die Blogfunktion von WordPress integriert und mit entsprechenden Templates im einheitlichen Design ausgestattet. Auch hier kommt ausschließlich der WP-eigene Editor zum Einsatz, um möglichst unkompliziert Beiträge erstellen zu können. Das müssen natürlich nicht nur Veranstaltungsberichte sein!
Eine weitere, individuelle Anforderung neben der Statistik war auch eine Projektseite, die mehrsprachig dargestellt werden soll. Da für eine einzelne Unterseite ein Website-weites Mehrsprachigkeits-Plugin zu überdimensioniert ist, habe ich auch hier eine eigene Erweiterung integriert. Die Projektseite wurde mit je einer Unterseite pro Sprache versehen, die automatisch in einem aufklappbaren Sprachwechsel-Element (auf Basis des WP-eigenen „Details“-Blocks) angezeigt werden und die Liste damit beliebig erweiterbar machen.
Zur Veröffentlichung seines Niederrhein-Krimis „Frischer Wind in Kelverath“ brauchte Matthias Terfoorth eine passende Website, um sich und sein Buch vorzustellen. Als Regionalkrimi sollte es ein ländliches Design sein und die Tätigkeit als Autor aufgreifen. Also wählte ich einen Mix aus Holz und verschiedenen Papiertexturen in Kombination mit einer Mischung aus Handschriften und klassischer Buchschrift. Ein zentrales Element der Seite sind die großformatigen „Hero“-Fotos jeweils ganz oben, die die Navigationsleiste mit dem Holz-Hintergrund direkt in Szene setzen.
Für die Darstellung auf Mobilgeräten muss natürlich immer dem geringeren Platzangebot Tribut gezollt werden. Das habe ich durch ein animiertes Menü gelöst. Statt eines klassischen Hamburger-Menüs kommt ein mit CSS erstelltes „Etikett“ zum Einsatz, an dem man per Klick virtuell ziehen kann und so das überlagernde Menü öffnet. Dabei verschiebt sich das Etikett, um dem Ziehen auch optisch gerecht zu werden.
Auf der Startseite sind neben der Kurzvorstellung des Autors natürlich auch direkt Informationen zum Buch zu finden, die jeweils mit weiterführenden Links versehen sind. Auch hier kommt der Etiketten-Look zum Einsatz, der auch beim Seitenlogo ganz oben im Kopfbereich allgegenwärtig ist.
Da die Protagonisten des Krimis in der Redaktion einer Lokalzeitung arbeiten, gibt es natürlich auch dazu ein paar Informationen und eine entsprechende Grafik, die auch im Buch zu sehen ist. Für die Darstellung auf der Website wurde ihre Position etwas angepasst und natürlich die Farbversion gewählt.
Neben dem Autor soll natürlich auch das Buch auf der Website vorgestellt werden. Dafür gibt es eine entsprechende Detailseite, die einen Packshot des Buches mit dem Umschlag von allen Seiten zeigt und den Klappentext präsentiert.
Unterhalb dieser primär relevanten Informationen gibt es auch die üblichen Details zum Buch, wie etwa den Umfang, den Preis und die ISBN, mit denen das Buch im Handel erhältlich ist. Direkt darunter gibt es – erneut im Etiketten-Look – die Links zu den gängigen Online-Shops. Einige mit Sitz im Ausland sind durch entsprechende Länderflaggen markiert. Auch dieses optische Detail wurde mit reinem CSS und sogenannten Pseudo-Elementen gelöst.
Da es sich bei „Frischer Wind in Kelverath“ um einen Regionalkrimi vom Niederrhein handelt, sollen natürlich nicht nur die Online-Shops als Bezugsquelle Aufmerksamkeit bekommen. Eine eigene Unterseite der Website listet alle Buchhandlungen am Niederrhein auf. Diese Liste kann auf Wunsch gefiltert werden, etwa indem man nach einer Postleitzahl oder einem Ort sucht.
Sofern die Buchhandlungen über einen Online-Katalog verfügen, kann das Buch über den Link am Ende jeder Zeile auch direkt online vorbestellt und anschließend im Laden abgeholt werden.
Selbstverständlich gibt es neben den allgemeinen Informationen auch eine explizit an Medienvertreter gerichtete Unterseite. Im Medienbereich stehen eine Pressemitteilung in verschiedenen Formaten und Pressefotos in unterschiedlichen Größen, Auflösungen und Farbmodellen für die Verwendungen in Online- oder eben Printmedien zum Download zur Verfügung.
Und weil auch mit den verschiedenen Unterseiten immer noch nicht alle Infos untergebracht werden können, gibt es zu guter Letzt auch noch eine weitere Seite, auf der alle sonstigen Fragen kurz und bündig beantwortet werden können.
Der „Steinbruch“ an der Lotharstraße in Neudorf ist eine beliebte Mischung aus Café, Kneipe und Biergarten. Dank eines eigenen Konzertsaals gibt es auch ein vielfältiges kulturelles Programm. Das alles sollte beim Relaunch der in die Jahre gekommenen Website berücksichtigt werden. Neben einer optischen Modernisierung – selbstverständlich eng am bisherigen Look und Logo des Steinbruchs orientiert – habe ich dabei auch funktionale Upgrades integriert, etwa die Tischreservierung per Online-Formular.
Ein weiterer wesentlicher Bereich der Website ist die Übersicht der Veranstaltungen. Hier gab es zunächst ein Standardplugin zur Verwaltung, das allerdings immer wieder mit Problemen und umständlicher Bedienung aufgefallen ist. Daher wurde es im Zuge des Relaunchs durch eine maßgeschneiderte Eigenentwicklung ersetzt, die bei Bedarf auch noch variabel erweitert werden kann.
Der Fokus des Designs lag dabei vor allem auf der übersichtlichen Darstellung der Veranstaltungen, um sämtliche wesentlichen Details zu Konzerten und Co. möglichst auf einen Blick erfassen zu können – sowohl in der Übersicht als auch in der Einzelansicht der Termine.
Für das neue Buchprojekt der Autorin Ella Stein habe ich ein individuelles Theme für eine Landing Page entwickelt. Das Design basiert auf dem Cover und den Social-Media-Templates rund um den Roman „Frauenmord in Venberg“, der sich mit dem zentralen Thema Gewalt gegen Frauen auseinandersetzt und dabei auch die Rolle der Gesellschaft und ihrer Werte und Moralvorstellungen hinterfragt.
Dementsprechend soll ein neutrales Grunddesign mit prägnanten Akzenten die Wichtigkeit dieser Thematik unterstreichen. Folgerichtig gehören auch Hintergrundinformationen über die Entstehungsgeschichte des Romans zum Inhalt der Website, die u. a. erklärt, warum sich die Autorin mit dem Thema befasst.
Informationen über die Autorin selbst dürfen selbstverständlich auch nicht fehlen – zumindest in einer Kurzfassung, die zusätzlich auf die umfangreichere Autorinnen-Website verweist.
Zu den weiteren Inhaltselementen gehören neben einer Terminübersicht zudem Einblicke in den im Roman beschriebenen fiktiven Ort Venberg, beispielsweise das Rezept für eine lokale Gebäckspezialität, die im Buch ebenfalls eine Rolle spielt.
Für das Unternehmen meines Bruders Nico Sowa // Sanitär • Heizung • Klima • Lüftung habe ich zur Gründung sowohl das Design des Logos als auch des Internetauftritts übernommen. Die Website wurde ursprünglich mit dem CMS Contao umgesetzt, basiert inzwischen jedoch auf WordPress.
Das Herzstück der Website ist die Online-Terminbuchung. Sie ermöglicht es Kunden, auch außerhalb der Bürozeiten einfach und bequem ihren Wunschtermin zu buchen. Im Laufe des intuitiven Prozesses werden alle notwendigen Fragen bereits geklärt und die verfügbaren Termine zur Auswahl gestellt.
Die Buchung des Termins wird automatisch per Mail bestätigt. In der Bestätigungsmail wird auch ein Link angeboten, über den der Termin ggf. auch wieder verschoben oder abgesagt werden kann. Wird eine Heizungswartung gebucht, lässt sich auch gleich die Erinnerungsfunktion aktivieren, die elf Monate später per Mail an den nächsten bevorstehenden Wartungstermin erinnert.
Darüber hinaus gibt es neben Informationen zur Firma einen Überblick über die diversen Dienstleistungen sowie einige Projektbeispiele. Auch Neuigkeiten aus der Branche werden vorgestellt und allgemeine Themen werden beleuchtet und erklärt.
Für den Autor Matteo Torres habe ich ein individuelles Theme im Design seines aktuellen Thrillers „Und mit mir die Sintflut“ entwickelt. Optisches Highlight ist das „Hero“-Segment mit dem Video einer verregneten Scheibe, auf der leicht transparente Schrift vor den herunterlaufenden Regentropfen im Mittelpunkt steht. Auf der Startseite wird so der Name in Szene gesetzt, auf den Unterseiten ist es jeweils die Überschrift samt verlinkten Breadcrumbs.
Beim Scrollen bleibt das optische Highlight erhalten, indem der „Sticky Header“ am oberen Bildrand fixiert wird.
Unterhalb des Hero-Segments wird auf der Startseite direkt das aktuelle Buch vorgestellt. Neben einer 3D-Ansicht des Taschenbuchs darf natürlich auch der Klappentext und die Preisinformation nicht fehlen. Darunter führt eine Button-Reihe wahlweise zur Detailseite, zum Online-Shop (im Bild mit Hover-Effekt schwarz hinterlegt) und zur Buchhandlungs-Suche (letztere sind jeweils externe Links).
Neben den Detailseiten zum Autor und dem Buch gibt es außerdem eine Liste häufig gestellter Fragen (FAQ), in denen diese samt der dazugehörigen Antwort präsentiert werden. Um das nüchterne Frage-Antwort-Spiel aufzulockern, sind die einzelnen Elemente optisch voneinander getrennt und wechselweise links und rechts angeordnet.
Neben den allseits relevanten Informationen gibt es außerdem Unterseiten für Medien und den Handel. Hier gibt es Hinweise über Pressemitteilungen und -fotos oder Rezensionsexemplare sowie Werbematerial oder Bezugsquellen der Bücher. Um die Informationen übersichtlicher präsentieren zu können, verfügen diese Unterseiten über eine zusätzliche Navigationsleiste, die beim Scrollen am oberen Bildrand unterhalb des Headers stehen bleibt und somit jederzeit mit einem Klick ans Ziel führt.
Für die österreichische Künstlerin Sadie habe ich eine virtuelle Galerie entwickelt, in der sie ihre Werke vorstellt. Dabei handelt es sich in erster Linie um farbenfrohe Mixed-Media-Bilder.
Dementsprechend ist das Design der Website relativ schlicht und zurückhaltend konzipiert, um die Kunst angemessen in den Mittelpunkt zu stellen.
In den Einzelansichten der Bilder gibt es daher neben einer großflächigen Abbildung zusätzliche Informationen u. a. zur eingesetzten Technik sowie Größenangaben. Letztere werden auf der Übersichtsseite genutzt, um die unterschiedlichen Formate in ein passendes Verhältnis zu setzen – so müssen die Bilder beim Upload nicht manuell skaliert werden.
Ebenso ist ein Blog Teil der Website, in dem Sadie über sich und ihre Kunst berichtet. Wer mit ihr Kontakt aufnehmen möchte, kann das bequem über ein entsprechendes Formular tun.
Für den Friseursalon Tepper + Weygardt habe ich den Relaunch der bestehenden Website übernommen. Dabei lag der Fokus vor allem auf einem klaren, schlichten Design, das zum Stil des Salons passt.
Die Website ist allerdings nicht nur optisch schlank gehalten, sondern verfügt auch über eine auf die Bedürfnisse zugeschnittene Struktur ohne CMS im Hintergrund – so werden unnötige Wartungsarbeiten eingespart.
Vor allem geht es bei der Website nämlich darum, den Salon und die Leistungen vorzustellen. Aus diesem Grund gibt es natürlich diverse Fotos mit Referenzen, die sich selbstverständlich auch per Klick in einer Lightbox vergrößern lassen.
Zudem verfügt die Website neben dem aufklappbaren Menü über Schaltflächen am linken Bildschirmrand, die z. B. einen schnellen Zugriff auf das Leistungsangebot ermöglichen. Auch die Terminvereinbarung per Telefon lässt sich auf dem Smartphone per Klick auf einen Button initiieren – die Nummer muss also nicht erst mühsam abgetippt werden.
Einen dynamischen Aspekt hat die Website natürlich auch zu bieten: Oben links wird beim Seitenaufruf angezeigt, ab oder bis wann der Salon geöffnet hat.
Für das gemeinnützige Projekt #1Bild2Geschichten wurde ein Portal benötigt, auf dem sich Autor/innen anmelden und Bilder reservieren können, zu denen sie anschließend Kurzgeschichten schreiben, die ebenfalls über die Website eingereicht werden. Die Grundlage dafür bildet erneut WordPress mit diversen individuellen Lösungen.
Zunächst können sich interessierte Autor/innen über ein rudimentäres Anmeldeformular registrieren und den dadurch angelegten Account über einen per E-Mail empfangenen Bestätigungslink aktivieren. Nach erfolgtem Login kann pro Account eins der zur Auswahl stehenden Bilder reserviert werden.
(Hinweis: Inzwischen ist die erste Projektphase abgeschlossen und die Anmelde- und Reservierungsfunktion nicht mehr aktiv)
In der Übersicht werden reservierte Bilder dementsprechend markiert und „gesperrt“. Eingeloggte User können ihr reserviertes Bild allerdings jederzeit eigenhändig wieder freigeben und dann auch ein anderes, verfügbares Motiv reservieren.
Optisch bilden die insgesamt 100 Polaroids die Grundlage des Designs. Als Hintergrund ergänzt eine Holzplatte den leichten Vintage-Look, im selben Stil sorgt zerknittertes Papier für Akzente. Überschriften und andere hervorzuhebende Textelemente hingegen sind als Gravur im Holz gestaltet.
Sofern Hover-Effekte unterstützt werden (i. d. R. von Laptops etc.), werden Fotos und Papierschnipsel optisch durch Schatteneffekte angehoben.
Für die Autorin Ella Stein habe ich ein individuelles Theme entwickelt. Optisch ist es mit zerrissenem Papier und der stets sichtbaren Illustration am unteren Bildrand an die Notizen angelehnt, die mit der Autorentätigkeit einhergehen.
Im Backend bietet die Website diverse Custom Post Types zur Verwaltung der unterschiedlichen Inhaltselement wie Termine, Presseberichte, Drabbles und natürlich der Bücher.
Außerdem gibt es diverse Custom Fields für konkrete Informationen zu den Büchern etc., beispielsweise Details wie die Seitenzahl, die ISBN-Nummer oder Direktlinks zu Online-Shops.
