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
