Freelancer: Stille Visitenkarte
Freelance-Designer, Interaction-Designer, Einzelberater mit Portfolio
Eine schmale Lesespalte, ein einleitender Satz statt Hero und Bewegung im 100-ms-Bereich. Die Qualität zeigt sich in Details wie Laufweite, Ziffern, Fokus und Kopier-Feedback, nicht in Effekten. Gebaut wie die Seiten von Paco Coursey, Emil Kowalski und Rauno Freiberg: Grotesk für alles, eine Serif-Kursive als Stimme, Mono für Metadaten.
Schrift
Stille Visitenkarte
Eine schmale Lesespalte, ein einleitender Satz statt Hero und Bewegung im 100-ms-Bereich.
Freelance-Designer, Interaction-Designer, Einzelberater mit Portfolio
- Headline
- Host Grotesk
- Text
- Host Grotesk
- Akzent
- Newsreader
Farbe
- #fcfcfc
- #0b0b09
- #646464
- #e8e8e8
- #f0f0f0
- #2f5bea
Bewegung
- Dauer
- Hover/Farbe 80–160, Transform 200–240, Einblendungen 320–480, nie über 500 außer Theme-Wechsel
Aufbau der Seite
SignaturGestaffelte Einblendung per sibling-index()
Hero–
- Intro-Satz (ersetzt den Hero)Gestaffelte Einblendung per sibling-index()
- Projekte / ArbeitenProjektindex als Liste mit Hover-Bildvorschau
- Angebot / Leistungen (was ich mache, für wen, wie man anfragt)Akkordeon mit Höhenanimation auf auto · FAQ Fahrschule
- Schreiben / NotizenEditorial-/Magazin-Layout · Magazin
- Über mich / JetztTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
- Stimmen von KundenTestimonials neu gedacht · Ein großes Zitat
- Kontakt (E-Mail mit Kopier-Feedback, Verfügbarkeit)Kopieren-FeedbackKontakt- und Anfrageformular als eigene Sektion · Satz-Formular
Nicht verwenden
- Smooth Scroll mit Lenis die Seite wird gelesen; Trägheit stört beim Lesen und ist bei keiner der drei Seiten im Einsatz
- Übergroßer Schrift-Hero (randlos eingepasste Wortmarke) widerspricht der leisen Haltung; die Referenzen beginnen mit Namen oder Satz in Textgröße
- Kontextueller Cursor (wächst, dockt an, zeigt Label) , cursor-follower-lerp, magnetische-elemente – Inszenierung statt Präzision
- Prozent-Zähler-Preloader (0 bis 100) und jede Art Preloader – die Seite ist klein und soll sofort stehen
- Marquee-Laufband (optional scroll-gekoppelt) laut und repetitiv, bricht die Lesespalte
- Inter als Hauptschrift – Paco nutzt sie, sie steht aber auf der Verbotsliste (KI-Standardlook); Host Grotesk stattdessen
Regeln
- Eine Spalte, max. 640px breit, linksbündig; Seite max. 1072px.
- Hero ist ein Satz in Textgröße: Name, Rolle, Arbeitgeber/Kunden, Ort, mit 1–2 kursiv gesetzten Wörtern in Newsreader.
- Nur zwei Gewichte (400/500); Hierarchie über Grauwert und Abstand, nicht über Größe.
- Jede Interaktion bekommt einen Zustand: Hover 80–160 ms, Fokus-Ring sichtbar, E-Mail-Adresse mit Kopier-Feedback.
- Jahreszahlen und Daten in Tabellenziffern, rechtsbündig in Listen.
- Dark Mode gleichwertig mitgestalten (Paco: zwei Textfarben-Token), Umschalten per View Transition.
- Bilder nur in Projektseiten oder als Hover-Vorschau; Startseite funktioniert als reiner Text.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum auch als Freelancer (geschäftsmäßiges Angebot) und Datenschutzerklärung; Kundenprojekte und Logos nur mit Freigabe; Arbeiten aus Anstellung nur mit Erlaubnis des Arbeitgebers – vom Kunden prüfen lassen.
Bild und Ton
- Licht: Neutral, Screenshots und Prototyp-Videos scharf auf neutralem Grund; Dark Mode mitgedacht.
- Ausschnitt: Ausschnitt einer echten Oberfläche, auf die Interaktion gezoomt.
- Personen: Höchstens ein Porträt auf der Info-Seite.
- Formate: 16:10, 4:3, 1:1
- Nicht: Keine Bilder auf der Startseite außer als Hover-Vorschau, keine Device-Mockups, keine Stock-Arbeitsplätze.
- Anrede: du
- Sätze: Ich-Form, ganze Sätze in Textgröße, ein bis zwei kursive Wörter als Stimme. Listen knapp mit Jahr.
- Haltung: Leise und genau. Die Leser:in wird selten angesprochen; bei Beratung für Firmen Sie verwenden.
- Tonproben: Ich gestalte Oberflächen für Werkzeuge, die man jeden Tag benutzt., Schreib mir, wenn du an etwas Ähnlichem arbeitest.
- Nicht schreiben: „Passionate Designer“, Skill-Balken in Prozent, „Ich brenne für …“, Logo-Wände ohne Kontext.
Hero, Raum und Form
- Hero-Raster: Eine Spalte, 640px, linksbündig; kein eigener Hero-Block.
- Hero-Bild: Kein Bild.
- Überschrift: clamp(1.25rem, 2vw, 1.5rem), Host Grotesk 500, Zeilenhöhe 1.4, als ganzer Satz oben links.
- Handlung: Kein CTA-Paar: E-Mail-Adresse mit Kopier-Feedback (kopieren-feedback) und ein Textlink zu den Arbeiten.
- Zusatz: Der Satz erscheint zeilenweise gestaffelt (gestaffelte-einblendung); 1 bis 2 Wörter in Newsreader Italic; Ort und Rolle in #646464.
- Sektionsabstand: clamp(48px, 6vw, 80px)
- Dichte: dicht
- Raum: Dichter Rhythmus in einer schmalen Spalte: Zeilen 20 bis 32 px (Paco), Listeneinträge 12 px, Abschnitte 48 bis 80 px. Ruhe entsteht durch den breiten Rand, nicht durch große Sprünge.
- Spalten: 1
- Maximale Breite: 640px (Spalte), Seite 1072px
- Raster: Eine Spalte, linksbündig. Jahreszahlen in Listen rechtsbündig in Tabellenziffern. Projektseiten dürfen Bilder bis 1072px zeigen.
- Radius klein: 6px
- Radius groß: 8px
- Schatten: keiner; Hover nur über Fläche #f0f0f0
- Form: Konturpille für den Kontakt (pfeil-icon-button, Variante seitenwechsel), 6 px für Hover-Flächen und Kopier-Feedback, 8 px für Vorschaubilder.