1. Titelbild
2. Workshop Interaktion/Module Web
In der Übung Interaktion/Module Web untersuchten Emely und ich die Website von Riot Games. Dabei schauten wir uns die Home- sowie die Subpage „Wer wir sind“ an. Die verschiedenen Elemente der Website gliederten wir in die Kategorien: Navigations-Elemente, Call-to-Action-Elemente, Text- und Bild-Elemente, Animations-Elemente, Filter-Elemente, Formular-Elemente und Teaser-Elemente sowie einen Einblick in den Code. Diesen Elementen ordneten wir dann die Kriterien Vorhersagbarkeit, Konsistenz, Feedback, Raum, Zeit, Bewegung und Aussehen zu. Als Zielgruppe des Webangebots sehen wir die Gaming-Community ab circa 16 Jahren.
Einordnung der Module
3. Website-Raster: Analyse Websites allgemein
Bei dieser Aufgabe untersuchten wir verschiedene Website und ihre Raster. Emely und ich entschieden uns für die Website von Riot Games (https://www.riotgames.com/de). Anschließend schaute ich mir noch die Babbel Website an (https://de.babbel.com/). Beide Websites zeigten ein 12-Spalten-Raster, wobei einige Elemente gut in das Raster passten, viele Elemente auch herausfielen.
4. Präsentation Fira Sans
5. Raster und Rhythmus
Für die Ableitung der Webraster und Module von Typowebsites entschieden Emely und ich uns für https://pangrampangram.com/products/museum und https://www.gt-pressura.com/. Wir fügten jedoch auch einige Elemente von https://vj-type.com/18-category und https://fontwerk.com/de/fonts/pangea hinzu.
Ableitung PangramPangram
Ableitung GT-Pressura
Ableitung vj-type
Ableitung Fontwerk Pangea
Fertiger Modulbaukasten
Rhythmik
Reinzeichnung / Gliederung
6. Entwicklung der Typo-Website
Moodboards
Erste Sections
Prozess
Stand 08.05
Variante 1
Variante 2
Stand 15.05
Animationen:
Stand 22.05
Prototyping:
Animationen:
Zwischenpräsentation
Stand 05.06
Interview mit Ralph du Carrois:
Animationen:
Stand 12.06
Animationen:
Stand 26.06
Prototyping:
Animationen:
Stand 03.07
Animationen:
Stand 10.07
Abschlusspräsentation
7. Reinzeichnung
8. Designsystem/Styleguide
9. Screencast
Desktop:
Mobile:
10. Figma-Link Prototyp
Desktop:
Mobile:
11. Werkschau
Plakate
Entwürfe:
Final:
Werkschau
