1. Titelbild

2. Workshop Interaktion/ Module Web

In dieser Übung haben Svenja 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

3. Website-Raster

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.

4. Raster und Rhytmus

4.1 Raster Ableitung

Erste Typowebsite ist die PangramPangram Website: https://pangrampangram.com/products/museum (Nachtrag: Die Seite wurde mittlerweile geupdated und sieht nicht mehr so aus wie auf den folgenden Bildern)

Zweite Typo-Website ist die JetBrains Website: https://www.jetbrains.com/lp/mono/?ref=onepagelove

4.2 Rasterzusammenfügung/Varianten

4.3 Digitalisierter Favorit

4.4 Reinzeichnung

5. Typo-Website

5.1 Moodboards

5.2 Entwurf

5.3 Stand 08.05

Ich sollte an allen drei Entwürfe weiterarbeiten und dabei sämtliche Bilder durch eigenes Bildmaterial ersetzen. Ziel ist es, eine individuellere und eigenständigere Gestaltung zu erreichen, die nicht auf externen Quellen basiert.

5.4 Stand 15.05

Die alten Platzhaltertexte wurden durch echte Inhalte ersetzt und auf weißem Hintergrund besser lesbar gemacht. Die Merkmaldarstellungen sind neu angeordnet und zeigen typische Formen der Schrift übersichtlich. Kleine Animationen, um die Merkmale zu zeigen.

Kritik:

• Zeilenabstände der Überschriften überprüfen

• Linien durch ganze Website ziehen

• Trenner für Animationen setzten
• 3D beibehalten und fortführen

5.5 Stand 22.05

Zwischenpräsentation:

5.6 Stand 05.06

Kritik:

Schriftschnitte:

• title case, uppercase usw. nach oben

• aa in die mitte vom text setzten

• evtl. kasten weg für trenner animation

Regler:

• in einen aber nur flow sozusagen

Sprachen:

• in dropdown menü machen

Header animieren: 

• 4 schritte analog planen

5.7 Stand 26.06

Nächste Schritte:

• Trenner Animationen fertig

• Glyphenraster erstellen

• Merkmaldarstellung fertigstellen

• letzte Animationen

• Kontaktformular

• Logo

• Footer

Plakatentwürfe

5.8 Stand 10.07

5.9 Animationen

Die Animation hatte eine bessere Qualität sobald die Komposition größer skaliert war, deshalb hab ich es später in Figma dann erst zugeschnitten.

Abschlusspräsentation:

6. Reinzeichnung

6.1 Desktop

6.2 Mobile Version

7. Designsystem/Styleguide

8. Screencast

9. Figma-Link Prototyp

9.1 Desktop

https://www.figma.com/proto/pm3pSbwyDG4CQRDsW9zV4f/Ubuntu-Website?page-id=206%3A126&node-id=672-2669&p=f&viewport=-1583%2C-2531%2C0.25&t=QD0KP0A4O8hmpO01-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=672%3A2669

9.2 Mobile Version

https://www.figma.com/proto/pm3pSbwyDG4CQRDsW9zV4f/Ubuntu-Website?page-id=763%3A2883&node-id=763-3045&viewport=77%2C551%2C0.18&t=VxCsWuQu8eW5krcm-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=763%3A3045