1: Workshop Interaktion/Module Web
In dieser Übung haben Pia und ich die Module der Website Notion den Kategorien Navigation, Call-to-Action, Text- und Bildelemente, Filter-, Formular-, Animations- und Teaser-Elemente zugeordnet. Anschließend analysierten wir, welche zentralen Kriterien des Interaktionsdesigns in den jeweiligen Modulen umgesetzt werden.
Als Zielgruppe definierten wir vor allem digital affine Nutzer\*innen, wie etwa Studierende, Kreative und Teams, die ein vielseitiges Tool für Notizen, Projektmanagement und Zusammenarbeit suchen. Die Website ist modern und übersichtlich gestaltet, mit klarer Typografie, dezenten Animationen und einem hellen, reduzierten Design.
2.1: Zuordnung
2: Website-Raster: Analyse
Wir haben bei den Websites von NASA und Notion versucht, das zugrunde liegende Gestaltungsraster zu erkennen. Dabei haben wir analysiert, wie Inhalte strukturiert, ausgerichtet und durch Spalten, Abstände und Weißraum geordnet sind.
Website 1: NASA
Website 2: Notion
3: Raster und Rhythmus
3.1: Raster ableiten PangramPangram
Die erste Website die wir analysiert haben ist PangramPangram https://pangrampangram.com, leider wurde diese seit dem überarbeitet und sieht nun anders aus.
die abgeleiteten Module:
3.2 Raster ableiten JetBrains
die abgeleiteten Module:
3.3: Zusammenführen der Module
Nachdem wir für jede Website ein eigenes Grid und einen Modulbaukasten abgeleitet hatten, haben wir beide Websites vereinigt und sie auf einem gemeinsamen Grid zusammengeführt.
3.4: Raster/Rhythmusübungen
Nachdem der Baukasten fertig war haben wir damit verschiedene Rhythmen gelegt, um ein Gefühl dafür zu kriegen, wie wir später die Website aufbauen werden.
diese habe ich dann anschließend auf Figma digitalisiert, und mich letzen Endes für den ganz rechten Wireframe entschieden.
3.5: Reinzeichnung
4: Typowebsite in Figma
Moodboards
Nach einem Feedback zu den Sections haben wir uns entscheiden, dass ich mit dem gelben und dem beigen/schlichten Sections erst einmal weiter arbeite und mich erst in der folgenden Woche auf eine Version zu fokussieren.
4.2: Stand 08.05.
Ich habe mich bei meiner gelben Version auf Animationen und Grid-brechende Elemente fokussiert bzw. weiter recherchiert, welche Animationen ich hier nutzen kann.
Bei meiner schlichten Version habe ich vor Allem versucht die Stimmung auf die Seite zu übertragen. Außerdem habe ich mich schonmal an einer Header Animation versucht und einen ersten Entwurf gemacht.
4.3: Präsentation meiner Schriftart
4.4: Stand 15.05.
Stand 22.05.
Stand 05.06.
Stand 26.06.
Stand 10.07.
4.5: Mobile Version
Als add-on sollten wir die Desktop-Version auf eine Mobile-Version übertragen.
Animationen
Headeranimation
A's
Sans Serif
Glyphen
Designer Trenner
6: Reinzeichnung
Plakat Design
7: Styleguide
8: Screencast
9: Figma-Link Prototyp
der Link zu meinem finalen Prototypen der Desktop Version auf Figma:
der Link zu meinem Prototypen der mobilen Version auf Figma:
