Incom ist die Kommunikations-Plattform der Hochschule Hof Mediendesign

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 Mediendesign mehr erfahren

2 Werkzeug (A)

Dokumentation

01. Kurzbeschreibung/Abstract

In unseren 2. Projekt in Interaction Design beschäftigen wir uns mit neuen Designwerkzeugen speziell für unsere Hochschule. Da wir ein neues Erscheinungsbild für unsere Hochschulwebseite bekommen, sollten natürlich auch andere Dokumente, wie z.B. Plakate ebenfalls an dem neuen Styleguide angepasst werden. 

Also habe ich mich dafür entscheiden, eine mobile App zu entwickeln, mithilfe deren Studenten und Mitarbeiter der Hochschule auch ohne Designkenntnisse oder Kreativität Plakate erstellen können. Denn nicht jeder weiß, wie man ein gutes Plakat gestaltet oder man hat vielleicht einfach nicht das richtige Programm dafür. Zudem werden alle Plakate in meiner App nach den Styleguide Richtlinien der Hochschule erstellt und generiert. Somit ist zwar jedes Plakat einzigartig, aber durch ein einheitliches Farbkonzept mit den Farben des Schullogos und dem vorgegeben Rasters spiegelt jedes Plakat unsere Hochschule wieder. Auch der Zusammenhang zwischen den einzelnen Postern wird durch ihr Design schnell deutlich.

Mit einem Fragebogen gleich zu Beginn der Anwendung werden generativ die verschiedenen und individuellen Plakate erstellte, welche im Anschluss jedoch noch farblich angepasst werden können. Durch verschiedene Fragen und Auswahlmöglichkeiten können somit unterschiedliche Interessen umgesetzt werden. Schnell und einfach. Der Nutzer kann z.B. zwischen der Plakatgröße, dem Anlass, der Stimmung und der Anzahl der Bilder wählen, welcher er für das Poster nutzen möchte. Zudem wird gleich zu Beginn ausgewählt, wer die App gerade nutzt, Student oder Mitarbeiter, um das Plakatlayout noch einmal zu differenzieren.

Zum Schluss können sich die Anwender die PDF oder das JPEG downloaden und in einer Druckerei drucken lassen.

Für die Umsetzung erstelle ich ein Konzept, verschiedene Wireframes, ein Flowchart und zum Schluss einen Prototypen, welcher verdeutlichen soll, wie meine App aufgebaut ist und funktionieren soll.

02. Filmische Dokumentation des Projekts

03. Bilder/Screenshots

04. Pitchdeck

05. Research & Ergebnisse

Zu Beginn meiner Research Phase habe ich mir den neuen Styleguide unserer Hochschule noch einmal genauer angeschaut und versucht, diesen auf das Design meiner Plakate zu übertragen. Hierbei war es wichtig, im vorgegebenen Raster und Farbkonzept des Guides zu bleiben, damit jedes Plakat die Zugehörigkeit zur Hochschule repräsentiert und der Zusammenhang zwischen den einzelnen Plakaten schnell erkennbar ist.

Nachdem ich ein gutes Designkonzept ausgearbeitet habe und viele verschiedene Varianten von Plakaten entworfen habe (siehe: Plakat Beispiel, Plakat Vorlagen und Plakat Vorlagen 2), habe ich mich mit anderen Plakatgeneratoren genauer auseinandergesetzt. Gute Beispiele hierfür sind Canva und der Layout Creator von DHL. Beides sind Webanwendungen, welche dem Anwender mit nur wenigen Anweisungen dabei helfen, eigene Plakate etc. zu erstellen. Dabei muss der Nutzer keine Erfahrung in Gestaltung haben und mit nur wenigen Schritten ersteht ein individuelles Plakat.

Diese Konzepte habe ich mir als Inspiration genommen für meine eigene App. Mir war es wichtig, dass jeder Nutzer die App bedienen kann und ganz einfach und schnell ein Plakat gestalten kann, ohne dafür Kenntnisse in Design haben zu müssen oder kreativ sein zu müssen. Zudem sollen die Plakate am Ende alle dem Styleguide der Hochschule entsprechen, aber trotzdem individuell und einzigartig sein. Damit das Konzept der schnellen und einfach Gestaltung von Plakaten noch einmal unterstützt wird, wollte ich meine Anwendung als Handyapp umsetzten, damit der Anwender jederzeit und überall darauf zurückgreifen kann.

06. UX, Personas, Userjourney

Personas

Mitarbeiter

Professoren, Dozenten, Mitarbeiter in der Verwaltung und alle anderen Mitarbeiter der Hochschule

Durch den neuen Styleguide der Hochschule ändern sich natürlich auch alle Plakatdesigns und Hinweisaushänge in der Hochschule. Um diese zu aktualisieren, müssen alle Poster neu gestaltet und ausgedruckt werden. Doch nicht alle Mitarbeiter haben das richtige Programm dafür oder haben einfach nicht die Zeit, sich mit dem neuen Erscheinungsbild auseinander zu setzten. Zudem ist der Aufwand, ein Plakat von Grund auf neu zu erstellen, sehr hoch und diese Zeit haben die meisten Angestellten nicht.

Studenten

Alle Studenten der Hochschule Hof.

Nicht alle Studenten habe Adobe Programme, um ein Plakat zu erstellen und die meisten denken vielleicht auch nicht daran im Raster der Hochschule zu bleiben, wenn sie ein einfaches Plakat für eine Party oder einen Workshop machen wollen. Manchmal muss das Entwerfen eines Plakates sehr schnell gehen, da ein Workshop oder eine Veranstaltung spontan geplant wurde und da ist eine App sehr hilfreich.

Userjourney

Die App „Plakator“ ist speziell nur für die Mitarbeiter und Studenten der Hochschule Hof erstellt worden, da alle Plakate im Styleguide der Hochschule gestaltet sind. Die App kann jederzeit und überall über das eigene Smartphone genutzt werden.

Der Download der App könnte womöglich über die Hochschulwebseite erfolgen. Durch eine Eingabe des Shibboleth-Logins kann dann der download für die berechtigten Personen freigeschaltet werden. Eine direkte Anmeldung in der App ist nicht notwendig. 

Die Anwendung der App ist sehr einfach und schnell. Nach dem Loadingscreen kommt der Nutzer zu der ersten von insgesamt fünf Fragen. 

1. Ich bin…

2. Welche Größe soll dein Plakat haben?

3. Für welchen Anlass ist das Plakat?

4. Welche Stimmung soll das Plakat haben?

5. Wie viele Bilder möchtest du verwenden?

Danach muss der Anwender nur noch seine Daten angeben, Bilder und Text, und schon wird ein individuelles Plakat generiert!

Im Anschluss kann er, wenn er mag, noch die Farben anpassen, bevor er das Plakat als PDF oder JPEG exportieren oder den Entwurf speichern kann.

Das Poster kann dann anschließend in jeder Druckerei oder einfach zu Hause gedruckt werden.

Flowchart

07. Skizzen, Entwürfe

Diese Wireframes waren meine ersten Entwürfe für meine App. Diese waren jedoch noch sehr schwammig und basierten auf der Idee, nur fertige Vorlagen für Plakate zu liefern, welche dann noch angepasst werden können. Hierbei besteht jedoch das Problem, dass der generative Aspekt verloren geht und zudem durch die gleichen Vorlagen die Plakate sehr ähnlich oder sogar gleich aussehen können, was eigentlich nicht das ist, was ich wollte. Auch der Fragebogen befand sich in den ersten Skizzen noch auf einer scrollbaren Seite ohne Vorschauoptionen.

Bei meinem zweiten Entwurf habe ich dann das Konzept des generativen Gestaltens von Plakaten umgesetzt und zudem den Fragebogen auf mehrere Frames aufgeteilt. Somit hatte jede Frage einen eigenen Frame. Hierbei kam aber das Problem hinzu, dass ich die Wahl zwischen den verschiedenen Anlässen, Stimmungen und Anzahl von Bildern nicht in den Frageteil zu Beginn der App gepackt habe, sondern nur in den Editor zum Schluss der App. Somit wurde der Editor sehr unübersichtlich und voll beladen. Zudem machte das die zwei Fragen am Anfang der Anwendung überflüssig.

In meinen nächsten Überlegungen habe ich alle Fragen auch zu Beginn der App in einzelnen Frames hinzugefügt. Dann habe ich mir Gedanken gemacht, wie ich die Auswahl zwischen Stimmungen, Anlässen und Bilder im Editor besser und iOS gerecht darstellen kann und habe hierzu mehrere Optionen gemacht.

Nach mehreren Besprechungen habe ich dann beschlossen, den Editor sehr zu vereinfachen und die Funktionen, die Stimmungen, Anlässe und Bilderanzahl verändern zu können, raus genommen. Somit bestand nun die App nur noch aus dem generativen Teil mit den Fragen und einen sehr simplen Editor, mit dem man nur noch wenige Dinge an dem Plakat ändern konnte. Dazu gehörte die Farbe der Formen und den Text und die persönlichen Bilder.

Für das neue Konzept habe ich wieder neue Wireframes erstellt. Schlussendlich habe ich mich für Option 1 entschieden und für den Prototypen den Editor noch weiter vereinfach, sodass man am Ende nur noch die Farben der Formen ändern kann. Der eigene Text und die Bilder werden nun im generativen Teil nach den Fragen angegeben und hinzugefügt.

08. Studien

Für die unter Punkt 07. Skizzen gezeigten und genannten Wireframes habe ich mich mit den iOS Interface Guidelines beschäftigt. Da meine App für ein iPhone gestaltet wurde, sollte das Design auch den Richtlinien von Apple entsprechen, was zu Beginn nicht der Fall war. Ein Problem stellten die doppelten Toolbars im Editor dar, die ich in meinen zweiten Überlegungen hatte. Durch ein paar Nachforschungen habe ich dann mehrere Apple konforme Designs erstellt, welche auch besser aussahen als meine ersten Entwürfe.

Da ich mein Konzept jedoch zum Schluss noch einmal geändert habe, habe ich diese Toolbar nicht mehr benötigt. Dennoch hat mich diese Studie sehr weiter gebracht und mir geholfen, das Design von Apple Apps zu verstehen und zu optimieren.

Weitere Studien habe ich unter 07. bereits genannte.

09. Umsetzung

Umgesetzt habe ich dann schlussendlich meine App mit dem Programm ProtoPie. Der Prototyp soll verdeutlichen, wie meine App aufgebaut ist und funktioniert. Da das Tool ProtoPie nur begrenzte Funktionen hat und es sehr schwer ist, einen guten Generator in kurzer Zeit zu erstellen, funktioniert der generative Teil der App nicht direkt. Der ProtoPie verdeutlicht an einem Beispielplakat, wie die App funktionieren wird.

Meine App findest du hier!

Notiz

Bis jetzt konnte ich das Problem der fehlenden Schriften im Cloud-Prototypen von ProtoPie nicht lösen. Leider werden deswegen nicht meine verwendeten Schriften in dem Prototypen genutzt, sondern andere.

Am besten sieht die App also auf dem Handy aus. Um den Prototypen auf dem Handy anschauen zu können, musst du dir nur die kostenlose ProtoPie App im AppStore downloaden und den unten stehenden QR-Code damit einscannen. Anschließend nur noch die Schriften wie in der App beschrieben aufs Handy schicken und mit der ProtoPie App verknüpfen.

Hier kannst du die verwendeten Schriften downloaden:

SoraFamiliy

Projekt 2- Design Werkzeug

Projekt 2: Storyboard

Projekt 2: Überarbeitete Generator App

Projekt 2: Optionen Generator App

Projekt 2: Wireframes

Projekt 2: Flowchart

Projekt 2: Plakat Vorlagen 2

Projekt 2: Plakat Vorlagen

Im nächsten Schritt habe ich mehrere verschiedene Plakat Vorlagen nach dem vorgegebenen Raster erstellt. Dabei entstanden sowohl formelle als auch ausgefallenere Plakate.

Projekt 2: Plakat Beispiele

Projekt 2: Konzept - Design Werkzeug

In unseren zweiten Projekt beschäftigen wir uns mit Design Werkzeuge. Ich habe mich dafür entschieden App, Print und Generativ miteinander zu verbinden und habe erste Ideenansätze im nachfolgenden Konzeptblatt notiert.

Projekt 1 - Logo Varianten

Im ersten Teil unseres Projektes beschäftigen wir uns mit unseren neuen Hochschul-Logo. Durch verschiedenste Animationen, neue Kombinationen und unterschiedlichsten Objekten oder Materialien wird unser Logo vielseitig in verschiedensten Bereichen einsetzbar gemacht.

Dafür fertigen wir zunächst erste Ideen, Skizzen und Variationen an, um diese später auszuarbeiten.

Projekt 1: Stop-Motion Origami Logo

Im 2. Schritt entschied ich mich dazu, ein 'Prototyp' eines Stop-Motion Videos über unser Logo anzufertigen. Hierbei faltet sich ein unscheinbares Blatt Papier zu unserem Logo mithilfe der Origamikunst.

Stop-Motion

Projekt 1: Überarbeitete Animation

Zudem weitete ich meine anfängliche Animation weiter aus und fügte neue Elemente hinzu. Diese Animation könnte zum einen für einen Ladebildschirm der Hochschule Website genutzt werden oder am Anfang einer Präsentation oder eines Videos gezeigt werden.

Animation

Projekt 1: Anleitung Origami Logo

Damit jeder ganz einfach und unkompliziert das Logo selbst nach basteln kann, habe ich eine Anleitung für das Origami Logo angefertigt.

Zudem habe ich das Logo in verschiedenen Größen gefaltet und festgestellt, je größer das Papier ist desto schwieriger wird es genau zu falten.

Projekt 1: Storyboard Stop-Motion

Um ein Stop-Motion Video anzufertigen habe ich zuerst ein Storyboard erstellt. In der eigentlichen Umsetzung habe ich das dann doch etwas umgewandelt.

Zudem habe ich ein Video gedreht, wo ich das Origami selber falte.  

Stopmotion_2

Faltvideo

Projekt 1: Origami Video

In meinen letzten Schritt habe ich ein finales Video erstellt, in den das Origami Logo gefallen wird.

Video

Ein Projekt von

Fachgruppe

Mediendesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Information / Interaction Design

Entstehungszeitraum

Wintersemester 2020 / 2021

1 Kommentare

Please login or register to leave feedback

Deine Wireframes sind klar. Nun würde ich das Interfacedesign angehen. Du kannst hier klassisch mit iOS und Material arbeiten.

Bei den Plakatgrößen könnte Deine Zielgruppe nach A3 und unter A5 vielleicht ein wenig überfordert sein. Hier könntest Du überlegen, ob Du die Größenangaben mit zeigst oder vielleicht gleich das Prinzip der A-Formate (Falten, verdoppeln, lange Kante).

Komm aber beim Interfacedesign nicht von Deinem eigentlichen Konzept ab. Denn eigentlich wolltest Du über eine Konversation zum Plakat kommen. Und nicht wie in Deinen Wireframes über Icons.

Mach doch zwei Entwürfe. Eine klassische App und ein Conversational Interface? Das fängt dann mit Fragen oder Aussagen an.

Ich bin Studierende / Mitarbeitende.
oder
Studierst oder arbeitest Du an der Hochschule?

...