Design

Hier wird die Realisierung des Designs des Webprojektes behandelt. Es werden im weiteren Verlauf stichpropbenartig Zwischenergebnisse der wichtigsten Prozesschritte gezeigt. Der detaillierte Workflow ist unter Design in der Sektion Workflow einsehbar.

Nesrin hatte bereits erste Skizzen zur Gestaltung der Introseite der Seite. Auf Grundlage der Informationen, die bereitgestellt werden sollten, wurde die Struktur dieser definiert. Hierbei waren auch Gesichtspunkte wie Reduktion der Seitenaufrufe, Reduktion der Verwendung von grossformatigen Medien und passende Schriften entscheidend.

Es stellte sich als etwas herausfordernd dar, der Struktur des Inhaltes und seiner textlichen Darstellung gerecht zu werden. Wo sollte beispielsweise die persönliche Definition von Permakultur hin? Wie können wir vereinfachen und trotzdem die Komplexität der Sache abbilden?

Wireframes

Auf Grundlage der vorangegangen Calls entwickelte ich erste und schnelle Handskizzen bzw. strukturelle Skizzen (Wireframes) [PDF] (opens new window), die den Navigationsablauf, die Struktur und Anordnung der Elemente und die Aufteilung des Inhalts ersichtlich machen.

Schwierig war hier, den Flow der Wireframes verständlich darzulegen. Ich könnte den Flow einmal in einem Prototypen durchtesten, besonders, um den Kund:innen etwas Greifbareres an die Hand zu geben. Selbiges grob auch mit dem Design. Weiter wäre auch förderlich gewesen, die gelayoutete Struktur testweise im Backend darzustellen, bspw. als Dummy in einem Testbackend mit einer bereits umgesetzten Seite. Evtl. auch / oder Screenshots bereithalten.

Konzeptideen

Der nächste Schritt war die Exploration einer grafischen Sprache. Hierzu entwickelte ich verschiedene Entwürfe (opens new window), die in einem Design Call besprochen wurden.

Dies war auf Grund der Vorarbeit relativ leicht zu vermitteln. Hier sollte aber noch einmal in der Feedbackphase bei Nesrin nachgehakt werden, wie sie diese Phase empfunden hatte.