Webseite-Homepage für Bioladen in Berlin

Neulich habe ich Korinna, eine Berliner Freundin, die einen Bioladen betreibt, besucht. Während des Besuches kam das Gespräch irgendwann auch auf ihre Webseite, das haben Gespräche mit Webdesignern häufig so an sich. Sie hat seit einigen Wochen eine neue Webseite und hat mir mir gezeigt, was sie mit WordPress selbst gemacht hatte. Eine einfache Webseite für einen Bioladen, bei der sie das WordPress-Theme “Twentysixteen” nutzte und es selbst ein wenig umgestaltet hatte. Im Grunde nicht schlecht und ich bin immer wieder erstaunt, wie leicht man mit WordPress – ohne Programmierkenntnissen – eine Homepage leicht selbst gestalten kann. Trotzdem war sie nicht zufrieden mit dem Ergebnis. Ich habe die Seite dann mit ein paar Stunden an zusätzlicher Designarbeit bzw. Programmierung überarbeitet. Hier das Ergebnis und die Erklärungen, wie ich vorgegangen bin um es zu erreichen.

Bevor wir aber in die Details gehen, ist es vielleicht besser erst mal zu zeigen, was Korinna selbst als Homepage für ihren Bioladen entworfen hatte, und was ich dann daraus gemach hatte. Sie ist natürlich selbst weder Expertin für Webseiten noch Designerin noch Werbefachfrau, sondern führt einen Bioladen. Irgendjemand hatte im Laufe der Jahre eine Zeichnung für den Bioladen angefertigt (eine stilisierte Landschaft mit Haus und aufgehender Sonne) und diese Zeichnung ist jetzt sozusagen das Kernstück von Korinnas Corporate-Identity. Dementsprechend ist die Webseite, die sie gemacht hatte, auch in den Farben der Zeichung. Viel orange und der schwarze Rand, den das Twentysixteen-Theme zur Verfügung stellt, wurde von ihr im WordPress-Customizer grün eingefärbt. Unter den Header kam dann ein Foto des Ladens und Bingo. die Webseite war fertig. ;) Im Grunde sah es nicht schlecht aus, aber ich habe ihr gesagt, dass man mit relativ wenig Aufwand der Ergebnis noch deutlich verbessern könnte und die Webseite für ihren Bioladen würde deutlich professioneller wirken.

VORHER

NACHER

Meine Änderungen waren relativ einfach: Zunächst ein Mal habe ich ein Child-Theme installiert, damit meine Änderungen bei einem Update des Twentx Sixteen-Themes nicht überschrieben würden. Danach gab es im Header einige, kleine Positionsverschiebungen. Die Überschrift “Naturpur Bioladen & Bistro” erhielt eine eigene Schrift (Google-Fonts) und wurde im Rot der Zeichnung eingefärbt.

Dann habe ich noch ein Slider-Plugin istalliert (Für Slider nehme ich immer gerne den Smartslider 3, weil er sehr einfach zu bedienen und erweitern ist.) und im Headerbereich die Bilder des Ladens kleiner eingeblendet. Die kleinere Darstellung ist etwas dezenter und hat den Vorteil dass die leicht unscharfen Bilder etwas besser dargestellt werden.

Dann war ich bereits fast fertig. Die Schriften, die das Twenty Sixteen – Theme nutzt, erscheinen mir für einen Bioladen nicht besonders passend und daher habe ich sie gegen andere Google-Fonts (Oswald und Open Sans) ersetzt. Die Überschriften wurden etwas verkleinert, da nutzt das Twenty Sixteen doch eine relativ große (für mich zu große) Darstellung. Damit alles der DSGVO entspricht, habe ich die Google Fonts lokal abgespeichert und einen Cookies-Hinweis installiert. Auch die Farbe der Links habe ich im CSS angepasst. Am Ende habe ich auf der Startseite (in der Ansicht auf Desktop) die einzelnen Teaser, die mit der WordPress-Funktion “the_excerpt” gemacht werden, in zwei Spalten nebeneinander gestellt und ein wenig per CSS gestylt. Auf Tablet oder Smartphone ist die Darstellung aber einspaltig, sonst wäre nicht genug Platz vorhanden um die Texte lesbar und schön darzustellen. FERTIG. ;)

Ups, ein kleines aber wichtiges Detail habe ich vergessen: Ich habe einen Hintergrund in die Seite eingebaut. Und zwar habe ich das Motiv der Sonnenstrahlen aus dem Bild rausgenommen, habe es im Photoshop nachgebaut und als Layer im Hinterund über CSS eingeblendet. Das macht die Seite etwas lebendiger und es gibt weniger unstrukturierte, orangene Fläche.

Mit einigen, kleinen Änderungen konnte ich das Twenty Sixteen-Theme von WordPress also optimal nutzen und das Ergebnis sieht meiner Meinung nach sehr toll aus. Wer sich selbst überzeugen möchte: Hier geht es zu Naturpur.