Mit Sicherheit kontrovers

von | 16.09.2022

Ein Blog, der Sicherheit kontrovers diskutiert.

Mit Sicherheit kontrovers ist ein Blog der Gesellschaft für Sicherheitspolitik e. V. und dient dem kontroversen Austausch von Informationen rundum das Thema Sicherheitspolitik.

Auftragslage

Das Projekt startete für mich im Sommer 2021. Ich erfuhr, dass der Blog seit ca. einem Jahr in Bearbeitung sei es nicht vorgeht. Grund sei gewesen, dass der damalige „Grafiker“ nicht zeitgemäß ablieferte und kein zufriedenstellendes User Interface (UI) erstellt werden konnte, zumal nicht für die mobile Versionen (Smartphone, Tablet, etc.). Für den Projekt wurde ein eigenes CMS (Content Management System) in React geschrieben, in dem die Ersteller die Beiträge und auch Fotos und andere Tools hochladen können. Nun mag sich der ein oder andere Leser denken: „Wieso wurde ein komplett neues CMS in React geschrieben, wenn man in Zeiten von Typo3, Contao, WordPress, u. a., auf fertige CMS setzen könnte?“. Gut, darauf habe ich leider keine Antwort. Ich bin weder Auftragsnehmer, noch Auftragsgeber oder dessen Berater gewesen. Mein Auftrag war es – zumindest vorerst – den nicht vorhandenen Grafiker zu ersetzen und das User Interface in schnellster Zeit so anzufertigen, dass das bisher vorhandene „Design“ nicht zu sehr verändert wird, sodass die Programmierer keinen Mehraufwand haben.

Logo

Der Auftrag zur Erstellung des Logos war eindeutig: Es soll zum Logo der GSP passen, bzw. erkennbar sein, dass es eine Tochter der GSP sein soll. Einheitlich für Logos der GSP ist ein horizontales Logo mit Bildmarke auf der linken und zweizeiligem Text auf der rechten Seite. Hier gab es wieder zwei Entwürfe:

© by Kopf & Hand Kreativ- und Werbeagentur
Entwurf 1: Ein minimalistisches und abstraktes großes G (stehend für das G in GSP), das aus einem Schild (für Sicherheit) und einem Menschen besteht.
© by Kopf & Hand Kreativ- und Werbeagentur
Entwurf 2: Die Idee des Schildes blieb bestehen, aber so, dass der Mensch nun im Schild integriert ist und somit eine Art Wappen erstellt.

Es wurde sich für den zweiten Entwurf entschieden.

UI des Blogs

© by Kopf & Hand Kreativ- und Werbeagentur
Desktopansicht des UI

Hierbei habe ich mit den Programmen Adobe XD, Adobe Photoshop und Adobe Illustrator gearbeitet. Adobe XD eignet sich perfekt zur Erstellung von UI Designs – oder auch Screendesign genannt –, um diese dann als Vorlage für die Programmierung zu benutzen. In der mobilen Version verschwindet die Kategorien Spalte und die Bilder, die links neben dem Artikel stehen, erscheinen über den Artikeln, um eine Art „Karte“ zu erzeugen. Da ich keine Ahnung hatte, wie hoch das Zeitbudget der Programmierer noch war, konnte ich somit nicht erahnen, was von diesem Design (auch der vereinfachten Navigation) umsetzbar war. Als Font wählte ich die Roboto Sans.

© by Kopf & Hand Kreativ- und Werbeagentur
Die Umsetzung der Programmierer des User Interfaces.

Wie man sieht, wurden viele meiner Funktionen des UI nicht umgesetzt oder nur teils. Das UI ist nun kein Meisterwerk, aber es funktioniert. Ein weiteres Problem nahte jedoch:

Landingpage und SEO

Da das gesamte CMS in React geschrieben wurde, soll es nicht möglich gewesen sein, dass die Blogübersichtsseite und die Blogbeiträge von Suchmaschinen nicht indexiert werden können, was zur Folge hat, dass die ganze Website nicht bei in der Google Suche gelistet und gefunden werden kann.

Was also tun?

Ich beratenden Gesprächen mit dem Auftraggeber und den Programmierern, sind wir zu dem Entschluss gekommen, dass eine Landingpage, die dann mithilfe von Keywords indexiert werden kann, erstellt werden soll. Ich bekam also den Auftrag eine Landingpage für den Blog zu erstellen, die dann auf die Blogübersichtsseite führt. Auf der Landingpage muss aber der „neuste“ Blogbeitrag als Vorschau erscheinen – ein weiteres Problem, da Landingpage und Blog auf unterschiedlichen Domains UND Servern laufen und zudem noch in zwei verschiedenen Programmiersprachen (Landingpage in PHP und Blog in React) geschrieben wurden. Ich möchte dieses Problem aber nicht vertiefen. Ich fand aber eine Lösung! Kurzum erschuf ich einen iFrame, der die Tabletversion des neusten Beitrags „streamte“ und fügte diesen Code auch die Landingpage ein.

© by Kopf & Hand Kreativ- und Werbeagentur
Der iFrame auf der Landingpage ist, wie man sieht, begrenzt. Wenn die Excerpts (Textauszüge) des Blogbeitrags zu lang sind, verschwinden untere Teile des iFrames. Der ganze iFrame ist ein Hyperlink zum Blog.

Die Landingpage stand nun, der Blog konnte also gefunden werden und SEO war auch vorhanden, wenn nicht explizit mit Strategie. Nun musste dieser Blog beworben werden. Hierfür wurde ich beauftragt die Werbeanzeigen der ES & T, eine Fachzeitschrift für Sicherheitspolitik (Was es nicht alles gibt?!), zu erstellen und druckfertig abzuliefern: Kein Problem!

Anzeigenerstellung

© by Kopf & Hand Kreativ- und Werbeagentur
Bewerbung des Blogs und der Landingpage mit Augenmerk auf das „mobile“ Diskutieren.
© by Kopf & Hand Kreativ- und Werbeagentur
Bewerbung der Diskussion über den Ukraine-Konflikt.

Neugestaltung des Blogs

© by Kopf & Hand Kreativ- und Werbeagentur
Beitrag-Slider mit aktuellen Beiträgen zur vereinfachten Übersicht. Einheitliches Design, passend zur Landingpage.
© by Kopf & Hand Kreativ- und Werbeagentur
Farbliche Rubriken, Kategorienseite, Ajax-Suche (Echtzeit-Suche ohne Suchseite). Jeder Beitrag wird von Google indexiert.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Referenzen, die dich interessieren könnten:

Flausen im Kopf

Flausen im Kopf

Eine Psychotherapiepraxis in Wilhelmshaven für Kinder und Jugendliche Auftrag Der Psychologe mit Approbation als Kinder- und...

mehr lesen
Good Dog Studio

Good Dog Studio

Ein Corporate Design bitte, aber an den Seiten etwas kürzer. Ich lernte Karol, den Inhaber von Good Dog Hundefriseur, ein Start-up mit motiviertem...

mehr lesen
JuFo

JuFo

Das Jugendforum für Sicherheitspolitik 2021 durften wir den Neuauftritt des Jugendforums für Sicherheitspolitik (eine Veranstaltung der Gesellschaft...

mehr lesen
Pro Südstadt GmbH

Pro Südstadt GmbH

Die Geschichte des Kennenlernens Wer oder was steckt hinter der Pro Südstadt GmbH? Die Pro Südstadt GmbH ist eine Immobiliengesellschaft in und für...

mehr lesen

Über den Autor

Felix Fischer

Felix Fischer

Als leiden­­schaftlicher Illus­trator und Typo­graf mit der Affini­tät zur Technik und Moderne, stelle ich die „Hand“ der Agentur dar.

Neueste Projekte

Ein besonderes und individuelles Geschenk

Zur Hochzeit ein Unikat! Zur Hochzeit haben wir ein individuelles Wandbild als Geschenk illustriert. Dabei wurden keine Vorlagen, vorgefertigte Elemente oder Icons genutzt. Wir haben jedes Detail individuell digital gezeichnet, angepasst oder, persönlich auf das Paar...

Flausen im Kopf

Eine Psychotherapiepraxis in Wilhelmshaven für Kinder und Jugendliche Auftrag Der Psychologe mit Approbation als Kinder- und Jugendlichenpsychotherapeut und mit Weiterbildung zum Verhaltenstherapeut Tobias Mirlach eröffnete eine Psychotherapiepraxis für...

Blende Eins Kurzfilmfest

Social-Media-Auftritt 2022 Für das Blende Eins Kurzfilmfest Wilhelmshaven haben wir für die Veranstaltung im Jahr 2022 die Kanäle auf Instagram und Facebook gepflegt und bereut. Das Ziel bestand darin, auf Instagram und Facebook aktiv und grundsätzlich sichtbar zu...

Good Dog Studio

Ein Corporate Design bitte, aber an den Seiten etwas kürzer. Ich lernte Karol, den Inhaber von Good Dog Hundefriseur, ein Start-up mit motiviertem Gründer, während eines netten Abends in Bock's Bar kennen. Das war Ende 2021. Wir kamen leicht ins Gespräch und...

JuFo

Das Jugendforum für Sicherheitspolitik 2021 durften wir den Neuauftritt des Jugendforums für Sicherheitspolitik (eine Veranstaltung der Gesellschaft für Sicherheitspolitik e. V. (GSP) in Kooperation mit dem Bundespresseamt (BPA)) erstellen. Das Logo gestalten, die...

Pro Südstadt GmbH

Die Geschichte des Kennenlernens Wer oder was steckt hinter der Pro Südstadt GmbH? Die Pro Südstadt GmbH ist eine Immobiliengesellschaft in und für Wilhelmshaven mit, wie der Name schon sagt, besonderem Augenmerk auf die Südstadt. Das Unternehmen gründete im Oktober...

CHECK!

CHECK! Das Darts-Magazin Durch Twitch, eine Streaming-Plattform auf der ich im Sommer 2020 regelmäßiger über Illustration und Grafikdesign sendete, ist ein Zuschauer auf mich aufmerksam geworden: Julien. Julien ist Inhaber und Verleger des Darts-Magazin CHECK! und...

Friedhelm, das Gnu

Das Gnu, welches Arzt werden wollte. Einleitung "Friedhelm – das Gnu, welches Arzt werden wollte" (direkter Link zum Buch beim Verlag) und "Friedhelm – das Wach-Gnu" (direkter Link zum Buch beim Verlag) sind Kinderbuchgeschichten eines Gnus, das in der Savanne lebt...

Meerblick

Interne Kommunikation in der Jade Hochschule Die Meerblick-Zeitschrift (alles rund um den Studiengang Wirtschaft an der Jade Hochschule Wilhelmshaven) existiert nun bereits seit 15 Jahren. Vor vier Jahren ist Herr Brunßen, Chefredakteur und Herausgeber der Meerblick,...

Akdeniz Website

Ein Relaunch der Website des wilhelmshavener Restaurants Akdeniz. Das Restaurant und die Loungebar Akdeniz wünschten sich einen neuen Internetauftritt, da der Vorige einfach nicht zur Zufriedenheit des Kunden fertiggestellt wurde und viele erwünschte Funktionen...

Burger Stop

"Das kann auch lecker aussehen?!" Beschreibung In Wilhelms­haven gab es ein Burger-Restaur­ant, das ein wenig hervor­stach – für Wilhelms­havener Verhält­nisse. Die Burger wurden „handmade“ mit frisch geback­enen Bröt­chen und ausge­wähltem Fleisch aus der Region...

Verpasse keine Neuigkeiten mehr!

Sei nicht schüchtern und melde dich hier für unseren Newsletter an!