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: 

https://www.figma.com/proto/1gjwwM9dBhMqtX1CK71rMY/RALEWAY-WEBSITE?page-id=570%3A30958&node-id=739-48879&viewport=384%2C458%2C0.04&t=Ar7B7bNdC74pPcfT-1&scaling=scale-down-width&content-scaling=fixed 

der Link zu meinem Prototypen der mobilen Version auf Figma:

https://www.figma.com/proto/1gjwwM9dBhMqtX1CK71rMY/RALEWAY-WEBSITE?page-id=774%3A17222&node-id=774-23646&viewport=-500%2C166%2C0.39&t=Yg0J6wFdWwYtqQgQ-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=774%3A23646