Unsere Agenturseite im neuen Gewand

annademianenko 17. Dezember 2013

Dem aufmerksamen Besucher dürfte es nicht entgangen sein, dass sich das Antlitz unserer Agenturseite seit Kurzem grundlegend geändert hat. Wie es dazu kam: Bei unserem Besuch auf der Mediale Hamburg im September, haben wir im Team über den aktuellen Stand unserer Seite philosophiert und kamen schnell zu der Erkenntnis, dass sich einiges durchaus noch verbessern ließe. So haben wir gemeinsam entschieden, dass wir noch in diesem Jahr die ersten Entwürfe für einen Relaunch, der in seiner Fertigstellung eigentlich erst für Januar/Februar 2014 geplant war, zu erstellen.

4eck Media vor dem Relaunch 2013

Gesagt, getan. In den vergangenen Wochen habe ich mich neben den laufenden Projekten damit befasst, was man auf unserer Seite besser machen könnte. Hierbei sollte nicht nur die Optik, sondern auch die Funktionalität, also die Technik hinter und vor der Seite, nochmals überarbeitet und verbessert werden. Flat und Responsive Design sind u.a. Schlagworte, die dem webaffinen Nutzer geläufig sein sollten. Eine reduzierte Gestaltung mit dem Fokus auf das Wesentliche, dem Inhalt und der Anpassung an die mittlerweile unüberschaubaren Endgeräte – wobei einige jQuery-/CSS3-Effekte dann doch nicht fehlen sollten. Hinfort also mit der hellblauen Hintergrundtextur, den Origami Figuren sowie Falteffekten und auf zu neuen Ufern. Ahoi!

Der erste Entwurf der Startseite

In relativ kurzer Zeit habe ich dem Team also die ersten Entwürfe der Startseite präsentiert, welche wir anschließend besprochen und weitestgehend für gut befunden haben. Lediglich bei der Wahl der Farben waren wir uns nicht auf Anhieb einig. Den hellblauen Hintergrund wollten wir definitiv verbannen, soviel stand fest. Jedoch sollte die Seite insgesamt nicht zu trist, aber auch nicht zu bunt erscheinen. Grautöne zur Gestaltung von Flächen und als „Akzentfarbe“ Orange, so fanden wir, sei ein guter Mix, der auch unserem Corporate Design entspricht.

Die Startseite sollte ein großes Bild im Kopfbereich zieren. Beim Designprozess war ebenfalls angedacht, dass man aus dem statischen Bild auch eine Slideshow für mehr Dynamik oder sogar ein vollflächiges Video dort unterbringen könnte. Der Gedanke wurde aber erstmal wieder verworfen und wir entschieden uns, dass wir zwar ein Bild für den Header haben wollen, jedoch keine Slideshow. Da wir uns aber auch nicht gegen ein Video entscheiden wollten hatte Matthias die Idee, dass wir hier auch einen kleinen „Imagefilm“, welcher uns und unsere Tätigkeiten beschreibt, einbinden könnten. Eine super Idee! Der Chef hatte sich selbst in die Pflicht genommen und kurzerhand einen kleinen „Film“ in After Effects erstellt, den man jetzt auf der Startseite bestaunen kann. In Anlehnung an einen Desktop/Monitor hat das Video einen Rahmen erhalten.

Zur Navigation, welche ebenfalls im Kopfbereich zu finden ist: Die Menüpunkte wurden neu strukturiert, außerdem bleiben diese beim Scrollen „fix“ am oberen Rand und ermöglichen somit eine schnellere und gezielte Navigation durch die einzelnen Seiten, ohne bis zum Seitenanfang scrollen zu müssen – auf dem Smartphone und Tablet wird allerdings darauf verzichtet.

Nachtrag: Mit dem Update des „Jetpack-Plugin“ hat man nun die Möglichkeit es auf der Seite schneien zu lassen. Eigentlich ein Effekt den ich nicht so gerne mag, der jedoch optimal zur aktuellen Jahreszeit passt. Weihnachten steht vor der Tür! Mein Kollege Pascal hatte daraufhin die Idee, den Hafen der Müritz, welcher anfänglich im Kopfbereich seinen Platz fand, durch ein winterliches Motiv zu ersetzen. Was ich fast vergessen habe, der besondere Clou: Um 18 Uhr wechselt das Motiv von der Tages- zur Nachtansicht und um 9 Uhr wieder zur Tagesansicht.

Der Teaser-Bereich ist im Wesentlichen erhalten geblieben und bietet einen direkten Einstieg zu unseren Referenzen, Projekten und zu Informationen über unsere E-Learning-Plattform PSD-Tutorials.de. Auf Bildmaterial haben wir hier verzichtet und 3 Icons gewählt, die die jeweiligen Punkte gut zur Geltung bringen.

Auch unsere Blogartikel, in denen wir über unsere Referenzen, Projekte und sonstige Aktivitäten berichten, ist jetzt wesentlich prominenter. Der Menüpunkt „Blog“ hat außerdem seinen eigenen Platz in der Navigation erhalten und ist jetzt direkt erkenntlich.

Im Fussbereich findet man die sogenannten und üblichen Meta-Informationen. Ach ja, wie eingangs bereits erwähnt: jQuery. Beim Klick auf den Menüpunkt „Kontakt“, im Kopf- oder im Fussbereich, wird das Kontaktformular automatisch von unten ausgeklappt. Dies ermöglicht unseren potentiellen, aber auch Bestandskunden, einen direkten Kontakt zu uns, egal auf welcher Seite man sich gerade befindet. Durch einen weiteren Klick auf „Kontakt“ – oder das „X“ zum Schließen – wird das Formular wieder zusammengeklappt.

Das Mixitup-Plugin

Um Ihnen jedoch noch die Möglichkeit zu geben, Neues zu entdecken und nicht alles vorweg zu nehmen, fasse ich den Rest der Neuerungen kurz zusammen.

Was sonst noch zu erwähnen wäre

  • schmaleres Bild im Kopfbereich, auf den Unterseiten, welches ebenfalls um 18 Uhr abends bzw. um 9 Uhr morgens wechselt.
  • die Überschriften und Teasertexte, zum Inhalt der jeweiligen Seite, werden von oben im Kopfbereich eingeblendet.
  • die Teamansicht kommt geordneter daher, um einzelne Mitarbeiter direkt zu erreichen wurde die jeweilige E-Mail-Adresse hinterlegt.
  • die Übersicht der Leistungen wurde ebenfalls angepasst, die jeweiligen Bildelemente werden von links bzw. rechts mit Hilfe von jQuery und CSS3-Animationen eingeblendet.
  • unsere Referenzen und Projekte erhielten ebenfalls eine neue Anordnung, so fielen die Überschriften und Teasertexte weg. Beim Hover über das jeweilige Bild steht dort der Name sowie das Datum der jeweiligen Referenz bzw. des Projekts. Die Referenzseite hat außerdem ein sogenanntes „Mixitup“, ein Plugin auf CSS3/jQuery-Basis erhalten, um die Referenzen nach ihren jeweiligen Leistungen zu sortieren.
  • auf den dazugehörigen Unterseiten findet man eine ausführliche Beschreibung zum gesamten Projekt, einen Slider, welcher sich auf Smartphones und Tablets auch mit den Fingern bedienen lässt, mit Bildmaterial, sowie einen Infotext, einer Leistungsübersicht und Kundenstimme. Über das Icon der „Weltkugel“ lässt sich die Seite nun direkt aufrufen. Der Aufbau der Referenzen ist ähnlich, wobei hier nur auf das „Mixitup“ auf der Übersichtsseite verzichtet wurde.
  • im Blog findet man nun die letzten 6 Artikel mit Artikelbild, die übliche Sidebar mit „Kategorien, Archiv und den letzte Beiträge“ ist nun unterhalb der Artikel bzw. Pagination platziert, außerdem eine Suche im oberen, bei Artikeln im unteren Bereich, um schnell nach weiteren Artikeln suchen zu können.

Referenzen Icon

Im Grunde sind dies auch schon die nennenswertesten Neuerungen, welche aber einen großen Bestandteil ausmachen. Vieles spielt sich zudem noch „unter der Haube“ bzw. im Backend ab. Vom Anlegen der Leistungen bis hin zum Einstellen der Referenzen und Projekte. Wie auch bei unseren Kundenprojekten haben wir bei unserer Agenturseite auf das Content-Mangement-System „WordPress“ gesetzt.

Abschließend bleibt mir nur noch zu sagen, dass wir im Team, aber besonders ich, sehr stolz auf das Ergebnis sind und wünschen Ihnen – liebe Leser – und unseren Kunden/Partnern viel Spaß beim Surfen und Entdecken auf unserer neuen Webseite im frischen Gewand, ein frohes und besinnliches Weihnachtsfest, einen guten Rutsch sowie ein erfolgreiches Jahr 2014!

Zum Seitenanfang