01. Workshop Interaktion / Module Web

Im Workshop zu Interaktionen und Modulen im Web haben wir in Gruppen verschiedene Webseiten untersucht. Sophie und ich haben uns für die Website von IKEA entschieden. Wir haben sie nach den Kategorien Vorhersagbarkeit, Konsistenz, Feedback, Raum, Zeit, Bewegung und Aussehen bewertet. Diese Kategorien gehören zu den wichtigsten Grundlagen im Interaktionsdesign.

1.1  Website - IKEA

1.2 Zuordnung

02. Website - Raster

Für die Übung, das Raster einer Website zu analysieren, haben wir nach längerer Suche und vielem Ausprobieren die Seite booking.com ausgewählt. Dort ließ sich das Raster gut erkennen, da die Website ein klassisches 12-Spalten-Raster verwendet.

2. Typo Website Ableiten

Um einen guten Aufbau für unsere Typo-Websites zu bekommen, haben wir verschiedene Websites von Typefoundries und andere Typo-Seiten analysiert. Dabei haben wir die jeweiligen Module und Strukturen abgeleitet. Wir haben mehrere Websites analysiert, um am Ende genug Inspiration und Auswahl für unser Semesterprojekt zu haben.

2.1 Ableiten der ersten TypoWebsite https://www.gt-ultra.com/

2.2 Ableiten der zweiten Typo Website https://pangrampangram.com/products/neue-corp-compact

03.Raster und Rhytmus

Im nächsten Schritt haben wir die Module ausgeschnitten und versucht einen guten Aufbau mit den Elementen zu bilden. Wir erstellten verschiedene Varianten und entschieden uns schließlich für zwei fertige Layouts. Diese setzten wir anschließend in Figma um.

3.1 Rhytmusübung

3.2 erste Rhythmus Variante

3.3 zweite Rhythmus Variante

04. Typo - Website

4.1 Moodboards

4.2 erste Entwürfe

4.3 Wireframe Zeichnung

Da es mir schwerfiel, die ersten Entwürfe zu gestalten, weil ich mir das endgültige Aussehen meiner Website noch nicht vorstellen konnte und mit der Gliederung noch nicht ganz zufrieden war, zeichnete ich meine Wireframes zunächst auf Papier. So konnte ich mir das Layout besser vorstellen und bekam gleichzeitig neue Ideen für die Inhalte.

4.4 Überarbeitung der ersten Sections

Nachdem ich die einzelnen Sections weiter ausgearbeitet hatte, entschied ich mich schnell, mit meiner ersten Variante, in Rot und Blau, weiterzuarbeiten.

4.5 Zwischenpräsentation

Zum Zeitpunkt der Zwischenpräsentation waren meine Inhalte noch nicht vollständig definiert. Auch Animationen und Interaktionen fehlten noch, und welchen Stil ich verwenden wollte, war mir ebenfalls noch unklar. Ich überlegte, entweder mit Versatz, Umrandungen oder einem Echo-Effekt zu arbeiten.

4.6 Prozess

4.7 Animationen

05. Reinzeichnung

06. Styleguide

07. Screencast

08. Figma Link

https://www.figma.com/proto/HDwLODgMlMpi3wC4lYB4oj/Digital-Design---Typo-Website?page-id=2412%3A1889&node-id=2412-1890&viewport=187%2C239%2C0.16&t=g829VeYBY45LYVGs-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=2412%3A1890