Start / Über diesen Entwurf

Muster einer Hinweisseite

Was zu jedem Entwurf gehört.

Zu jedem Web-Entwurf gehört eine Seite wie diese. Hier steht sie am Beispiel meiner eigenen Website: was gebaut wurde, was es anders macht und was eine Umsetzung bedeuten würde.

So sieht die Hinweisseite aus, die zu jedem Entwurf gehört. Hier am Beispiel meiner eigenen Website, die inzwischen live ist.

Ein Auftritt, hinter dem ich selbst stehe.

Die vorherige Version war korrekt und austauschbar: eine Rollenbeschreibung, wie sie hundert Interim Manager tragen könnten. Diese Seite erzählt stattdessen die eigene Linie, von der KI-Forschung an der RWTH Aachen über zwanzig Jahre Industrie bis zur heutigen Praxis. Gebaut in purem HTML, ohne Baukasten, ohne Abo.

Fertig und funktionsfähig

  • Eigenes Design-System aus dem AC-Logo: Navy, Tiefsee, ein einziges Orange
  • Mehrseitiger Auftritt: Startseite, Blog, Vorträge, Veröffentlichungen, Rechtliches
  • Neun Blogbeiträge mit eigenen Vorschaubildern und Lesezeiten
  • Vier interaktive Vortrags-Decks, im Browser blätterbar
  • Eigenes Auswertungs-Dashboard für Besuchszahlen, ohne Cookies und Tracker
  • Vollständig lesbar für Suchmaschinen und KI-Assistenten

Für den Live-Betrieb offen

  • Kontaktformular ergänzen, falls Mail und Telefon nicht genügen
  • Weitere Fälle und Referenzen als eigene Tiefenebene
  • Englische Fassung für internationale Mandate

Einordnung auf der Ausbau-Skala.

Von der einfachen Ein-Seiten-Lösung bis zur High-End-Plattform. Wo dieser Entwurf liegt, danach richten sich Aufwand und Preis.

0-1 Visitenkarte, ohne Unterseiten, Formulare oder Metainfo ~5 mehrseitiger Auftritt: Formular, SEO und GEO, Mediengalerie, Online-Buchung 10 All-In: Login-Bereich, Analytics, CMS, News, Shop, KI-Assistent
Durchschnittliche Webseite
Diese Seite
012345678910
  • Diese Seite (~8): mehrseitiger Auftritt mit Blog, interaktiven Vortrags-Decks, eigenem Auswertungs-Dashboard und vollständiger KI-Lesbarkeit. Bewusst ohne Online-Buchung und Login.

Farben und Schrift.

Die Farben stammen aus dem AC-Logo und der Tiefsee-Erzählung der Seite. Zwölf Töne, jeder mit einer festen Aufgabe, alle an einer Stelle definiert. Ein einziger Akzent, konsequent durchgehalten.

Die drei Blautöne

#0A1120Tiefsee, die tiefste Fläche: Startbild, Kontakt, Fußzeile
#0F172ANavy, die Markenfarbe: dunkle Abschnitte, Seitenköpfe, Überschriften
#21395CNavy aufgehellt: Links und Hervorhebungen im Fließtext

Akzent und Papier

#CF6C3FOrange, der einzige Akzent: Zahlen, ein Schlüsselwort, Linien
#FDFDFBPapier, der helle Grundton der Inhaltsflächen
#F7F6F2Papier abgesetzt, für Boxen und Abschnitte, die sich abheben

Text und Linien auf hellem Grund

#1C2B42Fließtext
#5C6B80Nebentext, Bildunterschriften, Kennzeichnungen
#E7E4DDLinien und Rahmen, die trennen, ohne zu stören

Text auf dunklem Grund

#EDF1F8Fließtext
#D5DDEANebentext
#9FB0C8Zurückgenommene Angaben
Bricolage Grotesque

Für Überschriften. Eine Schrift ohne die kleinen Häkchen an den Buchstabenenden, mit eigenwilligem Charakter statt Standard-Optik. Sie soll auffallen, ohne laut zu sein.

Manrope

Für den Fließtext. Klar und vertrauenswürdig, auch in kleinen Größen auf dem Handy gut lesbar. Beide Schriften liegen auf dem eigenen Server, es werden keine Daten an Dritte übertragen.

Was der Entwurf anders macht.

Ehrlich gegenübergestellt. Die Zahlen unten wurden an dieser Seite gemessen, Stand 18. Juli 2026.

MerkmalBisherige SeiteDieser Entwurf
WiedererkennbarkeitKorrekt, aber austauschbarEigene Bildsprache, unverwechselbar
Blickrichtung der TexteBeschreibt vor allem das eigene KönnenBeginnt beim Problem des Lesers
Auffindbar für KI-SucheGrundlagen vorhandenVollständig: llms.txt, strukturierte Daten, statische Inhalte
LadezeitSolideUnter einer Sekunde bis zum sichtbaren Inhalt
BelegeAusführlich ausgebreitetVerdichtet, mit Tiefenebene für Interessierte
EigentumEigene Seite, pures HTMLUnverändert: reines HTML, kein Abo
Ladezeit sichtbar
unter 1 s
gemessen im Labor
Suchmaschinen-Score
100 von 100
Lighthouse SEO
Barrierefreiheit
100 von 100
Lighthouse Accessibility
Tote Links
0
über alle 27 Seiten geprüft
Warum das zählt. Wer heute einen Interim Manager oder einen Handwerksbetrieb sucht, fragt zunehmend einen KI-Assistenten statt eine Suchmaschine. Der liest Text und hinterlegte Daten, keine Bilder und kein JavaScript. Diese Seite ist von Grund auf so gebaut, dass beide sie vollständig verstehen.

Was dieser Entwurf beweist. Und was nicht.

Ein Demonstrator ist eine Entscheidungshilfe, kein fertiges Produktionssystem.

Was er beweist

Dass aus einem Gespräch in Stunden ein bewertbarer Zielzustand wird: Struktur, Gestaltung, Inhalte an ihrem Platz. Sie entscheiden am Gegenstand, nicht am Lastenheft.

Was er nicht ist

Kein Produktivbetrieb. Was dafür fehlt, steht offen auf dieser Seite: Formularstrecke, Rechtstexte, Pflegeprozess, Freigaben. Wer den Aufwand kleinredet, verliert beim ersten Angebot die Glaubwürdigkeit.

Was Ihr Team danach kann

Einen Satz sagen, und die Änderung ist da. Kein Ticket, keine Agentur, keine Freigabeschleife. Das ist der Moment, in dem aus einem Werkzeug eine Fähigkeit des Betriebs wird.

Was Ihnen gehört

Der Auftritt, vollständig, ohne Abo und ohne Anbieter, der Sie festhält. Sie können jederzeit wechseln und alles mitnehmen.

Weitere Arbeiten.

Kein Einzelfall: beauftragte Seiten und Entwürfe aus verschiedenen Branchen.

Startseite von core:form

core:form

Pilates-Studio in Essen-Kettwig: mehrseitiger Auftritt mit Kursen, Team und Buchung. Beauftragt und im Betrieb.

Live ansehen
Startseite von Barista-Biker

Barista-Biker

Mobiles Kaffee-Catering aus Mönchengladbach. Beauftragt, bezahlt, live.

Live ansehen
Startseite von Petra Ladenburger

Petra Ladenburger

Traumasensitive Arbeit mit Pferden: ruhiges Design, klare Erzählung, ein Weg zum Kennenlernen.

Live ansehen
Startseite von SEITec

SEITec

Handwerksbetrieb aus Essen: vier Gewerke, je eine eigene Leistungsseite.

Live ansehen
Startseite von CanControls

CanControls

Computer Vision aus Aachen: anspruchsvolle Technologie verständlich erzählt.

Live ansehen
Was ist das hier? Das Muster der Hinweisseite, die zu jedem Web-Entwurf von Dr.-Ing. Suat Akyol gehört, hier am Beispiel der eigenen Website. Fragen dazu: contact@akyol.de