RinckAntonia_Showbox

SHOWBOX 

Wir sprengen kreative Grenzen. 

PROJEKT 

DIGITALE APPLIKATION 

Styleguide + Dokumentation 

Antonia Rinck – Matrikelnummer: 700431 

Diploma Hochschule – Bad Sooden Allendorf 

Studiengang Grafikdesign – Schwerpunkt Digitale Applikation 

Dozent: David Sickinger – WS 2016 /2017

AUFGABENSTELLUNG 



Entwickeln Sie, thematisch ausgehend von ihrer Infografik, eine Web 

Plattform / Device / App. Die Plattform soll Community bildend sein, 

die Community soll Content beitragen. Die Redaktion erstellt Content 

und begleitet den Aufbau der Sammlung und ihre Auswertung in 

Text und Bild. Es entsteht also eine eine inhaltliche Mischung aus 

redaktionell entwickelten Inhalten und Usergenerated Content. Das 

Konzept der Contentgenerierung, die Informationsarchitekturen, 

Features und mögliche Monetarisierungen usw. liegt bei den 

Projektgruppen. Innerhalb dieses Webangebotes soll ihre interaktive 

Infografik durchgeplant platziert sein. 

Projektfahrplan – Zu erbringende Leistungen 

Im Verlauf des Projektes sind folgende Leistungen zu erbringen: 

Die Nummerierung der STEPS ist kaum 

als zeitliche Reihenfolge zu sehen. 

STEP 1: 

Entwickeln Sie das Thema. Schreiben Sie ein Konzept, welches 

das Vorhaben, die Zielgruppe, die Platzierung, die Nutzung der 

Sammlung und die Form der redaktionellen Begleitung definiert und 

verständlich macht. Namenskreation, Claimkreation 

STEP 2: 

Benutzerführung bei Research und Funktionalitäten, Teil 1. 

So viele Layouts von Folgeseiten, wie nötig sind um: 

• die Benutzerführung bei der Anmeldung 

• die Benutzerführung bei Einstellung von Inhalten 

anschaulich zu machen. 

STEP 3: 

Benutzerführung bei Research und Funktionalitäten, Teil 2. 

So viele Layouts von Folgeseiten, wie nötig sind um: 

• Suchfunktionalitäten 

• Arbeiten mit dem Bestand und den redaktionellen Inhalt 

anschaulich zu machen. 

STEP 4: 

• Durcharbeitung der Infografik 

• Thema / Inhalte 

• Struktur 

• Benutzerführung 

• Styleguide 

• Schriftliche Definition & visueller Dummy 

STEP 5: 

Corporate Design: 

• Design des Logos und des Erscheinungsbildes 

• der Online Plattform, Layout der Startseite, Möglich ist auch ein 

OnePager, 

• Informationsdesign: Sitestruktur, 

• Interaktionsdesign: Funktionalitäten, Bedienbarkeit 

• Screendesign: UX Design, Interfacegestaltung: Layout aller 

nötigen Seiten 

• Entwicklung nachvollziehbarer Nutzererlebnisstouren 

• Wireframing Paper Clickdummy 

Abgabe: Manual mit allen Text- und Layoutinhalten, 

Dokumentation 

STEP 7: 

20minütige Projektpräsentation 

Keine Programmierung, nur Konzept, Definition und 

Oberflächengestaltung 

Projekt Digitale Applikation 

Antonia Rinck 


Antonia Rinck 

2 3

VORWORT 

INHALTSVERZEICHNIS 

INHALT 

Styleguide 

Vorwort 

Diese Broschüre umfasst die Entwicklung meiner 

Plattform Showbox, die die Zusammenarbeit von 

Lernenden in der Gestaltungsbranche ermöglicht. 

Sie besteht aus zwei Teilen, dem Styleguide und der 

Dokumentation. 

Der Werbeauftritt von Showbox wird zuerst in einem 

Styleguide vorgestellt. Ich habe in diesem Kontext 

auch Entwicklungsschritte genauer erläutert, 

wie z. B. die Ideenentwicklung. Die beiden Teile 

Styleguide und Dokumentation sind daher schwierig 

voneinander abzugrenzen. Die Übergänge sind 

an vielen Stellen fließend. Die Dokumentation bildet 

den zweiten Teil dieses Schriftstücks. Sie beschreibt 

hauptsächlich die Entwicklungspunkte, die 

im Styleguide nicht so beleuchtet wurden. 

Ich hoffe, dass vor allem der Grundgedanke meiner 

Community verständlich wird. Vielleicht wird bei 

dem Leser sogar ein Impuls erweckt, – der Wunsch 

bei einem solchen Open Source Projekt aktiv dabei 

zu sein. 

Ergänzung: 

Aus Gründen der besseren Lesbarkeit habe ich 

die Sprachform des generischen Maskulinums angewendet. 

Dies soll jedoch geschlechtsunabhängig 

verstanden werden. 

Konzept 

Die Idee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 

Vision und USP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 

Die Zielgruppe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 

Sinus Mileus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 

Zielgruppe - Personas . . . . . . . . . . . . . . . . . . . . . . . . . .12 

Corperate Design 

Claim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14-15 

Namensfindung / Logoentwicklung. . . . . . . . . . . . . . . . . . . .16 

Vermaßung / Schutzzone . . . . . . . . . . . . . . . . . . . . . . . . .17 

Logoanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 

Unzulässige Anwendungen . . . . . . . . . . . . . . . . . . . . . . . .19 

Farbpalette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 

Hausschrift . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 

Die Bildsprache . . . . . . . . . . . . . . . . . . . . . . . . . . . .22-23 

User Journey . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24-25 

Screendesign 

Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26-27 

Aufbau der Website . . . . . . . . . . . . . . . . . . . . . . . . . .28-30 

Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . .30-31 

Führung durch die Webseite 

Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32-33 

Startseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34-35 

Entdecken – Projekte . . . . . . . . . . . . . . . . . . . . . . . . .36-37 

Interaktionsdesign . . . . . . . . . . . . . . . . . . . . . . . . . .38-41 


Antonia Rinck 


Antonia Rinck 

4 5

STYLEGUIDE 

STYLEGUIDE 

Nichtöffentliches Projekt . . . . . . . . . . . . . . . . . . . . . . . . .42 

Öffentliches Projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 

Meine Projekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 

Projekte bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . .45 

Mitmachen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 

Entdecken – Personen . . . . . . . . . . . . . . . . . . . . . . . . . .47 

Pro fi l e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48-49 

Nachrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50-51 

Arbeiten – Kreative inspiriende Teamarbeit . . . . . . . . . . . . .52-53 

Showbox-Room – Testraum. . . . . . . . . . . . . . . . . . . . . . . .54 

Iconographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55 

Gewinnen – Showbox-Award. . . . . . . . . . . . . . . . . . . . .56-57 

Nominierungsanfrage . . . . . . . . . . . . . . . . . . . . . . . . . . .58 

Gewinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 

Gewinnerprojekte . . . . . . . . . . . . . . . . . . . . . . . . . . .60-61 

Die Infografik . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60-67 

Hilfestellung und Support . . . . . . . . . . . . . . . . . . . . . . .68-69 

Dokumentation 

Ideenentwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 

Namensfindung und Logo. . . . . . . . . . . . . . . . . . . . . . . . .75 

Struktur der Plattform . . . . . . . . . . . . . . . . . . . . . . . . . . .76 

Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 

Erstellen eines Dummys. . . . . . . . . . . . . . . . . . . . . . . . . .79 

Iconografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 

Testen der Anwendbarkeit . . . . . . . . . . . . . . . . . . . . . . . .81 

Entwicklung der Infografik . . . . . . . . . . . . . . . . . . . . . .82-85 

Quellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86-87 

Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88 

Eidesstattliche Erklärung . . . . . . . . . . . . . . . . . . . . . . . . .89 

STYLEGUIDE 

WILLKOMMEN ZUM STYLEGUIDE 

DER PLATTFORM SHOWBOX, 

DIE KREATIVE VERBINDET. 

Impressum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 

6 


Antonia Rinck 


Antonia Rinck 

7

STYLEGUIDE 

Konzept 

STYLEGUIDE 

Konzept 

WEM 

Wem sagen wir 

die Botschaft? 

Zielgruppe, 

Alter, 

Geschlecht, 

usw. 

WO 

Wo und über 

welche Kanäle 

kam man sie 

erreichen? 

WAS 

Was sagen wir? 

Unique Selling Proposition 

Basis: Reason why? 

WIE 

WANN 

Wann vermittlen wir 

die Botschaft? 

WOMIT 

Womit vermitteln 

wir die Werbemittel? 

Vision und USP 

Die Vision hinter der zu entwickelten 

Plattform soll sein, Konkurrenz 

durch Kooperation zu 

ersetzen. Denn so findet Wettbewerb 

auf bewusstem Niveau 

statt. Statt einer gegnerischen 

Diskussionsebene nimmt man so 

eine Beratungsebene ein, von denen 

alle Beteiligten partizipieren. 

Der hauptsächliche Mehrwert 

ist jedoch die gegenseitige Inspiration. 

Kreativität kennt keine 

Grenzen. Man schafft sich aber 

durch Konkurrenzdenken eigene. 

Durch Sammeln, Kombinieren aller 

Ideen und durch die Bündelung 

der Stärken der Mitglieder, 

können großartige neue Projekte 

entstehen. 

Im Vorfeld habe ich recherchiert, 

welche Communities und Plattformen 

es im Bereich Design und 

Gestaltung gibt. Neben einigen 

unbekannten sind da natürlich 

Behance, Instagram und Pinterest 

zu nennen. Es gibt dort die 

Möglichkeit, Projekte zu liken, 

anzuerkennen, zu pinnen oder zu 

merken. Ich habe jedoch nichts 

gefunden, wo zu all dem ein 

gemeinsames Arbeiten möglich 

ist. Das Alleinstellungsmerkmal 

der Plattform ist, dass nicht nur 

Projekte zum Inspirieren gezeigt 

werden, sondern, dass man real 

zusammen arbeiten kann. Zudem 

wird für diese Projekte die Möglichkeit 

geboten, einen Preis zu 

gewinnen. Die Plattform soll sich 

also in 3 große Bereiche untergliedern. 

„Entdecken“, „Arbeiten“ und „Gewinnen“ 

heißen die großen Oberbegriffe. 

Es wurden 3 Verben gewählt, 

die Aktivität ausdrücken 

und dem Rezipienten konkret 

vermitteln sollen, was die Plattform 

bietet. Der Seitenbesucher 

soll Lust bekommen, mit zumachen 

bzw. dabei zu sein. 

Das Portal bietet virtuelle Räume 

zum gemeinsamen Arbeiten, 

um sich gegenseitig zu helfen. 

Lernende haben die Möglichkeit, 

ihre Aufgabenstellungen zu 

teilen und andere zur Mithilfe 

einzuladen. Aber auch bereits 

begonnene Projekte können veröffentlicht 

werden. Die virtuellen 

Räume sind mit Whiteboard, Kamera 

und Mikrofon ausgestattet. 

Geboten wird zusätzlich noch ein 

Award, der mit Geldgewinnen 

und Veröffentlichungen in anderen 

kreativen Netzwerken und 

Communities honoriert wird. 

Wie ist die Ansprache? 

Stil, Psychologie, 

Tonalität usw. 

Die Idee 

Die Idee ist entstanden durch 

meine eigenen Erfahrungen mit 

meinem berufsbegleitenden Studium 

an der Diploma Hochschule. 

Als Quereinsteiger bin ich auf 

den Austausch mit meinen Kommilitonen 

angewiesen. Wir sind 

über viele Kanäle vernetzt, die 

räumliche Trennung spielt dabei 

keine Rolle. Dieses entstandene 

Netzwerk soll über die Zeit des 

Studiums hinausgehen. Man hilft 

sich gegenseitig und kann sich 

evtl. auch Aufträge vermitteln 

oder teilen. Ich habe den Eindruck, 

dass in der Designerbranche 

ein starkes Konkurrenzdenken 

besteht. Durch Schnittstellen 

mit Agenturen in meiner bisherigen 

Berufstätigkeit und durch ein 

Praktikum konnte ich Einblicke 

gewinnen und stellte fest, dass 

Agenturen wenig mit Gleichgesinnten 

vernetzt sind. Stattdessen 

wird eher eine konkurrierende 

Haltung eingenommen. 


Antonia Rinck 


Antonia Rinck 

8 9

STYLEGUIDE 

Konzept 

STYLEGUIDE 

Konzept 

Die Zielgruppe 

Meine Plattform / Community 

möchte sich mit dem Werbeauftritt 

hauptsächlich an männliche 

und weibliche Personen im Alter 

von 18 bis 30 Jahren richten, die 

sich in Richtung Kreativität weiterbilden. 

Die Ansprache richtet 

sich an Studierende im Bereich 

Design und Auszubildende im 

Bereich Mediengestaltung. Aber 

auch Studierende im zweiten Bil- 

dungsweg, die etwa im Alter zwischen 

25–50 Jahren sind, sollen 

erreicht werden. Die Zielgruppe 

ist wissbegierig und möchte sich 

auch außerhalb der Ausbildung 

weiterentwickeln. Sie ist interessiert 

an Gestaltung, an Design 

und an anderen kreativen Menschen 

und vor allem an einem 

Austausch über räumliche Grenzen 

hinweg. 

Sinus Mileus 

Aber welche Persönlichkeiten 

stehen dahinter? Um sich ein genaueres 

Bild machen zu können, 

muss im ersten Schritt ein Mind 

Map erstellt werden (s. Abbildung 

links). 

Um die Zielgruppe genauer zu 

definieren, habe ich mich intensiv 

mit den Sinus Milieus beschäftigt. 

Ich möchte mit meiner Idee in 

erster Linie das Expeditive Milieu 

ansprechen. Es sind meist junge 

Leute, die stets auf Erkundung 

neuer Möglichkeiten sind. Meist 

sind sie gut ausgebildet. Sie beherrschen 

die digitalen Techniken 

und sind wenig gebunden. Spontanität 

ist ihre bevorzugte Ausrucksform. 

Ihre Mediennutzung 

ist durch das Internet geprägt. 

Vor allem richtet sich die Ansprache 

an alle lernenden Kreative, 

die sich fernab des Mainstreams 

bewegen. 


Antonia Rinck 


Antonia Rinck 

10 11

STYLEGUIDE 

Konzept 

STYLEGUIDE 

Konzept 

Zielgruppe - Personas: 

Um konkrete Personen mit ihren 

Bedürfnissen und Wünschen vor 

Augen zu haben, wurden Personas 

erstellt. Persona ist eine 

Art „Nutzermodell“, die bei der 

Mensch-Computer-Interaktion 

eine entscheidende Rolle spielt. 

Mit dieser Vorarbeit geht die Vorstellung 

der Person, die über das 

Internet mit uns als Plattform in 

Verbindung steht, nicht ins Abstrakte. 

Da im Vorfeld keine empirische 

Datenerhebung erstellt 

wurde, habe ich sogenannte 

„spekulative“ Personas erschaffen. 

Mit ihrem Profil im Kopf 

helfen sie, produktrelevante Entscheidungen 

ganz gezielt kundenorientiert 

zu treffen. 

Aber wie und über welche Kanäle 

erreiche ich die Zielgruppe? 

Showbox muss erst bekannt werden. 

Die Personas verschaffen 

einen Überblick, womit sich die 

Zielgruppe beschäftigt. 

JAKOB 

Alter: 

Beruf: 

Herkunft: 

Bedürfnisse: 

Hobbys: 

26 Jahre 

Student (Virtual Design) 

Mannheim 

Sucht coole Leute 

Liebt Herausforderungen 

Nachtschwärmer 

Fotografieren, Scaten, 

Snowboarden 

Kontaktpunkt: 

Holt sich online Hilfe für 

Eigene Studienprojekte 

Aktiv in sozialen Netzwerken 

FRIEDA 

Sonstiges: 

Sehr sportlich 

Politisch stark links orientiert 

Hat die Page im Studentenabo 

Nutzt Flickr 

Alter: 

Beruf: 

Herkunft: 

24 Jahre 

Studentin (Kommunikationsdesign) 

Freiburg 

Bedürfnisse: 

Will nicht der Norm entsprechen 

Will sich abheben vom Mainstream 

Sucht Kontakt zu Gleichgesinnten 

Zielgruppenansprache 

Hobbys: 

Kontaktpunkt: 

Sonstiges: 

Zeichnen, Musik, Flohmärkte, 

Reisen, Fotografie 

Holt sich online Inspiration, 

Ist bereits in vielen kreativen 

Netzwerken wie Behance, 

Pinterest und Facebook unterwegs 

Lebt vegan 

Offen für Spiritualität 

Lebt in einer Wohngemeinschaft 

Ganz klar – die Zielgruppe wird mit 

„du“ angesprochen. Frieda und Jakob 

wollen eine lockere und entspannte 

Atmosphäre. Beide nutzen soziale 

Netzwerke, also muss Showbox auch 

darüber beworben werden. Facebook 

und Instagram werden als erste Werbeplattformen 

in Anspruch genommen. 

Jakob hat die Page abonniert. 

Auch da ist eine Anzeigenplatzierung in 

regelmäßigen Abständen sehr sinnvoll. 

Ein großer Artikel der Page wird Showbox 

zu Beginn des Werbeauftritts vorstellen. 

Darin werden Interviews mit den 

Personen geführt, die Showbox entworfen 

haben, aber auch mit den kreativen 

Nutzern der Plattform. 


Antonia Rinck 


Antonia Rinck 

12 13

STYLEGUIDE 


STYLEGUIDE 


Claim 

Welche Botschaften will Showbox 

vermitteln, um die Zielgruppe 

zu erreichen? 

Durch die intensive Beschäftigung 

mit der Zielgruppe konnten 

leichter ansprechende und aussagekräftige 

Formulierungen gefunden 

werden: 

Showbox verbindet Kreative 

Entdecken – Arbeiten – Gewinnen 

Kooperation statt Konkurrenz 

Wir sprengen kreative Grenzen 

SHOWBOX 

Kooperation statt Konkurrenz. 

SHOWBOX 


EIN CLAIM IST DER 

INNERE ANSPRUCH 

EINER MARKE 

Gestaltung von 

Logo und Claim 

Der Claim wird bei Showbox im 

Schriftschnitt Lato Regular mit 

+70/1000 Geviert erweitert und 

abschließend mit einem Punkt 

am Ende gesetzt. 

Je nach Layout kann der Claim 

mittig oder linksbündig zur Wortbildmarke 

gesetzt werden. Dann 

schließt der Satzbeginn mit der 

linken Seite des Quadrates ab. 

Der Abstand von unten zum 

Quadrat beträgt eine Versalhöhe. 

SHOWBOX 

Entdecken. Arbeiten. Gewinnen. 

SHOWBOX 



Antonia Rinck 


Antonia Rinck 

14 15

STYLEGUIDE 


STYLEGUIDE 


Die Namensfindung 

Vermaßung 

SHOWBOX 

verwendete Schrift: 

HELVETICA LT Std – bold 

HELVETICA LT Std – light 

Der Name für die Plattform hatte 

sich sehr schnell gefunden. Er 

kam intuitiv durch die visuelle 

Vorstellung von „Zeigen“ und 

einer Box, die einen geschützten 

Arbeitsraum symbolisieren soll. 

Es war der erste Einfall, der erst 

einmal zur Seite gelegt wurde. 

Ich hatte die Erwartung, dass 

sich vielleicht noch ein anderer 

passenderer Begriff findet. Je 

mehr ich jedoch darüber nachdachte, 

wurde mir klar, dass 

„Showbox“ eigentlich genau das 

ausdrückt, was es ist. 

Das Design des Logos ist sorgfältig 

vermaßt worden. Jede Linie 

hat ihren Platz. Die Abstände 

stehen in einem harmonischen 

Verhältnis zueinander. 

Die Wort- darf niemals ohne die 

Bildmarke abgebildet werden, 

auch nicht umgekehrt. 

Für sämtliche Anwendungen stehen 

digitale Vorlagen zur Verfügung, 

von einer Nachkonstruktion 

ist daher abzusehen. 

SHOWBOX 

Schutzzone 

A 

Logoentwicklung 

Das Logo funktioniert als verschmolzene 

Wort- und Bildmarke. 

Mit der Helvetica LT Std wird 

ein Font gewählt, der zu den 

serifenlosen Schriften gehört. 

Er ist schlicht und einfach und 

vermittelt die Aussage klar und 

unverfälscht an den Rezipienten. 

Durch die Verwendung der verschiedenen 

Schnitte Light und 

Bold wird die Zusammensetzung 

der beiden Wörter „Show“ und 

„Box“ verdeutlicht. Die Farbwahl 

in Verbindung mit der offenen 

Form unterstützt die gewünschte 

Assoziation, dass Showbox Raum 

für kreative Entwicklungsmöglichkeiten 

bietet. Das optisch im 

Hintergrund liegende Symbol einer 

Box schafft den Eindruck von 

Tiefe und Raum. Der Farbverlauf 

symbolisiert Bewegung und Entwicklung. 

Ein Logo braucht Freiraum, um 

zu wirken. Deshalb muss ein 

Mindestabstand vom Logo zum 

Layoutrand oder zu anderen 

Gestaltungselementen eingehalten 

werden. Ein A entspricht der 

Hälfte des Showboxquadrates. 

Ein A sollte jeweils von allen Seiten 

Abstand gehalten werden. 

Die Mindestgröße des Logos darf 

20 mm nicht unterschreiten. 

Wird ein Claim genutzt, verschiebt 

sich das A und somit die 

Schutzzone entsprechend zur 

Umgebung. 

A 

A 

A 

SHOWBOX 

A 

A 

A 

A 

SHOWBOX 

A 

A 

A 

SHOWBOX 

A 

20 mm 


Antonia Rinck 


Antonia Rinck 

16 17

STYLEGUIDE 


STYLEGUIDE 


Logoanwendungen 

Das Logo steht positiv und negativ 

sowie Schwarz und Weiß zur 

Verfügung. Auf weißen und auf 

schwarzen Untergründen sollte 

möglichst immer eine Farbversion 

zum Einsatz kommen, es sei 

denn, es ist nur Schwarz-Weiß- 

Druck möglich. 

Liegt das Logo auf einem Bild 

oder auf einem farbigen Untergrund, 

sind die Schwarz oder 

Weiß-Versionen zu verwenden. 

Unzulässige 

Anwendungen 

Um die starke Wiedererkennung 

des Logos nicht zu schwächen, 

gibt es einige Regeln, die unbedingt 

eingehalten werden müssen. 

SHOWBOX 

SHOWBOX 

Das Logo darf nicht in anderen 

Farben dargestellt werden. 

Das Logo darf nicht mit Schatten 

hinterlegt werden. 

SHOWBOX 

SHOWBOX 

Es dürfen keine anderen Fonts 

verwendet werden. 

SHOWBOX 

Im Logo dürfen keine Transparenzen 

angewandt werden. 

SHOWBOX 

Im Logo darf nicht gestürzt, 

gestaucht oder gezerrt werden. 

SHOWBOX 


Antonia Rinck 


Antonia Rinck 

18 19

STYLEGUIDE 


STYLEGUIDE 


Farbpalette 

Hausschrift 

Die Farben des Logos bilden die 

Grundlage für das Corperate 

Design. Der Farbverlauf der Bildmarke 

zieht sich wie ein roter Faden 

durch die Gestaltung, welche 

das moderne offene Image von 

Showbox unterstreicht. Rot steht 

für Aktivität, Dynamik, Temperament, 

aber auch für Wärme. 

Neben intensivem kreativen Arbeiten, 

soll auch ein Gefühl der 

Geborgenheit vermittelt werden. 

Der Farbverlauf steht für Bewegung 

und Entwicklung. 

Klar und sympathisch – die Lato 

bietet die Qualität einer funktionell 

und technisch anmutenden 

Groteskschrift und dient perfekt 

dazu, die Informationen deutlich 

zu vermitteln ohne abzulenken. 

Die Schrift ist gut ausgeglichen 

und auch in kleinen Schriftgrößen 

gut lesbar. Bei längeren Texten arbeiten 

wir mit 95 % Schwarzanteil, 

um dem Leser ein harmonisches 

Schriftbild zu bieten. 

Headlines wurden in Versalien 48 

Pixeln, Subheadlines in 27 Pixeln 

und der Fließtext in 16 Pixeln gesetzt. 

C=25 M=40 Y=65 K=0 

R=189 G=156 B=105 

Hex: #BD9C69 

C=15 M=100 Y=90 K=10 

R=162 G=28 B=38 

Hex: #A21C26 

C=0 M=100 Y=41 K=58 

R=107 G=12 B=49 

Hex: #6B0C31 

Lato 

klar 

sympathisch 

funktionell 

ausgewogen 

ABC abc 

Lato Bold 

ABCDEFGHIJKLMNOPQRSTUVWXYZ 

abcdefghijklmnopqrstuvwxyzäöü 

1234567890+-!“§$%&/(;_>

STYLEGUIDE 


STYLEGUIDE 


Die Bildsprache 

Die Ziele sind einfach: Die Fotografien 

entsprechen einem professionellen, 

modernen Design. 

Unsere Models verkörpern kreative 

individuelle Persönlichkeiten, 

die nicht dem Mainstream entsprechen. 

Die Bilder sind in einem warmen 

Farbton, der gut zu dem Farbverlauf 

des Logos passt und wirken 

muss. 

Die Fotos dürfen mit transparenten 

Textboxen kombiniert werden. 

Dazu soll der Farbverlauf 

des Logos verwendet werden. 

individuell 

kreativ 

Teamgeist 

o ff e n 

grenzenlos 


Antonia Rinck 


Antonia Rinck 

22 23

STYLEGUIDE 

User Journey 

STYLEGUIDE 

User Journey 

User Journey 

Um sich besser in den Nutzer hineinversetzen zu 

können, wurde ein User Journey erstellt. Man bezeichnet 

so die Reise des Kunden während des 

Kaufprozesses. Es werden sogenannte Touchpoints 

ermittelt, bei denen die Person in direkter Interaktion 

mit der Plattform steht. 

PHASEN 

Awareness 

Bewusstsein für das Produkt 

wird entwickelt (Inspiration) 

Favorability 

Interesse für das Produkt 

wird verstärkt (Favorisierung) 

Consideration 

Der User erwägt Interesse an 

einer Mitgliedschaft (Wunsch) 

Intent to Purchase 

Teilnahme / Mitgliedschaft 

wird konkret (Anstoß) 

Conversion 

Der User veranlasst die 

Teilnahme / Mitgliedschaft 

Entdeckt 

Landingpage 

Nutzt 

Personensuche 

Informiert sich 

über die FAQs 

Registriert sich 

Lädt das eigene 

Projekt hoch 

Sieht Anzeige in 

Instagram 

Sieht sich 

Projekte 

anderer an 

Liest über 

den Award 

Geht den 

ersten Schritt der 

Registrierung 

Bestätigt den 

Aktivierungslink 

Wartet auf 

Genehmigung 

des Projektes 

Beschäftigt mit kreativem 

Studienprojekt. 

Problem: Benötigt 

Hilfestellung und 

Inspiration. „Ich schaue 

mal, was es online gibt“ 

Touchpoints 

Überfordert von der Informationsflut. 

„Finde ich, was ich suche? 

Was hilft mir wirklich bei meinem 

Problem? 

Verbringt mehr Zeit mit Online 

Recherche als ursprünglich 

geplant. 

Hier gibt es Leute mit dem gleichen 

Problem und gleichen Interessen. 

„Die Zeit läuft mir davon. Bekomme 

ich da die richtige Hilfestellung? 

Kritische Phase: 

„Ist der Anmeldeprozess kompliziert? 

Kostet die Mitgliedschaft etwas? 

Wie funktioniert das Ganze?“ 

„Jetzt muss ich auch noch meinen 

Immatrikulationsnachweis suchen“. 

„Ich lade mein Projekt hoch. 

Hoffentlich nimmt der Prozess nicht 

zu viel Zeit in Anspruch. 

Meldet sich überhaupt jemand?“ 

Unsicherheit, Hoffnung und Neugier. 


Antonia Rinck 


Antonia Rinck 

24 25

STYLEGUIDE 

Screendesign 

STYLEGUIDE 

Screendesign 

Sitemap 

Die untere Abbildung zeigt die 

Sitemap von Showbox, welche 

eine Übersicht über den On- 

line-Auftritt mit den hierarchisch 

untergeordneten Webseiten abbildet. 

Login 

Passwort vergessen 

Projekt bearbeiten 

Logout 

FAQs 


Antonia Rinck 


Antonia Rinck 

26 27

STYLEGUIDE 

Screendesign 

STYLEGUIDE 

Screendesign 

ARBEITEN 

ARBEITEN 

TESTRAUM 

RAUM BETRETEN 

SHOWBOX-ROOM 

SUPPORT >> FAQS 

Aufbau der Website 

Struktur der Menüführung 

Die Navigation gliedert sich in ein Haupt- und ein Untermenü und 

ermöglicht mit der gleichbleibenden Platzierung eine übersichtliche 

Führung durch die Einzelseiten. 

Das Hauptmenü ist horizontal ausgerichtet und bietet Zugriff auf die 

zeitlich unbegrenzten Bereiche wie z.B „Entdecken“ mit den zugehörigen 

Unterbereichen. 

Das Footermenü (siehe Abbildung unten) ist ebenfalls horizontal ausgerichtet 

und listet die verschiedenen allgemeinen Menüpunkte wie 

Support, Kontakt, Impressum, Datenschutz und Social Media Links. 

Die farbliche Gestaltung unterstützt ebenfalls die Orientierung. 

Fährt der Benutzer mit dem Cursor über die inaktive Schaltfläche der 

Hauptmenüpunkte, wird der jeweilige Menüpunkt mit Hilfe der Hover-Funktion 

in Bold dargestellt. Bei dem Dropdownmenü ändert sich 

die Schriftfarbe von Grau in Weiß. 

Auf welcher Seite sich der Benutzer befindet, erkennt er an der Breadcrump-Navigation 

(siehe Abbildung links) auf den Unterseiten. 

Werbeauftritt Bildschirm 

Der Seiteninhalt ist zentriert zum Browserfenster ausgerichtet. Der 

Headerbereich, in dem das Logo und die Hauptnavigation positioniert 

sind, liegt oberhalb des mehrspaltigen Inhaltsbereiches. Ein Full Width 

Slider veranschaulicht dem Seitenbesucher, worum es bei Showbox 

geht. 

Werbeauftritt – Breite kleiner 700 Pixel 

Damit die Bilder und Details bei niederigen Bildschirmauflösungen 

nicht zu klein dargestellt werden, wird ab dem Breakpoint von 700 

Pixeln das Layout einspaltig angezeigt. Der „Content“ wird dabei über 

die volle Breite gestreckt. Die Navigation transformiert sich in eine 

Burger-Navigation, die beim Öffnen nach unten aufklappt und das Untermenü 

öffnet. 

Alle Bilder sind mit einer relativen Größenangabe versehen und skalieren 

anhand des sichtbaren Bereiches der Webseite. 

Bildwahl 

Bilder sind hauptsächlich im Headerbereich zu finden. Im Slider erstrecken 

sie sich über den ganzen Bildschirm. Abgebildet sind meist 

junge Menschen, die nicht dem Mainstream entsprechen. Sie stehen 

für Individualität und kreative Freiheit. 

Die Fotos weisen dezente Rot- und Naturtöne aus dem Farbbereich 

des Corperate Designs auf. Sie werden teilweise von einem transparenten 

rechteckigen Farbverlauf verdeckt, um Werbebotschaften hervorzuheben. 

Hex: #BD9C69 

Hex: #A21C26 

Typografie 

Die Auswahl der Schrift wurde im Vorfeld schon erläutert. Die Headlines 

sind in Versalien, in einer Schriftgröße von 48 Pixeln und im 

Schriftschnitt Black gesetzt. Für Subheadlines wurde Schriftgröße 27 

Pixel gewählt. Der Fließtext besitzt eine Schriftgröße von 16 Pixeln, 

dies trägt erheblich zu einer guten Lesbarkeit bei. 

Hex: #6B0C31 

Hex: #000000 


Antonia Rinck 


Antonia Rinck 

28 29

STYLEGUIDE 

Screendesign 

STYLEGUIDE 

Screendesign 

Responsive Design 


Antonia Rinck 


Antonia Rinck 

30 31

STYLEGUIDE 


SHOWBOX 

STYLEGUIDE 


SHOWBOX 

Landingpage 

Der erste Kontakt 

Dieser Styleguide soll dabei helfen, 

zukünftig entstehende Bereiche 

der Plattform Showbox unter 

einem gemeinsamen Konzept zu 

gestalten und bestehende Websites 

anzupassen. Hier stehen 

die Bedürfnisse der Nutzer und 

Gestaltungsprinzipien im Vordergrund. 

Um das durchgängige 

Design und die Nutzerführung 

kennenzulernen, wird in den folgenden 

Seiten der Werbeauftritt 

mit seinen dazugehörigen Unterbereichen 

und auch den Interaktionsmöglichkeiten 

gezeigt. 

Die Abbildung auf der rechten 

Seite zeigt die Landingpage. Ankommende 

Besucher sollen mit 

dem ausdrucksstarken Bild und 

dem Claim neugierig werden und 

Lust darauf bekommen, mehr zu 

erfahren. 

Unter dem Slider ist in der Subheadline 

schon treffend beschrieben, 

wer angesprochen werden 

soll. In dem zweispaltigen Textblock 

wird über die Vision von 

Showbox berichtet und zudem 

schon auf den Showbox-Award 

hingewiesen. 


Antonia Rinck 


Antonia Rinck 

32 33

STYLEGUIDE 


SHOWBOX 

STYLEGUIDE 


SHOWBOX 

Startseite 

Gliederung in 3 Bereiche 

Der neugierig gewordene User 

klickt nun auf „Erfahre mehr“ und 

gelangt so auf die Startseite. Hier 

wird mit den farblich unterlegten 

Blöcken die drei Hauptbereiche 

angezeigt. 

Unter den drei Verben ist eine 

kurze Erklärung eingefügt, so 

dass der Seitenbesucher gleich 

versteht, um was es beim nächsten 

Klick geht. Unter dem Slider 

ist ein Statement eines zufriedenen 

Nutzer platziert. Dadurch 

wird die Glaubwürdigkeit der 

Message verstärkt. Mit den groß 

abgebildeten Anführungszeichen 

erkennt der Nutzer direkt, dass 

es sich hier um ein Zitat handelt. 

Online-Bewertungen gehören in 

den Bereich des Empfehlungsmarketings. 

Bewertungen von 

Internetusern mit persönlichen 

Erfahrungen wecken Vertrauen 

und verstärken das Interesse. 

Wie bei der Landingpage und 

der Startseite direkt zu erkennen 

ist, wird mit viel Weißraum 

gearbeitet. Der Rezipient soll 

nicht abgelenkt, sondern geführt 

werden. Aussagekräftige Slider 

sollen emotionale Botschaften 

vermitteln und wirklich nur die 

wesentlichen Informationen 

ansprechen. Mit zu viel Input 

ist der Seitenbesucher schnell 

überfordert und gelangweilt. Die 

Folge ist das Abbrechen des Online-Kontaktes. 


Antonia Rinck 


Antonia Rinck 

34 35

STYLEGUIDE 


STYLEGUIDE 


Entdecken 

Projekte zum Mitmachen 

SHOWBOX 

ENTDECKEN ARBEITEN GEWINNEN PROJEKT ANMELDEN ANNA LOG 

7 

Interessiert sich der Seitenbesucher 

für den Bereich „Entdecken“ 

und hat diesen angeklickt, kann 

er mit dem Dropdownmenü (s. 

Abbildung unten) zwischen „Projekte 

zum Mitmachen“, „Projekte 

zum Inspirieren“ und „Personen“ 

auswählen. Daneben kann er Kategorien 

eingrenzen. 

Auf der rechten Abbildung ist die 

Seite mit den offenen Projekten 

zum Mitmachen zu sehen. Die 

einzelnen Projekte sind unter 

einem Galeriebild mit dem Titel 

und der entsprechenden Kategorie 

versehen. 

Die Ansicht auf der rechten Seite 

ist aus der Sicht eines eingeloggten 

Mitglieds, welches selbst 

ein Projekt eingestellt hat. Es ist 

das Fotoprojekt „Portraitfotografie“ 

in der linken Spalte. Der 

Projektkoordinator kann die Angaben 

und Bilder jederzeit unter 

dem Bild selbst (Zahnradsymbol) 

oder unter „Mein Konto“ – „Projekt 

bearbeiten“ ändern. Die Seite 

„Projekte zum Inspirieren“ ist 

hierarchisch unter der Seite „Projekte 

zum Mitmachen“ angeordnet. 

Es sind ausschließlich abgeschlossene 

Projekte aufgeführt. 

Je nach Menge der eingestellten 

Projekte verlängert sich die Seite 

nach unten und der User kann bis 

zum Ende scrollen. 

ENTDECKEN 


Alle Bereiche 

ENTDECKEN >> PROJEKTE ZUM MITMACHEN 

Typografie 


Illustration 


Alle Bereiche 

Typografie, Analoges Design 

Semesterdokumentation 

Typografie, Diploma Analoges Europäische Hochschulen Design 

| Studiengang Grafik-Design 

BGDBXXVB04/14F | 2. Semester SS 14 | Antonia Rinck | Matrikelnummer: 700431 

Dozentin: Frau Antje Langner 

Projekte zum Inspirieren 

Analoges Design 

Personen 

Architektur 

Bildbearbeitung 

Branding 

Fotografie 

Grafikdesign 

Illustration 

Interaktionsdesign 

Motion Design 

Typografie 

UI / UX 

Webdesign 


Antonia Rinck 


Antonia Rinck 

36 37

STYLEGUIDE 


STYLEGUIDE 



Formen des Dialoges 

Kommen wir zur Registrierung, 

eine der ersten Dialoge, die der 

Nutzer mit der Plattform führt. 

Es sind die üblichen Formularfelder 

aufgeführt. Bei der Eingabe 

des Passwortes wird gleichzeitig 

die Sicherheitsstufe angegeben. 

Bei den Eingabefeldern Berufsbezeichnung, 

Studiengang und 

Hochschule kann mit dem Dropdownmenü 

eine vorgegebene 

Auswahl getroffen werden. 

Bei „Ich über mich“ kann der Nutzer 

eine kurze Beschreibung über 

sich abgeben. Da Showbox ausschließen 

will, dass das Nutzen 

der Arbeitsräume von kommerziellen 

Usern unentgeldlich missbraucht 

wird, müssen die Interessenten 

Immatrikulations- oder 

Ausbildungsnachweise hochladen. 

Bei dem Call to Action Button 

„Dokument anhängen“ fragt 

sich der User wahrscheinlich, warum 

das nötig ist. An dieser Stelle 

wurde ein Button mit Fragezeichen 

platziert, um Unklarheiten 

direkt zu beseitigen. Durch das 

Klicken des Call to Action-Buttons 

„Dokument anhängen“ wird 

auf eine weitere Seite geleitet 

(siehe Abbildung rechts), bei der 

man den Computer nach den 

entsprechenden Dokumenten 

durchsuchen kann. 

Nachdem eine Handlung vollzogen 

ist, bekommt der Nutzer ein 

Feedback, z. B. dass die Dateien 

ausgewählt wurden. 

DOKUMENT ANHÄNGEN 

Um mehrere Dateien hochzuladen kann die Strg-Taste gedrückt gehalten werden, 

während die Dateien ausgewählt werden. 

DURCHSUCHEN 

HOCHLADEN 

2 Dateien ausgewählt. 

Einfach und 

übersichtlich 

Ist man bereits Mitglied, muss 

man sich nur einloggen. 

Hat der User sein Passwort vergessen, 

kann er über den Link 

unter dem Eingabefeld ein neues 

anfordern. Hat er sich noch nicht 

registriert, kommt er über den 

Link ganz unten auf das entsprechende 

Formularfeld. 

Unter dem Eingabefeld ist wieder 

ein Call to Action Button eingefügt, 

der auf allen Seiten konsistent 

angewandt wurde, um dem 

Seitenbesucher Orientierung 

und Sicherheit zu bieten. 


Antonia Rinck 


Antonia Rinck 

38 39

STYLEGUIDE 


STYLEGUIDE 


Der eingeloggte User 

3 

Projekt anmelden 

Oben rechts neben dem Hauptmenü 

sieht das eingeloggte 

Showbox-Mitglied seine sich 

betreffenden wichtige Informationen. 

In diesem abgebildeten 

Beispiel hat „Anna Log“ (gewählter 

Nutzername) 3 neue wichtige 

Infos. Ihr Projekt wurde eingestellt, 

sie wurde von einem Mitglied 

direkt zum Mitmachen bei 

dessen Projekt eingeladen und 

sie hat eine private Nachricht in 

ihrem Postfach. 

ANNA LOG 

Dein Projekt wurde genehmigt und eingestellt. 

Du wurdest zum Mitmachen eingeladen. 

Du hast 1 neue Nachricht. 

Will ein User ein Projekt zum Mitarbeiten 

zur Verfügung stellen, muss 

er sich zur Sicherheit noch einmal 

mit Benutzername und Passwort 

anmelden. 

Im nächsten Schritt kann er alle Angaben 

zu seinem Projekt machen, 

(Siehe Abbildung unten). 

Setzt er einen Haken bei: „Projekt 

nicht veröffentlichen“, kann er nur 

gezielt Personen zur Mitarbeit einladen. 

SHOWBOX 

7 

„Mein Konto“ 

Unter „Mein Konto“ hat ein User 

den Überblick über alle für ihn 

relevanten Themen. In dem Beispiel 

rechts ist das Mitglied Anna 

Schäfer eingeloggt, die den Benutzernamen 

Anna Log gewählt 

hat. Unter „Einstellungen“ kann 

sie ihr Profil bearbeiten. Ihre 

private Nachrichten findet sie 

unter „Nachrichten“. Hat sie aktuell 

ein oder mehrere Projekte 

eingestellt, kann sie diese als 3. 

Unterpunkt einsehen. Macht 

sie bei einem Projekt mit, kann 

sie die Bearbeitungstermine in 

Listenanordnung einsehen. An 

letzter Stelle befindet sich die 

Logoutfunktion. 

ANNA LOG 

EINSTELLUNGEN 

NACHRICHTEN 

MEINE PROJEKTE 

PROJEKT BEARBEITEN 

MEINE TERMINE 

LOGOUT 

Analoges Design 

Architektur 

Branding 

Fotografie 

Grafikdesign 

Illustration 


Motion Design 

UI / UX 

Webdesign 

April 

Bilder hochladen (max. 5) 

(max. 5 MB) 

Ist dein Projekt noch unbearbeitet 

oder hast du damit bereits 

begonnen? 

Projekt nicht veröffentlichen 

26 


Antonia Rinck 


Antonia Rinck 

40 41

STYLEGUIDE 


STYLEGUIDE 


Projektstatus: unbearbeitet 

Projektstatus: Projekt begonnen 

Projektkoordination: Anna Log 

Nichtöffentliches Projekt 

Öffentliches Projekt 

Das obige Beispiel stellt ein 

„Nichtöffentliches Projekt“ vor. 

Das Projekt kann nicht über die 

Suchfunktion gefunden werden. 

Hier hat der Projektkoordinator 

Teilnehmer gezielt zum Mitmachen 

eingeladen. Klickt der Eingeladene 

auf seine Einladung 

unter seinem Konto, kann er das 

Projekt anklicken und gelangt zu 

dieser Ansicht. 

Bei jedem Projekt kann der Koordinator 

bis zu 5 Bilder hochladen. 

Hat er viel Text, öffnet sich 

nach Klicken auf den Link „weiterlesen“ 

ein Fenster, in dem alle 

Informationen vollständig angezeigt 

werden. 

Der Koordinator kann die Projektangaben 

und Bilder jederzeit 

bearbeiten. 

Dieses Projekt ist öffentlich und 

kann über die Seite „Projekte zum 

Mitmachen“ ausgewählt werden. 

Der Interessierte kann direkt 

auf den CTA-Button klicken und 

gelangt dann auf ein Formular, 

welches auf Seite 42 vorgestellt 

wird. Er kann sich aber auch erst 

im Vorfeld beim Projektkoordinatior 

informieren, falls ihm die 

Informationen nicht ausreichend 

genug erscheinen. 

Haben sich bereits Teilnehmer 

angemeldet, kann der User über 

den CTA -Button diese in Listenform 

einsehen. 


Antonia Rinck 


Antonia Rinck 

42 43

STYLEGUIDE 


STYLEGUIDE 


Meine Projekte 

Möchte ein Showbox-Mitglied 

Angaben oder Bilder seines Projektes 

ändern, klickt er unter seinem 

Konto auf „Meine Projekte“. 

So sieht er eine Übersicht über 

Projekte, bei denen er mitmacht 

oder Projekte, die er selbst eingestellt 

hat. Von dieser Übersicht 

kann er auch in die entsprechenden 

Showboxräume gelangen. 

SHOWBOX 

Ich arbeitet mit bei: 

Big Lebowsky Comic 

Illustration, Grafikdesign 

RAUM BETRETEN 

Sketchbook – Visages de la France 

Illustration 

RAUM BETRETEN 

Meine Projekte: 

? 

? 

Portraitfotografie (schwarz-weiß) Emotionen 

Fotografie 


Grün, grün, grün... 

Fotografie, Bildbearbeitung 


RAUM BETRETEN 

RAUM BETRETEN 

Projekt bearbeiten 

Will Anna Log eines ihrer Projekte 

bearbeiten, kann sie in der 

obigen Ansicht einzelne Felder 

ändern oder ergänzen. Sie kann 

noch zwei weitere Bilder hinzufügen 

oder Bilder austauschen. Ist 

das Projekt abgeschlossen, kann 

sie als Koordinatorin das Projekt 

abschließen und veröffentlichen. 

Es wird nun unter „Projekte zum 

Inspirieren“ angezeigt. 


Antonia Rinck 


Antonia Rinck 

44 45

STYLEGUIDE 


STYLEGUIDE 


SHOWBOX 

Pe 

ENTDECKEN ARBEITEN GEWINNEN PROJEKT ANMELDEN ANNA LOG 

7 

ENTDECKEN >> PERSONEN 

ENTDECKEN 

Personen 

Alle Bereiche 

12. 03. 2017 22. 03. 2017 30. 03. 2017 

FOLGEN 

21 Abonnenten 

FOLGEN 

15 Abonnenten 

FOLGEN 

34 Abonnenten 

Ich möchte mitmachen 

Hat der User den Button „Ich will 

mitmachen“ gedrückt, wird er auf 

die Ansicht oben weitergeleitet. 

Nach den Kurzinfos erscheint 

eine Terminauswahl. Der Nutzer 

kann anklicken, welche Termine 

für ihn passen. In diesem Beispiel 

wurde der erste Terminvorschlag 

ausgewählt, die Schrift ist nun 

grau und der Rahmen, der sig- 

nalisieren soll, dass eine Handlung 

nötig ist, ist verschwunden. 

Trotzdem kann diese Auswahl 

durch ein erneutes Klicken wieder 

rückgängig gemacht werden. 

Unter dem Feld „Warum will ich 

bei diesem Projekt mitmachen?“ 

kann Freitext eingegeben werden. 

Der Text scrollt während der 

Eingabe zeilenweise nach oben. 

Personen entdecken 

Unter dem Menüpunkt „Entdecken“ 

bietet sich auch die 

Möglichkeit, nach Personen zu 

suchen. Personen können sich 

über die gemeinsamen Projekte 

verbinden und über Nachrichten 

austauschen. Auch die Funktion 

„Folgen“ ist gegeben. 

Diese Ansicht oben ist wieder 

aus der Sicht aus „Anna Logs“. 

Sie hat im Menü-Suchfeld „Pe“ 

eingegeben, um nach einer bestimmten 

Person zu suchen. 

Ihre Suche hat drei Ergebnisse 

ergeben. 


Antonia Rinck 


Antonia Rinck 

46 47

STYLEGUIDE 


STYLEGUIDE 


Media Design 

Hochschule Berlin 

Über mich: 

liebt analoges Design, Kaffee- und MAD- 

Comic süchtig 

ANNA LOG 

Visuelle Kommunikation 

Kunsthochschule Kassel 

Über mich: 

Lomography, digitale Nomadin, 

fühlt sich amputiert ohne Bleistift und Papier 

FOLGEN 

NACHRICHT SENDEN 

FOLGEN 

NACHRICHT SENDEN 

21 Abonnenten 

arbeitet mit bei: 

32 Abonnenten 

arbeitet mit bei: 

Urban Living 


Big Lebowsky Comic 

Illustration, Grafikdesign 

Criminal Minds 

Grafikdesign 

Sketchbook – Visages de la France 

Illustration 

hat eingestellt: 

hat eingestellt: 

Photoshop-Experience 

Grafikdesign 

Portraitfotografie (schwarz-weiß) Emotionen 

Fotografie 

Grün, grün, grün... 


Profile 

Bei einem Profilbesuch einer Person 

sieht der User eine Übersicht 

über die angegebenen Daten 

und bei welchen Projekten das 

Mitglied beteiligt ist. Nichtöffentliche 

Projekte erscheinen in dieser 

Ansicht nicht. 


Antonia Rinck 


Antonia Rinck 

48 49

STYLEGUIDE 


STYLEGUIDE 


NACHRICHTEN 

PEDRO ET 

An: Gib den Namen einer Person ein 

Mo. 16:09 

Wann treffen wir wir uns uns am Montag? heute abend? 

PEDRO ET 

Schön! Daniel ist auch dabei... 

Mo. 16:25 

MANGA FEE 

In der Bibliothek der Uni gibt... 

Um 20:00 h 

Schaffst du das? 

Mo. 17:06 

Das müsste klappen... 

Der Entwurf ist fast fertig. 

Kommt Daniel auch? 

Mo. 17:25 

Schön! Daniel ist auch dabei. Bis später... 

Nachrichten 

Die Showbox-Mitglieder haben 

die Möglichkeit, über die Nachrichtenfunktionen 

miteinander zu 

kommunizieren. Links oben sieht 

man im linken Teil eine Übersicht 

der Chats, daneben das Eingabefeld. 

Auf der rechten Seite ist der 

komplette Dialog abgebildet. Die 

letzte Nachricht ist noch nicht gelesen, 

deshalb wird ein Haken angezeigt. 

Im Texteingabefeld kann man 

zusätzlich, wie man das von anderen 

sozialen Netzwerken kennt, ein Foto 

machen, eine Datei oder ein Bild 

hochladen. 

Schreibe eine Nachricht ... 


Antonia Rinck 


Antonia Rinck 

50 51

STYLEGUIDE 


SHOWBOX 

STYLEGUIDE 


SHOWBOX 

ARBEITEN 

Arbeiten 

Kreative inspiriende Teamarbeit 

Im 3. Hauptthemenübereich geht 

es um das Wesentliche bei Showbox, 

das gemeinsame Arbeiten. 

Unter dem Slider ist wie bei den 

anderen Seiten ein zweispaltiger 

Text verfasst, der über die Art des 

virtuellen Arbeitens informiert. 

Unter „Erfahre mehr“ gelangt der 

User direkt in einen Testraum, 

der symbolisiert, wie die Arbeit in 

einem virtuellen Raum aussehen 

kann. Unter dem Text sind 2 Call 

to Action-Buttons eingefügt. Neben 

dem Link zum Testraum können 

angemeldete Bearbeiter eines 

Projektes ihren Arbeitsraum 

betreten. Der Showbox-Room 

bietet wie viele andere Konferenzplattformen 

die Möglichkeit, 

per Mikrofon, Videokamera und 

per Chat miteinander in Kontakt 

zu treten. 

Funktionen wie die Bildschirmfreigabe, 

die Funktion des Dokumentenhochladens 

und das 

Whiteboard schaffen eine gemeinsame 

Arbeitsbasis trotz 

räumlicher Distanz. 


Antonia Rinck 


Antonia Rinck 

52 53

STYLEGUIDE 


STYLEGUIDE 


SHOWBOX ROOM ? 

Whiteboard 

Teilnehmer /Moderatoren 

Bernd Klos 

Maximieren 

Janine Groß 

Kamera auswählen 

Sarah Frischler 

Lara-Sophie Engel 

Meine Webcam starten 

Textgrößen 

Voreinstellungen 

Hilfe 

Iconographie 

Für die Nutzung des Showboxrooms 

und auch für das Versenden 

von Nachrichten wurden 

klar verständliche Icons entwickelt. 

Dafür wurde ein Farbton 

aus dem Corperate Design für 

die Outlines verwendet. 

Chat 

Sarah Frischler: Guten Morgen zusammen! 

Maximieren 

Textgrößen 

Voreinstellungen 

Hilfe 

Kamera 

Vollbildmodus 

Du benötigst einen Internetanschluss mit 

einer minimale Bandbreite von 2 Mbit/s / 

512 kbit/s (Upload / Download) für einen 

guten Workflow. 

Zudem brauchst du ein Mikro und ein 

Headset, um mit den anderen Teilnehmern 

interagieren zu können. 

Mikrofon 

Hand heben 

Bildschirmfreigabe 

Bandbreite 

Dokument hochladen 

Teilnehmer 

Testraum 

Die obige Ansicht zeigt den 

Showbox-Room. In der Mitte des 

Whiteboards wird der User über 

die technischen Voraussetzungen 

infonrmiert. 

Bild anhängen 

Foto machen 

Nachricht schreiben 

Emoticon 


Antonia Rinck 


Antonia Rinck 

54 55

STYLEGUIDE 


SHOWBOX 

STYLEGUIDE 


SHOWBOX 

GEWINNEN 

Gewinnen 

Gute Teamarbeit wird belohnt 

Gewinnen steht für Preise abräumen. 

Wurde ein Projekt erfolgreich 

abgeschlossen, kann 

es beim Showbox-Award eingereicht 

werden. Die Jury ist mit 

ihren wertvollen Einblicken und 

Kenntnissen in der Designbranche 

die Basis für den Showbox 

Award. Sie setzt sich aus anerkannten 

internationalen Designern 

und Gestaltern zusammen. 

Der Award soll die Motivation 

fördern, im Team zusammen zuarbeiten 

und sich zu vernetzen. 

Um mit dem eigenen Projekt beim 

Award berücksichtigt zu werden, 

muss eine Nominierungsanfrage 

gestellt werden. Mit dem Call to 

Action-Button gelangt man auf 

das entsprechende Formular, 

welches auf der nächsten Seite 

abgebildet ist. 


Antonia Rinck 


Antonia Rinck 

56 57

STYLEGUIDE 


SHOWBOX 

STYLEGUIDE 


SHOWBOX 

GEWINNEN >> GEWINNER 

DIE GEWINNER 

ARCHIV 

Gewinnerprojekte 

Auf der rechts abgebildeten 

Unterseite ist unter dem Slider 

wieder ein zweispaltiger Text verfasst. 

Scrollt der User weiter runter, 

bekommt er eine Übersicht 

über die letzten Gewinnerprojekte. 

Diese Ansicht ist auf den 

nächsten beiden Seiten gezeigt. 


Antonia Rinck 


Antonia Rinck 

58 59

STYLEGUIDE 


STYLEGUIDE 


Gewinnerprojekte 

Gewinner 2016 

INFOGRAFIK – 

DESIGNPROZESS 

Sascha, Tina, Luc und Katrin entwickelten 

eine 5teilige Infografik zum Thema Designprozess 

in illustrativer Form. 

Gewinner 2014 

WOLKE 7 

Mit Wolke 7 wurde ein Phantasiemedikament 

geschaffen, welches Paaren mit der 

Hilfe von Oxytocin wieder zum Blick durch 

die rosarote Brille verhilft. 

MEHR LESEN 

MEHR LESEN 

Gewinner 2015 

TYPOGRAFISCHE PLAKATSERIE 

„Über Musik zu reden ist wie über Architektur 

zu tanzen.“ Zappa bringt es auf den Punkt. 

Paul und Hank wagen es jedoch, das Gefühl 

von Rock‘n‘ Roll visuell zu vermitteln. 

Gewinner 2013 

ANTI ALKOHOL KAMPAGNE 

Judith, Fred und Karla starteten eine Kampagne, 

um Jugendliche zu einem verantwortungsvollen 

Umgang mit Alkohol zu 

bekehren. Die Botschaften wurden über 

verschiedene Kanäle wie Facebook, Instagram 

und Twitter verbreitet. Zusätzlich 

wurde eine App entwickelt. 

MEHR LESEN 

MEHR LESEN 


Antonia Rinck 


Antonia Rinck 

60 61

STYLEGUIDE 


STYLEGUIDE 


Die Infografik 

Vorstellung des Gewinnerprojektes 2016 

Auf den folgenden Seiten wird 

ein Gewinnerprojekt vorgestellt, 

welches die 5 Phasen des Designprozesses 

abbildet. An diesem 

Beispiel wird deutlich, wie 

die Struktur des „Gewinnerarchives“ 

aufgebaut ist. Die Showbox-Award-Preisträger 

werden in 

einem großen Artikel vorgestellt. 

Ein Interview mit allen Beteiligten 

macht den Leser neugierig und 

gibt ihm Mut, auch sein Projekt 

beim Award anzumelden. Dieser 

Artikel erscheint auch in der Page 

und in anderen Magazinen und 

Plattformen. Der Bekanntheitsgrad 

des Showbox Preisverleihes 

soll stetig gesteigert werden, um 

Showbox in der Designbranche 

zu etablieren. 

Sascha, Tina, Luc und Katrin kannten sich 

zuvor nicht. Sascha wohnt in Berlin, Tina in 

Mannheim, beide studieren Kommunikationsdesign. 

Luc studiert Grafikdesign im 5. 

Semester und soll als Hausarbeit eine Infografik 

zum Thema Designprozess entwickeln. 

Er meldet sein Projekt über Showbox 

an und bekam einige Interessensbekundungen 

an einer Teilnahme. Auch Katrin 

meldet sich. Sie absolviert eine Ausbildung 

als Grafkdesignerin und arbeitet nebenher 

als Illustratorin. 

Alle vier kennen sich erst nur durch die 

virtuellen Showboxräume. Erst nach Beendigung 

des Projektes sehen sie sich zum 

ersten Mal real. 


62 63 

Antonia Rinck

STYLEGUIDE 


STYLEGUIDE 


Kundenbriefing: 

Was möchte der Kunde? 

Versteht der Kunde die fragen? 

Hat der AuftrAg Mängel? 

Kannst du die Erwartungen 

des Kunden erfüllen? 

mehr dazu... 

Designprozess 

in 5 Phasen 

1. Auftragserteilung 

2. Analyse 

Analyse und Recherche der Trends: 

Wer ist die Zielgruppe? 

Welche Ziele verfolgt die 

Nutzergruppe? 

Welche Ziele verfolgt der Kunde? 

Was gibt es bereits auf dem Markt? 

„Intuition - plötzliche Lösung aus dem Nichts“ 

Albert Einstein 

Von 30 befragten Designern verlassen sich 75% auf ihre Intuition. 25% nutzen 

beim kreativen Gestaltungsprozess Kreativitätstechniken. Ihrer Meinung 

entstehen erst durch die intensive Beschäftigung mit dem Thema die Ideen. 

Kreativitätstechniken 

25% 

75% 

Intuition 

Ideenphase - Konzept: 

Mithilfe von Brainstorming und 

Skizzen werden Ideen gesammelt und 

Gestaltungsansätze entwickelt. 

Sie werden auf ihre Realisierbarkeit 

überprüft. 

mehr zu Kreativitätsmethoden... 

3. Ideenfindung 

4. Entwurfsphase 

Entwurfsentwicklung: 

Vertiefung des Konzeptes 

Visualisierung durch Scribbles 

Festlegung des Designs und der Farben 

Erstes Feedback kann eingeholt werden. 

Von 28 befragten Designern antworteten 46.4 % auf die Frage: „Wie gestaltest 

du das Kundenbriefing: „...versuche ich immer persönlich durchzuführen.“ 

„Aus Zeitgründen wird das Briefing oft telefonisch oder schriftlich 

abgewickelt.“ antworteten 39,3 %. Die restlichen 14,3 % antworteten: „Kommt 

auf den Umfang des Auftrages an.“ 

Persönlich 

Das Kundenbriefing 

46.4 % 39.3 % 

75% 

telefonisch oder 

schriftlich 

Abgabe und Präsentation des Projekts: 

Der Designprozess endet in einem 

optimierten Produkt, welches in einem 

Modell oder einem Prototyp umgesetzt 

und präsentiert wird. 

5. Umsetzung 

14,3 % Mal So, mal so... 

zurück 

schaue dir eine animerte Infografik dazu an... 


64 65 

Antonia Rinck

STYLEGUIDE 


STYLEGUIDE 


Wie förderst du deine Intuition / Kreativität? 

Es gibt eine in der Natur innewohnende Kreativität, diese beruht auf einer höheren Ordnung. 

Sie ist das, was wir Menschen Intuition nennen. Intuition und Kreativität wirken durch uns selbst. 

Durch festgefahrene Denkstrukturen und voreilige Bewertungen wird dieser Fluss gestört. 

Diese Infografik veranschaulicht dir einige einfache Wege, wieder den Zugang dazu zu erlangen. 

Animiertes Gif 

Sport 

Bewegung bringt deine 

Synapsen im Gehirn wieder in 

Schwung. Die Ideen können 

wieder fließen. 

Spazieren gehen 

Ein Spaziergang im Wald lässt uns 

mit allen Sinnen wahrnehmen. 

Blockaden, die durch Stress und 

Hektik entstehen, werden gelöst. 

Pausen und Schlaf 

Versuche so oft wie möglich 

einen Mittagsschlaf einzulegen. 

Übermüdung stoppt den 

Kreativitätsfluss. 

Rotwein 

Während der Ideenentwicklung 

oder beim Entwurf kann ein 

Gläschen Rotwein die Kreativität 

fördern. Alles jedoch im 

gesunden Maße. 

Was fördert 

deine 

KREATIVITÄT? 

Urlaub 

Etwas Abstand zum Alltag 

und eine neue Umgebung 

lässt dich Neues 

wahrnehmen. 

Früh aufstehen 

Nutze die frühen Morgenstunden. 

Zahlreiche Studien belegen, 

dass dein Konzentrationsvermögen 

am frühen Morgen am höchsten ist. 

ins Café gehen 

Ein gemütliches Café kann dich 

beim Arbeiten inspirierend 

unterstützen. 

Musik 

Harmonien erzeugen Gefühle, 

diese fördern deine Kreativität. 

Versetze dich künstlich in 

Melancholie oder Freude. 

Der wichtigste Grundsatz ist jedoch: Zweifele nicht an dir! 

zurück 

Animiertes Gif 

Durch eine weitere Verlinkung 

gelangt der Betrachter auf ein 

animiertes Gif, welches hier in 

diesem Medium natürlich nicht 

in seiner Funktion dargestellt 

werden kann. Deshalb sind nur 

wichtige Ausschnitte gezeigt, die 

aber den Themeninhalt ausreichend 

vermitteln. 


Antonia Rinck 


Antonia Rinck 

66 67

STYLEGUIDE 


STYLEGUIDE 


Hilfestellung und Support 

Als letztes Thema dieses Styleguides 

muss noch einmal auf das 

Thema Hilfestellungen und Support 

eingegangen werden. 

Showbox möchte seinen Seitenbesuchern 

und seinen Mitgliedern 

Antworten geben, wo Fragen 

aufkommen können. Diese 

sind, wie bereits in vorherigen 

Kapiteln aufgeführt, mit dem 

Fragesymbol und der entsprechenden 

Antwort oder auch mit 

freundlichen Fehlerbenachrichtigungen 

gekennzeichnet (siehe 

Abbildung unten). 

Showbox hat unter der Seite 

„Support“ eine Zusammenfassung 

der Frequently Asked Questions 

erstellt, die im ersten Schritt 

bei aufkommenden Problemen 

helfen sollen (siehe Abbildung 

rechts). Konnte die Frage nicht 

beantwortet werden, kann ein 

Chat gestartet oder ein Rückruf 

angefordert werden. 

Ist dein Projekt noch unbearbeitet 

oder hast du damit bereits 

begonnen? 

! 

UPPS – das tut uns leid! 

Deine Dateien sind zu groß. Ein Upload ist nur bis 5 MB möglich. 

zurück 


Antonia Rinck 


Antonia Rinck 

68 69

DOKUMENTATION 

DOKUMENTATION 

SHOWBOX 

VERBINDET 

KREATIVE 

DOKUMENTATION 

ENTWICKLUNG UND 

AUSARBEITUNG 

DES SEMESTERPROJEKTES 


Antonia Rinck 


Antonia Rinck 

70 71

DOKUMENTATION 

DOKUMENTATION 

Inhalt 

Ideenentwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 

Namensfindung und Logo. . . . . . . . . . . . . . . . . . . . . . . . .75 

Struktur der Plattform . . . . . . . . . . . . . . . . . . . . . . . . . . .76 

Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 

Wireframing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 

Erstellen eines Dummys. . . . . . . . . . . . . . . . . . . . . . . . . .79 

Iconografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 

Testen der Anwendbarkeit . . . . . . . . . . . . . . . . . . . . . . . .81 

Entwicklung der Infografik . . . . . . . . . . . . . . . . . . . . . .82-85 


Antonia Rinck 


Antonia Rinck 

72 73

DOKUMENTATION 

Ideenentwicklung 

DOKUMENTATION 

Namensfindung und Logo 

Ideenentwicklung 

Wie schon im Styleguide erläutert, 

war der Grundidee für die 

Plattform der Vernetzungsgedanke. 

Zu Beginn der Ideenentwicklung 

wollte ich den Ansatz des 

Design Thinking in der Community 

in den Mittelpunkt stellen. 

Ich setzte mich intensiv mit dem 

Thema auseinander. Der Grundgedanke 

des Design Thinking 

ist jedoch auch das inter- oder 

multidisziplinäre Zusammenarbeiten. 

Der Prozess ist vor allem 

dann wirksam, wenn er in Unternehmen 

mit allen Abteilungen 

gemeinsam umgesetzt wird. Bei 

meiner Plattform jedoch sollen 

nur Mitglieder aus dem kreativen 

Bereich miteinander agieren. Die 

Mitarbeitenden sind zwar eher 

auf gleicher beruflicher Ebene, 

da sie alle studieren oder eine 

Ausbildung absolvieren. Trotzdem 

sollen viele Aspekte des Design 

Thinking in die Plattform mit 

einfließen. 

Prozess, Menschen und Raum 

– diese drei Oberbegriffe bilden 

das dynamische Dreieck im Design 

Thinking Ansatz. Im Prozess 

kann man sechs Schritte definieren: 

Verstehen, Beobachten, 

Sichtweisen definieren, Ideen finden, 

Prototypen entwickeln und 

Testen. Diese Schritte sind im 

Alleingang schwieriger durchzusetzen 

und Kreativität findet hier 

ihre Grenzen. Menschen sind 

soziale Wesen, die alle für Teamarbeit 

geschaffen sind, wenn sie 

sich nur drauf einlassen. Danach 

stellen sie fest, dass sich selbst 

etwas in ihnen verändert. 

Der dritte Punkt „Raum“ soll in 

der kreativen Plattform ein fester 

Bestandteil sein. Der Austausch 

und das gemeinsame Arbeiten 

muss rund um die Uhr nach Absprache 

der Beteiligten möglich 

sein. 

Namensfindung 

und Logo 

Der Name für die Plattform hatte 

sich sehr schnell gefunden. 

Er kam intuitiv durch die visuelle 

Vorstellung von „Zeigen“ der 

Projekte und einer Box, die einen 

geschützten Arbeitsraum symbolisieren 

soll. 

Nachdem ich mehrere Personen 

gefragt habe, wie der Name auf 

sie wirkt und welche Assoziationen 

ihnen dabei in den Sinn kommen, 

konnte ich feststellen, dass 

der Name Showbox aussagekräftig 

für das steht, was es ist. Nun 

ging es an die Logoentwicklung. 

Die Bilder zeigen nur einige Entwürfe. 

Zu Beginn wollte ich ein 

schwarzes Logo, es bietet mehr 

Gestaltungsfreiraum für die umgebenden 

Elemente. 

Es war eine knappe Entscheidung 

zwischen Variante 2 und 3 (Abbildung 

rechts). 

In einer Vorlesung riet mir unser 

Dozent, eine Zusatzfarbe zu verwenden. 

Es war ein langer Entwicklungsprozess 

– ich probierte 

alle Farben aus, bis ich letzendlich 

den Mut hatte, einen Farbverlauf 

einzubauen, Abbildung unten. Er 

symbolisiert für mich Entwicklung 

durch die Dynamik von links 

nach rechts. Zudem macht er die 

Wortbildmarke spannend. 

Der Farbverlauf ermöglicht mir 

viele Gestaltungsmöglichkeiten 

des Layoutes, welcher einen 

Wiederkennungswert der Plattform 

garantiert. 

SHOWBOX 

Teile deine Kreativität 

BOX 

SHOWBOX 

SHOWBOX 


Antonia Rinck 


Antonia Rinck 

74 75

DOKUMENTATION 

Struktur und Sitemap 

DOKUMENTATION 

Prototyping 

Struktur der Plattform 

Zuerst versuchte ich mich vorsichtig, 

dem Thema Sitemap zu nähern. 

Ich nutzte Post-it‘s an der Wand, um 

eine Struktur der Seiten und Unterseiten 

zu entwickeln. Nach intensiver 

Beschäftigung mit dem Thema 

stellte ich jedoch fest, dass die Entstehung 

der Sitemap ein längerer 

Prozess ist, und viele Überlegungen 

voraussetzt. 

Die obere Abbildung zeigt meine 

erste Vorstellung und die untere ist 

die Sitemap, die am Ende für das 

Projekt zustande kam. 

Prototyping 

Um Dialoge zwischen Mensch 

und Maschine zu konzipieren, 

ist als erster Schritt der Versuch 

mit Papier und Schere hilfreich. 

Man kann so Dropdownmenüs 

darstellen und schon jetzt mit 

Probanten die Benutzerfreundlichkeit 

testen. 

Auf der rechten Seite wurden 

erste Wireframes von mir erstellt. 

Ich nutzte Illustrator und 

Photoshop um die Seitenanordnungen 

auszuprobieren. 


Antonia Rinck 


Antonia Rinck 

76 77

DOKUMENTATION 

Wireframes 

DOKUMENTATION 

Erstellung eines Dummys 

Wireframes 

Erstellen eines 

Dummys 

Die Erstellung von Wireframes 

war für mich allerdings auf Papier 

einfacher. Man kann die Ideen 

schneller umsetzen. 

Im Vorfeld habe ich mehrere Programme 

ausprobiert, bin aber 

wieder zu Bleistift und Copics 

zurückgekehrt. 

Meine Skizzen und Scribbles 

habe ich in einem Skizzenbuch 

realisiert und dabei versucht, Reihenfolgen 

der Haupseiten und 

Unterseiten zu berücksichtigen. 

Durch das Blättern ist der Benutzervorgang 

gut nachzuvollziehen. 

Im nächsten Schritt mussten 

die gescribbelten Entwürfe als 

Dummy umgesetzt werden. 

Ich wählte Adobe InDesign, um 

Schritt für Schritt die Seiten abzubilden. 

Ich hatte mich entschieden, 

die Website schlicht 

und einfach zu gestalten, damit 

sich der User gut zurechtfindet. 

Aus diesem Grund legte ich den 

Schwerpunkt auf die Bildsprache. 

Dem Seitenbesucher sollen Emotionen 

vermittelt werden. Farben 

und ausdrucksstarke Gesichter 

sollen ihn in seinen Bann ziehen. 

Das Ziel ist, beim Betrachter den 

Wunsch entstehen zu lassen, 

dabei sein zu wollen. 

Die Bildersuche nahm viel Zeit in 

Anspruch. Jedes Foto musste auf 

seine Wirkung getestet werden. 

Ich bediente mich für die Slider 

auf den Hauptseiten bei den 

Anbietern Pixabay und Freepik, 

die kostenfreie Dateien zur Verfügung 

stellen. Für die anderen 

Seiten, die Projekte und spekulativ 

erschaffene Personen, griff ich 

auf eigene Fotos von Fotoprojekten 

oder anderen Hausarbeiten 

meines Studiums zurück. 

Ich entschied mich für ein 960er 

Grid System und wählte ein 24er 

Raster. Das ließ sich mit InDesign 

gut umsetzten. Sliderbilder gingen 

über dieses Raster hinaus, 

was die Wirkung noch unterstreicht. 

Über die Musterseiten 

konnte ich gut Elemente wie die 

Menüleiste oder Footer einfügen 

und die ganze Website bauen. 

Weitere 

Wireframes 


Antonia Rinck 


Antonia Rinck 

78 79

DOKUMENTATION 

Iconografie 

DOKUMENTATION 

Testen der Anwendbarkeit 

Iconografie 

Für den Showboxroom habe ich 

Adobe Connect und das Webmeeting 

der 3CX Plattform getestet. 

Für die Iconografie von Showbox 

wollte ich eigene Zeichen erstellen, 

die an das Corperate Design 

angelehnt sind. 

Nach vielen Versuchen und Experimenten 

entschied ich mich, 

die Zeichen schlicht und einfach 

zu halten. Die Outlines sind im 

passenden Rot dargestellt und 

heben sich so auf dem grauen 

Hintergrund des Showbox Rooms 

ab. Ich habe mich bewusst dazu 

entschieden, nicht auf technische Hintergrunde 

der Raumnutzung einzugehen. 

Meine Kommilitonen sind mit 

Adobe Connect vertraut und ich wollte 

damit nicht langweilen. Ein zweiter 

Grund ist aber, dass der Schwerpunkt 

von Showbox nicht auf den technischen 

Funktionen liegt, sondern eine 

einfache Plattform bietet, gemeinsam 

zu arbeiten. Dazu wird ein Headset, 

eine Kamera, die Bildschirmfreigabe, 

die Funktion, Dokumente hochzuladen 

und ein Whiteboard benötigt. 

Für das Versenden von Nachrichten erstellte 

ich ebenfalls Icons im gleichen 

Design. 

Testen der 

Anwendbarkeit 

Wie bereits erwähnt, habe ich 

zuerst mit Paperprototyping gearbeitet. 

Erste Interaktionsszenarien 

wie die Registrierung und 

das Login erstellte ich in wieder 

in InDesign. Je intensiver ich 

mich mit dem Projekt beschäftigte, 

desto mehr bemerkte ich 

Lücken, die ich nicht bedacht 

hatte, sei es die Personensuche 

oder auch Fehlermeldungen. Ich 

versuchte so oft wie möglich, 

Freunde und Bekannte in mein 

Projekt einzubeziehen. Sie gehen 

ganz neutral an das Thema und 

erkennen gleich Mängel in der 

Anwendbarkeit. 

Ziel ist, dass der User sich gut 

orientieren kann, möglichst lange 

auf der Seite verweilt und den 

Besuch der Plattform in seinen 

Tagesrhythmus einbaut. 


Antonia Rinck 


Antonia Rinck 

80 81

DOKUMENTATION 

Infografik 

DOKUMENTATION 

Infografik 

Entwicklung der Infografik 

Recherche 

Bei meinen Recherchen bezüglich des Designprozesses und seines 

Ablaufs bin ich immer wieder auf ähnliche Phasenmodelle gestoßen. 

Er gliedert sich meist auf in: 

• Briefing / Problemerkennung 

• Recherche / Informationsbeschaffung 

• Ideenphase 

• Entwurfsphase 

• Realisierung / Erstellung eines Prototyps 

Problemerkennung 

Die kreative Entwicklungsphase beginnt gleich nach dem intensiven 

Briefing durch den Kunden. Die Entdeckung eines Problems bildet den 

Ausgangspunkt und die Motivation für den Designprozess, der dann in 

seinem Ablauf vorbestimmt ist. 

Informationsbeschaffung, Wissensauswertung 

Wenn ein Problem als solches erkannt ist und die Absicht besteht, 

dafür eine Lösung zu erarbeiten, erfolgt die sorgfältige Analyse des 

Problems. Nun geht es darum, möglichst viele Informationen zu sammeln 

und für eine Auswertung aufzubereiten. 

Ideenphase 

Nach der Recherche findet laufend ein Abstandnehmen und ein 

Sichnähern statt. In dieser kreativen Phase ist es für den Designer 

wichtig, Ideenskizzen oder Hilfsmodelle von allen erdachten Prinziplösungen 

anzufertigen. Auf diese Art können alle neuen Kombinationen 

als Alternativen gesammelt und für die Bewertungsphase bereitgestellt 

werden. Dieser Prozess fördert die Inspiration, die oft erst nach 

einem gewissen zeitlichen Abstand eintritt. Die intensive Beschäftigung 

mit dem Thema bzw. Problem bringt das Unterbewusstsein zum 

kreativen Arbeiten. 

Der Designer hat dann das »Aha-Erlebnis«, bei dem sich das ausgebreitete 

Ideenmaterial zu einem sinnvollen Ergebnis heraus kristalisieren 

lässt. Der Austausch im Team und das Einholen des Feedbacks 

von Personen, die der Sache mit Abstand gegenüber stehen, ändert 

die Sichtweise und verhilft, eingefahrene Denkstrukturen zu lockern. 

Entwurfsphase: 

Hat sich in der Ideenphase ein Konzept bewährt, wird es optimiert 

und weiterentwickelt. Ziel ist es in jedem Fall, die Außenwirkung der 

gestalteten Gegenstände zu erhöhen. In der Entwurfsphase wird das 

Konzept vertieft und in Skizzen oder Illustrationen festgehalten. Erst 

durch das Visualisieren wird die Konzeptidee wirklich verdeutlicht und 

kann weiter heranreifen. 

Realisierung: 

Die Designideen werden weiterentwickelt und auf ihre Realisierung 

geprüft, Material- und Farbkonzepte werden detailliert und eventuelle 

Herstellungsprozesse ausgewählt. Wir konzentrieren uns auf den 

kreativen Entwurf und haben die Realisierung des Produktes im Auge. 

Durch Erstellung von technischen Designzeichnungen, 3D-Modellen 

und - Daten wird die Übergabe und Zusammenarbeit mit weiter Ausführenden 

erleichtert. 

Der strukturierte Designprozess endet nach ersten Skizzen und einem 

konsistenten Gestaltungskonzept in einem optimierten Produkt, welches 

in 3D Daten, einem Modell oder Prototyp umgesetzt wird. 

Damit Projekte reibungslos ablaufen, planbar sind und zusammen mit 

dem Kunden entwickelt werden, läuft der Designprozess in mehreren 

Phasen ab. Jedes Projekt ist jedoch individuell und einzigartig und somit 

kann auch der Ablauf des Designprozesses variieren. Doch generell 

schafft ein strukturierter Gestaltungsablauf die Grundlage für eine 

erfolgreiche Zusammenarbeit und fördert die Projekttransparenz. 

Zielgruppe und Medium 

Der Designprozess in 5 Phasen ist für die Plattform Showbox konzipiert. 

Er ist für alle Kreative, Gestalter und Designer ein wichtiges 

Know-how. Wahrscheinlich hatte diese Zielgruppe in ihrer Ausbildung 

das Thema mehrfach als Lerninhalt. Trotzdem vergisst auch ein 

erfahrener Designer schnell in Stresszeiten die schrittweise Abfolge 

der Phasen. Das kann sich rächen. Eine nicht ausreichende Recherche 

kann fatale Folgen haben. Evtl. gibt es ein sehr ähnliches Produkt bereits 

auf dem Markt, oder der Auftraggeber wurde nicht ausreichend 

verstanden. Am Ende ist er mit dem Ergebnis unzufrieden. Wichtig 

ist auch, in der Ideenphase nicht zu eilig in die Entwurfsphase fortzuschreiten. 

Erst muss alles an Ideen und Einfällen zugelassen werden. 

Gerade in diesem Prozess können Ideen entstehen, die man sonst 

übersehen hätte. Die Aussortierung erfolgt dann im nächsten Schritt. 

82 


Antonia Rinck 


Antonia Rinck 

83

DOKUMENTATION 

Infografik 

DOKUMENTATION 

Infografik 

Gestaltung 

Bei der Erstellung dieser Infografik durchlief auch ich die Phasen des 

Designrozesses. 

In der Ideenphase hatte ich einerseits die Vorstellung, den Prozess 

bunt oder evtl. als Diagramm abzubilden. In der Entwurfsphase stand 

für mich jedoch schnell fest, den Ablauf mit Illustrationen zu visualisieren. 

Erste Entwürfe entstanden in bunter Farbe in llustrator. Nach meinem 

Geschmack hatten die bunten klaren Figuren nicht so viel Lebendigkeit, 

wie die Skizzen, die bei den Scribbles mit dem Fineliner in der Ideenphase 

entstanden sind. Jetzt war die Herausforderung, die Skizzen 

als Vektorgrafiken zu zeichnen. 

Animiertes GIF 

Bei einer Infografik versuchte ich mich an einem animierten Gif. Die 

Antworten auf die Frage: Wie präsentierst du deinen finalen Entwurf 

dem Kunden am liebsten? wollte ich mit einem kleinen Storytelling 

verbinden und den Akteuren ein wenig Leben einhauchen, indem ich 

kleine Gesten einbaue. 

Das Gif wird in Photoshop erstellt. Zuvor habe ich mit einem Grafiktablet 

und Illustrator die Figuren gezeichnet und unterschiedlich verändert. 

Die verschiedenen Bilder werden als JPG abgespeichert und in Photoshop 

in Ebenen angeordnet. Über die Zeitleiste wird dann alles gesteuert. 

Da sich bei einem Designprozess alles um Form - Farbenvielfalt dreht, 

entschied ich mich, alles hauptsächlich in schwarz zu halten. Als einzige 

Zusatzfarbe habe ich gelb gewählt. 


Antonia Rinck 


Antonia Rinck 

84 85

QUELLEN 

QUELLEN 

Quellen 

Seite 1 

https://pixabay.com/de/fotograf-kamera-bart-linse-fotos-1150052/ 

Seite 7 

http://de.freepik.com/fotos-kostenlos/gruppe-von-menschen-lachelnd_966251.htm#term=group%20 

people&page=1&position=27 

Seite 11 

https://pixabay.com/de/mann-gl%C3%A4ser-hipster-bart-597179/ 

Seite 12 

https://pixabay.com/de/hipster-wandern-fotograf-foto-frau-865295/ 

Seite 13 

https://pixabay.com/de/mann-fahrrad-lebensstil-erwachsene-598180/ 

Seite 14 

https://pixabay.com/de/entthront-zaun-metall-draht-schutz-690503/ 

Seite 22 

https://pixabay.com/de/zinn-k%C3%B6nnen-werfen-spiel-erfolg-895942/ 

Seite 23 


https://pixabay.com/de/teleskop-anwendungsbereich-suchen-2040903/ 

https://pixabay.com/de/start-treffen-brainstorming-594091/ 

http://de.freepik.com/fotos-kostenlos/das-madchen-springend-in-den-strand-mit-bunten-luftballons_907968.htm#term=girl%20with&page=1&position=45 

http://de.freepik.com/fotos-kostenlos/gruppe-von-menschen-lachelnd_966251.htm#term=group%20 

people&page=1&position=27 

http://de.freepik.com/fotos-kostenlos/fuhrungskrafte-in-unternehmen-mit-der-hand-gestapelt_1005856. 

htm 

Seite 30 / 31 

http://www.pixeden.com/psd-web-elements/modern-psd-responsive-showcase 

Seite 33 


Seite 35 

https://pixabay.com/de/teleskop-anwendungsbereich-suchen-2040903/ 

Seite 37 

Abbildung links oben: 

https://pixabay.com/de/aquarellfarbe-k%C3%BCnstler-malen-1995474/ 

Seite 42 

https://www.strassenkatalog.de/panoramio/kaiserslautern_ehemaliges_gefaengnis_heute_hotel_alcatraz_,16187001.html 

– Urheber: Hermann Hauber 

http://aff.bstatic.com/images/hotel/max500/214/21461036.jpg 

Seite 46 

https://www.strassenkatalog.de/panoramio/kaiserslautern_ehemaliges_gefaengnis_heute_hotel_alcatraz_,16187001.html 

– Urheber: Hermann Hauber 

Seite 47 

Rennrad: 

https://pixabay.com/de/rennrad-retro-vintage-fahrrad-1287729/ 

Seite 48 

Rennrad: 

https://pixabay.com/de/rennrad-retro-vintage-fahrrad-1287729/ 

Seite 53 

https://pixabay.com/de/start-treffen-brainstorming-594091/ 

Seite 57 

https://pixabay.com/de/zinn-k%C3%B6nnen-werfen-spiel-erfolg-895942/ 

Seite 59 

http://de.freepik.com/fotos-kostenlos/das-madchen-springend-in-den-strand-mit-bunten-luftballons_907968. 

htm#term=girl%20with&page=1&position=45 

Seite 63 

http://de.freepik.com/fotos-kostenlos/fuhrungskrafte-in-unternehmen-mit-der-hand-gestapelt_1005856.htm 

Seite 71 

https://www.mightydeals.com/deal/free-psd-mockups.html 

Seite 72 

http://de.freepik.com/fotos-kostenlos/das-madchen-springend-in-den-strand-mit-bunten-luftballons_907968. 

htm 

Seite 81 

https://www.mightydeals.com/deal/free-psd-mockups.html 

Seite 90-91 

https://www.pexels.com/de/foto/holz-notizbuch-vintage-freiraum-10651/ 

Alle Abbildungen, die hier nicht aufgeführt sind, sind eigene Fotos, 

die privat und aus meinen Studienprojekten entstanden sind. 


Antonia Rinck 


Antonia Rinck 

86 87

FAZIT 

EIDESSTATTLICHE ERKLÄRUNG 

Fazit 

Im Nachhinein finde ich es schade, dass ich kein 

Projekt gewählt habe, dass ich in naher Zukunft real 

umsetzen kann. Der Showbox-Room ist in seiner 

technischen Ausstattung zu komplex und auch aus 

finanziellen Gründen lässt sich das Konzept nicht 

realisieren. Das Projekt hat trotzdem viel Spaß gemacht. 

Ich habe ausgenommen der Semesterarbeit 

in Screendesign noch keine Webprojekte bearbeitet. 

Allein die Umsetzung der Sitemap und die 

Überlegungen, die im Vorfeld vorausgegangen sind, 

verhalfen mir, Strukturen von Plattformen wahrzunehmen 

und zu hinterfragen. Es wurde dadurch ein 

anderes Bewusstsein geschaffen. Ich nehme Anwendungen 

nicht nur als User wahr und kann Zusammenhänge 

der Abläufe, die im Hintergrund konstruiert 

wurden, besser verstehen. Die Vorlesungen 

und Tutorien waren gut strukturiert und der Dozent 

ging intensiv und hilfsbereit auf jedes Projekt ein. 

Problemstellungen wurden durchgespielt und weitere 

Lösungsansätze gegeben. Ich war froh, dass ich 

fast bei jedem virtuellen Treffen dabei sein konnte. 

Auch andere Projekte verhalfen eigene Ansätze zu 

überdenken und aus Sicht des Users durchzuspielen. 

Der größte Lerneffekt ist, wie bei allen Studienprojekten, 

die schriftliche Fixierung, wie in diesem 

Projekt Styleguide und Dokumentation. Durch das 

Niederschreiben muss die ganze Struktur der Plattform 

nochmals überdacht werden. Die Arbeit war 

sehr zeitintensiv und eigentlich könnte man immer 

weiter machen und optimieren. Das Projekt kann 

ins Unendliche gehen und mir ist dadurch bewusst, 

welchen Stellenwert die visuelle, funktionale und 

strukturelle Gestaltung für einen Online-Werbeauftritt 

hat und wie wichtig die perfekte Ausarbeitung 

für die technische Implementierung im nächsten 

Schritt ist. 

Eidesstattliche Erklärung 

„Ich erkläre hiermit, dass ich die vorliegende Arbeit 

selbstständig und ohne Benutzung anderer als der 

angegebenen Hilfsmittel angefertigt habe; die aus 

Quellen (einschließlich elektronischer Quellen und 

dem Internet) direkt oder indirekt übernommene 

Gedanken sind ausnahmslos als solche kenntlich 

gemacht. Die Arbeit wurde bisher weder im Inland 

noch im Ausland in gleicher oder ähnlicher Form 

einer anderen Prüfungsstelle vorgelegt und auch 

noch nicht physisch oder elektronisch veröffentlicht.“ 


Antonia Rinck 


Antonia Rinck 

88 89

IMPRESSUM 

Impressum 

Satz und Layout: 

Adobe InDesign CS6 

Bildbearbeitung: 

Adobe Photoshop CS6 

Adobe Illustrator CS6 

Verwendete Schriftart: Lato 

Bindung / Druck: 

Broschüre mit PUR-Klebebindung, 

Endformat DIN A4, 92-seitig (46 Blätter) 

115g/qm Innenteil matt mit 250g/qm Umschlag 

(einseitig folienkaschiert matt) 

4/4 farbig (beidseitiger Druck) 

Verarbeitung: PUR-Klebebindung 

Aktualität Quellen: 

Alle Quellen wurden 

am 25.03.2017 

nochmals überprüft 

90 


Antonia Rinck

DER MODUS 

FÜR DAS 21. JAHRHUNDERT 

IST DIE VERNETZUNG, BEI 

DER DAS VERBINDENDE, 

DAS KOLLABORIEREN 

UND DAS MITEINANDER 

IM FOKUS STEHEN. 

Prof. Ulrich Weinberg, 

Leiter der HPI School of Design Thinking

RinckAntonia_Showbox

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?