13 Kategorien · 96 Patterns. Formsprache: scharfe Ecken, harte Schatten, Signal-Grün
#00FF9C, Zilla Slab / Inter / Space Mono. Alle Demos sind mit den
produktiven Tokens aus nozilla.css gebaut und funktionieren in Light & Dark.
Verbindlich sind die 25 Regeln im Kopf von nozilla.css. Die vier, die
das Bild am stärksten prägen: Fließtext steht auf weißer Fläche , auf dem
Papierton bleiben nur Überschriften und Navigation. Es gibt genau einen Gelbton ,
vollflächige Bänder sind weiß, Schwarz ist die Ausnahme für eine Stelle je Seite.
Signalgrün ist ausschließlich Aktionsfarbe , nie Fläche. Und: kein Rahmen,
wenn sich die Fläche ohnehin vom Hintergrund abhebt , ausgenommen anklickbare
Flächen, die im Hover den harten Schatten bekommen. Die Demos unten folgen dieser
Regel: der weiße Demo-Rahmen trägt sich selbst, Umrandungen tragen nur die Elemente,
die man anklicken kann.
1 · Hero-Sektionen 2 · Text-Bild-Splits 3 · Social Proof 4 · Features & Inhalte 5 · Interaktive Komponenten 6 · Listen & Grids 7 · CTA & Formulare 8 · Navigation & Footer 9 · E-Commerce 10 · Daten & Dashboards 11 · Blog & Magazin 12 · Effekte & Overlays 13 · Mobile Bildtafel → Hero-Werkstatt → 1 · Hero-Sektionen Einstiegssektionen: Text-Ausrichtung, Medien-Integration und interaktive Varianten.
1.1 Text-Alignment & Positionierung Raster 12-Spalten · Inhalt max. 700 px mittig Anordnung Label → H1 (Display) → Lead → CTA-Reihe (primär + sekundär), alles zentriert Einsatz Kampagnen-Landingpages mit genau einer Kernbotschaft; maximale Fokussierung. Digitalberatung · Bonn Gute digitale Dienste. Prototyping · Plattformentwicklung · Beratung, immer den Menschen im Mittelpunkt.
HERO-02 Linksbündiger Hero Raster 12-Spalten · Inhalt in Spalte 1–7 · Weißraum rechts Anordnung Label, H1, Lead und CTAs linksbündig; rechte Hälfte bleibt bewusst leer Einsatz Corporate-Startseiten mit ruhigem, redaktionellem Ton; gute Lesbarkeit langer Headlines. Beratung Komplexität ernst nehmen. Analyse, Einordnung und Umsetzung aus einer Hand, ohne Buzzwords.
HERO-03 Rechtsbündiger Hero Raster 12-Spalten · Inhalt in Spalte 6–12 Anordnung Alle Textelemente rechtsbündig, CTAs am rechten Rand; Blickrichtung von links einlaufend Einsatz Editorial-Anmutung, Abwechslung in langen Seitenfolgen; funktioniert mit Hintergrund-Motiv links. Portfolio Arbeiten mit Haltung. Ausgewählte Projekte aus Open Data, Civic Tech und Plattformbau.
1.2 Medien-Integration HERO-04 Split 50/50 · Medium rechts Raster 6/6 Anordnung Links: Label, H2, Lead, CTA · Rechts: Bild/Video/3D im Rahmen mit Hard-Shadow Einsatz Produkt- oder Service-Hero mit gleichgewichteter visueller Unterstützung. Plattformen Vom Konzept zur Lösung. Strategie, Kreation und Umsetzung.
Mehr → Medium (Bild / Video / 3D)
HERO-05 Split 50/50 · Medium links Raster 6/6 · gespiegelt Anordnung Links: Medium · Rechts: Textblock mit CTA; Lesefluss endet auf der Handlung Einsatz Wenn das Visual die Geschichte trägt (Produktfoto, App-Screen) und der Text nachzieht. Werkzeug DatenGraf Datenflüsse sichtbar machen, ohne Server, ohne Login.
zum Tool HERO-06 Asymmetrischer Split 60/40 Raster 7/5 (≈60/40) Anordnung Breite Textspalte links (H2 + Lead + 2 CTAs), schmales Hochformat-Medium rechts Einsatz Textlastige Angebote, bei denen das Bild nur akzentuiert; verhindert „leere“ Headline-Zeilen. Beratung, die Ressourcen respektiert. Tagessätze nach Gemeinwohl- oder Kommerz-Ausrichtung, klare Scopes, ehrliche Empfehlungen, auch wenn sie „kein Digital" lauten.
HERO-07 Hintergrund-Medium mit Panel Raster Full-Width Hintergrund · Panel max. 480 px Anordnung Medium füllt die Sektion; Textpanel (Surface + Hard-Shadow) liegt linksbündig darüber Einsatz Stimmungsvolle Einstiege (Foto/Video), ohne Lesbarkeit zu opfern, Kontrast kommt vom Panel, nicht vom Overlay-Filter. Workshops Lernen im Maschinenraum. Kompakte Formate für Teams, remote oder vor Ort.
Programm → Raster 6/6 · Karten absolut versetzt · 3 Ebenen Anordnung Text links; rechts drei überlappende Karten (KPI, Zitat, Badge) mit gestaffelten Offsets und Z-Ebenen Einsatz SaaS/Produkt-Heroes, die mehrere Beweispunkte gleichzeitig antesten (Zahl, Stimme, Feature). Wirkung, belegbar. Zahlen, Stimmen und Auszeichnungen direkt im Einstieg.
Loslegen → 97% Weiterempfehlung
Open Source First
1.3 Interaktive Heroes HERO-09 Hero mit Formular Raster 7/5 Anordnung Links Wertversprechen (H2 + 3 Checkpunkte), rechts Lead-Formular als Karte (2 Felder + Submit) Interaktion Fokus-Ring auf Feldern (Signal-Grün); Button-Hover mit Translate + Schattenwachstum Einsatz Lead-Generierung ohne Umweg, Conversion-Ziel direkt im Viewport. Erstgespräch sichern. 30 Minuten, unverbindlich konkrete Einschätzung keine Verkaufsshow
HERO-10 Hero mit Videoplayer Raster Full-Width · Player 16:9 unter der Headline Anordnung Zentrierte Headline + Sub; darunter Player-Fläche mit Play-Button (Signal-Quadrat) Interaktion Play-Klick startet Video/öffnet Lightbox; Hover skaliert den Button nicht, er verschiebt sich hart (Neo-Brutal) Einsatz Erklärvideos & Produkt-Demos als primärer Einstieg. In 90 Sekunden erklärt. Was Nozilla anders macht.
▶
Raster 6/6 · rechts Scroll-Snap-Karussell Anordnung Links statischer Claim; rechts horizontal snappende Slides (je Karte 78 % Breite) + Dot-Indikator Interaktion Scroll-Snap je Slide; Dots zeigen Position; optional Autoplay Einsatz Mehrere gleichrangige Botschaften/Referenzen im Einstieg rotieren lassen. Drei Wege zu uns. Beratung, Entwicklung oder Workshop.
Beratung Strategie & Einordnung
Entwicklung Prototyp bis Plattform
Workshops Wissen im Team verankern
HERO-12 Hero mit Produkt-Konfigurator Raster 6/6 · rechts Konfigurator-Karte Anordnung Links Nutzenversprechen; rechts Karte mit Auswahl (Select + Slider) und live berechnetem Preis Interaktion Jede Eingabe aktualisiert die Preisausgabe sofort (JS, data-calc) Einsatz Angebote mit variablem Umfang: Nutzer verankert sich selbst beim Budget. Workshop konfigurieren. Format wählen, Tage schieben, Richtpreis sofort sehen.
2 · Text-Bild- / Medien-Splits Die Arbeitspferde des Seitenaufbaus: alle sinnvollen Verhältnisse und Stapel-Reihenfolgen.
2.1 Zweispaltig SPLIT-01 50/50 · Bild links · Text rechts Raster 6/6 Anordnung Bild volle Spaltenbreite links; rechts H3 → Fließtext → Textlink Einsatz Standard-Erzählmodul; Bild gibt Kontext, bevor gelesen wird. Menschzentriert. Stakeholder und Nutzer*innen werden in alle Phasen einbezogen.
Mehr zur Methode → SPLIT-02 50/50 · Text links · Bild rechts Raster 6/6 · gespiegelt Anordnung Textblock zuerst im Lesefluss, Bild als Bestätigung rechts Einsatz Wenn die Aussage führt und das Bild belegt; Standard im Zickzack-Wechsel. Prototyping. Erlebbare Zwischenstände statt Konzeptpapier.
Beispiele → 2.2 Gestapelt (Grid-Iterationen) SPLIT-03 Text oben · Bild darunter Raster Full-Width · einspaltig Anordnung H3 + max. 46 rem Fließtext; darunter Bild in Contentbreite mit Rahmen/Schatten Einsatz Mobile-Default und ruhige Langform-Seiten; Bild als Kapitel-Abschluss. Erst verstehen, dann zeigen. Der Text erklärt die Idee, das Medium illustriert das Ergebnis.
Bild darunter
SPLIT-04 Bild oben · Text darunter Raster Full-Width · einspaltig Anordnung Bild als visueller Anker zuerst; H3 und Text folgen Einsatz Portfolio-/Case-Einstiege, bei denen das Ergebnis sofort wirken soll. Bild zuerst
Projekt Datenatlas Kartierung kommunaler Datenflüsse für drei Pilotstädte.
2.3 Asymmetrisch SPLIT-05 1/3 Bild · 2/3 Text Raster 4/8 Anordnung Schmales Bild/Icon-Feld links, breite Textspalte rechts (H4 + Absatz + Liste) Einsatz Icongestützte Erklärblöcke; das Original nutzt genau dieses Verhältnis (one-fourth/three-fourth gespiegelt). Open-Data-Beratung Identifikation, Aufbereitung und Bereitstellung von Datensätzen in maschinenlesbaren Formaten, samt nachhaltiger Strategie.
SPLIT-06 2/3 Text · 1/3 Bild Raster 8/4 (Original: three-fourth/one-fourth = 9/3) Anordnung Breiter Text links, kompaktes Bild rechts, die Leitform der Service-Seiten Einsatz Lange Erklärtexte mit visueller Randnotiz; verhindert Riesenbilder. Plattform-Strategie Erzählung, Technologien, Regeln, Kanäle, Kontexte, Dienste und Protokolle, als Strategie kombiniert.
2.4 Mehrspaltig SPLIT-07 3-spaltig alternierend Raster 4/4/4 Anordnung Spalten wechseln Medien-/Textstart: Bild+Text · Text+Bild · Bild+Text Einsatz Drei gleichrangige Angebote mit visueller Abwechslung statt Icon-Monotonie. Bild
Beratung Strategie & Reifegrad
Entwicklung Prototyp bis Plattform
Bild
Bild
Workshops Wissen verankern
SPLIT-08 4-spaltig alternierend Raster 3/3/3/3 Anordnung Vier Kacheln, Medienposition alterniert oben/unten je Spalte Einsatz Kompakte Feature-Übersichten am Seitenende; Rhythmus verhindert Rasterstarre. Raster 2 × (6/6) · gespiegelt gestapelt Anordnung Reihe 1: Bild links · Reihe 2: Bild rechts, fortlaufend alternierend Einsatz Lange Feature-Strecken; der Wechsel hält das Auge in Bewegung. Schritt eins Kontext analysieren.
Schritt zwei Prototyp testen.
SPLIT-10 Split mit Icon-Akzent Raster 6/6 · Icon überlappt die Fuge Anordnung Icon-Chip sitzt auf der Spaltengrenze und verklammert Text- und Bildhälfte Einsatz Wenn ein Merkmal (z. B. Open Source) beide Seiten inhaltlich verbindet. Offene Werkzeuge Alle Dienste bauen auf Open Source auf.
3 · Social Proof & Testimonials Kundenstimmen in allen Dichten, vom Einzelzitat bis zur Wall of Love. (Platzhalter-Personen.)
PROOF-01 Einzel-Portrait zentriert Raster Einspaltig · max. 40 rem mittig Anordnung Großes Avatar-Quadrat → Zitat (Display-Font) → Name/Rolle in Mono Einsatz Ein einziges starkes Zitat als Sektionsanker; maximale Glaubwürdigkeit pro Stimme. AM „Endlich eine Beratung, die auch mal von einem Projekt abrät."
A. Muster CDO · Beispielstadt
PROOF-02 Halb / Halb · zwei Portraits Raster 6/6 Anordnung Zwei gleich aufgebaute Zitat-Karten (Avatar links, Zitat + Person rechts) nebeneinander Einsatz Zwei Zielgruppen gleichzeitig adressieren (z. B. Verwaltung + NGO). BK B. Klein Referatsleitung
„Verständlich, auch für Nicht-Techniker*innen."
„Faire Konditionen für Gemeinwohl-Projekte."
PROOF-03 3er-Grid mit Logo Raster 4/4/4 Anordnung Karte: Zitat oben → Avatar + Name/Rolle → Logo-Chip unten; alle Karten gleiche Struktur Einsatz Der Standard für Referenz-Sektionen; drei Stimmen wirken kuratiert statt zufällig. „Klare Empfehlung für offene Daten."
LOGO
„Kulturdaten endlich offen."
LOGO
„Methodisch sattelfest."
LOGO
PROOF-04 4er-Grid kompakt Raster 3/3/3/3 Anordnung Reduzierte Karten: nur Avatar + einzeiliges Zitat + Name; keine Logos Einsatz Viele Stimmen auf wenig Raum, z. B. unter einer Preistabelle. PROOF-05 Testimonial-Slider Raster Full-Width · Scroll-Snap · Slides ≈ 78 % Anordnung Horizontal snappende Zitat-Karten + Dot-Navigation darunter Interaktion Scroll-Snap je Karte; Pfeile/Dots optional; auf Touch nativ wischbar Einsatz Viele Stimmen ohne Seitenlänge; bewusst eine Stimme pro Blick. „Schnell verstanden, sauber geliefert."
PROOF-06 Masonry / Wall of Love Raster CSS-Columns (3 → 2 → 1) · variable Kartenhöhen Anordnung Karten unterschiedlicher Länge fließen spaltenweise; kurze und lange Zitate mischen sich Einsatz Community-/Produktseiten mit vielen echten Stimmen; Unordnung ist hier Absicht. „Der Workshop hat unserem Team einen komplett neuen Blick auf unsere Datenlage gegeben, und einen umsetzbaren Plan."
„Faire Preise, klare Sprache."
„Von der Strategie bis zum Prototyp in sechs Wochen."
PROOF-07 Zitat + Logo-Leiste Raster Einspaltig Zitat · darunter Full-Width Logoreihe Anordnung Großzitat mittig; darunter horizontale Leiste aus Graustufen-Logochips Einsatz Ein Statement + Breite der Kundschaft in einem Modul; Logos stützen das Zitat. „Arbeitet auf Augenhöhe mit Verwaltung und Zivilgesellschaft."
Stadt A Museum B Uni C NGO D Land E
PROOF-08 Vorher / Nachher Raster 6/6 · zwei kontrastierende Panels Anordnung Links „Vorher“ (neutral), rechts „Nachher“ (Signal-Rahmen + Signal-Schatten); identische Binnenstruktur Einsatz Transformation belegen: Prozess, Redesign, Kennzahl, der Unterschied ist das Argument. Vorher 14 Excel-Listen, 3 Versionen, keine Zuständigkeit.
Nachher Ein Datenkatalog, klare Ownership, wöchentlich aktuell.
4 · Feature- & Inhalts-Präsentation Icon-Grids, Bento-Kacheln, Prozess-Schritte und Kennzahlen.
4.1 Icon-Boxen FEAT-01 Icon-Grid · Icon oben Raster 3 × auto-fit ≥ 180 px Anordnung Je Kachel: Icon (36 px) → H5 → Kurztext; linksbündig Einsatz Klassische Leistungsübersicht; schnell scanbar. Beratung Strategische Begleitung.
Entwicklung Konzept bis Betrieb.
Prototyping Erlebbare Zwischenstände.
FEAT-02 Icon-Grid · Icon links Raster 2 × auto-fit · Kachel intern 44 px / 1fr Anordnung Icon in fester linker Spalte, Titel + Text rechts daneben Einsatz Textlastigere Features; Zeilenhöhe bleibt kompakt. Open Data Kataloge, Portale, Lizenzen.
Beteiligung Formate für echte Mitsprache.
4.2 Bento-Grids FEAT-03 Bento · 1 Hauptkachel + Satelliten Raster 4-Spalten-Grid · Zeilenhöhe 92 px; Hauptkachel 2×2 Anordnung Große Kachel links oben (Kernangebot), kleinere 1×1/2×1 füllen den Rest Einsatz Ein dominantes Thema mit Nebenaspekten; moderne SaaS-Übersicht. Plattformbau Von Strategie bis Betrieb, das Kerngeschäft.
Open Source
DSGVO-fest
Workshops für Teams
FEAT-04 Bento · asymmetrisch 5 Kacheln Raster 4-Spalten-Grid; Mischung aus 2×2 · 1×2 · 2×1 · 1×1 Anordnung Hochkachel rechts bricht die Zeilenlogik; KPI- und Bildkacheln mischen sich Einsatz Wenn Inhalte unterschiedlicher Natur (Zahl, Bild, Text) gleichberechtigt sind. 120+ Projekte
Bonn & remote
KI-Toolkit Methode für Ideen ohne Tech-Hürde.
seit 2016
4.3 Timeline & Prozess FEAT-05 Timeline vertikal · linksbündig Raster Einspaltig · Linie links · Marker-Quadrate Anordnung Durchgehende 3 px-Linie; je Schritt Signal-Marker + Titel (Display) + Kurztext Einsatz Projektabläufe und Historien; klare Leserichtung von oben nach unten. Kickoff Ziele und Kontext klären.
Analyse Interviews, Daten, Systeme.
Prototyp Testbar in 2–4 Wochen.
FEAT-06 Timeline vertikal · zentriert Raster max. 34 rem mittig · Linie links der Inhalte Anordnung Wie FEAT-05, aber als schmale Mittelspalte gesetzt; wirkt editorialer Einsatz About-/Story-Seiten („Unsere Geschichte“) mit wenigen, gewichtigen Stationen. 2016, Gründung 2019, Fokus Open Data 2024, KI-Toolkit FEAT-07 Prozess horizontal · scrollbar Raster Flex-Reihe · Karten 200 px · Overflow-X Anordnung Nummerierte Schritt-Karten (Signal-Nummernquadrat + Titel + Text) in einer Wischreihe Interaktion Horizontales Scrollen/Wischen; optionale Snap-Punkte je Karte Einsatz Prozesse mit 4+ Schritten, die vertikal zu lang würden. 1 Anfrage Per E-Mail oder Termin.
2 Erstgespräch 30 Minuten, kostenlos.
3 Angebot Klarer Scope, klarer Preis.
4 Umsetzung Iterativ, transparent.
5 Übergabe Doku + Schulung.
4.4 Zahlen / KPIs Raster 4 × auto-fit Anordnung Je Zelle: große Mono-Zahl → Mono-Label darunter; kein Rahmen nötig Einsatz Beweis-Sektion („Zahlen, die zählen“); wirkt durch Typo, nicht Dekor. 120+ Projekte
9 Jahre
97% Empfehlung
100% Open Source
FEAT-09 KPI mit Icon darüber Raster 3 × auto-fit · Kacheln mit Rahmen Anordnung Icon (32 px) → Zahl → Label, alles linksbündig in einer Karte Einsatz Wenn KPIs thematisch unterscheidbar sein müssen (Icon = Kategorie). 38 Datenportale 2.400 Workshop-Gäste 54 Prototypen FEAT-10 KPI mit Text seitlich Raster Zahl + Fließtext im Baseline-Grid Anordnung Riesige Mono-Zahl links, erklärender Satz rechts auf gleicher Grundlinie Einsatz Eine einzige Kennzahl erzählerisch einbetten statt im Grid zu verstecken. 6 Wochen vom Kickoff bis zum ersten testbaren Prototyp, im Median über alle Plattformprojekte.
5 · Interaktive Komponenten Tabs, Akkordeons, Umschalter und Overlays, alle Demos sind funktional.
Raster Reiterleiste oben · Panel Full-Width darunter Anordnung Mono-Reiter mit aktivem Signal-Zustand; genau ein Panel sichtbar Interaktion Klick wechselt Panel (aria-selected); aktiver Tab bekommt Signal-Hintergrund + Hard-Shadow Einsatz 3–5 gleichrangige Inhaltsvarianten (z. B. Zielgruppen). Verwaltung NGO Unternehmen
Open-Government-Strategien, Datenkataloge, Beteiligung.
Faire Konditionen, Wirkung vor Umsatz.
Digitale Produkte mit Haltung.
INT-02 Tabs vertikal · Navigation links Raster 200 px Navigation / 1fr Inhalt Anordnung Reiter als linke Spalte gestapelt; Inhalt rechts Interaktion Wie INT-01; die vertikale Leiste skaliert besser mit langen Labels Einsatz 6+ Kategorien oder lange Bezeichnungen (Dokumentation, Einstellungen). INT-03 Tabs vertikal · Navigation rechts Raster 1fr Inhalt / 200 px Navigation Anordnung Gespiegelte Variante; Inhalt führt, Navigation folgt Interaktion Identisch zu INT-02 Einsatz Wenn der Inhalt primär ist und die Auswahl sekundär wirken soll. INT-04 Akkordeon Full-Width (FAQ) Raster Einspaltig · Einträge aneinandergesetzt Anordnung Frage als Summary-Zeile mit +/– rechts; Antwort klappt darunter auf Interaktion Natives details/summary; nur ein Eintrag muss nicht offen sein (unabhängig) Einsatz FAQ und Detailwissen, das die Seite nicht verlängern darf. Was kosten Ihre Dienste? Tagessätze nach Ausrichtung des Projekts, gemeinnützig oder kommerziell.
Arbeiten Sie remote? Ja, remote-first; vor Ort nach Bedarf.
Welche Tools setzen Sie ein? Grundsätzlich Open Source.
INT-05 FAQ 2-spaltig mit Medium Raster 5/7 · Bild links · Akkordeon rechts Anordnung Statisches Bild/Illustration links; rechts der Akkordeon-Stapel Einsatz FAQ mit Markenmoment; das Bild beantwortet die Stimmung, der Text die Fragen. Wie starten wir? Mit einem 30-Minuten-Erstgespräch.
Gibt es Festpreise? Für Workshops ja, Projekte nach Aufwand.
INT-06 Akkordeon im Karten-Design Raster Einspaltig · Einträge als separate Karten mit Schatten Anordnung Jeder Eintrag ist eine eigenständige Karte mit Abstand; offener Zustand hebt sich Einsatz Wenige, gewichtige Punkte (z. B. Leistungspakete) statt langer FAQ-Liste. Paket „Reifegrad" Analyse + Bericht + Roadmap in 3 Wochen.
Paket „Prototyp" Klickbarer Prototyp inkl. zweier Testrunden.
INT-07 Preis-Toggle monatlich/jährlich Raster Schalter mittig · 3 Preisspalten (Highlight mittig) Anordnung Toggle über der Tabelle; Preise wechseln je Zustand; empfohlene Spalte mit Signal-Rahmen Interaktion Checkbox toggelt .yearly auf dem Grid; Preise blenden hart um (kein Fade, Neo-Brutal) Einsatz SaaS-/Abo-Preise; Jahresrabatt sichtbar machen. INT-08 Modal · Drawer · Sticky-Bar Raster Overlay-Ebenen über dem Dokument Anordnung Center-Modal (dialog), Slide-Over-Drawer von rechts, Sticky-Bar am Container-Boden Interaktion Modal via showModal() mit Backdrop; Drawer/Scrim per Klassen-Toggle; Bar bleibt beim Scrollen unten haften Einsatz Bestätigungen (Modal), Kontextaufgaben ohne Seitenwechsel (Drawer), permanente Handlungsaufforderung (Bar). Modal öffnen Drawer öffnen
Scrollbarer Inhalt … die Leiste unten bleibt haften.
6 · Listen, Grids & Kataloge Karten-Anatomien, Vergleichstabellen und filterbare Übersichten.
GRID-01 Karte · Image-Top Raster 3 × auto-fit · Bild 16:9 oben Anordnung Bild randlos oben (Trennlinie), darunter Titel, Text, Preis/Meta Einsatz Produkt- und Blogkarten; der Shop nutzt exakt diese Anatomie. Bild
Design Thinking 2.399 € inkl. MwSt.
Bild
Rapid Prototyping 1.399 € inkl. MwSt.
GRID-02 Karte · Image-Left Raster Kachel intern 110 px / 1fr Anordnung Schmales Bild volle Kartenhöhe links, Inhalt rechts; Karten stapeln vertikal Einsatz Listenansichten (Suchergebnisse, Verzeichnisse) mit hoher Dichte. Bild
Werkzeugkasten Open Data Leitfäden, Checklisten und Vorlagen.
Bild
Civic-Tech-Radar Projekte aus der Community.
GRID-03 Karte · Hover-Overlay Raster 3 × auto-fit · Overlay absolut Anordnung Bild füllt die Karte; Titel + CTA liegen im Overlay, das erst bei Hover/Fokus erscheint Interaktion Overlay blendet bei :hover/:focus-within ein (Verlauf nach unten); Touch: dauerhaft sichtbar machen Einsatz Portfolio-Grids, wo das Bild allein wirken soll. GRID-04 Vergleichsmatrix mit Highlight Raster Tabelle · erste Spalte Kriterien · Highlight-Spalte Signal Anordnung Kriterien links, Anbieter als Spalten; ✓/– als Mono-Zeichen; eigene Spalte farblich markiert Einsatz „Wir vs. Andere“ oder Paketvergleich; Checkmark-Muster ist sofort lesbar. Kriterium Nozilla Agentur X Open Source ✓ – Festpreis-Workshops ✓ ✓ Abrät, wenn sinnlos ✓ –
GRID-05 Filter-Sidebar links + Grid Raster 200 px Filter / 1fr Ergebnis-Grid Anordnung Checkbox-Gruppen links (sticky-fähig); rechts Kartengrid mit Treffern Interaktion Filteränderung aktualisiert das Grid (hier statisch); aktive Filter als Chips über den Treffern Einsatz Kataloge ab ~12 Einträgen mit mehreren Facetten. GRID-06 Filter-Bar oben + Grid Raster Chip-Leiste Full-Width · Grid darunter Anordnung Filter als horizontale Chips (aktiv = Signal); Grid nutzt volle Breite Einsatz Wenige Facetten (1–2), mobile-freundlicher als eine Sidebar. Alle Workshops Tipps Tools
Eintrag A
Eintrag B
Eintrag C
Eintrag D
7 · Call to Action & Formulare Handlungsaufforderungen vom Banner bis zum mehrstufigen Formular.
CTA-01 Full-Width Banner zentriert Raster Full-Width · Inhalt mittig · max. 40 rem Anordnung Schwarzes Band; H3 (Paper-Farbe) → kurzer Satz → primärer Button Einsatz Seitenabschluss; der Kontrastblock stoppt den Scroll. CTA-02 Split-CTA · Text links · Formular rechts Raster 7/5 Anordnung Nutzenargument + Bulletpoints links; rechts kompaktes Inline-Formular (E-Mail + Button) Einsatz Newsletter/Lead-Capture mit Begründung statt nacktem Feld. Tipps & Kits abonnieren Einmal im Monat, kein Spam, jederzeit abbestellbar.
Raster Karte max. 420 px · versetzt über Sektionsgrenze Anordnung Karte mit Hard-Shadow „schwebt“ über dem Hintergrundwechsel; Titel + Button Einsatz Übergang zwischen zwei Sektionen mit einer klaren Handlung verbinden. Unsicher, wo anfangen? Der Reifegrad-Check gibt in 15 Minuten Orientierung.
Check starten → Raster Full-Width Leiste · position: sticky bottom Anordnung Schwarze Leiste: Botschaft links, Button rechts; haftet am Viewport-/Container-Boden Interaktion Erscheint nach Scroll-Schwelle; hier dauerhaft im Scroll-Container demonstriert Einsatz Lange Inhaltsseiten, auf denen das Conversion-Ziel nie außer Reichweite sein darf. Langer Artikelinhalt …
Workshop „Platform Design", nächster Termin im März Anfragen → CTA-05 Mehrstufiges Formular (Steps) Raster Einspaltig max. 32 rem · Fortschrittsbalken oben Anordnung Segmentierter Fortschritt (Signal = erledigt) → Schritt-Titel → Felder → Weiter/Zurück Interaktion „Weiter“ validiert nur den aktuellen Schritt; Fortschritt füllt sich segmentweise Einsatz Anfragen mit 5+ Feldern; Aufteilen senkt Abbruchquoten.
Schritt 2 von 3, Projektumfang
8 · Navigation & Footer Header- und Footer-Anatomien als Mock-Leisten. Die Live-Site nutzt NAV-01 + Megamenü und FOOT-01.
8.1 Header-Iterationen NAV-01 Split Nav · Logo links · Aktionen rechts Raster Logo / Links / CTA+Meta in einer Zeile; gestrichelte Abschlusslinie Anordnung Wortmarke links, Hauptlinks mittig-links, CTA + Sprach-/Theme-Schalter rechts Einsatz Der Nozilla-Standard; klarer F-Lesefluss, CTA immer sichtbar. Raster Linkgruppe links · Logo mittig · Linkgruppe rechts Anordnung Symmetrische Aufteilung um die zentrierte Wortmarke Einsatz Editorial/Boutique-Anmutung; funktioniert nur mit wenigen, kurzen Links. Arbeiten Themen nozilla. Über Kontakt
NAV-03 Sticky / Shrink Header Raster Wie NAV-01 · Höhe schrumpft nach Scroll Anordnung position: sticky; nach Scroll-Schwelle reduzierte Höhe + härterer Schatten Interaktion Beim Scrollen: Padding halbiert, Logo verkleinert; Zustand über .is-scrolled-Klasse Einsatz Lange Seiten, auf denen Navigation und CTA dauerhaft erreichbar bleiben. nozilla. … geschrumpfter Zustand
Raster Trigger in der Leiste · Panel Full-Width darunter · 2-spaltig Anordnung Panel mit Gruppen (Icon + Titel + Beschreibung + Pfeil-Links); Rest der Seite bleibt sichtbar Interaktion Öffnet bei Hover/Fokus; schließt bei Escape/Außenklick Einsatz Tiefe Informationsarchitekturen, live umgesetzt für Beratung/Entwicklung/Themen. nozilla. Themen ▾ Workshops
Offenheit Open Data · Open Source · Open Knowledge
Ethik Digitale Ethik · Nachhaltigkeit · Civic Tech 8.2 Footer-Iterationen 9 · E-Commerce & Produkt-Präsentation Galerien, Produktdetail-Splits, Checkout und Cross-Selling. Der Live-Shop nutzt SHOP-04 mit E-Mail-Anfrage statt Warenkorb.
9.1 Produkt-Galerien SHOP-01 Sticky Thumbnails links + Hauptbild Raster 64 px Thumbs / 1fr Hauptbild Anordnung Thumbnail-Spalte haftet beim Scrollen; Klick tauscht das Hauptbild Interaktion Aktives Thumb mit Signal-Rahmen; Hauptbild wechselt hart (kein Crossfade) Breakpoints Mobil: Thumbs als horizontale Reihe unter dem Hauptbild Einsatz Produkte mit 4+ Ansichten; Orientierung bleibt beim Scrollen erhalten. SHOP-02 Galerie-Karussell mit Zoom Raster Full-Width Slide 16:9 · Dots darunter Anordnung Ein Bild pro Slide, Scroll-Snap; Lupe/Zoom-Hinweis in der Ecke Interaktion Snap je Slide; Klick öffnet Zoom-Lightbox; Dots zeigen Position Breakpoints Identisch auf allen Breakpoints; Wischgesten auf Touch Einsatz Wenige, großformatige Produktbilder mit Detailzoom. SHOP-03 Galerie Grid 2×2 scrollbar Raster 2-Spalten-Bildraster · weiterscrollbar Anordnung Gleich große Kacheln ohne Hierarchie; Seite scrollt durch alle Ansichten Interaktion Hover zeigt Bildunterschrift; Klick öffnet Lightbox an dieser Position Breakpoints Mobil: 1 Spalte Einsatz Editorial-Shops (Mode, Möbel): Produkt als Bildstrecke. 9.2 Produktdetail (PDP) SHOP-04 PDP 50/50 · Bild / Kaufbox Raster 6/6 · Kaufbox als Karte Anordnung Bild links; rechts Titel → Preis (Mono) → Kurzfakten → primärer CTA + sekundärer CTA Interaktion CTA-Hover mit Translate; Menge über Stepper Breakpoints Mobil: Bild oben, Kaufbox darunter (Buy-Button im ersten Viewport halten) Einsatz Der Standard, live im Shop mit „Per E-Mail anfragen“ als CTA. Workshop Platform Design 7.890,00 € inkl. MwSt. 4–8 Personen · 2–3 Tage
SHOP-05 PDP 60/40 mit ausklappbaren Details Raster 7/5 · Detail-Akkordeons unter der Kaufbox Anordnung Größeres Medienfeld links; rechts Kaufbox + gestapelte details-Elemente (Inhalte, Ablauf, FAQ) Interaktion Akkordeons unabhängig; erster Eintrag standardmäßig offen Breakpoints Mobil: Akkordeons ersetzen Tab-Navigation vollständig Einsatz Erklärungsbedürftige Produkte, ohne die Seite zu verlängern. Inhalte Methoden, Material, Moderation.
Ablauf 2 Tage vor Ort oder 4 × ½ Tag remote.
9.3 Warenkorb & Checkout SHOP-06 Checkout 2-spaltig mit Sticky Summary Raster 3fr Formular / 2fr Zusammenfassung (sticky) Anordnung Adress-/Zahlfelder links in Abschnitten; rechts haftende Bestellübersicht mit Summe + CTA Interaktion Summary bleibt beim Scrollen sichtbar; Ändern-Links springen zum Abschnitt Breakpoints Mobil: Summary als einklappbares Panel über dem Formular Einsatz Mehrfeld-Checkouts: Gesamtsumme nie außer Sicht. SHOP-07 Warenkorb als Slide-Over-Drawer Raster Drawer 320 px von rechts · Scrim darunter Anordnung Positionsliste mit Mengen-Stepper → Zwischensumme → Checkout-CTA; Seite bleibt im Hintergrund Interaktion Öffnet beim „In den Warenkorb“; Escape/Scrim-Klick schließt; Mengenänderung aktualisiert Summe Breakpoints Mobil: volle Breite (85 vw) Einsatz Kauf fortsetzen ohne Seitenwechsel, Kontext bleibt erhalten. Warenkorb-Drawer öffnen Der Drawer legt sich von rechts über diese Seite.
SHOP-08 Cross-Sell · „Passend dazu“ + Bottom Bar Raster Horizontale Kartenreihe (180 px) · Sticky-Leiste am Boden Anordnung Nach dem Hauptprodukt: kompakte Zusatzkarten; die haftende Leiste wiederholt Preis + CTA Interaktion Reihe wischbar; Bar-CTA folgt dem Scroll Breakpoints Kartenreihe bleibt horizontal wischbar; Bar volle Breite Einsatz Warenkorbwert erhöhen, ohne die PDP zu überladen. 10 · Daten, Tabellen & Dashboards Tabellen-Dichten, KPI-Boards, Rechner und Matrizen.
DATA-01 Data Table · Dense vs. Spaced Raster Zwei identische Tabellen · Padding 4/8 px vs. 10/12 px Anordnung Mono-Header auf Alt-Fläche; Zeilentrenner hairline; Dichte über Padding-Token Breakpoints Mobil: horizontal scrollbar im eigenen Container Einsatz Dense für Werkzeug-Ansichten (viel Daten), Spaced für Lese-Ansichten. Dense Datensatz Format Haushalte CSV Bäume GeoJSON Radzählung API
Spaced Datensatz Format Haushalte CSV Bäume GeoJSON
DATA-02 Sticky Header + Sticky erste Spalte Raster Scroll-Container 220 px · thead und Spalte 1 haften Anordnung Kopfzeile haftet oben, Bezeichner-Spalte links; Kreuzungspunkt doppelt sticky Interaktion Beide Achsen scrollen; Orientierung bleibt immer erhalten Breakpoints Verhalten identisch auf allen Größen, genau dafür gebaut Einsatz Breite UND lange Tabellen (Matrix-Daten, Vergleiche über Jahre). Raster Zeilen als details-Grid (2fr/1fr/1fr/auto) Anordnung Summary-Zeile wie Tabellenzeile; Aufklappen zeigt Detailfläche auf Alt-Hintergrund Interaktion +/– rechts; mehrere Zeilen gleichzeitig offen erlaubt Breakpoints Mobil: Spalten stapeln in der Summary Einsatz Tabellen, deren Details die Spalten sprengen würden (Logs, Bestellungen). Open-Data-Portal 2024 live Stack: CKAN · Betrieb: kommunal · Betreuung: laufend.
KI-Toolkit 2025 live Kartenset + Methode + Train-the-Trainer.
DATA-04 KPI-Dashboard · Top-Cards + Diagramm Raster 4 KPI-Karten · darunter Chart Full-Width Anordnung Kennzahlen zuerst (Mono-Zahlen), das Diagramm liefert den Verlauf Interaktion Hover auf Balken zeigt Tooltip; Zeitraum-Schalter über dem Chart Breakpoints Mobil: KPI-Karten 2×2, Chart darunter Einsatz Reporting-Ansichten; erst Status, dann Trend. 33 Datensätze
1,2k Downloads
98% Uptime
12 Anfragen
DATA-05 Split 70/30 · Grafik + Live-Feed Raster 7fr Chart / 3fr Aktivitätsliste Anordnung Hauptdiagramm links; rechts chronologischer Feed mit Hairline-Trennern Interaktion Feed aktualisiert live (Polling/Socket); neue Einträge schieben von oben ein Breakpoints Mobil: Feed rutscht unter den Chart Einsatz Monitoring: Verlauf und Ereignisse gleichzeitig im Blick. 10:41 · Upload „Bäume 2025" 10:12 · Neue API-Anfrage 09:58 · Katalog-Sync ok 09:20 · Login Admin DATA-06 Interaktiver Rechner (Slider-Wizard) Raster Einspaltig max. 30 rem · Range + Live-Output Anordnung Label → Slider → berechnete Summe (Mono, groß); mehrere Schritte via CTA-05-Progress kombinierbar Interaktion input-Event aktualisiert die Summe sofort; Faktoren via data-Attribute Breakpoints Slider bleibt Full-Width; Ausgabewert groß darüber Einsatz Budget-Selbstverankerung, live im HERO-12 und als Standalone-Modul. DATA-07 Preismatrix mit Checkmarks & Highlight Raster Tabelle · Features als Zeilen · Pakete als Spalten · Highlight-Spalte Signal Anordnung Erste Spalte Feature-Namen; ✓/– Mono-Zeichen; empfohlene Spalte durchgängig getönt Breakpoints Mobil: Pakete als Karten untereinander (Tabelle bricht in Karten um) Einsatz Paketvergleich; das Checkmark-Muster verkauft die mittlere Spalte. Feature Basis Pro Team Beratungstage 1 2 4 Workshops – ✓ ✓ Prio-Support – ✓ ✓
11 · Content-Rich & Blog/Magazin Layouts für die Tipps-&-Kits-Welt: Artikel-Einstiege, Leseansichten, Magazin-Raster.
ED-01 Featured Article + Nebenartikel Raster 2fr Hauptartikel / 1fr Spalte mit 3 Mini-Artikeln Anordnung Links großes Bild + H3 + Teaser; rechts drei Zeilen à Thumbnail (72 px) + Titel Interaktion Ganze Karten klickbar; Hover unterstreicht Titel in Signal Breakpoints Mobil: Hauptartikel zuerst, Minis darunter Einsatz Blog-Übersichten: ein kuratiertes Stück führt, der Rest folgt kompakt. Aufmacher
Nachhaltige Websites erstellen Das Netz ist keine saubere Sache, was Webentwicklung beitragen kann.
ED-02 Artikel mit Sticky Table of Contents Raster 170 px TOC / Lesespalte max. 680 px Anordnung Inhaltsverzeichnis haftet links (aktiver Abschnitt markiert); Lesespalte bleibt schmal Interaktion Scroll-Spy hebt aktuellen Abschnitt hervor; Klick scrollt sanft Breakpoints Mobil: TOC als einklappbares Panel über dem Artikel Einsatz Lange Fachartikel und Dokumentation. Einleitung Werkzeuge Messung Fazit Einleitung Die Lesespalte bleibt bei ~680 px für optimale Zeilenlänge …
Werkzeuge Weiterer Inhalt, der am haftenden Verzeichnis vorbeiscrollt.
Noch mehr Text zum Scrollen … Absatz drei.
Absatz vier.
ED-03 Full-Bleed Media Breakout Raster Lesespalte 680 px · Medium bricht auf Containerbreite aus Anordnung Fließtext bleibt schmal; einzelne Medien ziehen per Negativ-Margin über die Spaltengrenze Breakpoints Mobil: Breakout = Viewportbreite Einsatz Atem-Momente in langen Texten; Karten, Diagramme, Fotostrecken. Schmaler Lesetext vor dem Ausbruch …
Full-Bleed-Medium (bricht aus der Lesespalte aus)
… und danach geht der Text schmal weiter.
ED-04 Magazin-Masonry Mix Raster CSS-Columns · Mischung aus Bildkarten und Zitatkarten Anordnung Bildlastige Karten und reine Textzitate fließen gemischt; keine Zeilenausrichtung Breakpoints 3 → 2 → 1 Spalten Einsatz Themen-Übersichten mit heterogenem Material (Tipps, Zitate, Kits). „Werkzeuge sind Haltung."
Checkliste Barrierefreiheit
ED-05 Author-Bio Card am Artikelende Raster Karte max. 560 px · Avatar links · Text rechts Anordnung Avatar-Quadrat, Name (Display), Rolle (Mono), Kurzbio + Kontaktlink Breakpoints Mobil: Avatar über dem Text Einsatz Vertrauensanker am Ende jedes Fachartikels. DP Damian Paderta Digitalberater Webgeograph & Digitalberater, Open Data, Civic Tech, Plattformen.
ED-06 Article Progress Bar Raster 8 px-Leiste · sticky am oberen Rand des Artikels Anordnung Signal-Balken wächst proportional zum Lesefortschritt von 0–100 % Interaktion scroll-Event → Breite = gelesener Anteil; hier statisch bei 62 % Breakpoints Identisch überall Einsatz Lange Artikel: Fortschritt motiviert zum Zuendelesen.
62 % gelesen, der Balken haftet im Original oben am Viewport.
12 · Special Effects, Overlays & Micro-Layouts Scroll-Inszenierungen und Overlay-Muster, sparsam eingesetzt, hart umgesetzt.
FX-01 Sticky Stacking Cards Raster Scroll-Container · Karten position:sticky mit gestaffelten top-Offsets Anordnung Jede Karte haftet 24 px unter der vorigen; beim Scrollen schiebt sich die nächste darüber Interaktion Reiner CSS-Effekt (sticky + top-Staffelung); kein JS nötig Breakpoints Identisch; Offsets ggf. kleiner Einsatz Schrittfolgen/Argumentketten mit Fokus auf genau einer Karte. 1 · Verstehen Scrollen Sie in diesem Rahmen ↓
2 · Prototypen
3 · Ausliefern
FX-02 Horizontal Scroll Section Raster Flex-Reihe 240 px-Panels · Scroll-Snap X Anordnung Panels reihen sich horizontal; Sektion signalisiert Wischbarkeit durch angeschnittenes letztes Panel Interaktion Snap je Panel; Fortschritts-Dots optional Breakpoints Auf Touch nativ wischbar; Desktop optional Scroll-Hijacking (sparsam!) Einsatz Galerien und Zeitreisen; bewusster Rhythmuswechsel im vertikalen Fluss. FX-03 Parallax Split-Screen Raster 1fr/1fr · Hälften mit gegenläufigem Scroll-Offset Anordnung Linke Spalte startet nach oben versetzt, rechte nach unten; beim Scrollen laufen sie gegeneinander Interaktion transform: translateY über Scroll-Position (rAF); prefers-reduced-motion respektieren Breakpoints Mobil: Effekt deaktivieren, normale Stapelung Einsatz Markenmomente zwischen Sektionen; maximal einmal pro Seite. Statische Vorschau, im Original laufen die Spalten beim Scrollen gegeneinander.
FX-04 Modal · Bottom Sheet · Slide-Over Raster Overlay-Ebenen: zentriert / unten / rechts Anordnung Alle drei nutzen denselben Scrim; Inhalt-Container unterscheidet nur die Andock-Kante Interaktion Escape & Scrim-Klick schließen; Fokus wird gefangen; Sheet unterstützt Wisch-zum-Schließen Breakpoints Desktop bevorzugt Modal & Drawer; Mobile bevorzugt Bottom Sheet Einsatz Modal = Entscheidung · Sheet = mobile Aktionen · Slide-Over = Kontextaufgabe. Center-Modal Bottom Sheet Slide-Over
FX-05 Notification Banner (Top/Bottom) Raster Full-Width-Leisten; oben Signal · unten Ink Anordnung Botschaft links, Aktion + Schließen rechts; Top-Banner schiebt Inhalt, Bottom-Banner überlagert Interaktion Schließen entfernt die Leiste (persistiert via localStorage); Erscheinen ohne Animation, hart Einsatz Hinweise (Cookie, Wartung, Aktion), die genau einmal stören dürfen. Diese Demo-Seite verwendet keine Cookies. ✕
13 · Mobile-First & Responsive Mobile Navigations- und Interaktionsmuster im Geräterahmen, plus Raster-Verhalten.
MOB-01 Bottom Navigation mit Center-Action Raster 5 gleiche Spalten · mittlere als Signal-Aktionsfläche Anordnung 4 Ziel-Icons + hervorgehobene Mittelaktion (z. B. Termin); Leiste haftet am Geräteboden Interaktion Aktiver Tab invertiert; Center-Button löst die Kernaktion aus Breakpoints Nur < 768 px; Desktop nutzt die Kopfnavigation Einsatz App-artige mobile Sites mit einer dominanten Aktion. Seiteninhalt
Inhalt scrollt hinter der Leiste.
🏠 🗂 ＋ 🛠 👤
MOB-02 Full-Screen Filter Overlay Raster Overlay füllt das Gerät; Ergebnis-CTA am Boden Anordnung Kopf mit Titel + Schließen; scrollende Filtergruppen; fixer „Ergebnisse zeigen“-Button unten Interaktion Öffnet aus der Filter-Bar; Auswahl zählt live im CTA hoch Breakpoints Nur mobil; Desktop nutzt GRID-05/06 Einsatz Kataloge auf Mobilgeräten, Filter braucht den ganzen Screen. Raster Karten 85 % Gerätebreite · Scroll-Snap zentriert Anordnung Angeschnittene Nachbarkarte signalisiert Wischbarkeit; Karte snappt mittig Interaktion Native Wischgeste; optional Tinder-Logik (wegwischen = verwerfen) Breakpoints Snap-Karussell mobil; Desktop als normales Grid Einsatz Workshop-/Produkt-Browsing auf dem Telefon. MOB-04 Responsive Grid-Breakpoints Raster Desktop 12 → Tablet 6 → Mobil 1–2 Spalten Anordnung Module belegen Spaltenspannen (z. B. 9+3 → 6+6 → gestapelt); Reihenfolge bleibt inhaltlich, nicht visuell Breakpoints ≥ 1024: 12 Sp. · 768–1023: 6 Sp. · < 768: 1–2 Sp. Einsatz Grundgesetz des gesamten Systems, alle obigen Layouts falten sich nach diesem Muster.
Desktop · 12
Tablet · 6
Mobil · 1–2 
38Datenportale
2.400Workshop-Gäste
54Prototypen