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

DEIN KIEZ: Gentrifizierung

https://dein-kiez.framer.website/

DK_DECKBLATT_NEU.jpgDK_DECKBLATT_NEU.jpg

PROJEKT

Dein Kiez

Eine Intervention über Gentrifizierung – am Beispiel Berlin-Neukölln

Gentrifizierung wird meist in Zahlen verhandelt und bleibt dadurch abstrakt – sie scheint immer nur die anderen zu betreffen. „Dein Kiez„ hebt diese Distanz auf. Hauptmedium ist eine Scrollytelling-Website, die gezielt jene anspricht, die selbst wegen Flair, Nachbarschaft und günstiger Miete zugezogen sind und sich für unbeteiligt halten. Konsequent per „du“ macht sie sie vom Beobachter zum Beteiligten und verbindet Datenrecherche, reale Fälle und Rechtsmechanismen zu einer Erzählung, die in einen Handlungsaufruf mündet. Ergänzt wird sie durch ein fingiertes, siezendes Immobilien-Schreiben zum Weiterverteilen und eine Augmented-Reality-Anwendung, die an einem Wohnhaus von 1979 bis 2035 zeigt, was der Zielgruppe selbst droht, wenn sie nicht handelt: wie Aufwertung die Bewohner:innen nacheinander verdrängt – bis zuletzt sie an der Reihe ist. Neukölln steht exemplarisch für einen Prozess, der viele Städte prägt.

Macbook.pngMacbook.png
Web Screens Perspective PSD Mockup_4.pngWeb Screens Perspective PSD Mockup_4.png
Web Screens Perspective PSD Mockup_5.pngWeb Screens Perspective PSD Mockup_5.png
Web Screens 6 Perspective PSD Mockup.pngWeb Screens 6 Perspective PSD Mockup.png

Präsentationsvideo

Screencast

Brief

gefälschte Umwandlung-Offerte mit QR-Code zur AR-Anwendung

A4_Flyer_Mockup_3.pngA4_Flyer_Mockup_3.png
A4_Flyer_Mockup_4.pngA4_Flyer_Mockup_4.png

Umwandlungs-Offerte.pdf PDF Umwandlungs-Offerte.pdf

AR-Anwendung

01 Free Iphone 15 Pro On Concrete Brick Mockup_2.png01 Free Iphone 15 Pro On Concrete Brick Mockup_2.png

Poster

Street_Posters_Mockup.pngStreet_Posters_Mockup.png
Free_Poster_Mockup.pngFree_Poster_Mockup.png
Bus_Station_Mockup.pngBus_Station_Mockup.png
Poster_Frame_Mockup.pngPoster_Frame_Mockup.png
Free_Citylight_Mockup_3.pngFree_Citylight_Mockup_3.png

Sticker

Frame 1748347.jpgFrame 1748347.jpg

Metermaß

IMG_1077.jpgIMG_1077.jpg
IMG_1085.jpgIMG_1085.jpg
IMG_1091.jpgIMG_1091.jpg

Endpräsentation

Endpräsentation.pdf PDF Endpräsentation.pdf

Styleguide

Styleguide.pdf PDF Styleguide.pdf

Ausstellung

IMG_0931.jpgIMG_0931.jpg
IMG_0960.jpgIMG_0960.jpg
IMG_0962.jpgIMG_0962.jpg
IMG_0961.jpgIMG_0961.jpg

________________________________________

PROZESS

1.) Themenfindung

Themenfindung.pdf PDF Themenfindung.pdf

2.) Kurzvortrag: Gentrifizierung

Kurzvortrag_Gentrifizierung.pdf PDF Kurzvortrag_Gentrifizierung.pdf

3.) Why How What

MacBook Pro 14_ - 11.jpgMacBook Pro 14_ - 11.jpg

4.) Zielgruppen

Bildschirmfoto 2026-06-02 um 01.09.39.pngBildschirmfoto 2026-06-02 um 01.09.39.png

5.) Struktur und Themen

MacBook Pro 14_ - 12.jpgMacBook Pro 14_ - 12.jpg

6.) Skizzen

Aufbauvarianten

Bildschirmfoto 2026-07-13 um 18.52.44.pngBildschirmfoto 2026-07-13 um 18.52.44.png

Layoutvarianten

Bildschirmfoto 2026-07-13 um 18.57.06.pngBildschirmfoto 2026-07-13 um 18.57.06.png

Inhaltsskizzen

Bildschirmfoto 2026-07-13 um 18.59.54.pngBildschirmfoto 2026-07-13 um 18.59.54.png

Before/After Slider

Der Before/After Slider legt zwei Inhalte exakt übereinander – in deinem Fall zwei 3D-Modelle – und trennt sie durch eine verschiebbare vertikale Linie. Das Before-Modell liegt immer vollständig sichtbar im Hintergrund. Das After-Modell darüber wird mit einer CSS-Maske (`clipPath`) abgeschnitten, sodass nur der Teil rechts der Trennlinie sichtbar ist. Verschiebt der Nutzer den Handle nach links, wächst der sichtbare Bereich des After-Modells – nach rechts schrumpft er wieder.

Die Interaktion funktioniert so: Sobald der Nutzer den Handle anfasst, wird jede Mausbewegung abgefangen und die horizontale Position in einen Prozentwert umgerechnet. Dieser Wert steuert gleichzeitig, wo die Linie gezeichnet wird und wie weit die Maske des After-Inhalts reicht. Alles passiert in Echtzeit ohne Verzögerung.

Der gesamte Component ist als Section aufgebaut, die exakt einen Bildschirm hoch ist (`100dvh`). Linie und Handle sind relativ zu dieser Section positioniert – nicht zum Browser-Fenster – sodass alles korrekt scrollt und sich auf jeder Bildschirmgröße richtig verhält.

Bildschirmfoto 2026-07-13 um 20.49.32.pngBildschirmfoto 2026-07-13 um 20.49.32.png

Test: Struktur hinter der Gentrifizierung (Verworfen)

Bildschirmfoto 2026-06-16 um 19.45.21.pngBildschirmfoto 2026-06-16 um 19.45.21.png
Bildschirmfoto 2026-06-16 um 19.43.35.pngBildschirmfoto 2026-06-16 um 19.43.35.png

7.) Recherche, Daten, Quellen

Recherche mit GPT-Agent

Bildschirmfoto 2026-05-20 um 15.25.47 2.pngBildschirmfoto 2026-05-20 um 15.25.47 2.png

Bildschirmfoto 2026-05-12 um 18.59.24 1.pngBildschirmfoto 2026-05-12 um 18.59.24 1.png
Bildschirmfoto 2026-05-12 um 18.59.18 1.pngBildschirmfoto 2026-05-12 um 18.59.18 1.png

Gentrifizierung im Schillerkiez: Wie steigende Mieten einen Neuköllner Kiez verwandeln

Cafés schließen, alteingesessene Bewohner:innen müssen weg – der Berliner Schillerkiez steht exemplarisch für die Verdrängung durch den Mietenwahnsinn.

Kiezcafé muss nach 14 Jahren schließen

Das Café „Pappelreihe„ in der Kienitzer Straße muss bald schließen. Betreiber Tamilarasan Ganeshamoorthy, der das Café 2010 eröffnete, soll nach einem Eigentümerwechsel 130 Prozent mehr Miete zahlen – plus vier Prozent Staffelmiete jährlich. Für ihn ist das nicht tragbar: Die Preise lassen sich nicht einfach verdoppeln. Von einst 20 Stammgästen aus dem Kiez kommen heute kaum noch zwei – stattdessen vor allem Touristen. nd-aktuellnd-aktuell

Das „Syndikat“: Leerstand statt Kiezkneipe

Das Ende der linken Kiezkneipe „Syndikat„ in der Weisestraße sorgte 2020 für Schlagzeilen: Über 2.200 Polizist:innen setzten die Räumung durch. Heute, fast vier Jahre später, steht der Laden immer noch leer – Schimmel, Graffiti, kein Nachfolger. Das Kollektiv hat neue Räume gefunden, allerdings nicht mehr im Schillerkiez, sondern in der Nähe des Bahnhofs Neukölln. nd-aktuellnd-aktuell

Wie die Gentrifizierung in Gang kam

Der Auslöser war die Schließung des Flughafens Tempelhof 2008 und die Öffnung des Tempelhofer Felds als Park 2010. Altbauten, die Schillerpromenade mit ihren alten Platanen und die Grünfläche machten den Kiez plötzlich attraktiv für wohlhabende Zuzügler. Zunächst kamen Immobilienfirmen wie Ziegert, die Häuser in Eigentumswohnungen umwandelten – später folgten große Wohnungsunternehmen wie Vonovia und Heimstaden. nd-aktuellnd-aktuell

Zahlen belegen den Wandel

Laut einer Befragung aus dem Jahr 2021 hatten fast die Hälfte der Haushalte im Schillerkiez ein Nettoeinkommen von 2.500 Euro oder mehr – 2015 waren es noch gut 20 Prozent. Gleichzeitig sank der Anteil von Haushalten mit weniger als 1.500 Euro Monatseinkommen von rund 45 auf knapp 20 Prozent. Die Mieten stiegen im selben Zeitraum um durchschnittlich 16 Prozent. nd-aktuell

Milieuschutz reicht nicht

Der gesamte Schillerkiez ist seit 2015 Milieuschutzgebiet – doch der Wandel ließ sich nicht aufhalten. Die migrantische Bevölkerung, die bis etwa 2010 den Kiez prägte, ist weitgehend verschwunden oder unsichtbar geworden. Stadtteilaktivist Gerdi bringt es auf den Punkt: „Günstig leben ist hier nicht mehr.“ nd-aktuellnd-aktuell

Syndikat

220989826-1.jpeg220989826-1.jpeg
Berlin-Neukolln_-_Syndikat_in_Weisestrase-1024x680.jpgBerlin-Neukolln_-_Syndikat_in_Weisestrase-1024x680.jpg
285164.jpeg285164.jpeg

Das „Syndikat„: Leerstand statt Kiezkneipe

Das Ende der linken Kiezkneipe „Syndikat“ in der Weisestraße sorgte 2020 für Schlagzeilen: Über 2.200 Polizist:innen setzten die Räumung durch. Heute, fast vier Jahre später, steht der Laden immer noch leer – Schimmel, Graffiti, kein Nachfolger. Das Kollektiv hat neue Räume gefunden, allerdings nicht mehr im Schillerkiez, sondern in der Nähe des Bahnhofs Neukölln.

Pappelreihe

242375988_1715783044_v16_9_1600.jpeg242375988_1715783044_v16_9_1600.jpeg
Pappelreihe-1024x604.jpgPappelreihe-1024x604.jpg
Pappelreihe-1024x694.jpgPappelreihe-1024x694.jpg

Kiezcafé muss nach 14 Jahren schließen

Das Café „Pappelreihe„ in der Kienitzer Straße muss bald schließen. Betreiber Tamilarasan Ganeshamoorthy, der das Café 2010 eröffnete, soll nach einem Eigentümerwechsel 130 Prozent mehr Miete zahlen – plus vier Prozent Staffelmiete jährlich. Für ihn ist das nicht tragbar: Die Preise lassen sich nicht einfach verdoppeln. Von einst 20 Stammgästen aus dem Kiez kommen heute kaum noch zwei – stattdessen vor allem Touristen.

Zitate

Zitat 1 — Thiemannstraße, Neukölln, 2018

Ein Bewohner schreibt in einem offenen Brief, nachdem ein dänischer Pensionsfonds seinen Wohnkomplex aufgekauft hat:

„Seit über 40 Jahren lebe ich in der Wohnung. Ich bin hier geboren, aufgewachsen, zur Schule gegangen. Ich habe in der Wohnung meine Einschulung gefeiert. Meinen Schulabschluss. Meinen 18. Geburtstag. [...] Wenn Sie zulassen, dass aus den Wohnungen Eigentumswohnungen werden, dann nehmen Sie vielen Menschen wie meinen Eltern und mir ein Stück ihres Lebens.“

Tagesspiegel

Quelle: Tagesspiegel, Madlen Haarbach, 26.12.2018 tagesspiegel.de/berlin/rentner-furchten-verdrangung-ich-bin-hier-geboren-4617610.html

Zitat 2 — Braunschweiger Straße, Rixdorf/Neukölln, 2025

Anna Schöneberger, Sprecherin einer Hausgemeinschaft, deren Gebäude kernsaniert werden soll — über 30 Mietparteien droht der Verlust ihrer Wohnungen:

„Wenn wir hier rausmüssen, verlieren wir alles.“

Berliner Zeitung

Quelle: Berliner Zeitung, Mai 2025 berliner-zeitung.de/mensch-metropole/wohnungsmangel-neukoelln-mieter-kaempfen-gegen-verdraenung-li.2323358

Zitat 3 — Politische Ebene, Neukölln, 2025

Jochen Biedermann, Bezirksstadtrat für Stadtentwicklung Neukölln:

„Die Sorge um die eigene Wohnung ist für viele Neuköllner:innen inzwischen das Angstthema Nr. 1.“

Berlin

Quelle: Pressemitteilung Bezirksamt Neukölln, 27.01.2025 berlin.de/ba-neukoelln/aktuelles/pressemitteilungen/2025/pressemitteilung.1524691.php

Zitat 4 — Hermannstraße / Schillerkiez, Neukölln, 2012

Anonyme Anwohnerin bei einer Kiezumfrage der Initiative AntiGen, zitiert nach Gespräch an einem Kiosk:

„Die verdammte Miete ist zu hoch!“

Berliner MieterGemeinschaft

Quelle: MieterEcho Nr. 354, Berliner MieterGemeinschaft, Mai 2012 bmgev.de/mieterecho/artikel/die-verdammte-miete-ist-zu-hoch

Zitat 5 — Neu-Tempelhof / Neukölln-Grenze, 2024

Mieterinitiative über landeseigene Wohnungsbaugesellschaft „Stadt und Land“, die 590 Wohnungen saniert und Mieten um bis zu 30% erhöht:

„Wir haben das Gefühl, dass diese alten Mietverträge auf SuL toxisch wirken, und sie uns aufgrund von angestrebter Gewinnmaximierung verdrängen wollen. Uns fehlt die Sicherheit. Wir wissen nicht, wie es weitergeht.“

Berliner MieterGemeinschaft

Quelle: MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024 bmgev.de/mieterecho/artikel/wir-bemerken-die-verzweiflung-vieler-mieter-innen

Zitat 6 — Modernisierungsankündigung, Neukölln, 2022/2023

Dieselbe Mieterinitiative über den Informationsprozess:

„Wir wurden erst im Dezember 2022 mit einem Schreiben informiert. Ende Januar 2023 hatten wir individuelle Modernisierungsankündigungen im Briefkasten, mit Baubeginn bereits vier Monate später. Es blieb ein Monat Zeit, um einen Einspruch zu formulieren.“

Berliner MieterGemeinschaft

Quelle: MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024

Quellen

https://www.linksfraktion-neukoelln.de/aktuelles/nachrichten/detail/mietwucher-check-der-linken-im-bundestag-wirkt/?

https://www.ibb.de/de/ueber-uns/publikationen/wohnungsmarktbericht/2025.html?

https://www.statistikportal.de/de/nachhaltigkeit/ergebnisse/ziel-1-keine-armut/mietbelastungsquote?

https://www.nd-aktuell.de/artikel/1182604.mietenwahnsinn-in-berlin-schillerkiez-reiche-verdraengen-in-neukoelln-die-anwohner.html

https://www.immobilienscout24.de/immobilienpreise/berlin/berlin/neukoelln/mietspiegel?mapCenter=52.445928%2C13.46178%2C11.848883819537694

https://www.immobilienscout24.de/immobilienpreise/berlin/berlin/neukoelln-neukoelln?mapCenter=52.476939%2C13.43897%2C13.240744535132508

https://www.immowelt.de/immobilienpreise/berlin-10115/neukolln-12051/nbh2de91302063

https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Neukoelln/?

https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Gropiusstadt/?

https://www.reddit.com/r/askberliners/comments/1mnojcm/berliners_who_lived_here_before_2010_whats_the/?solution=3b347d2d4f7763cb3b347d2d4f7763cb&js_challenge=1&token=7afd7253fec22262ff1c52b1703fe9ec5284a5481cf779efb1228317578b8c3b&jsc_orig_r=

https://www.immobilienscout24.de/immobilienpreise/berlin/berlin/neukoelln-neukoelln?mapCenter=52.476939%2C13.43897%2C13.240744535132508

https://www.immowelt.de/immobilienpreise/berlin-10115/neukolln-12051/nbh2de91302063

https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Neukoelln/?

https://www.miete-aktuell.de/immobilienpreise-quadratmeterpreise/Berlin/Berlin/Gropiusstadt/?

https://www.leftvoice.org/a-left-wing-bar-needs-to-be-open-to-everyone-including-palestinians/

https://taz.de/Wiedereroeffnung-der-Kneipe-Syndikat/!5909955/

https://taz.de/Raeumung-der-Kneipe-Syndikat-in-Berlin/!5705833/

https://www.wahrschauer.net/politik-2/867-kneipenkollektiv-syndikat-nach-35-jahren-geraeumt

https://facettenneukoelln.wordpress.com/2020/12/29/was-tut-der-senat-gegen-leerstand-und-zweckentfremdung-in-der-weisestrase-56/

https://www.berliner-mieterverein.de/magazin/online/mm1010/101012a.htm

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.berlin.de%2Fba-neukoelln%2Fpolitik-und-verwaltung%2Fbezirksamt%2Fgeschaeftsbereich-stadtentwicklung-umwelt-und-verkehr%2F&ved=0CBYQjRxqFwoTCPD1uKfI_JQDFQAAAAAdAAAAABAF&opi=89978449

Bilderquellen

Tagesspiegel, Madlen Haarbach, 26.12.2018 tagesspiegel.de/berlin/rentner-furchten-verdrangung-ich-bin-hier-geboren-4617610.html

Berliner Zeitung, Mai 2025 berliner-zeitung.de/mensch-metropole/wohnungsmangel-neukoelln-mieter-kaempfen-gegen-verdraenung-li.2323358

Pressemitteilung Bezirksamt Neukölln, 27.01.2025 berlin.de/ba-neukoelln/aktuelles/pressemitteilungen/2025/pressemitteilung.1524691.php

MieterEcho Nr. 354, Berliner MieterGemeinschaft, Mai 2012 bmgev.de/mieterecho/artikel/die-verdammte-miete-ist-zu-hoch

MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024 bmgev.de/mieterecho/artikel/wir-bemerken-die-verzweiflung-vieler-mieter-innen

MieterEcho Nr. 440, Berliner MieterGemeinschaft, 2024

https://www.berliner-mieterverein.de/magazin/online/mm1010/101012a.htm

https://www.tagesspiegel.de/berlin/bezirke/nach-zwangsraumung-und-protest-linke-berliner-szene-kneipe-syndikat-offnet-wieder-9207771.html

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.tagesspiegel.de%2Fberlin%2Fpolizei-justiz%2Fkiezladen-nach-protesten-an-gerichtsvollzieher-ubergeben-5499004.html&ved=0CBYQjRxqGAoTCIj5wbz9nJUDFQAAAAAdAAAAABC1Ag&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.tagesspiegel.de%2Fberlin%2Fwarum-friedel-54-gegen-die-berliner-polizei-klagt-5051563.html&ved=0CBYQjRxqGAoTCIj5wbz9nJUDFQAAAAAdAAAAABDlAw&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.mz.de%2Fpanorama%2Ffriedel-54-in-berlin-neukoln-turknauf-stand-nicht-unter-strom-1327949&ved=0CBYQjRxqGAoTCIj5wbz9nJUDFQAAAAAdAAAAABC2BA&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fde.wikipedia.org%2Fwiki%2FRigaer_94&ved=0CBYQjRxqFwoTCJCVpOD-nJUDFQAAAAAdAAAAABA3&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Ftaz.de%2FEigentuemer-und-Besetzer-der-Rigaer-94%2F!6113423%2F&ved=0CBYQjRxqGAoTCJCVpOD-nJUDFQAAAAAdAAAAABClAg&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.sueddeutsche.de%2Fpolitik%2Frigaer-strasse-94-berlin-linksextremismus-1.5323840&ved=0CBYQjRxqGAoTCJCVpOD-nJUDFQAAAAAdAAAAABCvBg&opi=89978449

https://www.google.com/url?sa=t&source=web&rct=j&url=https%3A%2F%2Fwww.sueddeutsche.de%2Fpolitik%2Fberlin-rigaer-94-polizei-hofft-auf-ruhigen-einsatz-dpa.urn-newsml-dpa-com-20090101-210617-99-26849&ved=0CBYQjRxqGAoTCJCVpOD-nJUDFQAAAAAdAAAAABDsBw&opi=89978449

8.) Moodboards

Gerade Linien

MacBook Pro 14_ - 2.jpgMacBook Pro 14_ - 2.jpg

Blöcke

MacBook Pro 14_ - 3.jpgMacBook Pro 14_ - 3.jpg

Rundungen

MacBook Pro 14_ - 4.jpgMacBook Pro 14_ - 4.jpg

9.) Midjourney-Bilder

Rectangle 2.jpgRectangle 2.jpg
Firefly_Gemini Flash_same image, write -Gentrification is the new colonialism- in big graffiti letters on  96250.pngFirefly_Gemini Flash_same image, write -Gentrification is the new colonialism- in big graffiti letters on  96250.png
kd6mub_erstelle_ein_komplett_gentrifiziertes_viertel_alle_hus_3ab8cf90-1f06-423a-8ce3-ec876d1f7d89_0.pngkd6mub_erstelle_ein_komplett_gentrifiziertes_viertel_alle_hus_3ab8cf90-1f06-423a-8ce3-ec876d1f7d89_0.png
kd6mub_stylisches_Cafs_steril_clean_minimalistisch_beton_edel_eab984ae-8bd7-478c-ac20-ef550ffc5ed0_3.pngkd6mub_stylisches_Cafs_steril_clean_minimalistisch_beton_edel_eab984ae-8bd7-478c-ac20-ef550ffc5ed0_3.png
Firefly_Gemini Flash_make the bricks look like fragme 213046 OWR.pngFirefly_Gemini Flash_make the bricks look like fragme 213046 OWR.png
kd6mub_a_minimalist_architectural_photograph_showcasing_a_sta_f55575c1-497b-47cb-97cc-2b14ba398899_0.pngkd6mub_a_minimalist_architectural_photograph_showcasing_a_sta_f55575c1-497b-47cb-97cc-2b14ba398899_0.png
kd6mub_a_minimalist_interior_features_a_light_gray_wall_with__397cd2c2-cd55-40b7-bdca-058debaf0ceb_3.pngkd6mub_a_minimalist_interior_features_a_light_gray_wall_with__397cd2c2-cd55-40b7-bdca-058debaf0ceb_3.png
kd6mub_inside_a_rustic_bar_an_illuminated_schultheiss_sign_ha_e46b2e7b-3bd5-4589-b157-5ed0ae3e900d_3.pngkd6mub_inside_a_rustic_bar_an_illuminated_schultheiss_sign_ha_e46b2e7b-3bd5-4589-b157-5ed0ae3e900d_3.png
kd6mub_a_textured_close_up_shot_of_a_grey_concrete_wall_with__1cdb01ee-c0d5-4c20-952a-8c88dd313f23_1.pngkd6mub_a_textured_close_up_shot_of_a_grey_concrete_wall_with__1cdb01ee-c0d5-4c20-952a-8c88dd313f23_1.png

10.) Map

(1. Variante)

neukölln map.pngneukölln map.png

Bildschirmfoto 2026-05-20 um 14.22.04.pngBildschirmfoto 2026-05-20 um 14.22.04.png

11.) Vorlagen für 3D-Modelle

Erstellt per Text-Prompt mit Meshy.ai. Bild bearbeitung zum sanierten Gebäude mit Chat GPT. Saniertes 3D-Model erstellt per Bild-Prompt mit Meshy.ai.

Text-Prompt:

Ultra-detailed photorealistic modular urban brick apartment building, 3-story narrow townhouse, early 1900s industrial American architecture. Red-orange weathered brick facade with subtle color variation, decorative brick cornice along the roofline, flat roof with raised parapet walls. Large rectangular wooden-framed windows with aged glass and slightly worn paint. Ground floor features a single brown wooden entrance door with concrete steps and basement ventilation grates.

On the right side of the second floor is a black steel fire escape balcony with metal railing and diagonal support braces. Black utility pipes run vertically along the left facade, connected with bends and brackets. Visible electrical conduits and small wall fixtures add realism. Slight dirt accumulation, weathering, chipped bricks, faded mortar, and urban wear. Concrete foundation with subtle discoloration.

Realistic proportions, game-ready environment asset, modular architecture, clean topology, physically based rendering (PBR), high-resolution textures, photogrammetry quality, centered object, isolated on transparent background, no surrounding environment, highly detailed architectural asset suitable for Unreal Engine and Unity.

Für Korrekturen negativ Prompt:

modern architecture, balconies on every floor, people, cars, vegetation, graffiti, signs, text, neon lights, broken geometry, low poly, cartoon, anime, fantasy, curved walls, colorful facade, glass skyscraper, interior, roof equipment, excessive damage, debris, unrealistic proportions, duplicate windows, blurry textures

Meshy.ai Einstellungen:

Style: Realistic

Topology: Quad / Clean

PBR: Enabled

Texture Resolution: 4K

Geometry Detail: High

Symmetry: Off

Keep Original Shape: High

Object Type: Building / Architecture Asset

Text-Prompt für die Bilderstellung des sanierten Gebäudes:

Transform the reference building into a modern renovated version while preserving its original architecture, proportions, and recognizable identity. Keep the exact footprint, width, height, three-story structure, window layout, roof shape, decorative cornice, facade composition, balcony position, entrance location, and all visible utility pipes so that it is clearly the same building after renovation rather than a completely new design. Replace the old red brick facade with clean white painted brick while maintaining the original brick texture and masonry details. Install modern black aluminum window frames with large clear glass, replace the old wooden entrance door with a minimalist matte black door, and redesign the existing balcony with a sleek black powder-coated steel railing while keeping its original dimensions and position. Restore and modernize all exterior utility pipes using clean galvanized metal with neat brackets and realistic connections, preserving their routing along the facade. Clean and restore the decorative cornice instead of simplifying or removing it, add subtle concrete window sills and architectural trim, and keep the flat roof with its parapet exactly as in the original building. Preserve every window position, opening, proportion, and structural detail so the renovation feels authentic. The overall design should resemble a renovated industrial townhouse in New York or Brooklyn, combining historic architecture with contemporary materials and craftsmanship. Use realistic white painted brick, black aluminum frames, matte black steel, light concrete accents, galvanized metal pipes, and subtle weathering with high-quality PBR materials. The result should be a photorealistic AAA-quality architectural asset suitable for Unreal Engine 5, featuring ultra-detailed textures, clean game-ready geometry, realistic lighting, accurate proportions, and a centered isolated presentation. Do not redesign the architecture, do not change the number of floors, building dimensions, roof shape, window placement, balcony location, cornice design, or pipe layout. The final result should immediately be recognizable as the original building after a high-end modern renovation rather than a completely different building. Avoid generating modern skyscraper elements, additional balconies, curved facades, glass curtain walls, extra floors, missing architectural details, graffiti, vegetation covering the facade, excessive damage, fantasy architecture, cartoon style, low-poly geometry, distorted proportions, asymmetrical windows, or unrealistic materials.

Bildschirmfoto 2026-07-13 um 19.26.39.pngBildschirmfoto 2026-07-13 um 19.26.39.png
ChatGPT Image 2. Juni 2026, 14_55_53.pngChatGPT Image 2. Juni 2026, 14_55_53.png

Erstellt per Bild-Prompt mit Meshy.ai. Bilder aus dem Internet, zum Teil erstellt/bearbeitet mit Firefly und/oder Chat GPT. Verbesserungen der 3D-Modelle mit Blender.

mercedesbenzsprinterpolizei01.jpgmercedesbenzsprinterpolizei01.jpg
Bildschirmfoto 2026-06-13 um 17.04.29.pngBildschirmfoto 2026-06-13 um 17.04.29.png

Polizei.jpgPolizei.jpg
Bildschirmfoto 2026-06-13 um 17.05.11.pngBildschirmfoto 2026-06-13 um 17.05.11.png

logbuch-bremerhaven-tresen-am-meer-metropol-aussen-c-helmut-gross-G5450.jpglogbuch-bremerhaven-tresen-am-meer-metropol-aussen-c-helmut-gross-G5450.jpg
Bildschirmfoto 2026-06-13 um 17.09.07.pngBildschirmfoto 2026-06-13 um 17.09.07.png
ChatGPT Image 11. Juni 2026, 03_14_32.pngChatGPT Image 11. Juni 2026, 03_14_32.png

polizei-dpa-100~_t-1756798637177_v-16to9__retina.jpgpolizei-dpa-100~_t-1756798637177_v-16to9__retina.jpg
Bildschirmfoto 2026-06-13 um 17.05.51.pngBildschirmfoto 2026-06-13 um 17.05.51.png

symbolbild_geruestbau.jpgsymbolbild_geruestbau.jpg
Bildschirmfoto 2026-06-13 um 17.06.21.pngBildschirmfoto 2026-06-13 um 17.06.21.png
Bildschirmfoto 2026-06-13 um 17.04.54.pngBildschirmfoto 2026-06-13 um 17.04.54.png

Brunnenstr_183_Berlin_930.jpgBrunnenstr_183_Berlin_930.jpg
Bildschirmfoto 2026-06-11 um 18.29.59.pngBildschirmfoto 2026-06-11 um 18.29.59.png

Text-Prompt für Firefly, zur Erstellung des Bildes der alten Wohnung, ausgehend vom Meshy-3D-Model der modernen Wohnung:

Transform the reference apartment into an older pre-gentrification version while preserving its original floor plan, room layout, wall positions, window locations, door openings, ceiling height, and overall proportions. The apartment should clearly be the same home before renovation, showing decades of wear and modest living conditions rather than a completely different design. Replace the modern finishes with aged materials typical of a working-class apartment from the late 1970s to early 1990s. Install worn parquet and faded vinyl flooring with visible scratches, discoloration, and repaired sections. Replace the modern kitchen with an outdated kitchen featuring old wooden cabinets, laminate countertops, an aged white refrigerator, a small gas stove, stained sink, and worn appliances. Transform the modern bathroom into a small bathroom with old ceramic wall tiles, a simple sink, an older toilet, a bathtub with a shower curtain, faded grout, and signs of long-term use. Replace the contemporary furniture with inexpensive vintage furniture, including a wooden bed, an old dresser, open bookshelves, a CRT television, a cassette player or stereo, mismatched dining chairs, a simple dining table, an old fabric sofa, and second-hand storage furniture. Cover the walls with faded floral wallpaper showing peeling corners, discoloration, water stains, and minor cracks. Replace the clean lighting with warm incandescent ceiling lamps and older wall fixtures. Add subtle clutter such as books, VHS tapes, magazines, shoes near the entrance, hanging coats, small potted plants, kitchen utensils, dishes, and everyday household objects to create the feeling of a lived-in apartment. Keep the balcony in the same position but replace its modern appearance with an older painted metal railing, weathered concrete flooring, and simple flower pots. Preserve every window, every wall, every doorway, and every structural element exactly as in the original apartment so the result is immediately recognizable as the same apartment before modernization. Use realistic aged wood, worn wallpaper, faded paint, old ceramic tiles, scratched furniture, dusty textiles, and subtle weathering with high-quality PBR materials. The final result should resemble a modest lower-income urban apartment before renovation, conveying authenticity through age, wear, and everyday use rather than abandonment or extreme decay. The apartment should remain clean and inhabited, not derelict. Render the scene as a photorealistic AAA-quality architectural visualization with ultra-detailed textures, physically based rendering (PBR), realistic natural lighting, clean geometry, and a high-quality game-ready environment suitable for Unreal Engine 5. Avoid changing the architecture, room sizes, floor plan, window placement, balcony position, or structural design. Do not create a ruined, abandoned, post-apocalyptic, dirty, mold-infested, or vandalized apartment. Avoid modern furniture, luxury finishes, minimalist interiors, smart home technology, contemporary decoration, glossy materials, unrealistic damage, distorted proportions, or redesigned architecture.

Firefly_Gemini Flash_erstelle so ein bild 697391.pngFirefly_Gemini Flash_erstelle so ein bild 697391.png
Bildschirmfoto 2026-07-13 um 19.17.59.pngBildschirmfoto 2026-07-13 um 19.17.59.png
Firefly_Gemini Flash_und jetzt gestalte diese Wohnung alt vor der gentrifizierung 697391.pngFirefly_Gemini Flash_und jetzt gestalte diese Wohnung alt vor der gentrifizierung 697391.png

12.) Zwischenpräsentation

MacBook Pro 14_ - 5-zusammengefügt.pdf PDF MacBook Pro 14_ - 5-zusammengefügt.pdf

13.) AR-Anwendung Test

Vorgehensweise:

Ausgangspunkt war das inhaltliche Zielbild: Das Wohngebäude aus der Website, das entlang einer Zeitachse von 1979 bis 2035 zwischen Original- und saniertem Zustand überblendet, während die Bewohner:innen sukzessive verschwinden.

Als Grundlage verwendete ich zwei GLB-Modelle desselben Gebäudes – einen Ursprungs- und einen sanierten Zustand –, die für die Überblendung per Opacity gegeneinander ein- und ausgeblendet werden. Beide Modelle wurden in Meshy.ai erstellt, in Blender aufbereitet und mit Draco-Kompression exportiert, um die Dateigröße für den mobilen Einsatz zu reduzieren.

Zunächst realisierte ich einen ersten Prototyp mit MindAR auf Basis von Image-Tracking, bei dem ein gedrucktes Markerbild erkannt wird. Da dieser Ansatz zu störanfällig war und eine Bilderkennung nicht erwünscht war, wechselte ich zu einer markerlosen Lösung mit three.js: Das Modell wird über den Kamerastream (getUserMedia) eingeblendet, die Ansicht per Geräte-Orientierung (Gyroskop / DeviceOrientation) gesteuert. In dieser Phase entstand die eigentliche Kernlogik – die zeitgesteuerte Überblendung, die mitlaufenden Kennzahlen sowie die sechs an den Fenstern platzierten Hotspots in der Signalfarbe der Website, die nacheinander im jeweiligen Verdrängungsjahr ausgeblendet/eingeblendet werden.

Für echtes World-Tracking (räumliche Verankerung am Boden, Bewegungsfreiheit um das Objekt) portierte ich das Projekt anschließend auf 8th Wall, das inzwischen quelloffen ist und dessen SLAM-Tracking auch in iOS-Safari funktioniert. Als Basis diente das offizielle A-Frame-Beispiel „World Effects„ (Tap-to-place auf erkannten Flächen). Das Projekt richtete ich lokal über Node.js / npm ein (npm install, npm run serve) und ersetzte das Beispielobjekt durch die beiden Gebäudemodelle; die gesamte Zeitachsen-, Überblendungs- und Hotspot-Logik übertrug ich als eigene A-Frame-Komponente. Für die Modellpositionierung an den Fenstern entwickelte ich zwischenzeitlich einen Justier-Modus, der die Koordinaten per Raycasting direkt aus der Geometrie ausliest.

Getestet wurde lokal im Browser sowie über eine HTTPS-Adresse (Netlify) auf dem iPhone, da Kamerazugriff und WebAR eine gesicherte Verbindung voraussetzen.

Umgesetzt mit Claude-Code

IMG_0839.PNGIMG_0839.PNG
IMG_0840.PNGIMG_0840.PNG
IMG_0841.PNGIMG_0841.PNG
IMG_0838.PNGIMG_0838.PNG

14.) User Testing

Erkenntnisse:

-> Schmuck-Pluszeichen entfernen.

-> Tooltip 1. Sektion genauer formulieren, sodass der User direkt versteht, dass man die Gebäude bewegen kann.

-> Draggable-Tags müssen sich ausbreiten beim Scrollen, sodass der User versteht, dass man mit diesen interargieren kann.

-> Sound muss von Anfang an auf play gesetzt sein.

-> Hotspots auf den 3D-Modellen wären wünschenswert.

15.) Umwandlungs-Offerte

Umwandlungs-Offerte.pdf PDF Umwandlungs-Offerte.pdf

16.) User Journey

User Journey.pdf PDF User Journey.pdf

17.) Hotspots

Framer Code Component (Vibecoding): 3D-Modell-Viewer auf Basis von reinem Three.js. Es lädt ein GLB/GLTF-Gebäudemodell und rendert es mit Kamera, Licht, Environment-Reflexionen sowie optionalem Auto-Rotate und Floating-Effekt. 

Zusätzlich bringt es ein vollständiges Hotspot-System mit: Es projiziert festgelegte 3D-Positionen im Modell live auf 2D-Bildschirmkoordinaten und öffnet bei Klick ein Popover mit Titel, Beschreibung, optionalem Bild und optionalem Link. Es blendet Hotspots auf der abgewandten Seite des Gebäudes automatisch anhand des aktuellen Drehwinkels aus.

Bildschirmfoto 2026-07-13 um 20.33.36.pngBildschirmfoto 2026-07-13 um 20.33.36.png
Bildschirmfoto 2026-07-13 um 20.34.38.pngBildschirmfoto 2026-07-13 um 20.34.38.png
Bildschirmfoto 2026-07-13 um 20.34.56.pngBildschirmfoto 2026-07-13 um 20.34.56.png
Bildschirmfoto 2026-07-13 um 20.35.06.pngBildschirmfoto 2026-07-13 um 20.35.06.png
Bildschirmfoto 2026-07-13 um 20.35.12.pngBildschirmfoto 2026-07-13 um 20.35.12.png
Bildschirmfoto 2026-07-13 um 20.35.19.pngBildschirmfoto 2026-07-13 um 20.35.19.png
Bildschirmfoto 2026-07-13 um 20.35.35.pngBildschirmfoto 2026-07-13 um 20.35.35.png
Bildschirmfoto 2026-07-13 um 20.35.48.pngBildschirmfoto 2026-07-13 um 20.35.48.png

18.) Framer Projekt Link

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

UX- und Storytelling (KD6)

Entstehungszeitraum

Sommersemester 2026