Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Montserrat Typo-Website

Digital Design Projekte im SS 23/24 von Rebecca Sophia Klassen

Endergebnis Montserrat Link 10.07.2024

Styleguide 03.06.2024

Lightmode.jpgLightmode.jpg
Darkmode.jpgDarkmode.jpg

Light- und Darkmode Switch 03.06.2024

Screenshot 2024-06-30 141959.pngScreenshot 2024-06-30 141959.png
Screenshot 2024-06-30 142054.pngScreenshot 2024-06-30 142054.png
Screenshot 2024-06-30 142015.pngScreenshot 2024-06-30 142015.png
Screenshot 2024-06-30 142043.pngScreenshot 2024-06-30 142043.png

Übersicht aller Prototypes und Animationen 03.06.2024

Screenshot 2024-06-30 094130.pngScreenshot 2024-06-30 094130.png
Screenshot 2024-06-30 094113.pngScreenshot 2024-06-30 094113.png
Screenshot 2024-06-30 094101.pngScreenshot 2024-06-30 094101.png
Screenshot 2024-06-30 094050.pngScreenshot 2024-06-30 094050.png
Screenshot 2024-06-30 094040.pngScreenshot 2024-06-30 094040.png

Mobile Variante 03.06.2024

Screenshot 2024-06-30 142337.pngScreenshot 2024-06-30 142337.png
Screenshot 2024-06-30 142353.pngScreenshot 2024-06-30 142353.png
Screenshot 2024-06-30 142343.pngScreenshot 2024-06-30 142343.png
Screenshot 2024-06-30 142409.pngScreenshot 2024-06-30 142409.png
Screenshot 2024-06-30 142418.pngScreenshot 2024-06-30 142418.png
Screenshot 2024-06-30 142427.pngScreenshot 2024-06-30 142427.png
Screenshot 2024-06-30 142435.pngScreenshot 2024-06-30 142435.png
Screenshot 2024-06-30 142445.pngScreenshot 2024-06-30 142445.png

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.

Klassen, Rebecca Montserrat Plakat.pdf PDF Klassen, Rebecca Montserrat Plakat.pdf

A4 - 4.jpgA4 - 4.jpg
A4 - 1.jpgA4 - 1.jpg
A4 - 3.jpgA4 - 3.jpg
A4 - 2.jpgA4 - 2.jpg
A4 - 5.jpgA4 - 5.jpg
A4 - 6.jpgA4 - 6.jpg

Entwicklung der Varianten der Website 26.06.2024

Screenshot 2024-06-30 093604.pngScreenshot 2024-06-30 093604.png

Zwischenstand 05.05.2024

Screenshot 2024-06-01 223107.pngScreenshot 2024-06-01 223107.png
Screenshot 2024-06-01 223212.pngScreenshot 2024-06-01 223212.png
Screenshot 2024-06-01 223155.pngScreenshot 2024-06-01 223155.png
Screenshot 2024-06-01 223247.pngScreenshot 2024-06-01 223247.png
Screenshot 2024-06-01 223126.pngScreenshot 2024-06-01 223126.png
Screenshot 2024-06-01 223230.pngScreenshot 2024-06-01 223230.png
Screenshot 2024-06-01 223304.pngScreenshot 2024-06-01 223304.png

Screenshot 2024-06-02 145344.pngScreenshot 2024-06-02 145344.png

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.

IMG_3261.pngIMG_3261.png
Screenshot 2024-05-05 112049.pngScreenshot 2024-05-05 112049.png
Screenshot 2024-05-05 112110.pngScreenshot 2024-05-05 112110.png
Screenshot 2024-05-05 112117.pngScreenshot 2024-05-05 112117.png
Screenshot 2024-05-05 112101.pngScreenshot 2024-05-05 112101.png

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.

Geometrische Boxen.pngGeometrische Boxen.png

Unbenanntes_Projekt.pngUnbenanntes_Projekt.png
Inhalte Z.jpgInhalte Z.jpg
Inhalte Z-1.jpgInhalte Z-1.jpg
Inhalte Z-2.jpgInhalte Z-2.jpg

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.

Unbenanntes_Projek0t2.pngUnbenanntes_Projek0t2.png
Inhalte G.jpgInhalte G.jpg
Inhalte G-1.jpgInhalte G-1.jpg
Inhalte G-2.jpgInhalte G-2.jpg

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

Inhalte.jpgInhalte.jpg
Inhalte-1.jpgInhalte-1.jpg
Inhalte-3.jpgInhalte-3.jpg
Inhalte-2.jpgInhalte-2.jpg

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.

Gliederung-4.jpgGliederung-4.jpg
Gliederung-1.jpgGliederung-1.jpg
Gliederung.jpgGliederung.jpg
Gliederung-3.jpgGliederung-3.jpg
Gliederung-2.jpgGliederung-2.jpg

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.

Screenshot 2024-04-26 170143.pngScreenshot 2024-04-26 170143.png

Screenshot 2024-04-26 170647.pngScreenshot 2024-04-26 170647.png

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.

Screenshot 2024-04-26 154627.pngScreenshot 2024-04-26 154627.png
Screenshot 2024-04-26 154619.pngScreenshot 2024-04-26 154619.png
Screenshot 2024-04-26 154609.pngScreenshot 2024-04-26 154609.png

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

Screenshot 2024-04-26 154112.pngScreenshot 2024-04-26 154112.png
Screenshot 2024-04-26 154045.pngScreenshot 2024-04-26 154045.png
Screenshot 2024-04-26 154058.pngScreenshot 2024-04-26 154058.png

Schriftvorstellung Montserrat 10.04.2024

Screenshot 2024-07-10 114741.pngScreenshot 2024-07-10 114741.png
Screenshot 2024-07-10 114706.pngScreenshot 2024-07-10 114706.png
Screenshot 2024-07-10 114711.pngScreenshot 2024-07-10 114711.png
Screenshot 2024-07-10 114648.pngScreenshot 2024-07-10 114648.png
Screenshot 2024-07-10 114640.pngScreenshot 2024-07-10 114640.png
Screenshot 2024-07-10 114717.pngScreenshot 2024-07-10 114717.png
Screenshot 2024-07-10 114658.pngScreenshot 2024-07-10 114658.png
Screenshot 2024-07-10 114723.pngScreenshot 2024-07-10 114723.png
Screenshot 2024-07-10 114729.pngScreenshot 2024-07-10 114729.png

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.

https://www.viessmann.de/

Screenshot 2024-04-18 200307.pngScreenshot 2024-04-18 200307.png
Screenshot 2024-04-18 200403.pngScreenshot 2024-04-18 200403.png
Screenshot 2024-04-18 200349.pngScreenshot 2024-04-18 200349.png
Screenshot 2024-04-18 200327.pngScreenshot 2024-04-18 200327.png
Screenshot 2024-04-18 200318.pngScreenshot 2024-04-18 200318.png
Screenshot 2024-04-18 200413.pngScreenshot 2024-04-18 200413.png
Screenshot 2024-04-18 200422.pngScreenshot 2024-04-18 200422.png
Screenshot 2024-04-18 200436.pngScreenshot 2024-04-18 200436.png

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:

https://www.figma.com/file/KoP244aGzGNJnw7HBy3NKu/Bex_Kristin_Typo?type=design&node-id=0%3A1&mode=design&t=XseybQrP7Vn0CnXk-1

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.

https://www.figma.com/file/oBMfxG0xafnHsyP0y7cJKt/Mein-Hobby-HTML-Werkstatt?type=design&node-id=0%3A1&mode=design&t=Xx3RDP5jOq7fq5WE-1

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Digital Design / SS24

Entstehungszeitraum

Sommersemester 2024