Website

Nachdem meine Corporate Identity definiert war, habe ich mich der Website für den Hof gewidmet. Von Anfang an war mir klar, dass ich die Website nur gestalten, aber nicht programmieren würde.

Für mich standen Gestaltung und Inhalt im Vordergrund, da sich diese beiden Bereiche nach der Entwicklung kaum mehr verändern würden – im Gegensatz zur technischen Umsetzung, die flexibel bleiben kann.

Anschliessend habe ich die Skizze in Figma übertragen und ein digitales Wireframe erstellt.

Ich habe überall mit Variablen gearbeitet, um mir die Arbeit zu erleichtern, sobald es an das finale Design ging.

Hier kann man das Wireframe direkt in Figma anschauen, weiter unten gibt es ein Video dazu.

In der Gestaltung war es mir wichtig, dass ein klarer Zusammenhang zur restlichen Corporate Identity spürbar ist, vor allem in Bezug auf die Illustrationen, Farben und den Stil des Hofladens.

Ich habe mich bewusst für ein reduziertes, minimalistisches Layout entschieden. Die Website soll sich für Kund:innen intuitiv und einfach bedienen lassen, ohne Ablenkung vom Wesentlichen.

Um den Userflow zu testen und zu optimieren, habe ich an verschiedenen Stellen Buttons eingebaut, die logisch durch die Website führen. Einige Beispiele:

Auf der Abo-Seite: Ein Button führt direkt zum Laden, falls man sich noch unsicher ist, welches Abo passt.

Bei den Kursen: Wer sich noch nicht entscheiden kann, wird zum Magazin weitergeleitet, um dort erste Einblicke zu erhalten.

Im finalen Schritt habe ich das Mockup erstellt. Dabei habe ich:

Um die Verbindung zu den Illustrationen zu verstärken, habe ich auf der gesamten Website mit abgerundeten Ecken gearbeitet.

Einige Gestaltungselemente, wie zum Beispiel:

habe ich mehrfach überarbeitet, bis sie meiner gestalterischen Vorstellung entsprachen und gut ins Gesamtkonzept passten.

Ich habe bewusst nicht jede Detailseite gestaltet, ebenso keine Bestellfenster oder Checkout-Seiten. Mein Ziel war es, die Anwendung der Corporate Identity zu zeigen – nicht eine vollständig funktionsfähige Website zu entwerfen.

Da ich zwei exemplarische Produktseiten vollständig gestaltet habe, lässt sich daraus gut ableiten, wie der Rest der Website aufgebaut wäre. Alle Seiten folgen dem gleichen gestalterischen Prinzip.

Hier kann man das Figma anschauen, weiter unten befindet sich ein ergänzendes Video.