Webentwicklung für scoutradar.de

zur Website

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

zur Website

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.

zur Website

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.

zur Website

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.