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

Krebs bei Frauen

Beschreibung

„Krebs bei Frauen“ ist ein digitales Unterstützungsportal für Frauen, das einen geschützten, gestalterisch sensiblen Raum für Betroffene schafft. Es verbindet Wissen, Austausch und kreative Impulse, um emotionale Stabilität und neue Perspektiven zu fördern.

Neben medizinisch fundierten Inhalten und Erfahrungsberichten stehen psychologische Hilfen, Entspannungstechniken und kreative Methoden im Fokus. Entstanden ist es aus dem Bedürfnis, Krankheit nicht nur sachlich, sondern menschlich zu begegnen.

Arbeitstitel und Titelbild

,,Krebs bei Frauen''

Mockup Krebs bei Frauen.jpgMockup Krebs bei Frauen.jpg

01 Grundideen

Impulsvortrag

Impulsvortrag -Diabetes Mellitus komprimiert.pdf PDF Impulsvortrag -Diabetes Mellitus komprimiert.pdf

Ideen & Recherche Websites / UX Projekte

UX Recherche.pdf PDF UX Recherche.pdf

02 Recherche, Daten und Inhalte

Krebsarten (Früherkennung, Diagnose & Behandlung)

KD6 - Eierstockkrebs (Ovarialkarzinom).jpgKD6 - Eierstockkrebs (Ovarialkarzinom).jpg
KD6 - Gebärmut_terkörperkrebs (Endometriumkarzinom).jpgKD6 - Gebärmut_terkörperkrebs (Endometriumkarzinom).jpg
KD6 - Brustkrebs (Mammakarzinom).jpgKD6 - Brustkrebs (Mammakarzinom).jpg
KD6 - Gebär_mutterhalskrebs (Zervixkarzinom).jpgKD6 - Gebär_mutterhalskrebs (Zervixkarzinom).jpg
KD6 - Vulvakrebs (Vulvakarzinom).jpgKD6 - Vulvakrebs (Vulvakarzinom).jpg
KD6 - Scheidenkrebs (Vaginalkarzinom).jpgKD6 - Scheidenkrebs (Vaginalkarzinom).jpg

Angstabbau (Entspannungstechniken, Meditation & Kreative Methoden)

KD6 - Atemübungen & Entspannungstechniken.jpgKD6 - Atemübungen & Entspannungstechniken.jpg
KD6 - Kreative Methoden.jpgKD6 - Kreative Methoden.jpg
KD6 - Meditation.jpgKD6 - Meditation.jpg

Beratungsstellen & Hotlines in Bayern

KD6 - Beratungsstellen & Hotlines in Bayern.jpgKD6 - Beratungsstellen & Hotlines in Bayern.jpg

03 What, how, why & Zielgruppe

What, how, why?

KD6 - What, how, why_.jpgKD6 - What, how, why_.jpg

Zielgruppe

KD6 - Zielgruppe (1).jpgKD6 - Zielgruppe (1).jpg

04 Was kommt alles rein & zusätzliche Elemente

KD6 - Zusätzliche Elemente.jpgKD6 - Zusätzliche Elemente.jpg
KD6 - Was kommt alles rein_.jpgKD6 - Was kommt alles rein_.jpg

05 Personas / User Story / User Journey

Persona 1 - Sabine Müller

Screenshot (990).pngScreenshot (990).png
Screenshot (992).pngScreenshot (992).png
Screenshot (980).pngScreenshot (980).png
Screenshot (991).pngScreenshot (991).png
Screenshot (993).pngScreenshot (993).png
KD6 - User Journey_ Persona 1.jpgKD6 - User Journey_ Persona 1.jpg

Persona 2 - Luisa Schmidt

Screenshot (979).pngScreenshot (979).png
Screenshot (978).pngScreenshot (978).png
KD6 - User Story_ Persona 4.jpgKD6 - User Story_ Persona 4.jpg
KD6 - Persona Board 2 (1).jpgKD6 - Persona Board 2 (1).jpg
KD6 - User Story_ Persona 3 (1).jpgKD6 - User Story_ Persona 3 (1).jpg
KD6 - User Journey_ Persona 2.jpgKD6 - User Journey_ Persona 2.jpg

06 Funktionsbeschreibung

KD6 - Funktionsbeschreibung.jpgKD6 - Funktionsbeschreibung.jpg
Screenshot (996).pngScreenshot (996).png
Screenshot (995).pngScreenshot (995).png
Screenshot (994).pngScreenshot (994).png
Screenshot (997).pngScreenshot (997).png

07 Interviews

Interview mit Betroffenen

KD6 - Interviews - Betroffene.jpgKD6 - Interviews - Betroffene.jpg

Interview mit einem Experten

KD6 - Interview mit einem Experten Seite 2.jpgKD6 - Interview mit einem Experten Seite 2.jpg
KD6 - Interview mit einem Experten Seite 1.jpgKD6 - Interview mit einem Experten Seite 1.jpg

08 Inspiration - Webportale und Moodboards

KD6 - Inspo.jpgKD6 - Inspo.jpg

Moodboards

KD6 - Moodboard 2.jpgKD6 - Moodboard 2.jpg
KD6 - Moodboard 1.jpgKD6 - Moodboard 1.jpg
KD6 - Kopie von Reduzierte Illus.jpgKD6 - Kopie von Reduzierte Illus.jpg

09 Wireframe Kits Recherche & Wireframes

Wireframe Kit Recherche

Obwohl es viele gute Optionen gab, habe ich mich für das Relume Figma Kit (v3.0) entschieden, weil es viele Optionen für das Layout und eine gute Struktur gibt. Ich habe es am Ende nur als Basis verwendet und Teile dann kombiniert, geändert und neu hergestellt, sodass es besser zu meiner Thema passt. Es hat mir sehr bei der Struktur geholfen, sodass ich mich auf den Inhalt und die Illustrationen konzentrieren konnte, an denen ich später zu arbeiten begann.

KD6 - Wireframe Kits.jpgKD6 - Wireframe Kits.jpg

Wireframes

Homepage 4.pngHomepage 4.png
Homepage 3.pngHomepage 3.png
Homepage 2.pngHomepage 2.png
Homepage 1.pngHomepage 1.png
Homepage 5.pngHomepage 5.png
Homepage 6.pngHomepage 6.png
Früherkennung 1.pngFrüherkennung 1.png
Früherkennung 2.pngFrüherkennung 2.png
Früherkennung 3.pngFrüherkennung 3.png
Früherkennung 4.pngFrüherkennung 4.png
Früherkennung 5.pngFrüherkennung 5.png
Diagnose 1.pngDiagnose 1.png
Diagnose 2.pngDiagnose 2.png
Diagnose 3.pngDiagnose 3.png
Psychische Gesundheit 1.pngPsychische Gesundheit 1.png
Psychische Gesundheit 2.pngPsychische Gesundheit 2.png
Psychische Gesundheit 3.pngPsychische Gesundheit 3.png
Psychische Gesundheit 4.pngPsychische Gesundheit 4.png
Psychische Gesundheit 5.pngPsychische Gesundheit 5.png
Interviews 1.pngInterviews 1.png
Interviews 2.pngInterviews 2.png
Interviews 3.pngInterviews 3.png
Interviews 4.pngInterviews 4.png
Community 1.pngCommunity 1.png
Community 2.pngCommunity 2.png
Community 3.pngCommunity 3.png

10 3 Gestaltungsvarianten

Für die ersten beiden Designvarianten habe ich viel in Photoshop gearbeitet. Für die erste Variante habe ich mit Elementen aus der Natur begonnen und diese dann so weit abstrahiert, bis sie nicht mehr erkennbar waren. Außerdem habe ich die Bilder als Collagen angelegt und den Unschärfeeffekt verwendet, um sie kaum noch erkennbar zu machen. Ziel war es, ein beruhigendes, abstraktes Bild zu erzeugen und die Farben weicher zu gestalten.

Für die zweite Variante, die Collagen, habe ich viele Handelemente und kräftigere Farben wie Rot verwendet, da Rot für Stärke, Liebe und Selbstvertrauen steht. Damit wollte ich Frauen in schwierigen Situationen stärken.

Für die dritte Variante habe ich in Illustrator gearbeitet und den Zeichnungen Texturen hinzugefügt. Die Proportionen passen nicht wirklich, und die Farben sind kräftiger, was mir als schlechte Idee auffiel. Später habe ich das Moodboard überarbeitet und weiter daran gearbeitet.

Screenshot (49).pngScreenshot (49).png
Screenshot (48).pngScreenshot (48).png
Screenshot (47).pngScreenshot (47).png
Screenshot (46).pngScreenshot (46).png
Screenshot (50).pngScreenshot (50).png
Screenshot (51).pngScreenshot (51).png
Screenshot (52).pngScreenshot (52).png
Screenshot (53).pngScreenshot (53).png
Screenshot (54).pngScreenshot (54).png
Screenshot (55).pngScreenshot (55).png
Screenshot (56).pngScreenshot (56).png
Screenshot (57).pngScreenshot (57).png

11 Moodboard 3 + Designvariante verbessert

Was mir wirklich wichtig war, war die Darstellung unterschiedlicher Kulturen, Körpertypen und Hautfarben. Gleichzeitig sollte es nicht kindisch wirken. Deswegen sind die Farben jetzt ruhiger, gedämpfter. Die Illus haben realistischere Proportionen, allerdings sind die Umrisse (keine Gesichter zu sehen), so dass alles etwas anonymer ist und der Fokus auf anderen, wichtigeren Dingen liegt, wie Untersuchungen, Diagnosen und dergleichen. Dabei sollten nicht nur Untersuchungen und Diagnosen im Vordergrund stehen, sondern auch der Gemeinschaftsgedanke und die Unterstützung zwischen Frauen. Gesichtslose Zeichnungen ermöglichen es einer größeren Gruppe von Frauen, sich in ihnen wiederzufinden.

KD6 - Reduzierte Illus (1).jpgKD6 - Reduzierte Illus (1).jpg

Homepage Designvariante verbessert 1.pngHomepage Designvariante verbessert 1.png
Homepage Designvariante verbessert 2.pngHomepage Designvariante verbessert 2.png
Krebsarten & Früherkennung Designvariante verbessert 2.pngKrebsarten & Früherkennung Designvariante verbessert 2.png
Krebsarten & Früherkennung Designvariante verbessert 1.pngKrebsarten & Früherkennung Designvariante verbessert 1.png

12 Zwischenpräsentation

Zwischenpräsentation.pdf PDF Zwischenpräsentation.pdf

13 Typo, Farben & Elemente

Typografie

KD6 - Typografie.jpgKD6 - Typografie.jpg

Farben

KD6 - Farben (1).jpgKD6 - Farben (1).jpg

Elemente

KD6 - Elemente (1).jpgKD6 - Elemente (1).jpg

14 Endpräsentation

UX Endpräsi.pdf PDF UX Endpräsi.pdf

15 Finales Design

Desktop

C.pngC.png
A.pngA.png
B.pngB.png
D.pngD.png
E.pngE.png
F.pngF.png
G.pngG.png
H.pngH.png
I.pngI.png
J.pngJ.png
K.pngK.png
L.pngL.png
M.pngM.png
N.pngN.png
O.pngO.png
P.pngP.png
Q.pngQ.png
R.pngR.png
S.pngS.png
T.pngT.png
U.pngU.png
V.pngV.png
W.pngW.png
X.pngX.png
Y.pngY.png
Z.pngZ.png

Mobil

A 1.pngA 1.png
B 1.pngB 1.png
C 1.pngC 1.png
D 1.pngD 1.png
E 1.pngE 1.png
F 1.pngF 1.png
G 1.pngG 1.png

Webflow

C 2.pngC 2.png
A 2.pngA 2.png
B 2.pngB 2.png
D 2.pngD 2.png
E 2.pngE 2.png
F 2.pngF 2.png
G 2.pngG 2.png
H 2.pngH 2.png
I 2.pngI 2.png
J 2.pngJ 2.png

16 Styleguide

UI Elements.pngUI Elements.png
Variables.pngVariables.png
Typografie.pngTypografie.png
Icons.pngIcons.png

17 Prototyping / Links

Screenshot (101).pngScreenshot (101).png

18 Screencasts

Desktop

Mobil

19 Präsentationsvideo

20 Plakat für die Werkschau & Ausstellungssituation

Anastasija - UX Poster A1.pdf PDF Anastasija - UX Poster A1.pdf

WhatsApp Bild 2025-07-14 um 17.02.45_ba1d4ca0.jpgWhatsApp Bild 2025-07-14 um 17.02.45_ba1d4ca0.jpg
WhatsApp Bild 2025-07-19 um 14.39.47_b3b100ac.jpgWhatsApp Bild 2025-07-19 um 14.39.47_b3b100ac.jpg

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Keine Angabe

Zugehöriger Workspace

UX- und Storytelling (KD6)

Entstehungszeitraum

Sommersemester 2025