Typo Website

2. Workshop Interaktion/Module Web

Analyse Webmodule / Interaktion

In einer Zweiergruppe setzten wir uns mit dem Interface von Webseiten auseinander. Dafür untersuchten wir eine Moderne Autohändler Hompage auf das Aussehen, Interaktionen, Animationen und weitere UX/UI Elemente

3. Website-Raster-Analyse allgemein

Übung Rasterableitung an einer frei gewählten Website.

In der Gruppe untersuchen wir eine Frei gewählte Website. Dabei haben wir herausgefunden, das diese ein 12-Spalten-Raster verwendet. Manche Elemente waren aber trotzdem außerhalb der Rasters angeordnet.

Figma Link: https://www.figma.com/design/z1RLGA9nsHAwX6fG50J5lc/Website-Raster?node-id=0-1&t=NpSXgJnpAe8voPA6-1

4. Raster und Rythmus

Ableitung und Zusammenführung des Rasters von zwei Typo Websites.

Figma Board:

https://www.figma.com/design/T24uwBYMsNvklxTtU2AVFz/Wireframe?node-id=0-1&t=CBPHmgvEiXStrb2y-1

Die Module der ersten Website befindet sich in einem 12-Spalten Raster.

Die zweite Website passte nicht in das Raster der ersten. Daher führten wir diese Module durch Anpassung von Größe und Anordnung in das erste Raster über.

Die gesammelten Module Druckten wir aus und erstellten mithilfe einer Rhythmusübungen stimmige Wireframes

In Figma erstellte ich eine Reinzeichnung von 4 Wireframes. In meiner näheren Auswahl habe ich diese Zwei.

Die weiteren 2 sind in diesem Figma Design File zu sehen:

https://www.figma.com/design/T24uwBYMsNvklxTtU2AVFz/Wireframe?node-id=159-2&t=QdQfoBAQjGhiM7tx-1

5. Typo-Website

Meine Präsentation zur Google-Fonts-Schriftart Roboto Serif

PDF

Moodboards:

Ich überlegte mir drei Stile für meine Mood boards. Das erste hat die Komplementärfarben Orange und Blau. Der Kreis spielt eine große Rolle und es sind eher organische Formen zu finden.

Mein zweites Mood board hat eine größere Auswahl an Farben und soll den Futuristischen Gedanken widerspiegeln. Verläufe und Meshes stehen im Vordergrund.

Das dritte Mood board hat einen Minimalistisch, Modernen und Luxuriösen Look. Grau / Schwarz - Weiß wie auch Petrol und Hellbraun sind meine Farben

Überarbeitete Moodboards

Da meine Moodboards noch nicht genug trennscharf waren, überarbeitete ich diese noch einmal

Entwürfe der Section-Varianten.

Section Stile 1:
Plakativ, Retrolook und Spannung durch Komplementärkontrast.

Section Stile 2:

Futuristisch, Interessante Formen.

Section Stile 3:
Minimalistisch. Von Modedesign Inspiriert

Am meisten gefiel mir der erste Entwurf. Deshalb entschied ich mich für den Stile 1

Um mein Design der Website stimmiger zu machen, führte ich wiederkehrende Elemente ein, welche dem Design einen durchgängigen Stil geben.

Eine Meiner ersten Animationen war die Anwendungs-Animation. Ich versuchte immer wieder das Thema Große Typo einbringen. Dabei fiel es mir aber zuerst schwer, Interessante und ansprechende Ergebnisse zu erhalten.