Die S-Finanzdienstleistungs-GmbH, kurz FDL, hat sich ein neues digitales Gesicht gegeben. Modern, sympathisch und kompetent präsentiert sich der Fullservice-Anbieter für Immobilien und Versicherungen. Das dokumentiert auch der neue Claim „Für alles, was Ihnen wichtig ist“.

Mit der neuen Website will die FDL Ihren Kunden und Interessenten einen schnellen und doch umfassenden Überblick über ihr vielfältiges Leistungsspektrum bieten. Neben einem Angebot exklusiver und attraktiver Immobilien für Interessenten bietet die FDL Immobilienverkäufern profunde Kenntnisse des Mülheimer Immobilienmarktes. Die Versicherungsspezialisten der FDL beraten Ihre Kunden in der richtigen Vorsorge für einen sorgenfreien Ruhestand und in der Absicherung des Sach- und Anlegevermögens. „Für alles, was Ihnen wichtig ist.“

Die von Q:MARKETING konzipierte und entwickelte Website bietet dem Interessenten und Kunden vielfältige Dialogfunktionen. Sie greift im Immobilienbereich über eine Schnittstelle auf das Immobilienverwaltungsprogramm (Fioport) der FDL zu und bietet dem Interessenten so das jeweils aktuelle Immobilienportfolio der FDL. Versicherungskunden haben die Möglichkeit, über die Website komfortabel einen Beratungstermin zu vereinbaren oder mögliche Versicherungsschäden zu melden.

Die Website ist responsiv umgesetzt und damit auch Smartphone- und Tablet-optimiert. Die Pflege der Website kann mit Hilfe des Content Management Systems durch FDL selbst erledigt werden.

Zur FDL-Website

Für eine auf dem australischen Markt vertriebene Kosmetik-Handelsmarke unseres neuen Kunden Maxim Markenprodukte geht in diesen Tagen eine von Q:marketing entwickelte mobile Landingpage online. Die Landingpage bietet Nutzern und Interessenten des Hautpflegeproduktes wertvolle Informationen über die Pflegelinie, darin verwendete Inhaltsstoffe sowie zur Anwendung des Produkts. Ein QR-Code auf der Verpackung führt den Verbraucher zur mobilen Landingpage.

Q:marketing übernahm in diesem Projekt die Gestaltung und technische Umsetzung der Landingpage sowie das Hosting.

Die Firma Maxim Markenprodukte ist ein innovativer Hersteller von Eigen- und Handelsmarken kosmetischer Produkte mit Sitz in Pulheim. An vier Standorten in Deutschland, Frankreich und Luxemburg, entwickeln und produzieren heute über 700 Mitarbeiter nahezu alle Produkte aus den Bereichen der Körper-, Gesichts-, Haar- und Mundpflege. Optimal ausgestattete Laboratorien und hochqualifiziertes Personal garantieren innovative und anspruchsvolle Kosmetik-Kreationen.

Lichtschalter in einer neuen Dimension.

Die neue Version der Busch-Jaeger Lichtschalter App “zaubert” virtuelle Lichtschalter auf die eigenen vier Wände.

Den gewünschten Lichtschalter schon an der Wohnzimmer-Wand sehen, noch bevor er installiert ist? Das wird nun mit Hilfe der BUSCH-JAEGER Lichtschalter App möglich. Der neue 3D-LiveView wandelt ein an der Wand befestigtes Trackingmotiv in einen täuschend echt aussehenden Schalter. Der Nutzer kann diesen nun aus verschiedenen Perspektiven dreidimensional begutachten – verblüffend realistisch.

Q:marketing hat diese Augmented Reality App entwickelt und stärkt die Marke BUSCH-JAEGER mit dieser innovativen Art der Produktpräsentation. Mit Hilfe der erweiterten Realität (Augmented Reality) können virtuelle Objekte in die reale Umgebung „gezaubert“ und mit digitalen Mehrwerten versehen werden, was völlig neue Möglichkeiten für Marketing und Vertrieb bietet. Die App ist für iOS und Android kostenlos verfügbar. Das Trackingmotiv kann über einen Link in der App oder direkt über die Busch-Jaeger Website heruntergeladen werden.

Dank des klaren Nutzens erfreut sich die App großer Beliebtheit und wird kontinuierlich weiterentwickelt. Als nächstes ist eine Tablet-Version für iOS geplant. Und sicher werden auch die AR-Features weiter ausgebaut.

Mehr Info

Jetzt selbst erleben:
App Store | Play Store

Seit inzwischen fast 14 Jahren arbeitet unsere Agentur an der Entwicklung und Stärkung von Marken unserer Kunden.

Starke Marken stellen sich dem Wandel. Nicht zuletzt die Evolution der digitalen Welt macht es erforderlich, den eigenen Markenauftritt kontinuierlich weiterzuentwickeln. Daher haben wir nun erstmals seit unserer Gründung im Jahr 2000 unser eigenes Corporate Design überarbeitet. Ab sofort präsentiert sich Q:MARKETING in einem brandneuen, frischen Erscheinungsbild.

Das neue Logo ist eine reine Wortmarke, umgesetzt in starken Lettern. Das grafisch abgesetzte Wort „Marke“ stellt unsere Kernkompetenz, die Stärkung der Marken unserer Kunden, in den Vordergrund. Durch das Zusammenrücken der einzelnen Buchstaben und durch Variation der Grundlinien entsteht ein dynamisches Bild, durch die blockige Typografie Kraft. Die Hausfarbe ist ein starkes, signalhaftes Orange. Als Hausschrift kommt die Corporate S zum Einsatz.

Info: Dieser Beitrag ist Teil einer Artikelserie, in der wir über die Entstehung der Website wohnbau-derr.de berichten. Hier geht es zur Einleitung.

Nachdem wir im ersten Teil der Serie über das Entstehen des Konzeptes berichtet hatten und im zweiten Teil einen Einblick in die Erstellung der Screendesigns gaben, beschäftigen wir uns nun im dritten und letzten Teil der Serie mit der eigentlichen Umsetzung der Website.

Die Verwendung der Screendesigns

Die aus Phase 2 vorliegenden Bildschirmansichten wurden einzeln nacheinander auf wiederkehrende Elemente und auf mögliche Umsetzungsarten untersucht.

Alle Grafiken, die im späteren Verlauf auf der Seite eingebunden werden sollten, mussten als einzelne Bilder aus den Screendesigns exportiert werden. Dabei sind allerlei Dinge zu beachten: Einerseits müssen Dateigrößen soweit wie möglich reduziert werden um die Menge an zu übertragendem Datenvolumen beim Seitenaufruf gering zu halten (hiervon profitieren vor allem Smartphone-Nutzer). Anderseits müssen Grafiken groß genug abgespeichert werden um auch auf hochauflösenden Bildschirmen gestochen scharf zu wirken.

Dateiexport aus Fireworks

Ebenso muss an dieser Stelle entschieden werden welche grafischen Elemente der Seite ausschließlich mit Bildern umgesetzt werden und welche durch aktuelle Technologien, beispielsweise durch neue CSS-Features auch ohne Grafiken umsetzbar sind.

Button; vor einiger Zeit noch ein klarer Fall für eine Hintergrundgrafik, mittlerweile aber wesentlich flexibler durch CSS3 umsetzbar.

Statische Templates

Im nächsten Schritt geht es an die Umsetzung der einzelnen Screens in statische HTML-Templates.
Mit HTML, CSS und Javascript entstehen aus den einzelnen Ansichten die bisher nur als Grafiken vorlagen, funktionsfähige Templates, die sich im Browser öffnen lassen.

In diesen statischen Templates werden schon Funktionen wie der große Slider auf der Startseite oder andere Animationen umgesetzt. Auch Elemente wie die interaktive Standortkarte entstehen in dieser Phase.
Die Inhalte werden vorerst mit verschiedenen Platzhaltern versehen um zu beobachten, wie sich die Seite später dem dynamischen Content anpasst.

An dieser Stelle beginnt auch das Testen über verschiedene Browser (-versionen), und Bildschirmauflösungen hinweg.
Um diese Tests so komfortabel und übersichtlich wie möglich durchzuführen, setzten wir das Tool Browserstack ein. Dies ist eine Online-Plattform, die es ermöglicht, über den Browser Zugriff auf virtuelle Maschinen zu bekommen, die wiederum diverse andere Browser in der jeweils gewünschten Version ausführen und anzeigen.

Für neue Technologien, die von älteren Browsergenerationen nicht unterstützt werden, müssen Fallbacks geschaffen werden um trotzdem eine einwandfreie Darstellung zu gewährleisten. Dafür setzten wir unter anderem für die älteren Versionen 7 und 8 des Internet Explorers jeweils eigene Stylesheets ein.

Fallback für Browser, die animierte SVG-Dateien im Slider auf der Startseite nicht unterstützten.
Hier im Vergleich Internet Explorer 8 und Chrome 29

Das Javascript-Tool „Modernizr“ fand ebenfalls Anwendung, um den vom Nutzer verwendeten Browser auf Unterstützung von verschiedenen Features zu überprüfen und an einigen Stellen eine Weiche zu schaffen. Diese ermöglicht es uns auf fehlende Features zu reagieren und die Darstellung dementsprechend anzupassen.

Die Website sollte dem responsiven Ansatz folgen, sich also automatisch an der jeweiligen Bildschirmgröße anpassen.
Um sicher zu stellen, dass die Seiten auch wirklich auf jeder Gerätegröße voll funktionsfähig sind und optimal dargestellt werden, musste sehr viel getestet werden.

Dynamisierung der Templates

Nachdem die statischen Templates fertig gestellt und sämtliche Tests abgeschlossen wurden, mussten die Templates mit dem Content Management System (CMS) „verheiratet“ werden.

Die Verwendung eines Content Management Systems ist bei Websites ab einem gewissen Umfang, auf denen der Inhalt häufiger aktualisiert oder geändert werden können soll unumgänglich.
Die Website für Wohnbau DERR setzten wir mit dem CMS Typo3 um.

Typo3 Backend

Über die Template-Engine TemplaVoila, welche als Extension für Typo3 zur Verfügung steht, wurden die einzelnen statischen Templates geladen und sämtliche Stellen die dynamischen Content beinhalten können wurden gemappt. Das bedeutet, sie wurden durch dynamische Platzhalter ersetzt über die im Backend bequem der Inhalt erstellt und bearbeitet werden kann.

Einige Features der Seite sind nicht allein mit Typo3 umsetzbar. An diesen Stellen wurden von uns eigene Extensions entwickelt.
So wurden von uns beispielsweise Scripte programmiert, die eine Schnittstelle vom Typo3-Backend zu großen Immobilienportalen (ImmobilienScout24, Immonet, Immowelt und weitere folgen noch) darstellen. Dadurch wird es ermöglicht, dass die von Wohnbau DERR in der Rubrik „Angebote“ eingestellten Wohnungen automatisch auch gleichzeitig auf diesen Portalen veröffentlicht werden.
Auch für die Verwaltung von Formularen oder aktuellen Meldungen kamen unter anderem eigene Extensions zum Einsatz.

Damit sind die Arbeiten so gut wie abgeschlossen und die Seite wird in den nächsten ein bis zwei Wochen online gehen.
Edit: Yes, we’re online!

Sie planen einen neuen Internetauftritt oder möchten einen bestehenden überarbeiten?

Sprechen Sie uns gerne an

Kontakt Q:
Sascha Wenning
Telefon: 0208 3015525
sascha.wenning@Qmarketing.de

Vom Regen am vergangenen Samstag ließ sich unser 20-köpfiges Team nicht abschrecken. Ganz im Gegenteil: Von Rennen zu Rennen verbesserten wir unsere Zeit und belegten im B-Finale des PVS-Cups einen beachtlichen und hochverdienten 2. Platz! Weiter so! Im nächsten Jahr sind wir wieder dabei – und noch schneller.

Info: Dieser Beitrag ist Teil einer Artikelserie, in der wir über die Entstehung der Website wohnbau-derr.de berichten. Hier geht es zur Einleitung.

Nachdem das Konzept erarbeitet und der grobe Bildschirmaufbau abgestimmt war, ging es in die nächste Projektphase: das Screendesign. Die Gestaltung soll das moDERRne Image des Unternehmens stützen und den Leitsatz “Moderrnes Wohnen hat Tradition.” unterstreichen. Dabei gab es keine konkreten Vorgaben, so dass wir uns grundlegend neue Gedanken zum optischen Erscheinungsbild machen konnten. Wir wählten dabei einen Ansatz, der aktuelle Webdesign-Trends mit alt-bewährten Konzepten kombiniert. Große Bilder und Schriftgrößen, mutiger Einsatz von Farbe und Flächen kombiniert mit ausreichend weißem Freiraum und einer optimalen Darstellung für verschiedene Bildschirmauflösungen und Endgeräte sollen den Charakter der Site prägen. Dezente Animationen werden eingesetzt, um die “User Experience” steigern.

Zunächst wurden Farben und Schriften definiert und danach die einzelnen Seitentypen.

Farbwelt

Das Farbklima besteht aus den Primärfarben blau, grün und braun mit jeweils verschiedenen Abstufungen. Als Sekundärfarben, die hauptsächlich für Call-to-action Schaltflächen eingesetzt werden sollen, dienen orange und gelb. Entstanden ist ein harmonischer Farbkanon.

Typografie

Bei der Auswahl der Schriften lagen die Anforderungen auf Lesbarkeit und Harmonie. Durch den Einsatz moderner Webtechnologie ist es inzwischen möglich, individuelle Fonts einzusetzen. Vorbei die Zeit, als Arial und Times das Schriftbild dominierten. Unsere Wahl viel auf die Schriften “Baumans” und “Abel”. Beide sind frei verfügbare Fonts, die bei Google Webfonts angeboten werden.

Die Startseite

Die Homepage einer Website stellt hohe Anforderungen. Nutzer müssen sich auf Anhieb zurechtfinden und erkennen, welche Möglichkeiten ihnen geboten werden. Gleichzeitig muss die Homepage die Marke transportieren und den Benutzer emotional ansprechen und “abholen”. Gefragt ist eine Kombination aus Emotionalität und Funktionalität.

Die Seite ist so konzipiert, dass der Nutzer mit großen, fast bildschirmfüllenden Kampagnenmotiven angesprochen wird. Den Hauptzielgruppen “Interessenten” und “Mieterschaft” werden Buttons angeboten, über die sie direkt in die für sie relevanten Bereiche gelangen. Durch vertikales Scrollen gelangt der Nutzer zu modulartig aufgebauten Themenbereichen wie aktuelle Angebote, Mieter-Service und Informationen zum Unternehmen. Durchdacht: scrollt der Nutzer noch unten, verkleinert sich die Hauptmenüleiste, so dass mehr Bildschirmplatz für den Inhalt zur Verfügung steht.

Im unteren Bereich gibt es den obligatorischen Footer, der dem Nutzer zusätzlich zur Orientierung dient. Außerdem ist dieser Bereich wichtig für die Suchmaschinenoptimierung (SEO).

Rubrik-Startseiten

Aufgabe einer Rubrik-Startseite ist es, den Nutzer auf interessante Bereiche in einer Kategorie hinzuweisen. Zusätzlich soll auch hier das Image des Unternehmens transportiert werden. Auffällig hier ist auch das großzügige Untermenü, das eine leichte Orientierung fördert.

Content-Seite

Die Inhaltsseite legt den Fokus auf redaktionellen Text. Hier soll der Nutzer die Detailinformationen erhalten, die er erwartet.
Dabei gilt: je weniger Text desto besser, da der Lesekomfort am Bildschirm geringer ist als auf Papier. Rubrikübergreifende Teaserboxen sollen den Leser dabei aber auch in andere Bereiche der Site leiten.

Wohnungsangebote

Aus wirtschaftlicher Sicht ist dies die wichtigste Seite des Auftritts. Denn hier soll der aktuelle Wohnungsleerstand vermarktet werden. Nun ist Wohnbau DERR in der komfortablen Situation, dass es im Schnitt nur um die 15 freie Wohnungen gibt. Darum haben wir die Suchfilter auf die Auswahl des Standortes begrenzt, damit die Suche nicht zu feinteilig wird. Ziel ist es, dem Suchenden möglichst schnell zu signalisieren, ob es für ihn relevante Angebote gibt. Die Darstellung der Treffer ist nach Städten gruppiert und liefert auf den ersten Blick die wichtigsten Eckdaten.

Wohnungsangebote – Detailseite

Möchte ein Interessent mehr zu einer Wohnung erfahren, so hat er auf dieser Seite die Gelegenheit dazu. Große Bildansichten, eine komplette Übersicht aller Eck- und Beschreibungsdaten inklusive Anfrageformular und Kontaktdaten zu einem Ansprechpartner stehen zur Verfügung.

Weitere Specials – Standortkarte und Historie

Für die Darstellung der Standortkarte und der Unternehmenshistorie haben wir weitere individuelle Templates erstellt. Die Standortkarte soll eine Einordnung des “DERR-Gebietes” in den bundesweiten Kontext ermöglichen. Die Historie haben wir als interaktiven Zeitstrahl umgesetzt.

Geräteübergreifende Nutzung – Responsive Design

Der Zugriff auf das Internet erfolgt schon heute zu einem großen Teil über mobile Endgeräte. Tablets und Smartphones sind zum ständigen Begleiter geworden. Darum ist es wichtig, dass eine Website auf unterschiedlichen Geräten und Displaygrößen optimal dargestellt wird. Responsive Design lautet das Stichwort. Wie sich die Website von Wohnbau DERR auf verschiedenen Displaygrößen verhält, zeigen wir Ihnen hier:

Im nächsten Teil berichten wir über die technische Umsetzung.

Sie planen einen neuen Internetauftritt oder möchten einen bestehenden überarbeiten?

Sprechen Sie uns gerne an

Kontakt Q:
Sascha Wenning
Telefon: 0208 3015525
sascha.wenning@Qmarketing.de

Im Interview mit der Zeitschrift “Print & Produktion” äußert sich Jürgen Dworak zu crossmedialen Kampagnen und berichtet über erfolgreiche Beispiele unserer Kunden.

> Artikel lesen (PDF)

Info: Dieser Beitrag ist Teil einer Artikelserie, in der wir über die Entstehung der Website wohnbau-derr.de berichten. Hier geht es zur Einleitung.

Die Aufgabenstellung war klar: eine Überarbeitung der aktuellen Präsenz mit klarem Fokus auf die beiden Nutzergruppen Wohninteressenten und der bestehenden Mieterschaft. Ein frisches Look & Feel und ein neues solides technisches Fundament waren dabei klare Voraussetzungen. Inhalte sollen zukünftig selbstständig vom Kunden hinterlegt werden und Wohnungsangebote sollen von der Website über eine Schnittstelle automatisiert in die großen Immobilienportale eingespeist werden.

Kick-off Workshop

Das neue Website-Konzept wurde von Q:marketing gemeinsam mit dem Kunden in einem eintägigen Workshop erarbeitet.
Zunächst ging es um die Formulierung einer Leitidee. Wie sieht sich das Unternehmen? Wie wird es von außen wahrgenommen? Nach regem Austausch wurde der Leitsatz (Claim) “Modernes Wohnen hat Tradition.” geboren, der bis jetzt favorisiert ist. Danach ging es um die Fragen “Wer sind die Nutzer?” und “An welche Zielgruppen richtet sich die Internetseite?”.
Nach der Festlegung dieser Grundsätze ging es an die konkreten Inhalte – die Seitenstruktur wurde erarbeitet. Im Anschluss ging es ausführlich um die wichtigste Seite des neuen Auftritts: die Startseite (Homepage). Die Hauptzielgruppen Wohnungsinteressenten und Mieter sollen sich gut zurecht finden und sich häufig stellende Aufgaben schnell erfüllen können. Dazu wurde ein modulares System entwickelt, dass die Startseite in verschiedene funktionale Abschnitte gliedert. Nachdem der grobe Aufbau von Rubrik-Startseiten und klassischen Inhaltsseiten besprochen wurde, ging es um die weiteren elementaren Themen “Wohnungsfinder” und “Darstellung der Detailansichten zu einem Wohnungsangebot”. Am Ende des Tages hatten alle Beteiligten ein klares Bild vor Augen, wie sich die neue Website entwickeln wird.

Erste Visualisierung als Wireframes

Nachdem das Konzept verabschiedet wurde, wurden im nächsten Schritt Drahtgittermodelle (Wireframes) der Bildschirmmasken entwickelt. Sinn und Zweck dieser Modelle ist es, möglichst schnell einen visuellen Eindruck vom Aufbau der Website zu vermitteln. Dabei geht es noch nicht um das eigentliche Screendesign, sondern um den groben Aufbau des Gestaltungsrasters und die Platzierung von Bestandteilen wie zum Beispiel der Navigation. Um dies zu gewährleisten haben wir Wireframes für die Seitentypen Startseite, Rubrik-Startseite, Inhaltsseite, Wohnungsfinder und Wohnungsangebot-Detailseite mit dem Kunden abgestimmt.

In der nächsten Folge berichten wir über die Entstehung des Screendesigns.

Sie planen einen neuen Internetauftritt oder möchten einen bestehenden überarbeiten?

Sprechen Sie uns gerne an

Kontakt Q:
Sascha Wenning
Telefon: 0208 3015525
sascha.wenning@Qmarketing.de