MEAK_Dokumentation_Timo_Albrecht

STYLEGUIDE UND DOKUMENTATION | TIMO ALBRECHT

AUFGABEN-
STELLUNG
4
6
20
INFORMATIONS-
GESTALTUNG
CORPORATE IDENTITY &
CORPORATE DESIGN
CONTENT
UMSETZUNG
28
VERZEICHNIS
68

Entwickeln Sie, thematisch ausgehend von Ihrer Infografik, eine Web Plattform.
Die Plattform soll Community bildend sein, die Community soll Content beitragen.
AUFGABENSTELLUNG
Die Redaktion erstellt Content und begleitet den Aufbau der Sammlung und ihre
Auswertung in Text und Bild.
Es entsteht also eine inhaltliche Mischung aus redaktionell entwickelten
Inhalten und Usergenerated Content.
Planen Sie abschließend eine ergänzende App.
4
5

IDEE, KONZEPT
Worum handelt es sich?
MEAK ist eine digitale Lernplattform für angehende Mediengestalter in den Bereichen Digital
und Print sowie Bild und Ton. MEAK ist die Abkürzung für Medienakademie. Die Lernplattform
bietet die Möglichkeit sich optimal auf die Zwischen- und Abschlussprüfung vorzubereiten.
Dabei geht es um das große Ganze, da neben der Theorie auch die Praxisaufgaben
gelernt und geübt werden können. Der User meldet sich auf der Plattform an und
gelangt in den offenen Bereich. In diesem Bereich stehen ihm dann alle Anwendungen
zur Verfügung. Das Nutzerkonto wird auch für die App benötigt, damit der Lernstand,
die Nutzerdaten, Chats und E-Mails abgerufen werden können.
CORPORATE IDENTITY &
CORPORATE DESIGN
Neben den Auszubildenden, die mit dem Status Lehrling hinterlegt sind, ist auf der Plattform
ein Expertenteam vertreten. Das Expertenteam besteht aus verschiedenen Ausbilderinnen
und Ausbildern, bereits ausgelernte Mediengestalterinnen und Mediengestaltern. Diese
können sich ebenfalls auf der Seite anmelden. Sie stehen den Lehrlingen bei allen Fragen zur
Verfügung und geben bei Anfrage Feedback zu den Praxisaufgaben.
Für Fragen und Konversation zwischen den Lehrlingen oder mit einem Experten steht eine
Chatfunktion zur Verfügung, wobei mehrere Chats zeitgleich möglich sind.
Die Lerninhalte der Plattform sind nach Prüfungsthemen aufgeteilt. Jede Seite bietet für den
Nutzer eine geeignete Lernoberfläche durch verschiedene Darstellungen anhand von Bildern,
Textelementen oder Videos.
Begleitet wird die Plattform von einer App. In dieser App wählt sich der User mit seinem
Nutzeraccount ein. Es können dann verschiedene Übungen der gelernten Prüfungsthemen
absolviert werden. In dem Nutzerkonto können die Übungsfortschritte der Kategorien eingesehen,
wiederholt oder fertiggestellt werden. Außerdem können Chats und Mails abgerufen
werden.
Ziel ist es den User optimal auf die Prüfung vorzubereiten und zu unterstützen.
6
7

ZIELGRUPPE, BENUTZER
WETTBEWERB
Zielgruppe
Die Zielgruppe ist in zwei Bereiche aufgeteilt. Die Kernzielgruppe sind dabei
die angehenden Mediengestalter.
Die zweite Zielgruppe ist das sogenannte Expertenteam. Ausbilderinnen und
Ausbilder sowie bereits ausgelernte Mediengestalterinnen und Mediengestaltern
sollen angesprochen werden um Prüfungsinhalte zu vermitteln und
Feedback für die Nutzer zu geben.
Wettbewerb
Der Wettbewerb ist überschaubar. Neben verschiedenen Facebookgruppen,
die sich individuell vor jeder Prüfung zusammen finden, gibt es noch die Plattform
www.mediengestalter.info. Allerdings werden auf dieser Plattform Fragen
gestellt und beantwortet. Somit ist die Plattform keine reine Lernplattform.
Als App existiert momentan nur teachr. Hierbei sind die Inhalte ziemlich
komprimiert und nicht ausreichend um sich auf eine Prüfung gut vorzubereiten.
Der User hat also keine weiteren Hilfestellungen oder ähnliches.
Die Plattform MEAK mit der dazugehörigen App gibt es so noch nicht am Markt.
Dadurch hat MEAK eine gute Chance schnell zu wachsen und viele User zu
generieren.
Benutzer
Die Benutzer sollen animiert werden überall lernen zu können. Die Lerninhalte
können auf allen Geräten abgerufen werden. In der App kann das
Gelernte direkt abfragen werden. Wichtig ist dabei, dass die Nutzer kontinuierlich
lernen, dabei sollen sie in der Zeit nicht eingeschränkt werden. Zudem bilden
sich durch die Einzel- und Gruppenchats Communitys, die sich zu bestimmten
Themen austauschen können. Das wiederum soll eine Dynamik darstellen und
die Lernzeiteinteilung pushen.
8
9

NAMENSKREATION
USP
Für das Projekt ist es wichtig den richtigen Namen zu kreieren. Er sollte einzigartig sein aber
auch auf das Thema hinweisen. Um ihn einfach zu halten ist es daher gut eine kurze, einprägsame
und schnell erfassbare Variante zu entwickeln. Der Name spiegelt dabei die gesamte Plattform
und die dazugehörige App wieder.
Um der Plattform und der App nicht nur einen Namen zu geben, gibt es gewisse USPs die
erfüllt werden sollen. Die Alleinstellungsmerkmale spiegeln die wichtigsten Faktoren, die sich
im Namen befinden, wieder.
Um nun den Namen zu kreieren, versuchte ich anhand eines Brainstorming Namen zu
entwickeln.
Medienakademie
Designakademie
Graficfacts
Designfakten
Medienstoff
Akamedia
Medienakademie
Nach dem ersten Brainstorming und der Vorstellung in der Vorlesung kam ich zu dem Entschluss,
dass die Abkürzung Medienakademie als MEAK sehr gut zur Plattform und der App passt, da der
Name alle Kriterien erfüllt.
MEdienAKademie = MEAK
Claim
Für den passenden Claim überlegte ich mir den Schriftzug „Schnell zum Erfolg“. Dieser sollte in
einer Schreibschrift dargestellt werden, damit er sich von den weiteren Logoelementen abhebt.
Dann entschied ich mich doch dagegen, da das Logo für sich alleine stehen soll und somit eine
höhere Gewichtung bekommt.
Austausch
Austausch zwischen Usern und
Experten
Lernerfolg
Guter Lernerfolg durch
kontinuierliches
Wiederholen
Schnell
Schnelles Feedback von
den Experten sowie schnelle
Zielerreichung
10
11

LOGO
Im zweiten Entwurfsschritt (4-6) lag der Fokus auf der Typografie. Die Farben drum herum sollen
das Logo umschließen und es als geschlossenes Element wirken lassen. Dadurch nimmt das Logo
sehr viel Platz ein, dass kann zu Schwierigkeiten auf verschiednen Geräte führen. Im sechsten
Logoentwurf sticht allerdings die abgewandelte Typografie gut ins Auge.
Nachdem ich mich für den Namen MEAK entschieden hatte, ging es nun darum, ein Logo zu
entwickeln. Dabei sollten die genannten Kriterien der Namensfindung mit einfließen. Der Name
ist dabei schon kurz und einprägsam. Die Darstellung soll den Namen dabei gut widerspiegeln,
unverwechselbar sein und einen hohen Wiedererkennungswert aufweisen. Dazu soll es den aktuellen
Zeitgeist entsprechen, aber auch zeitlos wirken.
Die Variationen der Entwürfe unterscheiden sich zwischen Wort-Bild-Marke und nur
Wort-Marke.
4
5
6
meak
Schnell zum Erfolg!
1 2 3
7
8
9
In der ersten Entwurfsphase (1-3) habe ich den Fokus darauf gelegt, die Farbvarianten aus den
verschiedenen Farbkreisen mit zu integrieren. Dabei sollten die grafischen Elemente mit der
Bild-Wort-Marke als Gesamtes wirken. Allerdings fehlte bei allen drei Varianten der hohe
Wiedererkennungswert und die Einprägsamkeit.
Im siebten Entwurf versuchte ich die Farben in die Entwürfe zu integrieren. Danach entschloss
ich mich mit der Typografie aus dem sechsten Entwurf weiter zu arbeiten. Aus Entwurf (8) wurde
dann das Logo finalisiert. Das finale Logo (9) entspricht allen beschriebenen Kriterien. Es hat
einen hohen Wiedererkennungswert, ist gut einprägsam, zeitlos, unverwechselbar und trifft den
Zeitgeist.
12
13

SCHUTZZONE
LOGOVARIANTEN
Das Logo ist als abgewandelte Wort-Marke angelegt. Für eine optimale Darstellung auf der
Plattform und auf der App, ist es wichtig, dass die Schutzzone eingehalten wird. Sie setzt sich aus
den Zwischenraum des „E“ zusammen. In der Schutzzone, dürfen keine Bild- oder Textelemente
platziert werden. Der Mindestabstand um das Logo herum muss dabei eingehalten werden. Die
Platzierung auf der Plattform und in der App befindet sich immer an einer festen Stelle. In der
App taucht das Logo nur auf dem Startscreen beim Öffnen auf.
Das Logo darf in der Farbigkeit, in der Skalierung oder in der Grundform nicht veränder werden.
Diese Varianten sind zulässig!
Diese Varianten sind nicht zulässig!
Das Logo muss mindestens eine Breite von 15 mm aufweisen.
Einsatzbeispiele
15 mm 30 mm 45 mm
14
15

FARBEN
TYPOGRAFIE
Die Farbauswahl ist enorm wichtig, da es das Erkennungsmerkmal ist. Für die Hauptfarben
wurden daher Petroltöne gewählt, da Petrol beruhigend, entspannend, freundlich, natürlich,
sicher und tiefgründig wirkt. Die Akzentfarben werden für Auszeichnungen genutzt ( z. B.
verschiedene Grafiken für online und offline Darstellungen). Für alle Kategorien gibt es ein
erweitertes Farbspektrum, damit die Unterscheidung klar wird. Die Farbauswahl ist passend
zu den Hauptfarben gewählt.
Bei der Typografie habe ich mich für verschiedene Schriftschnitte der Lato entschieden. Die
Lato ist eine humanistische Grotesk und damit serifenlos. Gerade auf digitalen Plattformen ist
sie deshalb gut lesbar. Außerdem spiegelt die Lato Harmonie und Eleganz durch die klassische
Proportion wieder. Zudem ist sie zeitgemäß und passt somit zum gesamten Eindruck von MEAK.
Hauptfarben
Akzentfarben
Lato
#263238 #455A64 #899EA8 #9CCC65 #56C751 #EF5350
Alle Farbabstufungen der Hauptfarben sind möglich!
Hairline – 50 pt
Farbenspektrum der einzelnen Kategorien
Lato
Bold– 16 pt
Lato
Regular– 16 pt
#FFCC80
#F5EB64
#FF8A65
#A5AD63
#80CBC4
#63B469
#90CAF9
#B39DDB
16
#F48FB1
#94ABB7
#BCAAA4
#865353
#748CB2
#245664
#263238
Lato
Regular– 30 pt
Lato
Light– 12 pt
17

PIKTOGRAMME
BILDSPRACHE
Für MEAK gibt es einen eigenen Piktogrammstil. Die Piktogramme sind alle auf die gleiche
Strichstärke bzw. Flächenfüllen angelegt. Insgesamt ist es wichtig, dass alle Piktogramme
aufeinander abgestimmt sind und zusammenpassen. Sie müssen ohne Erklärung funktionieren
in klein wie in groß. Sie können in den Hauptfarben und in Weiß dargestellt werden.
Die ausgewählten Bilder finden sich im Headerbereich und auf den Unterseiten der Kategorien
wieder. Abgebildet werden Bilder, die das Thema der Kategorie auf der Seite erläutern. Die
Bilder verbreiten eine emotionale, freundliche Atmosphäre und lassen kreative Freiheit.
Insgesamt weisen die Bilder in der Sättigung ein flaues Farbklima auf. Je nach Text oder anderen
Elementen auf dem Bild, wird das Bild mit einem Unschärfefilter eingespiegelt.
18
19

SITEMAP
INFORMATIONS-
GESTALTUNG
Um einen genauen Überblick über das Thema der Zwischen- und Abschlussprüfungen von
Mediengestaltern zu bekommen, recherchierte ich erst einmal die verschiedenen Themenkomplexe.
Dazu informierte und orientierte ich mich an den Lernkarten „Spickzettel vom Verlag
Hermann Schmidt Mainz“, die ich selbst zum Üben für die Prüfungen in der Ausbildung genommen
hatte. Um dazu jetzt eine Sitemap zu erstellen, sammelte ich erst einmal alle Themenbereiche
und überlegte mir, wie die Struktur auf der Plattform und der App aussehen kann.
Die Themen erstreckten sich von: Gestaltung, Typografie, Wahrnehmung, Bildbearbeitung/
Farbe, Fotografie, Scanner/Raster, Drucktechnik, Papier, Weiterverarbeitung, Datenbanken,
Datenhandling, Bildrecht, Hardware, Netzwerk/Internet, Multimedia und Audio/Video, welches
den reinen Theorieteil darstellt.
Zu den genannten Themenkomplexen soll es außerdem möglich sein, Praxisübungen durchzuführen,
hochzuladen und einzureichen. Feedback wird von dem Expertenteam an den Nutzer
zurück gespiegelt.
Kernfaktor der Plattform ist es den Lerninhalt zu vermitteln und zu vertiefen. Die App bietet
nebenbei an zu lernen und sich selbst zu testen. Alle Seiten sollen dem entsprechend
variieren von der Gestaltung mit Videos, kleinen Infografiken, allgemeine Grafiken und
visualisierten Seiten mit Bildmaterial.
20
21

WEBSEITE
APP
WEBSEITE
MEAK
Die Kategorien werden je nach
Ausbildungsberuf im Profil zugeordnet.
Bsp.: Mediengestalter Digital und Print wird
das Thema Audio/Video nicht bearbeiten,
da es für die Prüfung nicht notwendig ist.
Nutzerkonto
Der Nutzer muss sich ein
Konto anlegen oder einloggen.
APP
MEAK
Der Nutzer muss sich einloggen.
Gestaltung
(DIN-Formate)
Typografie
Wahrnehmung
Bildbearbeitung/Farbe
Fotografie
Hardware
Multimedia
AUSZUBILDENDE
Scanner/Raster
Drucktechnik
Papier
Bildrecht
Netzwerk/Internet
Datenhandling
Audio/Video
AUSBILDUNGSBERUF
Mediengestalter
Digital/Print | Bild/Ton
Lerngruppen
Austausch
Chatfunktion
Fragestellungen
EXPERTENTEAM
Freiwillige Ausbilder/innen
Ausgelernte Mediengestalter
PRAXIS
Zwischenprüfung
Abschlussprüfung
TIPPS/TRICKS
Illustrator, InDesign,
Photoshop
Die Experten
bekommen je nach
Anfrage eine Nachricht
per E-Mail
oder Chat.
Fortschritt
Newsletter
Gestaltung
(DIN-Formate)
Typografie
Wahrnehmung
Bildbearbeitung/Farbe
Fotografie
Hardware
Multimedia
Nutzerkonto
Scanner/Raster
Drucktechnik
Papier
Bildrecht
Netzwerk/Internet
Datenhandling
Audio/Video
Chat/Gruppenchat
Chat mit einzelnen
Kontakten oder in einer
Gruppe zu verschieden
Fragen sind möglich.
PRAXIS
Zwischenprüfung
nachprüfen
Hilfestellungen,
Kriterien der vergangen
Prüfungen einsehen und
Umsetzung zu prüfen
Prüfung
Abschlussprüfung
22
23

WIREFRAMES DER WEBSEITE
Homescreen
Auf jeder Seite wird oben die Navigation
angedockt sein. Im Homescreen
folgt der Header mit einem
allgemeinen Slider. Im Contentbereich
werden die USPs hervorgehoben
um den User zu ködern.
Danach folgen reale Erfahrungsberichte
der User. Im unteren Bereich
soll dann ein Countdown und
ein Login Bereich platziert werden.
Nutzerkonto
Im Nutzerbereich kann der User
seine Fortschritte einsehen, seine
Daten hochladen, Chats besuchen
oder Übungen absolvieren. Der
Experte kann die eingereichten
Prüfungen kommentieren und
Feedback geben.
Unterseiten Variation
Als Variation in einer weiteren
Kategorieseite werden noch
Videos eingebaut. Die Kernaussagen
finden sich hierbei auf der
Seite wieder und beziehen sich auf
die wichtigsten, kurzen, knappen
Aussagen.
Kategorien
Im Kategorienbereich werden alle
verschiedenen Themenfelder aufgezeigt.
Durch unterschiedliche
Farben und dazugehörigen Piktogrammen
werden sie auseinander
gehalten. Diese Elemente finden
sich auf den zugehörigen Seiten
wieder.
Unterseiten Variation
Auf der Kategorieseite sollen die
Layouts variieren. Im Headerbereich
befindet sich ein passendes
Bild zum Thema. Außerdem
findet sich das Piktogramm und die
Farbe im Bild wieder. Das Layout
wird unteranderem mit Text-, Bildelementen
und kleinen Infografiken
befüllt. Somit sind die Sachen für
den User besser einprägsam.
Unterseiten Variation
Neben kleinen Grafiken, um Zahlen
gut einzuprägen, gibt es auch
die Möglichkeiten eine komplexere
Infografik einzubinden, die dem
User einen komplexen Sachverhalt
bildlich darstellen soll. Auch hier
wird auf der Seite weiter darauf
eingegangen und die Kernaussagen
zum Lernen gefiltert.
24
25

WIREFRAMES DER APP
Alle Wireframes der App basieren auf den Inhalt der Webseite. Die App dient dazu, dem
User zu ermöglichen seinen Wissensstand auch unterwegs zu testen und zu erweitern.
Außerdem ist der Fortschritt immer abrufbar.
Öffnungsscreen
Startscreen
Login
Übungen
Fortschritt der Übungen
Startscreen Fragen
Kontoeinstellungen Verfügbare Gruppenchats Diskussionschat
Aufgabe Aufgabe Aufgabe
26
27

SCREENDESIGN
UMSETZUNG
Durch die verschiedenen Wireframes der Plattform und die dazugehörige App kann nun die
Umsetzung beginnen. Wie auf den vorherigen Seiten bereits erwähnt ist die Grundform der
Gestaltung bereits festgelegt. Zu dem wird ein einheitliches Raster verwendet. Die Seiten
werden in den beschriebenen Farben und Piktogrammen aufgebaut.
Die Lato steht bei der Gestaltung im Vordergrund und findet sich auf der Plattform und in
der App wieder.
Die Bilder werden auf der Homeseite und in den Kategorienseiten eingespiegelt. Wiederkehrende
Elemente finden sich in der Seitengestaltung wieder.
28
29

AUFBAU
Typografie
Wie bereits erwähnt wird für MEAK die Lato verwendet. Auf der Webseite werden die Headlines
in Versalien geschrieben, da sie so besser lesbar sind und sich optisch besser abheben.
Aufbau der Webseite
Wie in den Wireframes bereits erwähnt, befindet sich die Navigation ganz oben im Headerbereich.
Das Logo ist auf der Webseite immer oben links platziert. Die Navigation ändert sich
nach der Anmeldung des Nutzers. Ohne Anmeldung kann ein potenzieller Nutzer nicht alle
Navigationspunkte sehen wie den Homescreen und die Kategorien (Lernstoff). Es gibt keine
Dropdownstruktur, da die Liste der Kategorien sonst zu lang werden würde.
Grafische Elemente
MEAK ist auf geometrischen Elementen aufgebaut. Die Grundformen sind dabei Rechtecke
und Quadrate worauf die ganze Webseitengestaltung basiert. Als Akzentelemente dienten
dazu der Kreis, der sich in verschiedenen Grafiken, z. B. bei den Kategorien, bei den Übungen
und bei der Fortschrittskala oder im Countdown wieder findet. Zur bessere Visualisierung und
Abgrenzung werden außerdem Linien verwendet.
Ohne Nutzerkonto
Mit Nutzerkonto
Die Navigation hat einen Mouseovereffekt. Fährt der Nutzer mit den Mauscursor über den
Navigationspunkt wird der Navigationsbereich in einem anderen Farbton eingeblendet.
30
Der Footerbereich ist der Abschlussbereich. Hier ist außer dem Impressum, dem Kontakt und
dem Datenschutz nichts weiter zu finden.
Raster
Das Raster, worauf die ganze Gestaltung basiert, ist auf einer Kästchenteilung aufgebaut. Die
Kästchen variieren bei der Webseite und der App. In der Webseite wurde eine 16x16 Teilung
der Kästchen angelegt. Somit gibt es eine große Fläche über die ganze Breite und Höhe der Gestaltung.
In der App wurde dagegen eine 25x25 Teilung gewählt. Da die Fläche im Gegensatz zur
Webseite kleiner ist, muss die Größe der Kästchen dementsprechend angepasst werden.
Der gesamte Webauftritt ist so angelegt, dass er responsive funktioniert. Dabei ist es wichtig,
dass die Funktionen und Inhalte sowohl am Computer als auch am Tablet funktionieren. Die
Inhalte haben dabei immer einen genau definierten Abstand zum Rand. Sowohl der Header als
auch der Footer überstreckt sich über die gesamte Breite des Gerätes.
Raster der Webseite
Raster der App
30
31

GESTALTUNG
SCANNER/RASTER
DRUCKTECHNIK
TYPOGRAFIE
WAHRNEHMUNG
PAPIER
BILDRECHT
BILDBEARBEITUNG/
FARBE
FOTOGRAFIE
NETZWERK/
INTERNET
DATENHANDLING
HARDWARE
MULTIMEDIA
AUDIO/VIDEO
PRAXIS
32
33

34
35

Suchfeld
Logoplatzierung
Navigation
Slider
3 Kernfaktoren
Erfahrungsberichte
Login
Countdown
Footer
36
Homescreen
Dem Nutzer wird auf dem Homescreen direkt vermittelt um was es sich handelt. Durch die drei
Kernfaktoren wird darauf hingewiesen, welcher Erfolg verzeichnet werden kann. Die Erfahrungsberichte
sollen dazu beitragen den zukünftigen Nutzer zu überzeugen. Um etwas Druck
aufzubauen, ist außerdem ein Countdown eingebaut, damit der Nutzer dazu animiert wird
sich anzumelden, da die Prüfung immer näher kommt. Um sich direkt anzumelden existiert der
Log-in-Bereich ebenfalls auf der Seite.
Kategorien
Hat der zukünftige Nutzer kein Konto angelegt, erscheint die Anmeldemaske beim Drücken auf
die Kategorien. Auch hier ist der Countdown integriert. Ist der Nutzer angemeldet können alle Kategorienfelder
ausgewählt werden. Zur besseren Veranschaulichung sind alle Themenbereiche
mit verschiedenen Piktogrammen und Farben hinterlegt, die sich auf den Seiten, im Profil beim
Wissenstest und in der App wiederfinden. Im Reiter App wird die MEAK App heruntergeladen.
37

Einstellungen | Chat | E-Mails
Nutzer
Übungsfortschritt
Kategorien werden je
nach Digital/Print und
Bild/Ton angezeigt
Verfügbare Chats
Einreichungen
Praxisprüfungen
Verfügbare Experten
Abmelden
Chatfunktion
Nutzeroberfläche | Lehrling
In der Nutzeroberfläche kann der User (Lehrling) sein eigenes Profil bearbeiten, seine E-Mails
abrufen, einsehen welche Personen oder Gruppen in den Chats verfügbar sind und ausloggen.
Es besteht die Möglichkeit über das Chatfenster zu kommunizieren. Des Weiteren kann der
Übungsfortschritt angesehen und weiter geübt werden. Im Bereich der Praxisprüfungen kann
die ausgewählte Prüfung hochgeladen und weitergeschickt werden um Feedback anzufordern.
Upload der Daten
Wird versucht die Daten von der Praxisprüfung hochzuladen,
erscheint das Fenster zum Upload. Der Nutzer
kann nun die Daten über Drag & Drop oder über den
Upload Button hochladen und weiter schicken.
Gruppenchats
Möchte der Nutzer einem Gruppenchat beitreten,
öffnet sich anstatt des kleinen Fensters ein großes
Pop-Up-Fenster. Hier agieren mehrere Nutzer und es
können auch Daten ausgetauscht werden.
38
39

Mails
Sobald der Nutzer seine E-Mails abrufen möchte, klickt er auf das dazugehörige Piktogramm im
Reiter des Kontos oder direkt oben in der Navigation. Nach dem Drücken erscheint die E-Mailoberfläche
im Vordergrund. Die ungelesenen E-Mails sind hierbei farbig hinterlegt. Links wird
das Nutzerbild des Kontakts angezeigt und rechts dazu die E-Mail.
Einstellungen
Möchte der Nutzer seine Kontoeinstellungen ändern, klickt er auch diesmal im Konto auf die
Einstellungen oder auf das Piktogramm in der Navigation. In den Einstellungen kann der Name,
die E-Mail-Adresse und das Passwort angepasst werden.
40
41

Einstellungen | Chat | E-Mails
Nutzer
Eingereichte
Praxisprüfungen
Verfügbare Chats
Vorschaubild der
eingereichten Prüfung
Verfügbare Lehrlinge
Abmelden
Chatfunktion
Übungsstart
Klickt der Nutzer auf eine Kategorie oder auf den Button
„Üben“, gelangt er auf die Oberfläche der Übungsaufgaben.
In diesem Beispiel ist das Thema Datenhandling ausgewählt.
Auch hier finden sich die Bildelemente, Farben
und Piktogramme wieder. Ist das Kapital abgeschlossen,
erweitert sich der Fortschritt des Nutzers.
42
Beispielaufgabe
Eine Beispielaufgabe ist hierbei die zugehörigen Werte
zusammen zufügen. Die Fakten und Wissensprüfungen
erfolgen dabei spielerisch, damit sie sich beim Nutzer
besser einprägen.
Nutzeroberfläche | Experten
Der Experte sieht in seinem Profil die eingereichten Prüfungen. Er kann sich die Prüfungen über
die Vorschau ansehen und für eine Detailansicht die Daten runterladen. Feedback kann der
Experte direkt über das Textfeld eingeben. Die Textnachricht wird per E-Mail und Chat an den Lehrling
geschickt. Auch der Experte hat Zugriff auf die Chats und die Möglichkeit sich auszuloggen.
43

Header mit
Piktogramm,
Farbkombination und
Bildelement
Kategorie: Bildbearbeitung/Farbe
Die Seite ist in vier verschiedene Blöcke aufgebaut. Da sich das Seitenlayout immer etwas verändert,
wird es durch die geometrischen Formen und den Farben im Corporate Design verankert.
Im Headerbereich befindet sich themenbezogen ein Farbproof mit einem Messgerät. Passend
dazu ist das Piktogramm der Pipette gewählt. Die Pipette ist gerade in den Programmen wichtig,
um die richtige Farbe zu bestimmen oder auszulesen. Zur guten Abgrenzung dienen außerdem
noch die aufgegriffenen Linien aus der Kategorieseite.
1. Block: Farbmodelle
Abbildung & Erläuerung
2. Block: Gegenüberstellung
von Farbmodellen
1. Block
Im 1. Block werden Bild- und Textelemente vermischt. Zu den Farbmodellen, RGB = Lichtfarben
und CMYK = Druckfarben gibt es eine kurze Erläuterung und zur besseren Einprägsamkeit ein
Bild. Im Vergleich hat man noch einmal drei verschiedene Farbmodelle übereinander. In diesem
Vergleich sieht man die Veränderungen eines Farbraums, da sich alle von der Größe her unterscheiden.
3. Block: Unterschiede
im Bild
2. Block
Im nächsten Block wird dem Nutzer eine Gegenüberstellung von den verschiedenen Farbmodellen
aufgezeigt. Hierbei wird überall der selbe Ausschnitt vom Bild genommen, da somit die
Veränderung am deutlichsten wird.
3. Block
Im dritten Block wird ein Bild in vier Abschnitte geteilt. In diesen Ausschnitten wird der Unterschied
der Farbräume deutlich.
4. Block: Visualisierung
kleiner Informationsgrafik
4. Block
Zum Abschluss gibt es passend zu den Farbmodellen die Farbtiefe. Dazu wird gezeigt, wie sich
die Farbtiefe berechnen lässt. Das wird in einer kleinen Infografik verdeutlicht. Dem Nutzer werden
die verschiedenen Fakten bildhaft aufgezeigt.
44
45

Header mit
Piktogramm,
Farbkombination und
Bildelement
Kategorie: Papier
Je nach Themeninhalt werden mehr oder weniger Blöcke auf der Seite platziert. In diesem
Seitenlayout sind es fünf Blöcke.
Im Headerbereich befindet sich diesmal eine Druckmaschine, da es um die Papierherstellung bis
zur Produktion geht. Das Piktogramm stellt diesmal als gedruckte Variante ein Dokument dar.
Auch hier wurden zur guten Abgrenzung die Linien aufgegriffen .
1. Block: Video
1. Block
Das Thema Papier fängt im 1. Block mit einem Video an. Damit der Nutzer aufmerksam zuhört,
sich eventuell Notizen dazu macht oder gewisse Szenen sich besser einprägen lassen.
2. Block:
Kernaussagen vom Video
2. Block
Passend zum Video werden hier die Kernaussagen aufgeführt. Hat der Nutzer das Video aufmerksam
gesehen, gibt es eine kleine Wiederholung um die Fakten gleich zu verankern.
3. Block:
Piktogramme & Erläuterung
3. Block
Im 3. Block wird gleich auf die Laufrichtung des Papiers eingegangen. Dazu ist es wichtig die
vier unterschiedlichen Proben aufzuführen. Verdeutlicht wird die Erläuterung mit kleinen Piktogrammen,
die zum Nachmachen animieren sollen.
4. Block: Visualisierung
kleiner Informationsgrafik
4. Block
Papier Maßeinheiten werden auf einer kurzen und knackigen Grafik dargestellt. So sind sie
schnell erfassbar und können gut eingeprägt werden.
5. Block: Bild- und
Textelemente
5. Block
Neben den Proben der richtigen Laufrichtung des Papiers, gibt es auch die Laufrichtung im
Druck. Das wird durch eindeutige Bilder und Texte visualisiert.
46 47

Header mit
Piktogramm,
Farbkombination und
Bildelement
Kategorie: Datenhandling
In dieser Unterseite wird die Ansicht eines Rechners gezeigt. Genau auf der Oberfläche am
Rechner fängt das Datenhandling an. Passend dazu befindet sich das Piktogramm eines Ordners
im Kreis. Auch hier sind die Linien und die Farbe aus den Kategorieseiten übernommen.
1. Block: Komplexe
Informationsgrafik
1. Block
Die Variationen der Unterseiten werden deutlich, auf diesen Unterseiten ist dementsprechend
eine komplexe Infografik eingebaut. Der Nutzer muss sich mit dem Sachverhalt auseinander
setzen um sie genau zu verstehen. Es handelt sich um Gemeinsamkeiten und Unterschiede von
verschieden Dateiformaten. Die Infografik entstand im ersten Halbjahr im Fach Digitale
Applikation.
2. Block
Im 2. Block findet eine Gegenüberstellung der beiden Dateiformate TIFF und EPS statt.
Hierbei werden die wichtigsten Faktoren im Vergleich zu pixel- und vektorbasierende Formate
hervorgehoben.
2. Block: TIFF und EPS
im Vergleich
3. Block: Umrechnung in
einer kleinen Grafik
3. Block
Im 3. Block wird eine Umrechnung verdeutlicht. Auch hier wird wieder mit einer schnell erfassbaren
Grafik gearbeitet.
4. Block: Einprägsame Grafik
4. Block
Der letzte Block basiert auf dem 3. Block. Falls die Umrechnung nicht genau verstanden wurde,
wird hier noch mal das Prozedere gezeigt wann eine 1 und wann eine 0 bei der Umrechnung
verwendet wird.
48 49

APP
HOMESCREEN
ANMELDEMASKE
NUTZERKONTO
Sobald die App geöffnet wird, erscheint der Ladescreen.
Dieser ist mit der Hauptfarbe schlicht gehalten. Dominant
und plakativ ist hierbei das Logo im Vordergrund
platziert.
Auf dem Homescreen gibt es die Möglichkeit weiter
zu gehen um in die Anmeldemaske zu gelangen. Auch hier
wurden, wie auf der Plattform, die selben Bildelemente
mit aufgenommen.
In der Anmeldemaske kann sich der Nutzer mit seinem
gewohnten Namen, seiner E-Mail-Adresse und seinem
Passwort anmelden. Ist das Passwort in Vergessenheit
geraten, kann es zurück gesetzt werden.
Hat der Nutzer sich angemeldet, gelangt er in seine
Kontoübersicht. Hier hat er die Möglichkeit zwischen
Einstellungen, Chats und E-Mails zu unterscheiden. Außerdem
gibt es die Gelegenheit zu einem Schnellzugriff
im unteren Bereich.
50
51

ÜBUNGSÜBERSICHT
ÜBUNGSSTART
VERSCHIEDENE AUFGABE
Klickt der Nutzer auf das zweite Piktogramm im unteren
Bereich, gelangt er zu den Übungen. Die Farben und
Piktogramme sind die Gleichen, wie auf der Plattform.
Der grüne Kreis symbolisiert den Fortschritt in den Kategorien.
Sind alle Fragen gemeistert, kann die Prüfung
absolviert werden.
52
Vor dem Starten der Übungen wird das Thema noch einmal
angezeigt. Die Bildelemente und das Piktogramm
werden von der Plattform aufgegriffen.
Wurde die Übung gestartet, kommen nacheinander unterschiedliche Fragen. In der Beispielaufgabe
wird ein großes Bild gezeigt, in diesem Fall der CMYK Farbraum. Der Nutzer muss
nun entscheiden, welche Aussage dazu passt. Die ausgewählten Antworten werden in dunkel
Petrol eingefärbt. Ist der Nutzer sich sicher, klickt er auf den Pfeil unten rechts. Sind die Antworten
richtig erleuchten sie in Grün, sind sie falsch werden sie Rot. Danach geht es zur nächsten Frage.
Die falsch beantworteten Fragen werden am Ende wiederholt.
53

In dieser Übung müssen die passenden Zahlen ausgewählt werden. Dabei werden die zusammengehörigen
Werte nacheinander markiert. Sind sie richtig, leuchten sie kurz Grün auf und
verschwinden im nächsten Schritt. Danach sind nur noch die ungelösten Elemente sichtbar.
Wählt der Nutzer die Werte aus, die nicht zusammengehören, leuchten diese kurz Rot auf. Alle
Elemente bleiben stehen. Sobald alle Werte zugeordnet wurden, kann zur nächsten Übung
gegangen werden. Die Übung wird hinten angeschoben und muss wiederholt werden, bis alle
Werte ohne Fehler zugeordnet wurden.
54
55

In dieser Aufgabe müssen die Aussagen mit der Abbildung zugeordnet werden. Die beiden
Elemente werden markiert. Sind die Elemente ausgewählt, erhalten sie eine Umrandung (Bild 2).
Ist die Zuordnung richtig, verblassen die beiden Elemente. Danach kann das nächste Paar
zugeordnet werden.
Ist die Zuordnung nicht richtig (Bild 4), verschwindet die Umrandung wieder. Die Elemente
bleiben stehen und verblassen nicht. Sind alle Paarungen gefunden geht es unten beim Pfeil
weiter.
56
57

Auch in dieser Übung müssen Paare zusammen geführt werden. Diese Übung basiert auf dem
Spiel „Memory“. Werden die richtigen Paare gefunden, erscheint die genaue Bezeichnung unten
(Bild 2). Im Beispiel zu sehen „Gesetz der Nähe“. Richtige Paarungen verschwinden.
Passen die Paarungen nicht zusammen, erfolgt unten die Aussage „Die Paare passen nicht!“.
Danach decken sich die Karten wieder zu. Insgesamt sind 3 Fehlversuche erlaubt.
58
59

Eine Übungsaufgabe zum Thema Farbe. In dieser Aufgabe muss der Satz erweitert werden. Die
Aussagen, die der Nutzer passend findet, werden dunkel markiert. Ist sich der Nutzer sicher und
möchte die Antwort sehen, drückt er auf den Pfeil. In dem Fall lag der Nutzer leider nur mit einer
Antwort richtig, diese wird Grün markiert, die falsche Antwort dagegen Rot. Damit er allerdings
erfährt, welches die andere richtige Antwort war, wird diese auch in Grün dargestellt.
Wie auf der Plattform wird hier das gezeigte Video noch einmal gezeigt. Das hat den Effekt, dass
sich die Aussagen besser beim Nutzer einprägen. Hat er die Aussagen und das Video bereits
gut gelernt, kann die Frage auch ohne das Video zu sehen beantwortet werden. Die Aussagen
werden auch hier wieder markiert. Die richtigen werden Grün und die falschen Rot. In diesem
Beispiel war eine Varianten falsch und zwei wurden nicht ausgewählt.
60
61

FORTSCHRITT
Neben vielen spielerischen und auswählbaren Übungen gibt es auch Rechenaufgaben. In dieser Rechenaufgabe muss der Nutzer die Ergebnisse
in die Felder schreiben. Dazu existieren vier verschiedene Felder für alle Werte in der Aufgabe. Sobald sich der Nutzer sicher ist, wird auf den
Pfeil unten rechts geklickt. Danach werden mit Grün die richtigen Antworten gekennzeichnet und mit Rot die Falschen. Damit der Nutzer das
richtige Ergebnis bei den falschen Antworten mitgeteilt bekommt, wird die Auflösung unterhalb des Feldes platziert.
Nach den Übungen wird immer eine Gesamansicht der
gemeisterten Aufgaben gezeigt. Dabei kann der User
seinen Fortschritt in den Kategorien einsehen. Außerdem
können die falschen Fragen wiederholt werden.
62
63

GRUPPENCHATS
KONVERSATION IM CHAT
E-MAILS
EINSTELLUNGEN
64
In der App hat der Nutzer die Möglichkeit auf die Gruppenchats
zu gehen. Hier können mobil zu verschiedenen
Themen Fragen gestellt werden. Fachspezifische Fragen
können dabei diskutiert und gelöst werden. In der Übersicht
sieht der Nutzer welche Gruppen es momentan gibt.
Ist der Nutzer der Gruppe beigetreten, so kann er den
Chatverlauf lesen und sich an dem Gespräch beteiligen.
Interessiert ihn nur die Frage und die Lösung kann der
Nutzer auch ein stiller Beobachter sein.
Im Mailpostfach kann der Nutzer seine E-Mails abrufen.
Neue E-Mails werden farblich hinterlegt. Hat man
sich an einem Gruppenchat beteiligt und die App wurde
unerwartet geschlossen, erhält man die Antworten als
E-Mail. Feedback von den Experten und andere E-Mails
über die Plattform werden ebenfalls empfangen.
In den Einstellungen kann die E-Mail-Adresse geändert
werden oder ein neues Passwort vergeben werden.
65

E-MAIL REMINDER
Nach der Anmeldung bekommt jeder Nutzer eine Bestätigungsmail. In dieser E-Mail wird er
herzlich begrüßt. Seine Daten werden in der E-Mail hinterlegt, falls der User diese vergessen
sollte.
Zum Ende der Woche wird ein Reminder an die angegeben E-Mail geschickt. In diesem Reminder
steht prominent der Countdown um die Kurzfristigkeit des Zeitraums hervorzuheben. Textlich
wird ebenfalls darauf eingegangen, dass die Zeit nicht mehr all zu lange ist. Als letztes wird der
Lernfortschritt der Woche aufgezeigt, den der Nutzer erarbeitet hat.
66
67

BILDQUELLEN
Alle Bilder, die sich in der Dokumentation befinden, sind mit der Seite, Quelle und Abrufdatum aufgelistet. Durch
einen doppelten Einsatz oder gleiche Abbildung, können sich die Quellen wiederholen.
Seite Quelle Abrufdatum
2 http://unsplash.com/photos/Tzm3Oyu_6sk 12.03.2018
4 http://unsplash.com/photos/1jv75Geggco 13.03.2018
6 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg 10.03.2018
9 http://www.userlogos.org/files/logos/Deemar/mediengestalterinfo.jpg
15.04.2018
http://mediengestalter.teachr-app.de/images/product_1.jpg
22.04.2018
15 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg 10.03.2018
VERZEICHNIS
19 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg
http://unsplash.com/photos/jjtdL443L4w
http://unsplash.com/photos/Tzm3Oyu_6sk
10.03.2018
12.03.2018
12.03.2018
http://unsplash.com/photos/clN6N30q3sw
12.03.2018
20 http://unsplash.com/photos/fHIwGAXx7Ss 12.04.2018
28 http://unsplash.com/photos/jjtdL443L4w 12.03.2018
34/35 http://blog-wings.de/wp-content/uploads/2018/01/responsive-design-mehrere-geräte-beispiel-ferndurst.png
36 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg
http://unsplash.com/photos/B4tl_xW5Pco
http://unsplash.com/photos/XzRhdAoNMa8
08.04.2018
10.03.2018
12.03.2018
12.03.2018
http://unsplash.com/photos/r_lSD8eSV8g
12.03.2018
38 http://unsplash.com/photos/XzRhdAoNMa8 12.03.2018
39 http://unsplash.com/photos/B4tl_xW5Pco
http://unsplash.com/photos/XzRhdAoNMa8
http://unsplash.com/photos/7omHUGhhmZ0
12.03.2018
12.03.2018
12.03.2018
68
69

BILDQUELLEN
Seite Quelle Abrufdatum
52 http://unsplash.com/photos/clN6N30q3sw 12.03.2018
Seite Quelle Abrufdatum
40 http://unsplash.com/photos/r_lSD8eSV8g
http://unsplash.com/photos/7omHUGhhmZ0
http://unsplash.com/photos/B4tl_xW5Pco
12.03.2018
12.03.2018
12.03.2018
42 http://unsplash.com/photos/clN6N30q3sw 12.03.2018
43 http://unsplash.com/photos/7omHUGhhmZ0
Eigenes Bildmaterial, Typomagazin
44 http://unsplash.com/photos/jjtdL443L4w
https://www.dj-checkpoint.de/images/product_images/info_images/
laserworld_pl-10000rgb_beams-001.jpg
https://i.pinimg.com/564x/85/3b/fa/853bfa2a201d03269c6592f935ede6b1.jpg
https://www.martinbaileyphotography.com/wp-content/uploads/2017/05/
Camera_Profile_with_Working_Color_Spaces.jpg (abgeändert)
http://unsplash.com/search/photos/colorful (farblich abgeändert)
http://unsplash.com/search/photos/mountains (farblich abgeändert)
46 http://unsplash.com/photos/Tzm3Oyu_6sk
http://unsplash.com/photos/ALLMFFPBhCY
https://welt-der-wunder.s3.eu-central-1.amazonaws.com/user_upload/Artikel/01_Service_Lifestyle/Papierherstellung%20/1_Papierherstellung_Papier-schoepfen_imago-blickwinkel_20171121.jpg
http://www.papier-und-mehr.de/papier-und-mehr_beratung/grafiken/bild_laufrichtung_schmalbahn.gif
http://www.papier-und-mehr.de/papier-und-mehr_beratung/grafiken/bild_laufrichtung_breitbahn.gif
12.03.2018
12.03.2018
12.03.2018
12.03.2018
18.03.2018
13.03.2018
13.03.2018
12.03.2018
13.03.2018
13.03.2018
13.03.2018
13.03.2018
48 http://unsplash.com/photos/clN6N30q3sw 12.03.2018
50 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg 10.03.2018
51 http://unsplash.com/photos/XzRhdAoNMa8 12.03.2018
53 https://welt-der-wunder.s3.eu-central-1.amazonaws.com/user_upload/Artikel/01_Service_Lifestyle/Papierherstellung%20/1_Papierherstellung_Papier-schoepfen_imago-blickwinkel_20171121.jpg
13.03.2018
56/57 https://www.dj-checkpoint.de/images/product_images/info_images/
laserworld_pl-10000rgb_beams-001.jpg
http://unsplash.com/search/photos/mountains (farblich abgeändert)
59 https://www.dj-checkpoint.de/images/product_images/info_images/
laserworld_pl-10000rgb_beams-001.jpg
https://i.pinimg.com/564x/85/3b/fa/853bfa2a201d03269c6592f935ede6b1.jpg
12.03.2018
13.03.2018
13.03.2018
13.03.2018
12.03.2018
12.03.2018
61 http://unsplash.com/photos/ALLMFFPBhCY 13.03.2018
63 http://unsplash.com/search/photos/typografie
http://www.papier-und-mehr.de/papier-und-mehr_beratung/grafiken/bild_laufrichtung_schmalbahn.gif
http://www.papier-und-mehr.de/papier-und-mehr_beratung/grafiken/bild_laufrichtung_breitbahn.gif
https://welt-der-wunder.s3.eu-central-1.amazonaws.com/user_upload/Artikel/01_Service_Lifestyle/Papierherstellung%20/1_Papierherstellung_Papier-schoepfen_imago-blickwinkel_20171121.jpg
http://unsplash.com/photos/Tzm3Oyu_6sk
http://unsplash.com/photos/clN6N30q3sw
http://unsplash.com/photos/jjtdL443L4w
http://unsplash.com/photos/XzRhdAoNMa8
http://unsplash.com/photos/B4tl_xW5Pco
http://unsplash.com/search/photos/teacher
65 http://unsplash.com/photos/r_lSD8eSV8g
http://unsplash.com/photos/7omHUGhhmZ0
http://unsplash.com/photos/B4tl_xW5Pco
13.03.2018
13.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
12.03.2018
66 https://www.ibb.com/uploads/Fotolia_48785860_S.jpg 10.03.2018
68 http://unsplash.com/photos/M1qSY_IuF4c 22.04.2018
70
71

FAZIT
EIDESSTATTLICHE ERKLÄRUNG
Das Projekt war sehr interessant. Es kann durchaus in der Zukunft umgesetzt werden. MEAK
kann als gute Plattform für Auszubildende fungieren. Bei der Recherche ist außerdem klar geworden,
dass es auf diesem Gebiet noch keine annähernd ähnliche Webseite oder App gibt.
Es wäre zu dem ein gutes Mittel eigene Auszubildende im Unternehmen zu unterstützen. Das
ganze Projekt hat sehr viel Spaß gemacht. Neben einer komplexen Screendesign Gestaltung und
konzeptionellen Umsetzung von Logo, Farben, Piktogramme über Wireframes und Umsetzung
der Gestaltung, habe ich neben der Programmierung im Fach Screendesign so ein gesamtes
Webprojekt vorher noch nicht bearbeitet. Es kristallisierte sich dabei heraus, das eine Sitemap
und die Wireframes das Wichtigste bei den weiteren Prozessen sind. Sind die beiden Dinge gut
durchdacht ist die Umsetzung um so einfacher.
Ich erkläre hiermit, dass ich die vorliegende Arbeit selbständig und ohne Benutzung
anderer als der angegebenen Hilfsmittel angefertigt habe; die aus fremden
Quellen (einschließlich elektronischer Quellen und dem Internet) direkt oder indirekt
übernommenen 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.
Sollte das Projekt in echt umgesetzt werden, muss beachtet werden, dass die Inhalte immer wieder
aktualisiert werden, damit die Auszubildenden immer mit dem neuesten Wissen gefüttert
werden.
Garbsen, 01.05.2018
Ort, Datum
Unterschrift
72
73

TIMO ALBRECHT | MATRIKEL-NR. 700568 | WS 17/18
DIGITALE APPLIKATIONEN | DOZENT: DAVID SICKINGER