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

DESAIGN – Podcastkampagne mit Künstlicher Intelligenz

DESAIGN – Podcastkampagne mit Künstlicher Intelligenz

Bachelorarbeit Wintersemester 2023/24

01 | Arbeitstitel

DESAIGN - Podcast-Kampagne mit Künstlicher Intelligenz

Gestaltung und Konzeption einer digitalen Anwendung über die Auswirkungen von Künstlicher Intelligenz auf Gestaltung und Gestalter*innen

02 | Kurzbeschreibung

Wie kann KI in den Gestaltungsprozess integriert werden und welche Diskurse stehen dabei zur Debatte? Die fiktive Podcast-Kampagne „DesAIgn“ wurde mit Hilfe von von KI-Tools kreiert. Der gesamte Prozesd wird auf einer interaktiven Website detailliert analysiert, bewertet und durch Diskurse hinterfragt. Das Hauptanliegen dieser Arbeit besteht darin, die Rolle und Auswirkungen der KI-Integration exemplarisch zu skizzieren und zu reflektieren. Ziel ist es, die aktuelle Thematik rund um KI und Design aufzuklären und zu sensibilisieren, um einen informierten Dialog zu fördern und potenzielle Zukunftsentwicklungen in diesem Bereich aktiv zu gestalten.

03 | Projekt- und Risikomanagement

Projekt, Risiko.jpgProjekt, Risiko.jpg

04 | Konzept – Ausgangssituation, Problem, Lösung

Problem: 

Gesellschaftliche Relevanz: Welche Auswirkungen hat Künstliche Intelligenz auf Gestaltung und Gestalter*innen?

Designbezogene Relevanz: Wie kann man beispielhaft diese Auswirkungen darstellen und skizzieren?

Lösung: Eine experimentelle Webstory wurde entwickelt, um auf interaktive Weise mit einem fiktiven KI-generierten Projekt aufzuklären, zu reflektieren und ein Bewusstsein dafür zu schaffen. Ziel ist es, einen Beitrag zum Spannungsfeld zwischen KI und Design sowie einen umfassenden Diskurs über die damit verbundenen ethischen, rechtlichen und kreativen Herausforderungen anzustoßen und die Sensibilisierung für diese aktuelle Thematik zu fördern.

Kick-Off.pngKick-Off.png

What, How, Why - KI.pngWhat, How, Why - KI.png

44.png44.png
43.png43.png

05 | Recherche, Inhalte, Daten, Quellen

Inhaltliche Recherche

1. KI im Allgemeinen:

  • Was ist KI

  • Definition von KI

  • Themen der Künstlichen Intelligenz

  • Kategorisierung von KI

  • Geschichte der KI

  • Funktionsweise von KI

  • Herrausforderungen durch KI

2. KI und Design:

  • Wie kann KI in den Gestaltungsprozess integriert werden?
  • Triple-Loop-Ansatz

Kreativer Diskurs: 

  • Wie kreativ sind KIs? 
  • Können KIs kreativer als Menschen sein? 
  • Braucht es Veränderungen in der Designausbildung? 
  • Welche neuen Fähigkeiten brauchen wir?

Ethischer Diskurs: 

  • Sind KI-Systeme nachhaltig? 
  • Welche ethische Richtlinien gibt es? 
  • Brauchen wir ein neues Wertesystemen?

Rechtliche Diskurs: 

  • Was gilt im Urheberrecht im Umgang mit KI? 
  • Gibt es ein umfassendes rechtliches Regelwerk? 
  • Wer bestimmt was KI tut?

Wettbewerbsanalyse

Website-2.pngWebsite-2.png
Website-1.pngWebsite-1.png
Wettbewerbsanalyse.jpgWettbewerbsanalyse.jpg

Methoden

Kampagnen.jpgKampagnen.jpg

Google HHH-KI.pngGoogle HHH-KI.png
SCOM-KI.pngSCOM-KI.png
Content Polygon-KI.pngContent Polygon-KI.png
Content Wertemodell-KI.pngContent Wertemodell-KI.png

06 | Storyline, Spannungsbogen, Mindmap

Spannungsbogen-KI.pngSpannungsbogen-KI.png
Storyline.pngStoryline.png
Mindmap-KI.pngMindmap-KI.png

07 | Moodboard

Tonalitäten.jpgTonalitäten.jpg

Route 3-01.jpgRoute 3-01.jpg
Route 3-01-2.jpgRoute 3-01-2.jpg
Route 3-01-3.jpgRoute 3-01-3.jpg
Route 3-01-1.jpgRoute 3-01-1.jpg

08 | Skizzen, erste Layouts und Prototypen

Ich habe eine umfassende Untersuchung verschiedener Strukturansätze durchgeführt, indem ich verschiedene Konzeptansätze in Wireframing getest habe. Durch das systematische Wireframing konnte ich die Navigation, Informationsarchitektur und das Gesamtdesign iterativ optimieren. Diese explorative Vorgehensweise hat nicht nur zur Identifizierung optimaler Strukturansätze beigetragen, sondern auch dazu, ein tiefergehendes Verständnis für die Interaktion zwischen Nutzen und Struktur zu entwickeln.

Verschiedene Ansätze für Wireframes

Skizze-1.pngSkizze-1.png
Skizze-2.pngSkizze-2.png
Skizze-3.pngSkizze-3.png
Skizze-4.pngSkizze-4.png
Finale Struktur.jpgFinale Struktur.jpg
Skizze-5.pngSkizze-5.png

Finale Struktur

Strukturskizze.pngStrukturskizze.png

09 | Designvarianten

Designrouten

Übersicht.jpgÜbersicht.jpg
Route 3-02-2.jpgRoute 3-02-2.jpg
Route 3-02.jpgRoute 3-02.jpg
Route 3-02.jpgRoute 3-02.jpg
Route 3-02-1.jpgRoute 3-02-1.jpg

Prototyp-Varianten:

Prototyp-Test.pngPrototyp-Test.png

Dadurch, dass der schwarz-weiße Entwurf im Layout auseinandergefallen ist und die gewünschte Emotionalität gefehlt hat, habe ich mich entschieden, den charakteristischen Stil des Podcasts stärker in die Hauptseite zu integrieren. Dabei wird der Stil jedoch auf eine reduzierte und dennoch ansprechende Art und Weise präsentiert, um mehr Abwechslung und Emotionalität zu erhalten.

Prototyp-Variante_01.pngPrototyp-Variante_01.png
Prototyp-Variante_01-1.pngPrototyp-Variante_01-1.png
Prototyp-Variante_01-2.pngPrototyp-Variante_01-2.png
Prototyp-Variante_01-3.pngPrototyp-Variante_01-3.png

Websitegestaltung.pngWebsitegestaltung.png
Kampagnengestaltung.pngKampagnengestaltung.png

10 | Finales Design

13.png13.png
14.png14.png

11 | Prototyp

Prototyp.pngPrototyp.png

12 | Testing

Testing-KI.pngTesting-KI.png

Usability.jpgUsability.jpg

QF.pngQF.png
QF-2.pngQF-2.png

13 | Finaler Prototyp / Link Webflow

https://desaign.webflow.io/ (1440px-Ansicht)

14 | Styleguide

Styleguide-1.jpgStyleguide-1.jpg
Styleguide-2.jpgStyleguide-2.jpg
Styleguide.jpgStyleguide.jpg
Styleguide-3.jpgStyleguide-3.jpg
Styleguide-4.jpgStyleguide-4.jpg
Styleguide-5.jpgStyleguide-5.jpg
Styleguide-6.jpgStyleguide-6.jpg
Styleguide-7.jpgStyleguide-7.jpg

15 | Screencast

16 | Präsentationsvideo

17 | Ausstellung

Frame 3.pngFrame 3.png
Frame 5.jpgFrame 5.jpg

Frame 1321316424.jpgFrame 1321316424.jpg

18 | Thesis

240128_Haselhoff_Kim_Bachelorarbeit.pdf PDF 240128_Haselhoff_Kim_Bachelorarbeit.pdf

_________________________________________

Exposé | 01.10.23

Expose.jpgExpose.jpg

Kick-Off | 12.10.23

Kick-Off.pdf PDF Kick-Off.pdf

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Bachelor Storytelling / UX (ND)

Entstehungszeitraum

Wintersemester 2023 / 2024