Responsives Webdesign mit Illustrationen

Handgezeichnet für mehr Vielfalt und Einzigartigkeit

Responsives Webdesign mit handgezeichneten Illustrationen

Die Firma Hanno aus Hof bedruckt Stoffe individuell und setzt seinen Kunden bei der Kreativität keine Grenzen. Diese Möglichkeit sollte durch eine neue Unternehmenswebsite ausgedrückt werden. Wir haben uns diesen Wunsch zu Herzen genommen und auf TYPO3 Basis eine responsive Website mit exklusiven Illustrationen und einem Muster Kollektionen Konfigurator umgesetzt. 

Alleinstellungsmerkmal

Beeindruckende Illustrationen

Woran denken Sie, wenn Sie an Stoffe denken? An Klamotten, Gardinen oder starr herumliegende Teppiche? Was auch immer sie denken, wir haben unser Mindset zum Thema Stoff für einen außergewöhnlichen Kunden komplett neu ausgerichtet. Wir glauben, dass Stoff durch einzigartiges Design lebt. Endlose Blumenketten, kunterbunte Pattern oder abstrakte Farbflächen, Stoff kann jedes Aussehen annehmen, das Ihrer Vorstellungskraft entspringt. Genau diese Message soll die neue Firmenwebsite vermitteln. Um die Stoffmuster aus der Starre zu lösen und dem Betrachter so eine völlig neue Perspektive zu ermöglichen haben wir einzigartige Illustrationen in die Website integriert, die die Stoffe der Firma Hanno ins richtige Licht rücken und zum Leben erwecken.

Beeindruckende IllustrationenBeeindruckende IllustrationenBeeindruckende Illustrationen

State of the Art

Responsives Webdesign

So vielseitig wie unsere Gesellschaft ist auch das Internet geworden. Mittlerweile gibt es fast endlos viele Größen und Seitenverhältnisse auf denen Menschen das Internet benutzen. Daher haben wir auch bei diesem Projekt auf ein sich dynamisch anpassendes Layout angewendet. Bilder und Texte skalieren sich je nach Gerät automatisch, bzw. ändern ihre Position. Zusätzlich haben wir ein Menü extra für Mobilgeräte erstellt, das Touch optimiert ist. Somit hat man auf jedem Gerät das optimale Erlebnis.

Responsives Webdesign

Kreative Impulse erleben

Kollektionen Konfigurator

Im Mittelpunkt steht bei der Website die kreative Offenheit für Kunden. Dafür haben wir einen Kollektionen Konfigurator entwickelt, mit dem man Stoffe an Personen ausprobieren kann. 

Für die Umsetzung haben wir die Illustrationen der Personen freigestellt, sodass man quasi durch sie hindurch schauen kann. Innerhalb des Konfigurators kann man nun verschiedene Körperteile oder ganze Personen auswählen, hinter die dann ein bestimmter Stoff gelegt wird. So erhält man den Anschein, dass die Illustrationen den Stoff tatsächlich als Kleidungsstück tragen. Zur Verfügung stehen dabei alle Stoffmuster in der Produktpalette von Hanno.

Eine besondere Herausforderung war dabei das Responsive Design der Seite mit dem Konfigurator zu vereinbaren. Um die Flexibilität weiterhin zu gewähren müssen die Bilder der Stoffe und die Illustrationen der Personen separat skaliert und angeordnet werden. 

Basierend auf HTML und Java Script haben wir diese Anforderung umgesetzt und Kunden von Hanno ein neues Erlebnis geschaffen.

Kollektionen Konfigurator

Stoffe zum Leben erwecken

Dynamische Produktübersicht

Große Bilder mit schwarzen Textboxen sorgen für eine klare Übersicht über die Vielfalt des Angebots von Hanno. Um das Erlebnis für den Betrachter zu verbessern haben wir die Produktübersicht dynamisch gemacht. Beim "Mouse Hover" wird auf die Bilder ein Unschärfeeffekt angewendet. Klickt man den gewünschten Stoff an, öffnet sich in Kontrast zu den bunten farben ein schwarzer Textblock mit großen Überschriften und Informationen zum Produkt. 

Das interessante an der Übersicht ist die responsive Funktion. Egal wie groß oder klein ein Bildschirm ist, sie passt sich immer an und alle Animationen bleiben erhalten. 

Dynamische Produktübersicht

Showcase

Aus unserem Kreativlabor

Hier können Sie unserem Art Director direkt über die Schulter schauen und sich die Layoutentwürfe für die spätere Website ansehen.
Aus unserem Kreativlabor

Startseite

Eine klare farbige Aufteilung der verschiedenen Elemente sorgen auf der Startseite für Übersicht. In die jeweiligen Bereiche haben wir Grafiken für mehr Anschaulichkeit integriert. Abgeschlossen wird die Startseite durch einen einladenden Footer mit Kontakt und persönlichem Ansprechpartner.
Startseite

Historie

Illustrationen als Headerelement sorgen für einen einheitlichen Look der Seite. In der Historie der Firma haben wir große runde Bilder für einen zeitgemäßen und eleganten Look eingefügt. Ähnlich einem Zeitstrahl bauen sich die Höhepunkte in der Firmenhistorie an einer schwarzen Linie auf.

Historie

Unternehmensprofil

Mit diesem Layout haben wir es möglich gemacht viel Text übersichtlich und anschaulich auf der Website zu integrieren. Die graue Farbe der Textbox dient als Kontrast zu den bunten Farbfeldern im Header der Seite.
Unternehmensprofil