Im Rahmen meiner Grafikdesign-Ausbildung war es die Aufgabe von Modul 10 im Jahr 2023, die Landingpage einer bestehenden Webseite zu redesignen. Ich habe mich dabei für die Startseite eines sehr bekannten japanischen Unternehmens entschieden, welches sich auf Schreibwaren jeglicher Art (besonders Marker) fokussiert. Bei dem Unternehmen handelt es sich um Tombow (Tombow Pencil Co., Ltd).

Da Tombow weltbekannt ist, wurden Typografie, Farbe und Logo genauso übernommen, um den Wiedererkennungswert nicht zu stören. Ich habe mich neben der Tombow-Webseite auch mit anderen Schreibwarenherstellerseiten auseinandergesetzt, um ein Gefühl dafür zu bekommen, was solche Seiten besonders ausmacht und was sie gerne auf der Startseite hervorheben.

Header

Logo und Navigation sind wichtige Bestandteile des Headers. Der originale Header von Tombow enthält viele Kategorien in der Navigation. Ich habe diese auf drei wesentliche Rubriken reduziert (Home, Über uns, Produkte). Home erschien mir wichtig zu erwähnen, da dies auf deren Seite komplett weggelassen wurde (was scheinbar bei vielen Schreibwarenherstellerseiten der Fall zu sein scheint).

Das Logo wurde mittig als Blickfang platziert, wodurch ich zugleich den Header größer wirken lassen wollte. Zur Hervorhebung der jeweiligen Seite, auf der man sich befindet, wird diese unterstrichen (siehe Design → Home). Das gilt für alle anderen Rubriken ebenfalls. Somit erkennt der Anwender sofort, wo er sich momentan befindet. Die Icons für Suche, Warenkorb und Konto wurden oben rechts platziert. Letzteres ist auf der originalen Webseite nicht vorhanden, jedoch wichtig einzubeziehen, wenn man Onlinekäufe tätigt. Die typische rote Farbe von Tombow wurde durchgehend eingesetzt, um dem Nutzer das Gefühl zu vermitteln, dass er sich auf der Tombow-Webseite befindet.

Content

Beim Body (Content) habe ich folgende Elemente eingebaut: einen Hero (unmittelbar unterhalb der Navigation), der für die saisonalen Produkte wirbt, die Produkte als Slider, zwischen denen wiederum Produkte und Marken gewählt werden können, sowie „Werbemaßnahmen" (Neuheiten, Tombow-Community, Magazin, Social-Media-Seiten).

Da ein Image-Carousel von Anwendern nicht mehr so gerne genutzt wird, habe ich mich für ein minimalistisches Image-Hero entschieden, bei dem die neuesten Produkte präsentiert werden. Das Bild soll die Anwender animieren, sofort mehr darüber erfahren zu wollen, weshalb auch ein Button ins Hero integriert wurde. Wichtig: Der Hero-Banner wurde so gestaltet, dass er zusammen mit dem Header das erste Erscheinungsbild auf dem Bildschirm bildet.

Wenn man weiterscrollt, erscheinen die Produkte des Unternehmens. Hier kann man zwischen Produkten und Marken wählen. Sofern der Anwender auf eine der Kategorien klickt, wird diese unterstrichen, während die andere Kategorie eine blassere Farbe erhält. Somit erkennt der Nutzer sofort, in welchem Bereich er sich befindet (siehe Design).