Endergebnis Montserrat Link 10.07.2024
Styleguide 03.06.2024
Light- und Darkmode Switch 03.06.2024
Übersicht aller Prototypes und Animationen 03.06.2024
Mobile Variante 03.06.2024
Screencast 03.06.2024
Gestaltung verschiedener Plakate 26.06.2024
Anschließend folgen die Poster die ich über die Website gestaltet habe, dabei habe ich verschiedene Lösungsansätze ausprobiert und bei meinem Favoriten eine zweite Lösung gestaltet.
Entwicklung der Varianten der Website 26.06.2024
Zwischenstand 05.05.2024
Drei Moodboards und dazu gestaltete Sections 24.05.2024
Für das erste Moodboard meiner Website habe ich mich für das allgemeine Thema der 50er entschieden, weil die Schrifterstellerin sich damals von den Postern und Schildern der 50er in Montserrat hat inspirieren lassen.
Dafür habe ich mir ein Farbschema aus den 50ern und dann verschiedene Plakate und Formen rausgesucht. Anhand dieser Inspiration, kann ich dann meine Website um einiges interessanter und persönlicher gestalten.
Das zweite Moodboard entstand aus einer Idee heraus. Ich habe versucht aus dem Schriftzug „Montserrat“ Formen zu erstellen und dadurch hatte ich die Idee das „O“ durchzuschneiden und eine Seite der Form zu füllen. Da das wie eine Scheibe einer Citrusfrucht aussah, kam mir die Idee, ein Moodboard dazu zu gestalten.
Für die dritte Variante, wollte ich mir noch ein ganz anderes Design überlegen, welches ein wenig dunkler ist. Dabei habe ich mir überlegt mit Leuchtschriften und -schildern zu arbeiten, um eine Art Nachtleben darzustellen.
Letztlich entschieden habe ich mich für das erste Design, da es farblich und thematisch am besten zur Schrift passt.
Inhalte der Typografie Website 08.05.2024
Gliederung der Typografie Website anhand des Artboards 08.05.2024
Nun konnte ich anhand unseres fertigen Artboards, eine eigene Gliederung für die spätere Typografie Website bauen. Hierbei habe ich möglichst verschiedene Größen von Modulen verwendet und diese in verschiedener Weise angeordnet. Beim konstruieren dieser Gliederung, habe ich zeitgleich schon im Hinterkopf überlegt, welche Inhalte ich in diese Module einsetzen würde und demnach entschieden, wie groß ein Modul ungefähr sein müsste.
Rhythmus Übungen 24.04.2024
Aus dem nun fertigen Artboard, habe ich drei verschiedene Rhythmus Übungen gemacht, um ein Gefühl dafür zu bekommen, wie ich solche Module anordnen kann.
Bei den ersten beiden Versuchen habe ich noch relativ gradlinig und Box-artig gearbeitet. Das Ergebnis ist dadurch klar strukturiert und übersichtlich.
Beim dritten Versuch wollte ich mal etwas verrückter und verspielter an die Sache rangehen. Dafür habe ich eine Art versetzte Galerie erstellt, welche als Teiler der jeweiligen Abschnitte fungiert.
Artboard 24.04.2024
In dem Artboard haben Kristin und ich nun alle Module aus meinem Raster hinzugefügt und dieses dann um fehlende Teile aus Kristins Raster ergänzt. Zum Schluss haben wir noch die fehlenden vorgegebenen Textmodule ergänzt.
Da die Spalte ganz links nicht richtig in das Raster passt, habe ich diese für den späteren Verlauf weggelassen, da sie keine weitere Relevanz hat.
Typografie Website Rastern 10.04.2024
Schriftvorstellung Montserrat 10.04.2024
Website Analyse 27.03.2024
Unsere nächste Aufgabe war, dass wir eine Website raussuchen sollten, welche viele verschiedene Elemente enthält wie ein Filtersystem, ein Kontaktformular oder einfache Bild und Textelemente.
Hierbei haben Kristin und ich uns für die Seite von Viessmann entschieden, da sie alle gewünschten Kriterien erfüllt.
Im nächsten Schritt, sollten wir verschiedene typografische Internetseiten raussuchen, welche verschiedene Module im Raster haben.
Nachdem wir jeweils viele verschiedene Internetseiten durchforstet haben, bin ich am Ende bei dieser hier für das Raster gelandet.
https://www.grillitype.com/typeface/gt-america
Link für geteiltes Figma-Board:
Hobby Website 20.03.2024
Als erstes sollten wir uns ein Hobby von uns überlegen, welches wir in einer Figma-Website darstellen möchten.
Dabei habe ich mich für das Hobby „Makramee knüpfen“ entschieden.
Hierbei haben wir ein Grundgerüst in Figma erhalten und konnten dort ganz einfach unsere eigenen Texte und Bilder von Unsplash verwenden.
Nun sollten wir die Website interaktiv über das Prototyping machen, heißt eine wechselnde Bildergalerie und eine funktionierende Navigationsleiste. Bei der Bildergalerie war auch wichtig, dass man ein Feedback bekommt beim Hovern.
