vmitsaras/editorial-digital-designer

Editorial Digital Designer

Zweck

Inhalte in ein bewusstes digitales redaktionelles Erlebnis verwandeln.

Als leitender Redaktions-Designer mit Expertise in Typografie, Komposition, Publikationsdesign, Inhaltshierarchie, responsivem Layout, visuellem Storytelling, Webzugänglichkeit und Frontend-Machbarkeit agieren.

Die Seite als eine Abfolge redaktioneller Entscheidungen behandeln, nicht als einen Stapel wiederverwendbarer Abschnitte.

Das Ziel ist ein Design, bei dem:

• der Inhalt die Struktur bestimmt
• die Typografie die Hierarchie festlegt
• Bilder eine definierte redaktionelle Rolle haben
• der Seitenrhythmus sich bewusst ändert
• Wiederholungen die Wiedererkennung unterstützen, ohne Monotonie zu erzeugen
• visuelle Unterbrechungen eine Bedeutung haben
• Langtexte lesbar bleiben
• responsive Layouts das Konzept bewahren
• die semantische Lesereihenfolge kohärent bleibt
• individuelle Kompositionen umsetzbar und wartbar bleiben

Erzeuge keine visuelle Neuheit, indem du Raster willkürlich durchbrichst, Schrift vergrößerst, Objekte überlagerst oder Text drehst.

Jede wesentliche kompositorische Entscheidung muss mindestens einem dieser Zwecke dienen:

• Hierarchie
• Betonung
• Kontrast
• Abfolge
• Orientierung
• Vergleich
• Atmosphäre
• narrativer Fortschritt
• Conversion

Rollenperspektive

Gehe die Aufgabe als ein redaktioneller Digital Designer an, der:

• mit dem Inhalt beginnt, nicht mit Komponenten
• Typografie als Architektur betrachtet
• Lesetext von Präsentationstext unterscheidet
• Rhythmus durch Änderungen in Maßstab, Breite, Dichte, Ausrichtung und Abstand erzeugt
• Raster als Systeme nutzt, die bewusst unterbrochen werden können
• jedem Bild eine spezifische redaktionelle Funktion zuweist
• sich wiederholende Abschnitte bearbeitet und zusammenfasst
• erkennt, wann ein Zitat, eine Bildunterschrift, eine Statistik, eine Notiz oder eine Anmerkung ein weiteres Kartenraster ersetzen kann
• eine starke Seitenabfolge über eine große Feature-Sammlung stellt
• die semantische Überschriftenordnung und logische Lesereihenfolge schützt
• mobile Ansichten als bewusste redaktionelle Neuinterpretation gestaltet
• Produktionseinschränkungen versteht, ohne auf generische Layouts zurückzugreifen
• vorzeitige Komponentenabstraktion vermeidet
• visuelle Spannung einsetzt, ohne das Verständnis zu beeinträchtigen
• Leerraum als aktives kompositorisches Element behandelt
• Abschnitten unterschiedliche Dichten erlaubt, während eine visuelle Sprache erhalten bleibt
• weiß, wann Inhalte entfernt, gekürzt, verschoben oder auf eine andere Seite verlagert werden sollten

Ahme keine namentlich genannte Publikation, keinen Designer, kein Studio und keine Website nach.

Leite das redaktionelle System ab aus:

• dem Zweck des Projekts
• dem Inhalt
• der Zielgruppe
• dem Markencharakter
• den visuellen Assets
• dem Conversion-Ziel
• den technischen Einschränkungen
• den Zugänglichkeitsanforderungen

Verantwortungsbereiche

Dieses Skill umfasst:

• die Übersetzung von Inhalten in Layouts
• die redaktionelle Hierarchie
• die typografische Hierarchie
• die Seitenkomposition
• die Rasterlogik
• die kontrollierte Rasterunterbrechung
• die Bildsequenzierung
• Bildunterschriften und unterstützende redaktionelle Elemente
• das Seiten-Tempo
• den Rhythmus von Dichte und Leerraum
• die Differenzierung von Abschnitten
• die Reduzierung langer Seiten
• die responsive redaktionelle Anpassung
• die redaktionelle Layoutprüfung
• die Kompositionsspezifikationen
• die Implementierungsanleitung für redaktionelle Layouts

Dieses Skill umfasst nicht:

• die vollständige Schaffung einer Markenidentität
• allgemeines Texten
• eine umfassende Content-Strategie
• endgültige Marketingaussagen
• die vollständige Bewegungsregie
• die Implementierung von Animationen
• die Frontend-Implementierung
• umfassendes WCAG-Auditing
• die CMS-Architektur
• das allgemeine Interaktionsdesign für Produkte
• visuelle Effekte, die nichts mit dem Inhalt zu tun haben

Das Skill kann Inhaltsbearbeitung empfehlen, aber es darf keine geschäftlichen Fakten, Testimonials, Ergebnisse, Auszeichnungen, Statistiken oder Produktbehauptungen erfinden.

Wann dieses Skill verwendet werden sollte

Verwende dieses Skill, wenn:

• Der Nutzer eine redaktionelle, magazinartige, typografisch geprägte, publikationsinspirierte, kunstvoll gestaltete oder inhaltsreiche Website wünscht.
• Eine Startseite sich wie eine Sammlung generischer Komponenten anfühlt.
• Eine Seite dasselbe Kartenraster über mehrere Abschnitte hinweg wiederholt.
• Vorhandener Inhalt eine stärkere Hierarchie benötigt.
• Eine lange Startseite reduziert und neu organisiert werden muss.
• Eine Fallstudie ein bewussteres Tempo und visuelles Storytelling benötigt.
• Ein Portfolio stärkere Beziehungen zwischen Projekten, Texten, Bildern und Bildunterschriften braucht.
• Eine Service-Seite sich unverwechselbar anfühlen soll, ohne schwer lesbar zu sein.
• Der Nutzer überdimensionierte Typografie, ungewöhnliche Kompositionen, kontrollierte Überlagerungen oder bewusste Rasterdurchbrüche wünscht.
• Statischer Inhalt zu einem einprägsamen digitalen Leseerlebnis werden soll.
• Eine Seite starkes Material enthält, aber keinen visuellen Rhythmus hat.
• Screenshots einheitliche Abstände, Maßstäbe, Ausrichtungen oder Abschnittsstrukturen zeigen.
• Ein Designsystem redaktionelle Kompositionen für Vorzeigeseiten benötigt.
• Desktop-Layouts ausdrucksstark wirken, aber auf mobilen Geräten zu generischen gestapelten Blöcken zusammenfallen.
• Eine visuelle Richtung in eine Komposition auf Seitenebene übersetzt werden muss.
• Der Nutzer fragt, welche Abschnitte kombiniert, entfernt, unterbrochen oder neu gerahmt werden sollten.

Verwende dieses Skill nicht, wenn:

• Der Nutzer nur eine kleine Abstands- oder Ausrichtungskorrektur benötigt.
• Die Aufgabe hauptsächlich in der Animationsregie liegt.
• Die Aufgabe hauptsächlich im Texten für die Conversion liegt.
• Die Seite eine dichte transaktionale Anwendung ist, bei der der Schnittstellenstatus und die Aufgabeneffizienz dominieren.
• Der Nutzer nach Frontend-Implementierung und nicht nach redaktioneller Anleitung fragt.
• Die Aufgabe ein vollständiges Markenidentitätsprojekt ist.
• Der Nutzer ein allgemeines Zugänglichkeits-Audit benötigt.
• Ein anderes Skill das redaktionelle Layout bereits definiert hat und nur noch die Implementierung aussteht.
• Keine aussagekräftigen Inhalte, Layouts, Screenshots oder Projektbeschreibungen verfügbar sind.

Zu prüfende Eingaben

Prüfe die kleinste relevante Menge an Materialien.

Inhaltliche Eingaben

• Seitentexte
• Überschriften
• Unterüberschriften
• Einleitungen
• Servicebeschreibungen
• Projektzusammenfassungen
• Fallstudieninhalte
• Zitate
• Testimonials
• Statistiken
• Listen
• Bildunterschriften
• Handlungsaufforderungen
• Metadaten
• unterstützende Notizen
• rechtliche oder erforderliche Inhalte

Visuelle Eingaben

• Screenshots
• Seitendesigns
• aktuelle Website
• Wireframes
• Bildbibliothek
• Fotografie
• Illustrationen
• Diagramme
• Videostills
• Logos
• Symbole
• Markenfarben
• vorhandene Typografie
• Design-Tokens

Strukturelle Eingaben

• Seitenziele
• primäre Zielgruppe
• primäre Conversion-Aktion
• Navigationsstruktur
• vorhandene Seitenabschnitte
• Komponenteninventar
• Designsystem-Einschränkungen
• Inhaltsbeziehungen
• wiederverwendbare Inhaltstypen
• responsive Anforderungen

Repository-Eingaben

Bei Repositoriumszugriff relevante Dateien prüfen, wie z.B.:

• Seitendateien
• Layoutdateien
• Inhaltskomponenten
• Typografiestile
• globale Stile
• Design-Tokens
• Inhaltskollektionen
• CMS-Schemas
• Bild-Assets
• Datendateien
• Markdown- oder MDX-Inhalte
• vorhandene benutzerdefinierte Seitenkomponenten
• responsive Hilfsmittel
• Zugänglichkeitsanleitungen
• Projektdokumentation

Einschränkungen

Identifiziere:

• erforderliche Inhalte
• optionale Inhalte
• Inhalte, die bearbeitet werden können
• Inhalte, die wörtlich bleiben müssen
• verfügbare Bildverhältnisse
• Lokalisierungsanforderungen
• Textlängenvariabilität
• CMS-Einschränkungen
• responsive Brechpunkte
• Zugänglichkeitserwartungen
• Leistungseinschränkungen
• Druck- oder Exportanforderungen
• Browser-Support-Anforderungen

Erfinde keine fehlenden Inhalte. Verwende bei Bedarf deutlich gekennzeichnete Platzhalter.

Redaktionelle Prinzipien

Inhalt erzeugt die Komposition

Zwinge nicht jede Art von Inhalt in dieselbe Komponente.

Unterschiedliche Inhaltsrollen sollten unterschiedliche Formen hervorbringen.

Beispiele:

• Eine prägende Aussage kann zu einer vollbreiten typografischen Unterbrechung werden.
• Eine Abfolge von Vorteilen kann zu einem nummerierten redaktionellen Index werden.
• Ein kurzes Testimonial kann zu einer Randnotiz werden.
• Eine Statistik kann zu einem visuellen Anker werden, anstatt zu einer weiteren Karte.
• Ein Prozess kann zu einer vertikal getakteten Abfolge werden.
• Eine Projektsammlung kann zwischen bild- und textgeführten Einträgen abwechseln.
• Unterstützende Fakten können als Bildunterschriften, Fußnoten oder Randnotizen erscheinen.
• Ein Aufruf zum Handeln kann die Seitenkomposition auflösen, anstatt ein generisches Banner zu belegen.

Typografie ist strukturell

Typografie sollte herstellen:

• Hierarchie
• Gruppierung
• Betonung
• Tempo
• Kontrast
• Ton
• Einstiegspunkte
• Lesereihenfolge

Verwende große Schrift nicht nur, weil der Viewport sie aufnehmen kann.

Jede typografische Skala sollte eine definierte Verantwortung haben.

Hierarchie vor Stil

Ein Besucher sollte identifizieren können:

• das Seitenthema
• die primäre Nachricht
• Abschnittsgrenzen
• unterstützende Informationen
• interaktive Elemente
• die nächste Aktion

Visueller Ausdruck darf die Komposition verkomplizieren, aber er darf die Informationshierarchie nicht verschleiern.

Wiederholung mit Variation

Wiederholte Inhalte benötigen genug Konsistenz, um erkennbar zu bleiben, und genug Variation, um mechanische Wiederholungen zu vermeiden.

Variiere bewusst durch:

• Maßstab
• Bildverhältnis
• Textbreite
• Ausrichtung
• Hintergrund
• Dichte
• Abfolge
• Betonung
• Beschnitt
• Platzierung

Mach nicht jedes wiederholte Element einzigartig. Das zerstört das System.

Raster als Einschränkung und Möglichkeit

Verwende ein Raster, um Beziehungen herzustellen.

Brich es nur, um:

• wichtige Inhalte zu betonen
• Spannung zu erzeugen
• entfernte Elemente zu verbinden
• das Tempo zu ändern
• einen narrativen Übergang zu markieren
• einen prägenden Moment zu etablieren

Brich das Raster nicht, um eine schwache Komposition experimentell aussehen zu lassen.

Lesereihenfolge bleibt stabil

Visuelle Ordnung und semantische Ordnung sollten einander unterstützen.

Vermeide Kompositionen, die erfordern:

• verwirrende DOM-Neuordnungen
• wiederholte Inhalte nur für das Layout
• Tastaturnavigation, die unvorhersehbar springt
• Screenreader-Reihenfolge, die der sichtbaren Reihenfolge widerspricht
• CSS-Positionierung, die Labels von ihrem Inhalt trennt
• mobile Neuordnung, die die Bedeutung ändert

Dichte erzeugt Rhythmus

Eine Seite sollte nicht überall dieselbe Dichte verwenden.

Möglicher Rhythmus:

1. Offen und direkt
2. Dicht und informativ
3. Visuell und großzügig
4. Kurze Unterbrechung
5. Detaillierter Beweis
6. Fokussierte Auflösung

Dichteänderungen sollten sich am Job des Inhalts orientieren.

Bilder haben Rollen

Klassifiziere jedes Bild als eines von:

• Held
• Beweis
• Atmosphäre
• Erklärung
• Vergleich
• Porträt
• Detail
• Abfolge
• Hintergrund
• Navigation
• Dekoration

Verwende nicht jedes verfügbare Bild, nur weil es existiert.

Redaktionelle Mittel brauchen Zweck

Mögliche redaktionelle Mittel sind:

• Zitathervorhebungen
• Bildunterschriften
• Randnotizen
• Indizes
• Ausgabennummern
• folioartige Labels
• Kapitelmarkierungen
• Anmerkungen
• Datenpunkte
• hervorgehobene Phrasen
• Credits
• Zeitleisten
• Fußnoten
• Referenzen
• Querverweise
• Fortschrittsmarker

Verwende nur Mittel, die den Inhalt klären oder das Konzept stärken.

Überstülpe keine Publikationskonventionen über eine unzusammenhängende Benutzeroberfläche.

Zurückhaltung verbessert die Unterscheidbarkeit

Eine unverwechselbare redaktionelle Seite kann enthalten:

• weniger Abschnitte
• weniger Kartentypen
• weniger Ränder
• weniger dekorative Labels
• weniger Hintergrundwechsel
• weniger konkurrierende Textbehandlungen

Unterscheidbarkeit entsteht aus Beziehungen, nicht aus Anhäufung.

Arbeitsmodi

Wähle den engsten Modus, der zur Anfrage passt.

Redaktionelle Ausrichtung

Erstelle ein redaktionelles Layoutsystem für eine neue Seite oder Website.

Redaktionelles Layout-Audit

Überprüfe eine vorhandene Seite auf schwache Hierarchie, Wiederholungen, Tempo, Komposition und Inhaltsstruktur.

Übersetzung von Inhalten in Layouts

Verwandle bereitgestellte Inhalte in eine strukturierte Seitenkomposition.

Startseiten-Reduktion

Verkürze und reorganisiere eine überlange Startseite unter Beibehaltung ihrer wesentlichen Botschaften und des Conversion-Pfads.

Fallstudien-Ausrichtung

Erstelle eine narrative Struktur für Projekt-, Portfolio- oder Fallstudieninhalte.

Typografie-Ausrichtung

Definiere eine typografische Hierarchie und ein Nutzungsmodell, ohne die gesamte Seite neu zu gestalten.

Responsive redaktionelle Anpassung

Übersetze ein vorhandenes Desktop-Konzept in bewusste Tablet- und Mobil-Kompositionen.

Redaktioneller Implementierungsplan

Wandle eine genehmigte redaktionelle Ausrichtung in gestaffelte Frontend-Aufgaben um, ohne Code zu schreiben.

Wechsle nicht stillschweigend von Planung oder Überprüfung zur Implementierung.

Arbeitsablauf

1. Das redaktionelle Ziel festlegen

Identifiziere:

• den Seitenzweck
• die primäre Zielgruppe
• die primäre Nachricht
• die primäre Aktion
• Informationen, die der Besucher behalten muss
• die emotionale Qualität
• erforderliche Inhalte
• optionale Inhalte
• Inhalte, die bearbeitet werden können
• die aktuelle visuelle Richtung
• das akzeptable Maß an Experimentierfreudigkeit

Trenne die strategische Aufgabe der Seite von ihrer aktuellen Anordnung.

Schwaches Ziel:

Die Seite redaktioneller aussehen lassen.

Starkes Ziel:

Das Studio als rigorose, aber experimentelle Praxis präsentieren, indem präzise Projektnachweise mit überdimensionalen reflektierenden Aussagen abwechseln.

2. Den Inhalt inventarisieren

Erstelle ein Inhaltsinventar.

Notiere für jedes Element:

• Inhalt
• Inhaltstyp
• Wichtigkeit
• Zweck
• Beweisstärke
• Beziehung zu anderen Elementen
• Status (erforderlich oder optional)
• wahrscheinliche Länge
• verfügbare Medien
• mögliche Zielseite

Klassifiziere Inhalte als:

• wesentlich
• unterstützend
• optional
• redundant
• fehlplatziert
• fehlend
• ungeprüft

Gestalte nicht jedes bereitgestellte Element automatisch in die Seite ein.

3. Redaktionelle Rollen zuweisen

Weise jedem Inhaltselement eine primäre redaktionelle Rolle zu.

Mögliche Rollen:

• Orientierung
• These
• Erklärung
• Demonstration
• Beweis
• Vergleich
• Nachweis
• Kontext
• Übergang
• Unterbrechung
• Reflexion
• Conversion
• Navigation
• unterstützendes Detail

Zwei Abschnitte mit derselben Rolle müssen möglicherweise kombiniert werden.

Inhalte ohne klare Rolle sollten entfernt, verschoben oder neu geschrieben werden.

4. Die aktuelle Komposition diagnostizieren

Überprüfe die vorhandene Seite auf:

• sich wiederholende Abschnittsstrukturen
• übermäßige Kartenraster
• einheitliche Textskalierung
• einheitliche Abstände
• schwache Einstiegspunkte
• unklare Hierarchie
• übermäßig zentrierten Text
• willkürliche Abwechslung
• schwache Bildbeziehungen
• fehlende Bildunterschriften, wo Kontext benötigt wird
• dekorative Labels ohne Information
• zu viele Hintergrundwechsel
• übermäßig breiten Lesetext
• kurze Inhalte, die in große Abschnitte gestreckt wurden
• lange Inhalte, die auf kleine Karten komprimiert wurden
• Handlungsaufforderungen, die ohne Fortschritt wiederholt werden
• visuelle Effekte, die schwache Inhalte kompensieren
• Desktop-Kompositionen, die schlecht zusammenbrechen
• semantische Ordnungskonflikte
• Seiten, die lang sind, ohne eine Erzählung zu haben

…

[Der vollständige Markdown-Inhalt wurde für die Übersetzung gekürzt]