Zum Inhalt
← Rezepte
Alle Rezepte

Optik und Hörakustik: scharf sehen, gut hören

Augenoptiker / Optikerfachgeschäft / Kontaktlinsen-Institut / Hörakustiker / Optik und Akustik unter einem Dach (auch mit Filialen)

Zwischen Mode, Gesundheitshandwerk und Beratung: Verkauft werden der Termin für Sehtest oder Hörtest, Fassungen mit Marken und eine verständliche Rechnung mit Kassenanteil. Die Seite beginnt mit einem ruhigen Porträt im Passepartout, die Überschrift wird beim ersten Laden einmal scharf wie beim Sehtest. Danach Sehen und Hören als zwei Reiter, Termin mit Dauer und Preis je Leistung, Fassungen nach Form und Material, Kosten mit Beispielen, Werkstatt mit freiwilligen Richtpreisen, Team mit Meistertitel. Bodoni Moda für Überschriften, Mona Sans für Text, Fragment Mono für Messwerte (dpt, dB, mm). Papierweiß, Schildpatt und Tinte. Abgrenzung zu mode-beauty-kollektion (Kollektion und Kaufbox), praxis-gesundheit-ruhig (Behandlung) und luxus-manufaktur-stille (Manufaktur).

Bauplan tokens.css Alle Techniken

Schrift

Scharf sehen, gut hören

Zwischen Mode, Gesundheitshandwerk und Beratung: Verkauft werden der Termin für Sehtest oder Hörtest, Fassungen mit Marken und eine verständliche Rechnung mit Kassenanteil.

Augenoptiker

Headline
Bodoni Moda
Text
Mona Sans
Akzent
Fragment Mono

Farbe

  • #F4F5F3
  • #121417
  • #E8DED3
  • #1C2026
  • #2442A8
  • #5A5F67
  • #D3D6D2

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
Dauer
150 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 1000 (H1 wird scharf, Wörter mit 50 Versatz), 1200 (Masken-Reveal eines Fassungsbilds)

Aufbau der Seite

SignaturUnschärfe-Enthüllung (Blur-to-sharp) pro Wort

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Kleiner Abzug auf Fläche

  1. Termin (Sehtest, Brillenberatung, Kontaktlinsenanpassung, Kinder-Sehberatung, Hörtest, Hörberatung; je Leistung Dauer und Preis oder kostenlos; Hinweis „Kontaktlinsen vorher ablegen“; Buchungs-Widget erst nach Klick, Telefon daneben)Termin-Buchung per 2-Klick-Einbettung · Vorauswahl
  2. Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)Tabs und Segmente mit Pfeiltasten · AutomatischAkkordeon mit Höhenanimation auf auto · LeistungslisteLeistungsseite: Antwort zuerst · Praxis
  3. Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)Facettenfilter mit Ergebnisliste · SchubladeRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · ZoomProduktkarte mit Bildwechsel · BildzonenAktion mit Preisangabe nach § 11 PAngV · Zeitraum
  4. Was kostet eine Brille, was ein Hörgerät? (Beispielrechnungen mit Fassung, Glasart und Stärke; Hörgeräte mit Festbetrag der Kasse, Eigenanteil und gesetzlicher Zuzahlung; Stand-Datum; Ratenkauf nur mit allen Pflichtangaben)Vergleichstabelle mit fester Kopfzeile · PaketvergleichFinanzierung mit Pflichtangaben und Warnhinweis · Ratenzeile in der Kaufbox
  5. So läuft die Hörgeräte-Versorgung (Verordnung der HNO-Ärztin → Hörtest → Probetragen im Alltag → Feinanpassung → Nachsorge; Dauer je Schritt nur, wenn sie gehalten wird)Prozess-/Timeline-Sektion mit wachsender Linie
  6. Werkstatt und Service (Reparatur, Gläsertausch, Nachjustieren, Reinigung, Batterien und Zubehör; freiwillig Richtpreise typischer Reparaturen oder das Europäische Formular als Angebot)Reparatur-Richtpreise und Reparaturweg · Betrieb
  7. Team (Augenoptikermeister:in, Optometrist:in, Hörakustikmeister:in mit Foto, Schwerpunkt wie Kinder, Kontaktlinsen, Tinnitus, Sprachen)Team-/Über-mich-Layout mit Porträt-Interaktion · Raster
  8. Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Augenoptikermeisterin, Optometristin oder Hörakustikmeister mit Schwerpunkt wie Kinder, Kontaktlinsen oder Tinnitus, Sprachen und Termin bei dieser Person; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)Personen-Detailseite · Ärztin
  9. Stimmen (sachlich über Beratung und Service, nie über Heilwirkung; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · ReihePlattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
  10. Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; Karte per 2-Klick)Standortfinder als Liste · Nur ListeÖffnungszeiten mit Live-Status · KopfzeileKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  11. Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Optik, Akustik oder beidem, Bus und Rad, Parken und ehrlichen Zugangsangaben; nie dieselbe Seite mit getauschtem Ortsnamen)Standort-Detailseite · Filiale
  12. Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)Kaufbox mit Farb- und Größenwahl · SchnellkaufEU-Hinweis zur Gewährleistung und Garantie-Label · Footer-Link und SeiteWiderrufs- und Kündigungs-Button · Richtig
  13. Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Termin oder Shop nach BFSG prüfen lassen; besonders auf Schriftgröße, Kontrast und Untertitel achten)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Erster Bildschirm: Porträt im Passepartout, H1, zwei gleichwertige Wege Sehtest und Hörtest, Telefon. Bei reiner Optik oder reiner Akustik nur der eine Weg.
  • Signatur (blur-reveal): Die H1 der Startseite wird beim ersten Laden einmal scharf (Wörter, Blur 10 px → 0, 1000 ms, 50 ms Versatz). Nur dort, nur einmal je Sitzung, nie auf anderen Überschriften. Bei reduzierter Bewegung steht sie scharf.
  • Termin: Jede Leistung mit Dauer und Preis oder „kostenlos“; das Buchungs-Widget lädt erst nach Klick, daneben Telefon. Keine Gesundheitsangaben als Pflichtfeld; Refraktionswerte und Audiogramme nie per Formular-Upload.
  • Kosten ehrlich: Brillenpreis aus Fassung, Gläsern und Stärke als Beispielrechnung mit Stand-Datum; bei Hörgeräten Festbetrag der Krankenkasse, Eigenanteil und gesetzliche Zuzahlung je Gerät mit Stand und Quelle; Kassenleistung für Brillengläser nur mit den aktuellen Voraussetzungen. Festbetrag, Eigenanteil und Zuzahlung bei Hörgeräten sowie die Voraussetzungen für den Zuschuss zu Brillengläsern liefert der Kunde mit Stand und Quelle (Krankenkasse, Innung); bis dahin markierter Platzhalter, auch mit Beispieldaten nie erfundene Beträge. Vom Kunden prüfen lassen.
  • Heilmittelwerbegesetz: Hörsysteme und Kontaktlinsen sind Medizinprodukte; keine Heilversprechen, keine Aussagen zur Heilung von Tinnitus oder Schwerhörigkeit, Stimmen nur über Beratung und Service. Kostenlose Sehtests und Hörtests sachlich nennen, ohne Druck. Vom Kunden prüfen lassen.
  • Preise und Aktionen: Gesamtpreis inkl. MwSt.; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); Ratenkauf nur mit effektivem Jahreszins und Warnhinweis direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).
  • Marken: Hersteller-Logos und Kollektionsfotos nur mit Erlaubnis und Bildrechten.
  • Werkstatt: Richtpreise und das Europäische Formular für Reparaturinformationen sind freiwillig (reparatur-richtpreise, Variante betrieb); wenn genutzt, 30 Tage bindend.
  • Typografie: Bodoni Moda als Display nur für die H1 (ab 2.75rem, opsz an die Größe gekoppelt, nie fest 96); H2 in Bodoni Moda nur mit opsz 24 bis 36 und wght 600, darunter Mona Sans. Haarlinien zerfallen auf dem Bildschirm unter etwa 40 px (Jury Optiker-Probe 05.11.2026). Fragment Mono für jede Messgröße und Termindaten; Fließtext Mona Sans mindestens 17 px.
  • Pflichtangaben (Leitfaden 8a): Impressum mit Handwerkskammer und Meister:in (Augenoptiker und Hörakustiker sind zulassungspflichtige Handwerke); bei Warenverkauf an Verbraucher der EU-Gewährleistungshinweis; beim Online-Shop Widerruf (hygienisch versiegelte Kontaktlinsen nach dem Öffnen ausgenommen, § 312g Abs. 2 Nr. 3 BGB) und GPSR-Angaben. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.
  • Seitenwechsel als Blende (seitenwechsel-wachsende-form, Variante klickpunkt, 800 ms hin mit cubic-bezier(0.76, 0, 0.24, 1) als --ease-form, 700 ms zurück mit der weicheren cubic-bezier(0.45, 0, 0.55, 1)): der Kreis öffnet sich am angeklickten Fassungsbild und schließt sich beim Zurück wieder dorthin. Kein Blur im Wechsel; die Unschärfe bleibt der einmalige Moment der H1.
Bild und Ton
  • Licht: Weiches Seitenlicht, neutral, Haut natürlich, keine Reflexe auf den Gläsern.
  • Ausschnitt: Porträt Kopf und Schultern, Fassung als Freisteller von vorn und seitlich, Werkstatt im Detail.
  • Personen: Ja: Team und Modelle mit Einwilligung; Kundschaft nur mit Erlaubnis.
  • Formate: 4:5, 1:1, 3:2
  • Nicht: Keine Sehtafeln, keine Augen in Großaufnahme, keine Hörgerät-Stockfotos mit Senioren-Klischee.
  • Anrede: Sie
  • Sätze: Ruhig und genau: Leistung, Dauer, Preis, was danach passiert.
  • Haltung: Kultiviert und zugewandt, ohne Fachjargon; Fachwort in Klammern.
  • Tonproben: Sehtest mit Beratung: 45 Minuten, kostenlos., Probetragen im Alltag, zwei Wochen, danach entscheiden Sie.
  • Nicht schreiben: „Nie wieder schlecht hören“, „perfektes Sehen“, „Tinnitus weg“, „Top-Marken zu Top-Preisen“.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Text über Spalte 1 bis 5, Passepartout-Foto über 6 bis 12 mit 48 px Weiß ringsum; mobil Foto oben im Passepartout, Text darunter.
  • Hero-Bild: Ruhiges Porträt mit Brille oder Hörsystem, 4:5.
  • Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5rem), Bodoni Moda 400 opsz 96, wird einmal scharf; kein Label darüber.
  • Handlung: „Sehtest buchen“ (Tintenblau, Pfeil-Pille) und „Hörtest buchen“ (Kontur) nebeneinander, darunter Telefon als tel:-Link.
  • Zusatz: Nächste freie Zeit als Text in Fragment Mono, nur wenn das Terminsystem sie liefert.
  • Sektionsabstand: clamp(72px, 9vw, 144px)
  • Dichte: luftig
  • Raum: Viel Weiß um jedes Produktfoto (mindestens 48 px), Messwert-Tabellen dagegen dicht mit 8 px Zeilenabstand.
  • Spalten: 12
  • Maximale Breite: 1320px
  • Raster: Hero 5/7 (Text links, Passepartout rechts). Fassungen als 4er-Raster mit viel Abstand, mobil 2. Kosten als Tabelle über 8 Spalten.
  • Radius klein: 2px
  • Radius groß: 2px
  • Schatten: keiner
  • Form: Kanten fein wie ein Brillenrand; nur die Haupt-Pille (pfeil-icon-button, Variante tausch) ist rund.
Vorbilder