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
