Historische Mode

"Historische Mode" ist das Thema der Semesterarbeit der Lehrveranstaltung Mediendesign zu den Themengebieten Navigationsdesign und Layoutkonzepte.

Aufgabe

Aufgabe war es dabei, die grafische Benutzeroberfläche einer Website für ein fiktives Modearchiv mit ca. 8000 Bekleidungsstücken zu gestalten.

Die Navigation sollte sowohl explorativ als auch direkt über die Art der Bekleidung, die geschichtliche Epoche und über eine Suchfunktion möglich sein.

Wegen der umfangreichen Informationen (z. B. historischer Hintergrund, Materialien, etc.) zu einzelnen Kleidungsstücken, die auch quer verknüpft sein konnten (z. B. bei zusammengehörigen Kleidungsstücken), war eine Staffelung der Informationen in kompakte und vertiefende, ausführliche Informationen notwendig.

Natürlich kam es auch auf grafische Atmosphäre und Gestaltung an.

Konkrete Umsetzung

Mit der horizontalen Navigation kann man historisch durch die verschiedenen Epochen navigieren. Die vertikale Navigation ermöglicht den Einstieg über die Art der Bekleidung, die über Auswahlboxen genauer spezifiziert werden kann. Beide Navigationen sind miteinander kombinierbar.

Die Vorschauseiten, die per Paging "geblättert" werden können, zeigen Vorschaubilder zu den Kleidungsstücken. Beim Anklicken eines Bildes kommt man auf die entsprechende Detailseite, auf der der eigentliche Inhalt steht. Informationen im Kontext und weiterführende Artikel werden am Ende eines Inhaltsabschnittes gelistet.

Über die Metanavigation erreicht man die Kontaktseite, das Impressum und die Suchen (Schnellsuche und Expertensuche mit spezielleren Suchkriterien).

Screen-Entwurf der Startseite von
Screen-Entwurf der Übersichtsseite.
Screen-Entwurf der Detailseite.

Das Layout hat mit dem samtrotem Hintergrund und goldenen Schreibschriften eine edle Anmutung. Die Navigationen liegen wie eine Borte auf dem fein strukturierten Hintergrund. Auch die Navigationspfeile wirken historisch.

Die erste Abbildung zeigt die Startseite, die zweite eine Seite mit Vorschaubildern und die dritte eine Detailseite.