Ein Besucher landet auf deiner Startseite und sieht genau einen Ausschnitt: das erste Sichtfeld, bevor er scrollt. Diesen Ausschnitt nennt das Fach Hero-Section, und er entscheidet, ob der Besucher bleibt oder den Zurück-Button drückt.
In dieser Lektion baust du eine Hero von Grund auf. Baustein für Baustein, an einem durchgehenden Beispiel, bis du am Ende jede Hero prüfen, verbessern oder abnehmen kannst.
Kurzantwort
Was ist eine Hero-Section?
Die Hero-Section ist der oberste Bereich einer Webseite, den ein Besucher ohne Scrollen sieht: Headline, Subline, Call-to-Action, Visual und die Navigation darüber. Ihr Job ist es, drei Fragen sofort zu beantworten: Was gibt es hier, für wen ist es, was soll ich als Nächstes tun.
Eine gute Hero ist kein Kunstwerk, sondern Handwerk mit klarer Bauanleitung. Wer die Bausteine und ihre Rangfolge kennt, kann sie selbst bauen oder einem Designer präzise sagen, was fehlt.
📌 Für wen ist das relevant: Für Selbstständige und KMU-Verantwortliche, die eine Startseite oder Landingpage bauen, beauftragen oder abnehmen und wollen, dass sie Anfragen bringt.
- Du baust die Hero der Schreinerei Brenner Schritt für Schritt von der leeren Fläche bis zur Abnahme
- Jeder Baustein wird an einer Frage gemessen: Bringt das den Besucher zur Anfrage?
- Am Ende steht eine Checkliste, mit der du jede Hero in wenigen Minuten abnimmst
Das lernst du in dieser Lektion
Du kannst jede Hero, auch eine fremde, mit dem Drei-Fragen-Test in drei Sekunden prüfen.
Du kannst die Bausteine deiner Hero benennen, ihre Rangfolge festlegen und Überflüssiges streichen.
Du kannst Headline, CTA-Text und Layout-Muster für deinen eigenen Fall nach Handwerksformeln festlegen.
Du kannst eine fertige Hero am Handy abnehmen oder einem Designer präzise sagen, was fehlt.
Inhalt
01 ·
Der Job der Hero: drei Fragen in drei Sekunden
Auch diese Lektion arbeitet an der Schreinerei Brenner, der frei erfundenen Handwerksfirma aus dem Kurs. Sie baut Einbauschränke und Möbel nach Maß, und ihre Website hat genau eine Aufgabe: Beratungsanfragen bringen. In der Lektion zu den Design-Prinzipien hast du ihre Hero aufgeräumt, hier baust du sie von Grund auf.
Der Job jeder Hero lässt sich als drei Fragen formulieren, die ein Besucher beim Ankommen stellt: Was gibt es hier, für wen ist es, und was soll ich als Nächstes tun?
Die drei Sekunden dafür sind eine Handwerks-Faustregel und kein Messwert, wie überhaupt alle Regeln dieser Lektion Handwerkskonvention sind und keine Naturgesetze. Sie beschreiben die Größenordnung, in der Besucher über Bleiben oder Gehen entscheiden: nicht nach gründlichem Lesen, sondern nach einem kurzen Blick. Wer eine der drei Fragen offen lässt, verliert genau die Besucher, die nicht bereit sind zu suchen, und das sind die meisten.
Sieh dir dazu zwei Fassungen der Brenner-Hero an. Beide sind sauber gestaltet, aber nur eine besteht den Test.
Schaubild: der Drei-Fragen-Test an zwei Brenner-Varianten. Variante A ist nicht hässlich, sie ist stumm.
Das ist der Kern dieser Lektion: Eine Hero scheitert selten am Geschmack, sondern fast immer an einer unbeantworteten Frage. Variante A hat ein schönes Foto und eine freundliche Begrüßung, aber ein Besucher, der Brenner nicht kennt, erfährt nichts. Variante B beantwortet alle drei Fragen, bevor er auch nur scrollt.
Der Test funktioniert bei jeder Website, nicht nur bei deiner eigenen. Öffne eine Seite, zähl innerlich bis drei und prüf, welche der drei Fragen du beantworten kannst. Warum Besucher so ungeduldig scannen statt zu lesen, hast du in der Lektion zu den Usability-Grundlagen gesehen, die Hero ist der Ort, an dem sich das am härtesten auswirkt.
💡 Praxis-Tipp
Mach den Drei-Fragen-Test heute an deiner eigenen Startseite. Öffne sie im Handy, schau drei Sekunden auf das erste Sichtfeld und beantworte laut: Was gibt es hier, für wen, was soll ich tun?
Noch ehrlicher wird es mit einer Person, die deine Firma nicht kennt: Zeig ihr die Seite kurz, nimm das Handy weg und lass sie die drei Fragen beantworten. Jede Frage, die sie nicht beantworten kann, ist deine Aufgabenliste für den Rest dieser Lektion.
💡 Merke
Die Hero schuldet dem Besucher drei Antworten: Was, für wen, was jetzt. Alles, was in der Hero steht, muss einer dieser Antworten dienen. Was keiner dient, konkurriert mit ihnen um Aufmerksamkeit und gehört tiefer auf die Seite oder ganz gestrichen.
02 ·
Die Bausteine und ihre Rangfolge
Bevor du eine Hero baust, brauchst du ihre Teileliste. Sie ist überschaubar: eine Headline, eine Subline, ein primärer Call-to-Action, ein zweiter Weg für Noch-nicht-Bereite, ein Visual und eine Zeile mit Vertrauens-Elementen wie Bewertungssternen, Kundenlogos oder Siegeln. Darüber sitzt die Navigation, die streng genommen zur Seite gehört, aber im ersten Sichtfeld mitspielt.
So sieht die fertige Brenner-Hero mit allen Bausteinen aus. Die Nummern begleiten dich durch den Rest der Lektion, denn jede der folgenden Sektionen baut einen dieser Bausteine.
Schaubild: die Anatomie der Brenner-Hero. Sieben Bausteine, und jeder hat genau einen Job.
Wichtiger als die Teileliste ist die Rangfolge, denn sie entscheidet, was bei Platzmangel gewinnt. Die Handwerksregel lautet: erst Botschaft, dann Handlung, dann Beweis, dann Schmuck. Eine Hero ohne Foto funktioniert, eine Hero ohne verständliche Headline nicht.
| Rang | Baustein | Job im ersten Sichtfeld |
|---|---|---|
| 1. Botschaft | Headline und Subline | Beantworten Was und Für wen, ohne sie ist alles andere sinnlos |
| 2. Handlung | Primärer CTA und zweiter Weg | Beantworten Was jetzt, für Bereite und Noch-nicht-Bereite |
| 3. Beweis | Vertrauens-Elemente | Machen die Botschaft glaubwürdig: Sterne, Logos, Siegel |
| 4. Schmuck | Visual und Gestaltung | Unterstützen die Botschaft, dürfen aber nie gegen sie gewinnen |
Mit dieser Rangfolge kannst du auch streichen. Ein Slider mit fünf wechselnden Botschaften, ein Video, das automatisch startet, drei Siegel und zwei Buttons: All das sind Bausteine ohne klaren Rang, die gegeneinander kämpfen. Prüf jedes Element mit zwei Fragen, nämlich welcher der drei Antworten es dient und auf welchem Rang es steht: Zweimal keine Antwort heißt streichen.
ℹ️ Woher der Name kommt
Der Begriff Hero stammt aus der Werbegrafik: Das größte, wichtigste Bild einer Anzeige hieß dort Hero Image, das Heldenbild. Im Webdesign wanderte der Name auf den obersten Seitenbereich, der ohne Scrollen sichtbar ist; dafür liest du auch “above the fold” oder “über der Falz”, geerbt von der Zeitung, deren obere Hälfte am Kiosk sichtbar gefaltet lag. In dieser Lektion bleiben wir beim deutschen Bild: das erste Sichtfeld.
03 ·
Die Headline: Nutzen statt Begrüßung
Die Headline ist der wichtigste Satz deiner Website, denn sie trägt zwei der drei Antworten: Was gibt es hier und für wen ist es. Genau deshalb ist der häufigste Headline-Fehler so teuer: die Begrüßung.
“Willkommen bei Schreinerei Brenner” beantwortet keine der drei Fragen. Den Firmennamen sieht der Besucher schon im Logo, und dass er willkommen ist, setzt er voraus. Der wichtigste Satz der Seite ist damit verschenkt, und die Antworten muss der Besucher weiter unten suchen, falls er das tut.
Die Handwerksformel für eine tragfähige Headline hat drei Zutaten: Ergebnis plus Zielgruppe oder Ort plus Unterscheidung. Das Ergebnis sagt, was der Kunde am Ende bekommt. Zielgruppe oder Ort sagen, für wen es gedacht ist, und die Unterscheidung sagt, warum hier und nicht beim Wettbewerber.
Nicht immer passen alle drei Zutaten in eine Zeile, und das müssen sie auch nicht. Die Subline ist dafür da, die Details zu tragen, damit die Headline schlank bleibt. Sieh dir an, wie die Brenner-Headline in drei Stufen vom Verschenkten zum Tragfähigen wird.
Schaubild: die Headline-Stufen der Schreinerei Brenner. Von Stufe zu Stufe beantwortet derselbe Platz mehr Fragen.
Geh die Stufen einmal bewusst durch. Stufe 1 ist die Begrüßung, die nichts sagt. Stufe 2 nennt immerhin die Kategorie, aber “Partner rund ums Holz” könnte alles heißen, vom Brennholzhandel bis zum Dachstuhl.
Stufe 3 arbeitet mit der Formel: “Einbauschränke und Möbel nach Maß” ist das Ergebnis, “aus Ludwigsburg” der Ort, und die Unterscheidung “aus einer Hand” wandert in die Subline, damit die Headline nicht überlädt. Ein Besucher, der genau das sucht, weiß nach einer Zeile, dass er richtig ist. Und einer, der etwas anderes sucht, geht sofort, was ebenfalls ein Gewinn ist, denn er hätte nie angefragt.
💡 Praxis-Tipp
Bau heute deine eigene Headline nach der Formel um. Schreib drei Spalten auf: Was bekommt mein Kunde am Ende (Ergebnis), wer ist er oder wo sitzt er (Zielgruppe/Ort), was mache ich anders als der Wettbewerb (Unterscheidung).
Setz dann Ergebnis und Zielgruppe oder Ort in die Headline und die Unterscheidung in die Subline. Wenn deine aktuelle Headline mit “Willkommen”, “Herzlich” oder deinem Firmennamen beginnt, ist dieser Umbau der wirksamste Handgriff dieser Lektion.
04 ·
CTA und zweiter Weg
Der Call-to-Action, kurz CTA, ist die Antwort auf die dritte Frage: Was soll ich als Nächstes tun. Die Handwerksregel dazu ist streng: ein primärer CTA pro Hero. Zwei gleichwertige Buttons stellen dem Besucher eine Entscheidungsfrage, die er nicht beantworten will, und die häufigste Reaktion auf so eine Frage ist gar keine.
Der Buttontext selbst ist ein Mikro-Versprechen: Er sagt, was nach dem Klick passiert. “Absenden” und “Mehr erfahren” versprechen nichts, sie beschreiben eine technische Aktion oder vertagen die Entscheidung. “Termin anfragen” verspricht ein Ergebnis, und genau daran erkennt der Besucher, ob sich der Klick lohnt.
| Sagt nichts | Sagt, was passiert | Warum es besser trägt |
|---|---|---|
| “Absenden” | “Termin anfragen” | Der Besucher weiß, was er nach dem Klick bekommt |
| “Mehr erfahren” | “Referenzen ansehen” | Benennt das konkrete Ziel statt eines vagen Weiter |
| “Kontakt” | “Unverbindlich beraten lassen” | Nimmt die Hürde: unverbindlich statt verpflichtend |
| “Jetzt klicken” | “Angebot anfordern” | Beschreibt das Ergebnis, nicht die Mausbewegung |
Bleibt die Frage nach den Besuchern, die noch nicht so weit sind. Wer die Schreinerei Brenner gerade erst entdeckt hat, will vielleicht erst Arbeiten sehen, bevor er einen Termin anfragt, und ohne Alternative verlässt er die Seite. Dafür gibt es den zweiten Weg: “Referenzen ansehen” als schlichter Textlink neben oder unter dem Button.
Entscheidend ist die Gewichtung der beiden Wege, und hier greift die Hierarchie-Regel aus der Lektion zu den Design-Prinzipien: Beim Blinzeln muss der primäre Button gewinnen. Der Button trägt Fläche und Farbe, der zweite Weg bleibt ein unauffälliger Textlink. Sobald beide gleich laut sind, hast du wieder zwei Buttons und damit wieder die Entscheidungsfrage, die niemand beantwortet.
💡 Merke
Ein Button, ein Versprechen, ein leiser zweiter Weg. Der primäre CTA sagt als Mikro-Versprechen, was nach dem Klick passiert, und gewinnt beim Blinzeln gegen alles andere. Der zweite Weg fängt die Noch-nicht-Bereiten als Textlink auf, ohne mit dem Button zu konkurrieren.
Für die Conversion heißt das: Der CTA ist die Stelle, an der aus einem Besucher eine Anfrage wird. Jede Unklarheit im Buttontext und jede Konkurrenz um den Klick kostet genau an diesem Nadelöhr.
05 ·
Das Visual: zeigen, was der Kunde bekommt
Das Visual beantwortet keine eigene Frage, es beglaubigt die Antworten der anderen Bausteine. Daraus folgt die Handwerksregel: Zeig das Ergebnis oder den Kontext deiner Arbeit, nicht Dekoration. Für die Schreinerei Brenner heißt das ein fertiger Einbauschrank beim Kunden oder der Meister am Werkstück, nicht ein Sonnenuntergang über Holzlatten.
Dabei schlägt das echte Foto fast immer das gekaufte. Generische Stockbilder, der Händedruck im Anzug oder das lachende Callcenter-Headset, erkennt jeder Besucher sofort als Platzhalter, und ein Platzhalter beglaubigt nichts. Ein ehrliches Foto aus dem eigenen Betrieb darf sogar etwas weniger perfekt sein, denn es zeigt, dass es dich wirklich gibt.
Eine Illustration ist dann die bessere Wahl, wenn es schlicht nichts zu fotografieren gibt, etwa bei Software oder abstrakten Dienstleistungen. Und in einem Fall ist gar kein Bild die richtige Entscheidung: wenn du nur ein schlechtes hättest. Eine zentrierte Hero ohne Visual wirkt professioneller als jede Hero mit erkennbarem Stockfoto.
Für alle Fälle gilt eine Grenze aus der Hierarchie: Das Bild darf nicht gegen die Headline gewinnen. Beim Blinzeln muss zuerst die Botschaft herausstechen und dann der Button, das Bild stützt beide, ohne sie zu übertönen.
Text auf Bild braucht eine Kontrastfläche
Sobald Text direkt auf einem Foto liegt, entsteht ein Lesbarkeitsproblem, denn ein Foto hat helle und dunkle Stellen zugleich. Die handwerkliche Lösung ist eine Kontrastfläche: ein halbtransparentes dunkles Overlay über dem Bild oder eine einfarbige Fläche hinter dem Text.
Hier greift der einzige normierte Wert dieser Lektion, den du aus der Lektion zu den Design-Prinzipien kennst: Die WCAG verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen und 3:1 für großen Text. Ein weißer Schriftzug auf einem hellen Werkstattfoto reißt diesen Wert, mit Overlay besteht er.
Schaubild: Text auf Bild ohne und mit Overlay. Die Kontrastfläche kostet Bildbrillanz und kauft dafür Lesbarkeit, und dieser Tausch lohnt immer.
Vier Layout-Muster und wann welches passt
Aus Bausteinen und Bild ergibt sich die Frage der Anordnung, und dafür gibt es im Handwerk vier Grundmuster. Du musst keines erfinden, du musst nur das passende wählen.
Schaubild: die vier Layout-Muster als Miniaturen. Jedes ist bewährt, keines ist per se das beste.
Muster 1, Text links und Bild rechts, ist der Standard für Dienstleister mit zeigbarem Ergebnis, und genau deshalb wählt es die Schreinerei Brenner. Die Leserichtung trifft zuerst die Botschaft, dann stützt das Foto sie. Muster 2, zentriert ohne Bild, ist die richtige Wahl, wenn kein gutes Foto existiert oder die Botschaft allein tragen soll.
Muster 3, das vollflächige Bild mit Overlay, lebt von starker Fotografie und passt zu Gastronomie, Hotels oder Architektur, wo die Atmosphäre selbst das Angebot ist. Muster 4 zieht das Anfrageformular direkt ins erste Sichtfeld und gehört auf Seiten, deren einziger Zweck die Anfrage ist, typischerweise Landingpages für Kampagnen. Für eine Startseite, die auch informieren soll, ist es meist zu fordernd.
Für die Conversion heißt das: Das Visual entscheidet mit, ob der Besucher der Botschaft glaubt, und das Layout-Muster entscheidet, ob sie ihn überhaupt erreicht. Beides sind Wahlentscheidungen nach Kriterien, keine Geschmacksfragen.
06 ·
Mobile zuerst prüfen
Die meisten deiner Besucher sehen die Hero zuerst auf einem Handy, und dort ist das erste Sichtfeld ein schmaler Ausschnitt von etwa 375 Pixeln Breite. Auf dieser Fläche zählt jede Entscheidung doppelt, denn was am Desktop nebeneinander passt, muss mobil untereinander und schiebt sich dabei gegenseitig aus dem Sichtfeld.
Daraus folgt die zentrale Handwerkskonvention für die mobile Hero: Headline und primärer CTA müssen ohne Scrollen sichtbar sein. Das ist keine Naturkonstante, aber der geteilte Standard des Fachs, denn eine Hero, deren Handlungsaufforderung erst nach dem Scrollen auftaucht, beantwortet die dritte Frage im entscheidenden Moment nicht.
Der häufigste Täter ist das Bild. Wandert das Desktop-Layout ungeprüft aufs Handy, schiebt sich das Foto zwischen Headline und Button und drückt den Button unter die Falz. Die handwerkliche Reihenfolge für schmale Bildschirme lautet deshalb: Headline, Subline, Button, und das Bild wandert unter den Text.
Schaubild: dieselbe Brenner-Hero auf 375 Pixel Breite. Zwischen links und rechts liegt nur die Reihenfolge der Bausteine.
Zwei Handgriffe gehören mobil noch dazu. Der Button braucht Daumengröße, also eine Fläche, die ein Daumen sicher trifft, ohne zu zielen. Und die Navigation faltet sich in ein Menü-Symbol zusammen, damit sie der Botschaft keinen Platz wegnimmt.
Wie eine Seite technisch dafür sorgt, dass sich das Layout je nach Bildschirmbreite umbaut, behandelt die Lektion zum Responsive Design. Hier geht es um die Abnahme-Perspektive: Du musst nicht bauen können, was dort erklärt wird, aber du musst am eigenen Handy prüfen können, ob es funktioniert.
💡 Praxis-Tipp
Nimm deine Hero heute am eigenen Handy ab. Öffne deine Startseite, ohne zu scrollen, und prüf drei Dinge: Sind Headline und Button vollständig sichtbar, triffst du den Button mit dem Daumen beim ersten Versuch, und ist der Text ohne Zoomen lesbar?
Wiederhol den Blick einmal im Querformat und einmal mit schlechtem Licht draußen. Was diesen Zwei-Minuten-Test nicht besteht, besteht auch beim echten Besucher nicht, denn der testet unter genau diesen Bedingungen.
Für die Conversion heißt das: Mobil entscheidet sich, ob deine Hero überhaupt gesehen wird, wie du sie geplant hast. Eine Desktop-Abnahme allein nimmt die Minderheit der Besucher ab.
07 ·
Die Brenner-Hero komplett und die Abnahme-Checkliste
Damit ist die Brenner-Hero fertig gebaut, und du kennst jetzt jeden Baustein aus der Nähe. Scroll noch einmal zum Anatomie-Schaubild in Sektion 2 und lies es neu: Die Headline trägt Ergebnis und Ort nach der Formel, die Subline die Unterscheidung, der Button ein Mikro-Versprechen, der Textlink den zweiten Weg, das Foto zeigt das Ergebnis, und die Sterne-Zeile beglaubigt alles. Kein Element ist Dekoration, jedes hat seinen Rang.
Was dir jetzt noch fehlt, ist das Werkzeug für den Ernstfall: die Abnahme. Ob du selbst gebaut hast oder einen Entwurf von einer Agentur bekommst, du gehst dieselben Tests in derselben Reihenfolge durch. Jeder Test stammt aus einer Sektion dieser Lektion, und jeder dauert unter einer Minute.
| Test | So prüfst du | Bestanden, wenn |
|---|---|---|
| 1. Drei-Fragen-Test | Drei Sekunden aufs erste Sichtfeld schauen, am besten durch eine unbeteiligte Person | Was, für wen und was jetzt sind ohne Scrollen beantwortet |
| 2. Headline-Probe | Headline isoliert vorlesen: Beginnt sie mit Begrüßung oder Firmenname? | Sie nennt Ergebnis plus Zielgruppe oder Ort, die Subline trägt die Details |
| 3. Blinzel-Test | Augen zusammenkneifen oder Zoom auf 25 Prozent stellen | Erst die Headline sticht heraus, dann der eine primäre Button |
| 4. Button-Probe | Buttontext isoliert lesen: Sagt er, was nach dem Klick passiert? | Ein Mikro-Versprechen statt “Absenden”, daneben höchstens ein Textlink als zweiter Weg |
| 5. Bild-Probe | Fragen: Zeigt das Visual Ergebnis oder Kontext, und liegt Text auf dem Bild? | Kein erkennbares Stockfoto, und Text auf Bild hat eine Kontrastfläche |
| 6. Handy-Abnahme | Seite am eigenen Handy öffnen, nicht scrollen | Headline und Button liegen über der Falz, der Daumen trifft den Button sicher |
Dieselbe Liste ist dein Feedback-Werkzeug gegenüber einem Designer. Statt “die Hero gefällt mir nicht” sagst du, welcher Test scheitert: “Beim Blinzeln gewinnt das Foto gegen die Headline” oder “Am Handy liegt der Button unter der Falz”. Das ist präzise, prüfbar und lässt die gestalterische Lösung beim Profi, der sie finden soll.
💡 Merke
Abnahme heißt testen, nicht gefallen. Eine Hero ist fertig, wenn sie alle sechs Tests besteht, nicht wenn sie allen im Raum gefällt. Scheitert ein Test, benennst du ihn, und genau das unterscheidet eine Abnahme von einer Geschmacksrunde.
Experten-Tipp aus der Agentur
Nimm eine Hero nie zuerst am großen Bildschirm ab, sondern am Handy, und zwar mit der Version, die wirklich live ist, nicht mit dem Designer-Entwurf. Zwischen Entwurf und Live-Seite verschieben sich Bilder, Zeilenumbrüche und die Falz, und genau dort sterben die Anfragen. Erst wenn die mobile Hero alle Tests besteht, lohnt sich der Blick auf den Desktop.
Pascal Cabitza
Geschäftsführer Ostend Digital
Eine Grenze der Checkliste gehört dazu: Sie prüft, ob die Hero handwerklich richtig gebaut ist, nicht, ob sie tatsächlich mehr Anfragen bringt. Das zeigt erst die Messung an der echten Seite, und das Handwerkszeug dafür liefert die Lektion zur Conversion-Optimierung. Die Checkliste sorgt dafür, dass du dort mit einer Hero antrittst, die keine vermeidbaren Fehler mitbringt.
08 ·
💡 Recap
Hero-Section in 30 Sekunden:
- Drei Fragen, drei Sekunden: Die Hero beantwortet Was gibt es hier, für wen ist es und was soll ich als Nächstes tun. Jedes Element, das keiner Antwort dient, fliegt raus
- Rangfolge der Bausteine: erst Botschaft (Headline und Subline), dann Handlung (CTA und zweiter Weg), dann Beweis (Vertrauens-Elemente), dann Schmuck (Visual)
- Headline-Formel statt Begrüßung: Ergebnis plus Zielgruppe oder Ort plus Unterscheidung, und die Subline trägt die Details, die die Headline schlank halten
- Ein Button, ein Versprechen: Der Buttontext sagt, was nach dem Klick passiert, der zweite Weg bleibt Textlink und der Button gewinnt beim Blinzeln
- Visual als Beweis: Ergebnis oder Kontext statt Stockfoto, Text auf Bild braucht eine Kontrastfläche, und das Layout-Muster folgt aus Bildmaterial und Seitenzweck
- Mobile zuerst abnehmen: Headline und CTA über der Falz, Buttons in Daumengröße, und die Abnahme läuft über die sechs Tests der Checkliste, nicht über Geschmack
09 ·
Selbstcheck: kannst du das anwenden?
Du öffnest die Website eines Wettbewerbers: großes Stimmungsfoto, Logo, darunter “Herzlich willkommen auf unserer Webseite”. Wie prüfst du die Hero, und was diagnostizierst du?
Mit dem Drei-Fragen-Test: drei Sekunden hinschauen und prüfen, ob Was, für wen und was jetzt beantwortet sind. Hier bleibt alles offen, denn das Stimmungsfoto beglaubigt nichts Konkretes und die Begrüßung sagt weder Angebot noch Zielgruppe noch nächsten Schritt. Die Diagnose lautet also nicht “unschön”, sondern “stumm”, und genau das ist die Lücke, die du auf deiner eigenen Seite besser machst.
Deine Hero enthält einen Slider mit drei wechselnden Botschaften, ein automatisch startendes Video, zwei gleich große Buttons und drei Zertifikats-Siegel. Was streichst du, und wonach entscheidest du?
Nach der Rangfolge: erst Botschaft, dann Handlung, dann Beweis, dann Schmuck. Der Slider verstößt gegen die Botschafts-Ebene, weil drei wechselnde Aussagen keine ist, also wird daraus eine feste Headline mit Subline, und von den zwei Buttons bleibt einer als primärer CTA, der andere wird Textlink. Das Video verliert den Autostart oder verschwindet aus dem Sichtfeld, und von den drei Siegeln bleibt höchstens das stärkste in der Vertrauens-Zeile.
Die Headline eines Malerbetriebs lautet “Willkommen bei Malerbetrieb Kern”. Bau sie nach der Handwerksformel um.
Die Formel lautet Ergebnis plus Zielgruppe oder Ort plus Unterscheidung. Ein Umbau wäre etwa “Fassaden und Innenräume, frisch gestrichen in Esslingen und Umgebung”, und die Unterscheidung wandert in die Subline, zum Beispiel “Mit Festpreis-Angebot vor Arbeitsbeginn”. Der Firmenname muss nicht in die Headline, denn er steht bereits im Logo direkt darüber.
Dein Anfrage-Button heißt “Absenden”, daneben steht gleich groß ein zweiter Button “Unsere Geschichte”. Was änderst du, und warum?
Zwei Dinge: Text und Gewichtung. “Absenden” beschreibt eine technische Aktion statt eines Mikro-Versprechens, also wird daraus etwa “Termin anfragen” oder “Angebot anfordern”. Und “Unsere Geschichte” darf als zweiter Weg bleiben, aber als schlichter Textlink, denn zwei gleich laute Buttons stellen eine Entscheidungsfrage, auf die die häufigste Antwort keine ist.
Am Desktop sieht deine neue Hero gut aus, aber am Handy schiebt das Bild den Button aus dem ersten Sichtfeld. Wie nimmst du ab, und was sagst du dem Designer?
Du nimmst am eigenen Handy ab, mit der Live-Seite und ohne zu scrollen, und stellst fest: Test 6 der Checkliste scheitert, der Button liegt unter der Falz. Dem Designer sagst du genau das, plus die handwerkliche Richtung: Auf schmalen Bildschirmen kommen Headline, Subline und Button zuerst, das Bild wandert unter den Text. Damit hast du ein prüfbares Problem benannt und die gestalterische Lösung bei ihm gelassen.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (3 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 1.4.3 Contrast (Minimum): Kontrastverhältnis mindestens 4,5:1 für normalen Text und 3:1 für großen Text, Stufe AA (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das sind die einzigen normierten Zahlenwerte dieser Lektion, hier als Rückgriff für Text auf Bildern. Quellentyp: Richtlinie, keine Interessenlage
- Alle übrigen Regeln dieser Lektion, darunter der Drei-Fragen-Test samt Drei-Sekunden-Rahmen, die Bausteine-Rangfolge, die Headline-Formel, die Ein-CTA-Regel, die Layout-Muster und die Falz-Konvention für mobile Sichtfelder: verbreitete Handwerkspraxis des Webdesigns und der Conversion-Optimierung, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als Faustregeln und Konventionen formuliert, nicht als Messwerte
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma, alle genannten Orte und Angebotsdetails sind Beispielinhalte. Alle sechs Schaubilder sind eigene Darstellungen, Ostend Digital, Stand 08/2026
Du willst eine Hero, die alle sechs Tests besteht und Anfragen bringt?
Wir bauen dein erstes Sichtfeld nach genau diesem Handwerk, von der Headline-Formel bis zur mobilen Abnahme, und begründen dir jede Entscheidung an der Aufgabe deiner Seite.
