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

Dokumentation

1. Workshop Interaktion/Module Web

Wir haben uns die Webseite von Dr. Martens angeschaut. 

Aktueller Link: https://www.drmartens.com/de/de/?srsltid=AfmBOorFJVtARe4mx9cZ7wUL0YgA-rs5taykoe8sFPHSfV75a3hf0fwO

Screenshot 2025-07-20 174841.pngScreenshot 2025-07-20 174841.png
Screenshot 2025-07-20 174852.pngScreenshot 2025-07-20 174852.png
Screenshot 2025-07-20 174900.pngScreenshot 2025-07-20 174900.png

Screenshot 2025-07-20 174925.pngScreenshot 2025-07-20 174925.png
Screenshot 2025-07-20 174937.pngScreenshot 2025-07-20 174937.png

Zuordnung

Screenshot 2025-07-20 175008.pngScreenshot 2025-07-20 175008.png
Screenshot 2025-07-20 175113.pngScreenshot 2025-07-20 175113.png
Screenshot 2025-07-20 175033.pngScreenshot 2025-07-20 175033.png
Screenshot 2025-07-20 175049.pngScreenshot 2025-07-20 175049.png
Screenshot 2025-07-20 175105.pngScreenshot 2025-07-20 175105.png
Screenshot 2025-07-20 175127.pngScreenshot 2025-07-20 175127.png

2. Website-Raster: Analyse Webseite allgemein

Bildschirmfoto 2025-04-11 um 18.20.23.pngBildschirmfoto 2025-04-11 um 18.20.23.png

Wir haben uns zuerst die Webseite von Dr. Martens angeschaut, mussten dann aber feststellen, dass fast alle verwendeten Module Ausnahmen waren und fast nichts in ein „normales“ Raster passte. 

Wir haben dann zu weiteren Bearbeitung der Aufgabe die Webseite von Nike verwendet. Hier hat alles in ein 6/12 Raster gepasst.

3. Raster und Rhythmus

Raster Ableitung 1.

Aktueller Link: https://www.thedesignersfoundry.com/gatch

Ableitung Raster_1.PNGAbleitung Raster_1.PNG
Ableitung Raster_2.PNGAbleitung Raster_2.PNG
Ableitung Raster_3.PNGAbleitung Raster_3.PNG

Reinzeichnung der Module 1.

Ableitung Raster_4.PNGAbleitung Raster_4.PNG
Ableitung Raster_5.PNGAbleitung Raster_5.PNG

Raster Ableitung 2. 

Aktueller Link: https://www.gt-pressura.com/

Bildschirmfoto 2025-04-11 um 18.08.45 Kopie.pngBildschirmfoto 2025-04-11 um 18.08.45 Kopie.png
Bildschirmfoto 2025-04-11 um 18.09.03 Kopie.pngBildschirmfoto 2025-04-11 um 18.09.03 Kopie.png

Reinzeichnung der Module 2.

Bildschirmfoto 2025-04-11 um 18.08.45.pngBildschirmfoto 2025-04-11 um 18.08.45.png
Bildschirmfoto 2025-04-11 um 18.09.03.pngBildschirmfoto 2025-04-11 um 18.09.03.png

Raster Ableitung 3. 

Aktueller Link: https://www.luzi-type.ch/messina-sans

Bildschirmfoto 2025-04-11 um 18.08.22 Kopie.pngBildschirmfoto 2025-04-11 um 18.08.22 Kopie.png

Reinzeichnung der Module 3.

Bildschirmfoto 2025-04-11 um 18.08.22.pngBildschirmfoto 2025-04-11 um 18.08.22.png

Rasterzusammenfügung: alle Module

Alle Module_2.PNGAlle Module_2.PNG
Alle Module_1.PNGAlle Module_1.PNG
Alle Module_5.PNGAlle Module_5.PNG
Alle Module_3.PNGAlle Module_3.PNG
Alle Module_4.PNGAlle Module_4.PNG
Alle Module_6.PNGAlle Module_6.PNG

Rhythmusübungen und Reinzeichnungen

Kit_1.PNGKit_1.PNG
Kit_2.PNGKit_2.PNG
Kit_3.PNGKit_3.PNG
Kit_5.PNGKit_5.PNG
Kit_4.PNGKit_4.PNG
Kit_6.PNGKit_6.PNG
Kit_7.PNGKit_7.PNG
Kit_8.PNGKit_8.PNG
Kit_9.PNGKit_9.PNG

Kit_1.PNGKit_1.PNG
Kit_2.PNGKit_2.PNG
Kit_3.PNGKit_3.PNG
Kit_4.PNGKit_4.PNG
Kit_5.PNGKit_5.PNG
Kit_6.PNGKit_6.PNG
Kit_7.PNGKit_7.PNG
Kit_8.PNGKit_8.PNG

4. Typowebseite

Erster Entwurf Aufbau

Aufbau_1.PNGAufbau_1.PNG
Aufbau_2.PNGAufbau_2.PNG
Aufbau_3.PNGAufbau_3.PNG
Aufbau_4.PNGAufbau_4.PNG
Aufbau_5.PNGAufbau_5.PNG

Endgültiger Entwurf Aufbau

Anfangs hatte ich mit dem ersten Entwurf gearbeitet, habe dann aber ziemlich schnell gemerkt, dass manche Module nicht zu den jeweiligen Sections gepasst haben, weshalb ich einiges nochmal geändert und ausgetauscht habe.

Screenshot 2025-07-20 182532.pngScreenshot 2025-07-20 182532.png
Screenshot 2025-07-20 182544.pngScreenshot 2025-07-20 182544.png
Screenshot 2025-07-20 182553.pngScreenshot 2025-07-20 182553.png
Screenshot 2025-07-20 182606.pngScreenshot 2025-07-20 182606.png
Screenshot 2025-07-20 182619.pngScreenshot 2025-07-20 182619.png

Moodboards

Mooadboard_1.JPGMooadboard_1.JPG
Moodboard_2.JPGMoodboard_2.JPG
Moodboard_3.JPGMoodboard_3.JPG

Eingesetzte Moodboards

Mooadboard_1.JPGMooadboard_1.JPG
Moodboard 1_1.pngMoodboard 1_1.png
Moodboard 2_2.pngMoodboard 2_2.png
Moodboard 3_3.pngMoodboard 3_3.png
Moodboard 3_4.pngMoodboard 3_4.png

Moodboard_2.JPGMoodboard_2.JPG
Moodboard 2.pngMoodboard 2.png

Moodboard_3.JPGMoodboard_3.JPG
Moodboard 5.pngMoodboard 5.png
Moodboard 6.pngMoodboard 6.png
Moodboard 4.pngMoodboard 4.png

Überarbeitete Sections

aus zeitlichen Gründen hatte ich meine Moodboards eher sporadisch in den ersten drei Sections umgesetzt. Deshalb habe ich sie dann nach Rücksprache nochmals überarbeitet und verbessert. Schlussendlich habe ich mich für die erste Variante (das bunte mit Blumen) entschieden. Ehrlich gesagt viel mir diese Aufgabe nicht wirklich leicht, da ich eine kleine Blockade hatte und nicht wirklich wusste was ich zu meiner Schrift gestalten sollte und wie ich es umsetzten sollte. Diese Blockade hat sich dann aber nach einigen Tagen der Überlegung wieder gelöst.

Moodboard 1_2.pngMoodboard 1_2.png

Moodboard 2_2.pngMoodboard 2_2.png

Moodboard 3_2_1.pngMoodboard 3_2_1.png
Moodboard 3_2_3.pngMoodboard 3_2_3.png
Moodboard 3_2_2.pngMoodboard 3_2_2.png
Moodboard 3_2_4.pngMoodboard 3_2_4.png

Prozess 

Stand 14.05

Leider habe ich seit dem 14.05 nichts mehr „richtig“ dokumentiert oder Screenshots gemacht. Seit diesem Datum ist aber sehr viel passiert. Ich habe alle Animationen erstellt, sondern auch Farben, Abstände und Module angepasst und verändert.

1.PNG1.PNG
2.PNG2.PNG
3.PNG3.PNG
4.PNG4.PNG
5.PNG5.PNG
6.PNG6.PNG
7.PNG7.PNG

Endgültiger Stand 20.07

Seit meinem letzten Stand habe ich mich um die Startanimation gekümmert, aber auch viele Animationen nochmal überarbeitet und angepasst. Auch habe ich mich um das Prototyping gekümmert und nochmals Module (Glyphenraster, Regler, Slider) angepasst und verbessert.

Screenshot 2025-07-20 184220.pngScreenshot 2025-07-20 184220.png
Screenshot 2025-07-20 184228.pngScreenshot 2025-07-20 184228.png
Screenshot 2025-07-20 184237.pngScreenshot 2025-07-20 184237.png
Screenshot 2025-07-20 184246.pngScreenshot 2025-07-20 184246.png
Screenshot 2025-07-20 184257.pngScreenshot 2025-07-20 184257.png
Screenshot 2025-07-20 184305.pngScreenshot 2025-07-20 184305.png

Animationen

Titel Animation

Schriftschnitte

Glyphen

Merkmale

Geschichte

Aufgriff Titel Animation

5. Reinzeichnung

Screenshot 2025-07-20 182532.pngScreenshot 2025-07-20 182532.png
Screenshot 2025-07-20 182544.pngScreenshot 2025-07-20 182544.png
Screenshot 2025-07-20 182553.pngScreenshot 2025-07-20 182553.png
Screenshot 2025-07-20 182606.pngScreenshot 2025-07-20 182606.png
Screenshot 2025-07-20 182619.pngScreenshot 2025-07-20 182619.png

6. Styleguide

Styleguide.pngStyleguide.png

7. Screencast Desktop

8. Figma Link zum Prototypen Desktop

9. Screencast Mobile

10. Figma Link zum Prototypen Mobile

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Digital Design II

Entstehungszeitraum

Sommersemester 2025