Bildmarke von Jakob Eschler Design Bildmarke von Jakob Eschler Design

Gestaltung des Bildungsprogramms „Demokratie für mich.“

Im Auftrag der Landeszentrale für politische Bildung Nordrhein-Westfalen wurde umfangreiches Lehr- und Arbeitsmaterial für Lehrkräfte und Schülerinnen und Schüler entwickelt, die am Bildungsprogramm „Demokratie für mich.“ teilnehmen.

Die Ausgangslage

Entwickelt wurde das Konzept „Demokratie für mich.“ bereits 2016. Damals wurde das gesamte Material in einem großen Ordner gesammelt und an die Lehrkräfte ausgegeben. Die Arbeitsbögen für die Schüler*innen gab es nur als Kopiervorlagen und den Leitfaden für die Lehrkräfte als unhandlichen Berg aus losen Zetteln.

Nachfolgende Fotos auf dieser Seite: kuckkuck Fotodesign

Die Aufgaben

Die erste Aufgabe für mich im Rahmen dieses mehrjährigen Projektes war die Erstellung zweier Schaubilder. An diesen sollten einmal der Rechts- und einmal der Sozialstaat von Deutschland auf bildhafte Weise erklärt werden. Die Grundidee war bereits vorhanden und auch für den Stil gab es konkrete Vorstellungen.

In der zweiten Phase sollte das Lernmaterial für die Schülerinnen und Schüler verbessert werden. Ziel war es, ein Arbeitsheft zu erstellen, das alle Arbeitsbögen sammelt und nach ihren Themen sortiert. Somit hat jede*r Teilnehmer*in am Ende des Projektes ein schön gestaltetes, persönliches Projekttagebuch.

Im dritten Schritt sollten auch das Material für die Lehrkräfte überarbeitet werden. Neben den nach Themen aufgeteilten Materialien gibt es auch Kopiervorlagen und Stundenübersichten, so dass am Ende jede Lehrkraft eine Sammlung von acht Heften bekommt.

Die Schaubilder

Die beiden Schaubilder setzen sich aus je einem großen Tuch (ca. 2,5m2) und einem Set an Karten zusammen. Auf dem ausgebreiteten Tuch werden dann im Verlauf des Unterrichts die Karten nach und nach aufgelegt, so dass sich das gesamte Schaubild ergibt.

Ausschnitt aus dem Schaubild „Deutschland als Sozialstaat“ mit Karten, die in das Modell gelegt werden.
Links das Arbeitsheft, rechts ein Leseheft mit weiterführenden Informationen zu den vermittelten Inhalten.

Das Arbeitsheft

Die Arbeitsbögen im Heft sind sehr unterschiedlich und reichen von Steckbriefen über Mindmaps bis hin zu Fragebögen. Dabei hat jedes Themenkapitel einen eigenen Farbcode, der auch in dem Lehrmaterial wieder auftaucht und für eine leichte Orientierung sorgen soll. Barrierefreiheit ist ein großes Thema für dieses Heft, da es ausschließlich von Nicht-Deutsch-Muttersprachlern benutzt wird, die z.T. erst mit dem Sprachunterricht beginnen.

Das Lehrmaterial

Für die Lehrkräfte entstand eine Art Kompendium – eine Sammlung aller Informationen, die trotzdem unabhängig voneinander funktionieren. Dabei war es wichtig, den Stil aus dem Arbeitsheft zu übertragen, aber trotzdem genügend Ernsthaftigkeit und Seriosität beizubehalten. 

Die Materialien haben einige Eigenschaften, um das Arbeiten mit ihnen zu vereinfachen.

Neben der farblichen Kodierung pro Themengebiet haben die Hefte u.a. Register, um schnell in die einzelnen Unterrichtsstunden zu gelangen. Es gibt eine relativ breite Randspalte und immer wieder eingefügte Zeilen, um sich eigene Notizen zu machen. Des Weiteren kommen immer wieder Piktogramme zum Einsatz, die sich durch alle Materialien ziehen und das Erfassen von Informationen erleichtern sollen.

Alle Materialien, die die Lehrkräfte für die Unterrichtsvorbereitung bekommen
Links eine Doppelseite aus dem Arbeitsmaterial, rechts eine Doppelseite aus Modulheft 2

Webentwicklung für scoutradar.de

Das Scoutradar ist aus dem Schema FF Projekt entstanden und hat sich zu einer Plattform entwickelt, auf der alle notwendigen Informationen zum NFL Draft zu finden sind.

Die Ausgangslage

Deutschsprachige Quellen zum Thema NFL Draft bzw. Prospect Scouting gibt es hauptsächlich nur als Podcasts, aber nicht in Blog-Form. Diese Lücke sollte mit der Website scoutradar.de geschlossen werden. Dazu haben wir einige Features entwickelt, die dem Nutzer einen praktischen Mehrwert bieten sollen. Natürlich unter Berücksichtigung, dass diese für die Redakteure möglichst einfach zu pflegen sind.

Image by aleksandr_samochernyi on Freepik

Teamanalysen

Die Website teilt sich im Backend in zwei Bereiche – Teamanalysen und Draftklassen.

Die Teamanalysen wiederum haben ebenfalls zwei Bereiche, die in Zusammenarbeit mit vielen deutschen Fanclubs erarbeitet werden.

Zum einen eine Predraft Analyse mit einem Rückblick auf die letzte Saison und der Einschätzung, was das Team im Draft benötigt.

Zum anderen eine Analyse nach dem Draft und ein kurzer Blick auf die anstehende Saison.

Teamneeds

Im Backend kann für jede Position ausgewählt werden, wie dringend diese Position benötigt wird. Aus diesen Angaben wird im Frontend eine Lineup-Grafik generiert, die diese Needs farbig darstellt.

Teamfits

In dem Bereich Teamfits werden automatisch alle Spieler angezeigt, die den eingestellten Teamneeds entsprechen – sortiert nach Wichtigkeit.

Scouting Berichte

Der zweite Bereich, die Draftklassen, teilen sich wiederum auch in verschiedene Unterbereiche. Der wichtigste: Spielerprofile. Denn jeder gescoutete Spieler im Scoutradar erhält eines davon.

Neben einer Ankernavigation für die schnelle Navigation auf der Seite finden sich als erstes allgemeine Informationen zum Spieler. Dazu gehören auch Labels zu Spielertypen, eine Round Grade und nach dem Draft eine Card mit Informationen, wann der Spieler von welchem Team gedraftet wurde.

Analyse

Der anschließende Bereich bietet tiefergehende Informationen zum Spieler. In Tabs werden die Scouting Notizen der einzelnen Scouts abgebildet und rechts daneben die Teams, die einen Need für die Position des Spielers haben. In den Kacheln steht die Priorität, die in der entsprechenden Teamanalyse eingestellt wurde. Zusätzlich können in dem Scouting Bericht Teams hinzugefügt werden, zu dem der Spieler besonders gut passt. Stimmt dieses Team mit einem aus der rechten Spalte überein, erhält es das Label „FIT“.

Media

Wenn verfügbar, werden zu dem Spieler auch noch frei verfügbare YouTube Videos eingebettet und Grafiken mit Statistiken, die besonders für Fantasy Football Spieler relevante Informationen enthalten.

Widgets

Auf der Seite werden auch externe Dienste genutzt. Zum Beispiel werden die Spirder Graphs von mockdraftable.com genutzt, um die athletischen Ergebnisse der Spieler darzustellen.

Bis 2022 wurden auch die offiziellen College Statistiken von sports-reference.com eingebunden. Der Dienst wurde allerdings eingestellt.

Mock-Drafts

Ein weiteres Feature auf der Seite sind Mock-Drafts. Hier können die Redakteure sich austoben und ihren Wunsch-Draft durchführen. Haben die Spieler bereits ein Profil im Scoutradar, können sie einfach verlinkt werden. Wenn nicht, können sie händisch eingegeben werden.

Draftklasse

Auch die Draftklasse an sich bekommt eine Übersichtsseite. Auf dieser wird zum einen die Draft-Reihenfolge dargestellt, aber auch ein genereller Überblick über Stärken und Schwächen der Klasse geboten. Natürlich werden auch alle gescouteten Spieler und Mock-Drafts angezeigt. Und noch ein neues Feature – das Scoutradar Big Board. Hier werden die Spieler anhand ihrer durchschnittlichen Round Grade automatisch einsortiert.

Designumsetzung für einen Poleartist

Max Loos bietet Artistik auf höchstem Niveau, wie er auf seiner neuen Website schreibt. Um sein vielfältiges Angebot angemessen präsentieren zu können, hat Kuckkuck Fotodesign ein Webdesign entwickelt, das ich in WordPress umgesetzt habe.

Was die Seite ausmacht

Die neue Seite setzt auf den Gutenberg Editor den ich an manchen Stellen um eigene ACF Blocks ergänzt habe.

Es handelt sich um eine einzelne Seite mit einer Ankernavigation und Modals, die den Bereich „Leistungen“ vertiefen.

Am linken Bildrand findet sich eine sticky Quicknav mit Kontaktmöglichkeiten.

Ziel der Call to Actions auf der Seite ist das Kontaktformular am Seitenende um Max direkt anschreiben oder buchen zu können.

Relaunch für den Fantasy Football Blog Ach Du Alarm

Blogs gibt es heutzutage wie Sand am Meer. Um den Nutzer an sich zu binden, wird deshalb ein gutes und nutzerfreundliches Design auch in diesem Bereich immer wichtiger. Ein guter Grund, um die neue Ach Du Alarm Website pünktlich zu Superbowl 53 online zu schalten.

Die Ausgangslage

Die bisherige Website basierte auf einem freien WordPress Theme. Dieses stoß aber schnell an seine Grenzen und es kam zu Problemen mit der Theme-Übersetzung. Außerdem konnten individuelle Anpassungen nicht wie gewünscht umgesetzt werden.

Mehr Übersichtlichkeit

Zentraler Punkt des Relaunches war die Übersichtlichkeit. Sowohl die Startseite als auch die Menüführung sollten im Sinne des Nutzers optimiert werden. Um das zu erreichen, wurde zum Beispiel auf Beitragsbilder verzichtet. Damit verschwindet ein weiteres Inhaltselement auf der Startseite und lässt den Nutzer auf die Inhalte der Beiträge fokussieren.

Der hauseigene Podcast bekommt, ebenfalls auf der Startseite, eine prominentere Rolle.

Das Hauptmenü wurde auf die wesentlichen Punkte reduziert, erhält aber ein zusätzliches Megamenü. Dort können zu verschiedenen Kategorien die gewünschten Menüpunkte verlinkt werden. Der Nutzer kann so jederzeit an die wichtigen Stellen der Seite springen, ohne auf den ersten Blick erschlagen zu werden. Natürlich ist das alles über das Backend frei konfigurierbar.

Individuelle Anpassungen

Eine Anforderungen an das neue Design war, die Arbeit mit wiederkehrenden Artikelformaten zu vereinfachen. Dafür wurden für bestimmte Artikelkategorien Templates entwickelt, die sich über eine vorkonfigurierte Eingabemaske im Backend mit Inhalten füllen lassen. Die Redakteure können sich dadurch auf das Schreiben ihrer Beiträge konzentrieren und brauchen sich weniger Gedanken um die Ausgabe machen.

Logofolio

Hier sammel ich die Logos, die ich entworfen habe. Sie sind für verschiedene Projekte entstanden und es werden immer wieder welche dazu kommen. Zu manchen Projekten gibt es auch noch weitere Informationen.

Logo für den NFL Draft-Scouting Blog scoutradar.de (mehr Informationen zum Projekt)
Logo für den Fantasy Football Blog „Ach Du Alarm“ (mehr Informationen zum Projekt)
Logoidee für den Podcast „Podcast ohne richtigen Namen“

Relaunch der Website für die 4s trainings gbr

Nachdem die »Übergangsseite« in den letzten vier Jahren ganz schön Staub angesetzt hat, ist der Rost endlich ab und die Webpräsenz der 4s trainings gbr erstrahlt in neuem Glanz.

Die Ausgangslage

Während die bisherige Website als statischer Onepager daher kam und nie wirklich mehr als eine Zwischenlösung war, gibt es jetzt einige Neuerungen.

Beispielsweise sind die Themenbereiche farblich codiert, so wie sie es bereits auf Printprodukten sind. Dadurch findet sich der Nutzer leicht zurecht und weiß immer, wo er sich befindet.

Isometrische Darstellung von Screenshots der 4s trainings gbr
Screenshots der 4s trainingswebsite in einem Laptop und einem Smartphone

Mehr Dynamik

Außerdem werden die Inhalte, die thematisch zusammen gehören, in Tabs dargestellt. So sind sie leicht zugänglich und benötigen keinen extra Seitenwechsel.
Die Webseite ist natürlich auch responsiv und somit auf mobilen Geräten gut zu nutzen.

Hinter den Kulissen gab es auch ein paar Änderungen. Mit der Verwendung von WordPress als Content Management System, ist es zum Beispiel nun möglich, alle Inhalte auf redaktioneller Ebene zu verwalten.

Neben der Hauptwebsite existieren noch ein paar ergänzende Webseiten. Um diese möglichst unkompliziert zu verwalten und gegebenenfalls noch neue hinzuzufügen, wurde das Multisite Feature von WordPress genutzt.

Infoplakat zum Thüringer Schulsystem

Dieses Infoplakat entstand im Rahmen eines Schulprojektes während meiner Ausbildung. Die Aufgabe bestand darin, das Thüringer Schulsystem anhand einer Analogie grafisch darzustellen. Ich wählte als Metapher einen Linienplan, der die verschiedenen Bildungswege als Reiserouten abbildet.

Linienplan des Thüringer Schulsystems

Marketingkonzept für eine Bäckerei

Dieses Projekt entstand im dritten Lehrjahr im Rahmen eines Schulprojektes. Es war quasi die Generalprobe für die praktische Prüfung. Aufgabe war die Entwicklung eines Kommunikationskonzeptes für die Neueröffnung einer fiktiven Bäckereifiliale.

Namensfindung und Logoentwicklung

Die erste Herausforderung bestand darin, innerhalb der Klasse einen Namen für die Filiale zu finden. Dazu wurden verschiedene Kreativtechniken angewendet, die das Ergebnis „Loungerie“ hervorbrachten.

Logo der Loungerie

Ab diesem Zeitpunkt arbeitete jeder für sich weiter. Nach Markt- und Zielgruppenanalysen ging es an die Konzeption des Logos. Die Wort- und Bildmarke sollte Werte wie Tradition, Stil, Eleganz und Modernität vermitteln, aber auch einen einzigartigen Charakter haben.

Geschäftausstattung

Neben dem Logo entstanden auch ein Corporate Design mit Geschäftsausstattung und verschiedenen Print Anwendungen.

Das Kommunikationskonzept

Um eine geeignete Strategie für die Kommunikation zu finden, wurde zunächst eine Positionierung entwickelt.

Nach dem Motto „Fühl dich wie zu Hause“ wurden Werbemaßnahmen erdacht. Dazu gehörten verschiedenen Gestaltungselemente wie ein Bildlook, Farbflächen und dem oben genannten Slogan.

So entstanden drei Kampagnenmotiven, die auf verschiedenen Kanälen gestreut werden sollten.