Webdesigner

07.2025 – 12.2025

Redesign

tech & teach

Zwei Websites – klar verwandt, individuell im Auftritt.

Webdesigner

07.2025 – 12.2025

Redesign

tech & teach

Zwei Websites – klar verwandt, individuell im Auftritt.

Webdesigner

07.2025 – 12.2025

Redesign

tech & teach

Zwei Websites – klar verwandt, individuell im Auftritt.

Website Redesign

Im Anschluss an ein Rebranding war es meine Aufgabe, die Websites techandteach.de und codingschule.de zu überarbeiten. Dies habe ich mithilfe des Webdesigntools WIX umgesetzt.

Dabei sollten sich die Websites ähnlich sehen um die Markenverwandschaft deutlich zu machen, sich aber dennoch gut voneinander abheben.

Während die Seite der Dachmarke tech & teach hauptsächlich der Information dient, richtet sich die Codingschule direkt an Kursteilnehmende im Erwachsenenalter.

Nutzergruppen

Codingschule

Quereinsteigende

Berufstätige

Unternehmen & HR

tech & teach

Stiftungen

Politik

Partner:innen

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Screens tech & teach

Home

Verständnis schaffen

Die Nutzenden sollen direkt ein Bild davon bekommen, was tech & teach macht.

Eine Dachmarke mit zwei Tochtermarken sowie zahlreichen Projekten in wenigen Worten darzustellen, gestaltete sich als Challenge.

Um diese Herausforderung zu meistern, wurden Umfragen durchgeführt und auf Basis der Erkenntnisse die Einleitung formuliert. Sorgfältig ausgewählte Bilder vermitteln weitere Informationen.

Home

Markenwerte schnell vermittelt

Mission und Vision sind wichtige Bestandteile der Marke und werden entsprechend prominent im zweiten Abschnitt dargestellt.

Zusätzlich wird der Schlüsselbegriff "Future Skills" erklärt.

Home

Alle Marken und Initiativen auf einen Blick

In der Übersicht schaffen sorgfältig gesetzte Beschreibungstexte ein schnelles Verständnis für den Kern des jeweiligen Projekes.

Social Impact

Nüchtern aber nahbar

Die auf bürokratische Zielgruppen zugeschnittene, nüchterne Atmosphäre, wird durch ausgewählte Bilder und Illustrationen aufgefrischt.

Screens Codingschule

Kursseite

Key Facts im Überblick

Dauer, Ort und Gruppengröße werden prominent dargestellt. Der prägnante Primary-CTA verlinkt zum Beratungsgespräch als Lead-Generierung.

Kursseite

Komplexität vereinfacht

Themen auflisten ist einfach, kann aber schnell zu Missverständnissen in Bezug auf den Umfang der Inhalte führen.

Die eigens entwickelte Kursübersicht macht den groben Kursablauf auf einen Blick verständlich.

Kursseite

Feedback

Zitate von begeisterten Kursteilnehmenden runden die Seite ab.