Referenzen
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.
Bei dieser Autoren-Website handelt es sich um ein insgesamt schlichtes Setup, das die Standard-Funktionen von WordPress lediglich um Custom Post Types für die eigenen Veröffentlichungen und Buchempfehlungen erweitert.
Erwähnenswert sind allerdings ein paar kleinere Funktionen auf PHP-Basis. So verändert sich z. B. die Farbe des großflächigen Himmels im Kopfbereich der Webseiten in Abhängig der Tageszeit und Blog-Artikel werden automatisch mit einer geschätzten Lesezeit versehen, die in Abhängigkeit der Wortanzahl des Textes berechnet wird.
Für Freunde von Krimispielen oder einem „Murder Mystery Dinner“ könnte Mordsnacht einen Blick wert sein. Die Website bietet kostenlose Online-Spiele, um gemeinsam mit Freunden als einer der Verdächtigen einen Mordfall zu lösen.
Als Grundlage dient das CMS WordPress, das mit Custom Taxonomies und Custom Fields individualisiert wurde. Die Spiel-Funktion mit passwortgeschützten Bereichen ist allerdings nicht Teil der WordPress-Installation.
Abgesehen von den Fotos kommt fast ausschließlich CSS für grafische Details (z.B. Büroklammer, Stecknadel) und die Animationen zum Einsatz.
