Alles so schön neu

 
LightcatcherVom 02. April bis einschließlich zum 05. April 2018 habe ich über 40 Stunden lang an unserem Webauftritt gearbeitet und ihn faktisch vollkommen saniert. Während dieser Zeit war unsere Website für Besucher auch bewusst geschlossen. Doch nun sollte wieder alles erreichbar sein und funkelt zudem in einem niegelnagelneuen Gewand. Im Folgenden möchte ich euch über alle Änderungen informieren:
 

Responsives Layout für Smartphones & Tablets

Inzwischen gehen mehr Leute mit mobilen Endgeräten als mit klassischen Desktop-PCs oder Laptops ins Internet. Somit ist eine fehlerfreie und gut lesbare Darstellung auf Smartphones und Tablets heute so wichtig wie nie zuvor. Im Webdesign ist das allerdings eine große Herausforderung, da man nicht mehr mit fixen Größen arbeiten kann. Man muss also ein Layout erstellen, dass sich nicht einfach nur der entsprechenden Auflösung anpasst, sondern ebenso in der Lage ist, Elemente zu verschieben oder sogar zu verändern.

Und genau das habe ich für unsere Website getan.

Am PC / Laptop könnt ihr es auch direkt ausprobieren, indem ihr das Browserfenster einfach mal zunehmend schmaler zieht. Ihr werdet sehen, dass sich im ersten Schritt die Breite um ein gutes Stück reduziert. Als nächstes verschwindet die Sidebar ans untere Ende der entsprechenden Seite, damit mehr Platz für den Inhalt zur Verfügung steht. Als Letztes verändert sich dann die obere Navigationsleiste in ein aufklappbares Hamburger-Menü (drei übereinander liegende horizontale Striche). Selbstverständlich passen sich auch alle Seiteninhalte dynamisch an die entsprechende Auflösung an. Und zu guter Letzt funktioniert all das sowohl im Hoch- als auch im Querformat.

Somit sind wir mit unserem Webauftritt nun auch für die Zukunft gerüstet und können unseren Lesern – egal worüber sie unsere Seite aufrufen – das bestmögliche Erlebnis bieten.

Webdesign im Sinne unserer Corporate Identity

Unser altes Webdesign war zwar deutlich verspielter und bunter, dennoch habe ich auch eine gewisse Professionalität und Seriösität vermisst. Und da ich vor meinem Studium viele Jahre in der Kreativbranche tätig war (und es teils auch heute noch bin), hatte ich ständig diese Stimme im Kopf, die mir sagte: „Du kannst das noch besser!“
Obwohl mein ursprünglicher Plan also eigentlich nur die Optimierung für mobile Endgeräte war, habe ich das nun auch zum Anlass genommen, um ebenfalls unser Webdesign von Grund auf zu erneuern.

Und dabei bin ich nun auch so vorgegangen als würde ich mit dieser Seite nicht nur eine Gilde, sondern ein echtes Unternehmen präsentieren. Dies zeigt sich nun vor allem darin, dass sämtliche Elemente einen einheitlichen Stil haben, der mit unserem Logo und Schriftzug Hand in Hand geht. Hier eine detaillierte Auflistung:

  • Unsere Farbpalette ist nun deutlich reduziert und somit angenehmer für die Augen. Die Basis bilden dabei Grauwerte in verschiedenen Helligkeitsabstufungen. Reines Schwarz oder auch reines Weiß existieren gar nicht mehr. Als Akzentfarben kommen dann noch Gold und an ausgewählten Stellen ein schönes Grün zum Einsatz. Die Farbe Grün stellt dabei eine Assoziation zum Thema „Jäger“ her.
  • Mindestens ebenso wichtig wie die Farbpalette ist im Webdesign (in Printmedien natürlich ebenso) die Typographie. Also der richtige Einsatz von Schrift bzw. Schriftarten. Denn auch hier gilt: Weniger ist mehr!
    Da auf Bildschirmen serifenlose Schriften eine bessere Lesbarkeit gewährleisten, habe ich auch eine serifenlose Schrift für alle normalen Fließtextelemente gewählt. Einen angenehmen Kontrast bilden dabei sämtliche Überschriftenelemente, welche sich nun in einer Versalschrift mit Serifen zeigen. Die Versalschrift ist auch nicht irgendeine, sondern exakt die selbe Schrift, die auch unseren Schriftzug im Header bildet.
  • Der Websitenhintergrund rechts und links des Inhaltsbereiches ist nun ebenfalls viel dezenter als früher. Ich habe mich für eine ganz leichte Lederstruktur in sehr hellem Grau entschieden. Das bietet mehr fürs Auge als eine reine Graufläche und passt außerdem ebenfalls zum Thema „Jäger“. Da die Struktur nur ganz leicht zu erkennen ist, überfordert es den Betrachter auch nicht so sehr, wie unser alter Hintergrund.
  • Zu guter Letzt beginnt nun jede Haupt- und Unterseite mit einem passend gewählten Artikelbild in einer einheitlichen Größe. Denn auch das hilft dabei, dass alles wie aus einem Guss wirkt, wodurch der professionelle Eindruck weiter gesteigert wird.

Überarbeitete und neue Inhalte

Als wäre all das nicht schon genug, habe ich schließlich die Gelegenheit genutzt, um endlich auch an die vielen inhaltlichen Baustellen der alten Website heranzugehen. Das ging soweit, dass nun ausnahmslos jede Haupt- und Unterseite textlich entweder in Teilen oder sogar komplett erneuert wurde. Desweiteren sind auch neue Seiten hinzugekommen und mit Gildenhalle sogar eine ganz neue Kategorie. Auf der Startseite findet sich nun außerdem ein Slider, über den man direkt zu den Seiten kommt, welche für neue Besucher und an der Gilde interessierte Personen am wichtigsten sind.

Als ganz besondere Neuerung möchte ich unser Manifest erwähnen, welches wir in den letzten Monaten und Teambesprechungen erarbeitet haben. Hierzu folgt in Kürze noch ein eigener Newseintrag und ein Video auf Youtube.

Schaut euch ruhig mal ausgiebig auf der Website um und stöbert durch alle Veränderungen. Hier noch die Auflistung der ganz neuen bzw. vollständig ersetzten Seiten:

Danksagungen

Schließen möchte ich diesen Beitrag mit einem dicken Danke an Valentin und Steffen. Beide haben ihre Zeit investiert, um mich als zusätzliche Augenpaare zu unterstützen. In so einem aufwändigen Umgestaltungsprozess kann man teilweise durchaus betriebsblind sein und da ist es eine sehr große Hilfe, wenn noch jemand da ist, damit nichts übersehen wird. Außerdem waren die Gespräche mit den beiden eine sehr angenehme Auflockerung. Also: DANKE!

Und nun wünsche ich allen alten und neuen Gästen auf unserer Website viel Vergnügen.
Bis zum nächsten Blogpost!

PS: Um unser altes Webdesign trotzdem in Ehren zu halten und damit ihr natürlich auch einen Vergleich habt, hier noch ein hochauflösender Screenshot (Bild ist anklickbar) des alten Looks:

 

– Lightcatcher

05.04.2018