Neuerstellung des Web-Auftritts für die Schreiner von "hoglbuachan"
KUNDENPORTRAIT
Unter dem Namen "hoglbuachan" haben sich die beiden Schreiner Martin Hundschell und Wast Schneider zusammmengeschlossen. Gemeinsam bauen sie Holz-Sitzmöbel mit Charakter für Haus, Garten und Gastronomie, die originell, nachhaltig und regional sind.
AUFGABE
Die Webseite soll das digitale Aushängeschild von "hoglbuachan" werden. In einem sogenannten Onepager stellen die Schreiner sich und ihre Werte vor, erläutern wie es zum Firmennamen kam und zeigen ihre Produktvielfalt, die jedoch weiter ausschließlich direkt vertrieben wird.
NAVIGATION UND STRUKTUR
Nach Sichtung und Sortierung der Inhalte folgt die Strukturierung. Potenzielle Kunden, aber auch generell am Thema interessierte Personen soll sich leicht zurechtfinden und die gewünschten Inhalte schnell auffinden können.
Ein Strukturbaum zeigt die einzelnen Seiten der Webseite und die darin enthaltenen Inhalte. Bei diesem Projekt handelt es sich um einen Onepager, d.h. es gibt nur eine Seite. Die einzelnen Bereiche lassen sich aber dennoch über das Menü gezielt anwählen.
Anschließend ist es das Ziel der sogenannten Wireframes, den genauen Aufbau der Inhalte zu planen. Hier wird definiert, wo Bilder und Grafiken platziert werden, wo sich Texte und Buttons befinden und auch schon, wie diese Elemente in etwa aussehen können. Das ausgearbeitete Design ist zu diesem Zeitpunkt jedoch noch nicht nötig, es würde ablenken. Das Screendesign erfolgt erst im nächsten Schritt.
CORPORATE DESIGN
Parallel zur Entwicklung von Navigation und Struktur wird zum bereits bestehenden Logo von "hoglbuachan" ein Corporate Design entwickelt.
Die Farbpalette soll einerseits natürliche, thematisch passende Farben enthalten. So wurden die Farbtöne "Waldgrün", "Holz Dunkel" und "Holz Hell" entwickelt, die etwas gedämpfter sind. Der Farbton "Laubgrün" dagegen weist mehr Sättigung und Leuchtkraft auf, um einen modernen, auffälligeren Gegenpol zu haben. Diese Farbe wird eingesetzt, wenn etwas hervorgehoben werden soll, beispielsweise bei Links und Buttons.
Als Schrift wird die serifenlose Archivo gewählt. Sie erinnert an amerikanische Schriften des späten 19. Jahrhunderts. Ihre gute Lesbarkeit einerseits, der individuelle Charakter andererseits zeichnen sie sowohl als Fließtext- als auch als Auszeichnungsschrift aus. Die Gewichts- und Breitenachsen ermöglichen eine große Stilvielfalt mit zahlreichen Schriftschnitten. Die Schriftgestaltung wird so sehr abwechslungsreich ohne sich zu sehr in den Vordergrund zu schieben. Eine zweite Schrift als Kontrast wird in diesem Fall unnötig.
Der Einsatz von grafischen Elementen ist sehr dezent. Der Fokus liegt auf der Fotografie. Es wurden lediglich die Werte als Grafik gestaltet, die mit einem ein Pattern (Muster) hinterlegt wurden. Das Muster zeigt eine Holzmaserung, die sich mal dezent in den beiden Holz-Farbtönen, mal auffällig und peppig in den Grüntönen präsentiert. Letztere wurde auf der Webseite nicht eingesetzt, kann aber bei plakativeren Werbezwecken zum Einsatz kommen.
FOTOGRAFIE
Ein großes Augenmerk liegt auf den Fotografien. Auf Stock-Fotos soll verzichtet werden, um authentisch aufzutreten. Es wurde ein Fotokonzept entwickelt und Shootings geplant. Für die Phase des Screendesigns wurde noch mit Stock-Fotos aus dem Fotokonzept gearbeitet, um den Stil zu verdeutlichen. Erst bei der Umsetzung im Web kamen die Fotos aus den kurz zuvor stattgefundenen Shootings zum Einsatz. Sie wurden bearbeitet und mit einem dezenten Vintage-Filter versehen.
Während das Header-Foto mit der Sitzgruppe als Stimmungsbild dient und zum gemütlichen Hinsetzen und Genießen einläd, liegt bei den Produktbildern der Fokus darauf, einen möglichst umfassenden Eindruck der Möbel zu vermitteln. Dazu kommen noch Fotos, die die Fertigung der Möbel in der Werkstatt, sowie die beiden Schreiner in ihrem Arbeitsbereich zeigen.
SCREEN DESIGN
Sind Navigation und Struktur, Wireframes, sowie das Corporate Design abgestimmt, dann erfolgt die grafische Ausarbeitung der Webseite, das Screendesign. Je nachdem wie die spätere technische Umsetzung erfolgt (auf Basis eines Content Management System (CMS) wie zum Beispiel Wordpress oder komplett auf HTML) werden verschiedene Größen gestaltet: Desktop, Tablet und Mobile. Gerade bei letzterem verändert sich die Gestaltung wie auch die Bedienungsweise sehr stark.
Die programmierte Webseite wird später responsive sein, d.h. die Inhalte passen sich je nach Endgerät an die Größe an. In der heutigen Zeit ein technischer Standard, den die Webseite definitiv haben soll.
