Melta
Blog
Startseite gestalten: was oben steht und was darunter
Eine Startseite gestalten heisst sortieren und nicht schmücken: oben steht, was du für wen machst und was der nächste Schritt ist, darunter stehen die Belege. Wo diese Seite im ganzen Ablauf sitzt, zeigt die [Anleitung vom ersten Inhalt bis zum Livegang](/blog/website-erstellen-anleitung).
Startseite gestalten: der Haken zuerst
Die Startseite ist die Seite, auf der die wenigsten Leute lange bleiben. Jemand kommt aus der Suche, überfliegt den oberen Teil und entscheidet in wenigen Sekunden, ob er weiterliest oder zurückgeht. Eine Startseite gestalten heisst darum sortieren.
Der Fehler sitzt fast immer ganz oben. Dort liegt ein breites Bild, darüber ein Satz, der genauso zu einer Versicherung passen würde, und darunter drei Kacheln mit Qualität, Erfahrung, Service. Wer so ankommt, weiss danach nicht, was er hier bestellen kann und wo er das tut.
Die Probe dauert eine Minute. Zeig den oberen Teil jemandem, der deinen Betrieb nicht kennt, und lass ihn sagen, was du machst und für wen. Kommt keine klare Antwort, liegt es nicht an den Farben.
Was gehört auf eine Startseite?
Sechs Bausteine, von oben nach unten. Jeder hat ein Anzeichen, an dem du merkst, dass er fehlt.
| Baustein | Was drinsteht | Woran du merkst, dass er fehlt |
|---|---|---|
| Erste Zeile | was du machst, für wen, in welchem Gebiet | der Satz ganz oben passt auf jede Branche |
| Nächster Schritt | Termin, Anfrage oder Bestellung, deutlich benannt | der Weg zur Anfrage steht irgendwo im Fliesstext |
| Leistungen | die Arbeit in Kundenworten, kurz aufgezählt | dort stehen Lösungen, Angebote und Konzepte |
| Belege | eigene Fotos, Namen, Orte, abgeschlossene Aufträge | überall Bildmaterial, das der Mitbewerber auch hat |
| Häufigste Rückfrage | Gebiet, Wartezeit, Preisrahmen, Ablauf | im Postfach kommt immer dieselbe Frage an |
| Fussbereich | Kontakt, Öffnungszeiten, Pflichtangaben | unten steht nur eine Telefonnummer |
Die Startseite trägt nicht alles. Sie beantwortet die erste Frage und schickt weiter. Welche Unterseiten dahinter nötig sind, entscheidest du vorher beim Festlegen der Struktur. Was auf den einzelnen Seiten an Text steht, zeigen die Texte für Startseite, Leistungen und Kontakt.
Startseite gestalten: wie füllst du den oberen Teil?
Ein Satz, ein Weg, ein Bild. Mehr passt oben nicht hin, ohne dass etwas davon untergeht.
Der Satz nennt die Arbeit und die Kundschaft: Dachdeckerei für Flach- und Steildächer im Rheintal. Fahrschule für Auto und Roller in Chur, mit Prüfungsterminen ab nächster Woche. Wer ihn liest, weiss, ob er richtig ist. Ein Anspruch wie "Partner für individuelle Lösungen" leistet das nicht, weil er bei jedem zweiten Betrieb genauso dasteht.
Der Weg darunter ist eine einzige, benannte Handlung. Termin anfragen, Rückruf bestellen, Preisliste ansehen. Zwei gleich grosse Knöpfe nebeneinander teilen die Aufmerksamkeit und lassen den Besucher wählen, statt ihn zu führen.
Das Bild zeigt deine Arbeit und keine Stimmung. Ein fertiges Dach, der eigene Laden, die Werkbank, die Leute, die nachher am Telefon sind. Ein wechselnder Bilderreigen mit Schriftzügen darin fällt hier durch. Er lädt langsam, auf dem Handy bleibt vom Text ein Rest, und gelesen wird meist nur das erste Bild.
Welche Startseite meinst du eigentlich?
Der Begriff heisst nicht überall dasselbe, und die Suche danach führt auf sehr verschiedene Bildschirme. Kurz sortiert:
| Wo | Was dort die Startseite ist | Worauf es dort ankommt |
|---|---|---|
| Eigene Website | die Seite unter deiner Adresse | Antwort oben, ein benannter Weg zur Anfrage |
| WordPress | in den Lese-Einstellungen wählst du eine feste Seite statt der Beitragsliste | die feste Seite braucht denselben Aufbau wie jede andere Startseite |
| SharePoint | die aus Webparts zusammengesetzte Seite einer Intranet-Site | oben das, was das Team täglich sucht, nicht das Organigramm |
| Confluence | die Übersichtsseite eines Bereichs | Einstieg in die Dokumentation statt gesammelter Links |
| Moodle | die Seite der Lernplattform mit den Kursen | Kurse finden, ohne vorher zu suchen |
| iPhone und iPad | der Home-Bildschirm mit Symbolen und Widgets | Häufiges auf die erste Seite, der Rest in die App-Mediathek |
| Firefox | die Seite beim Start und in neuen Fenstern, einstellbar unter Startseite | eine Adresse, die du wirklich täglich brauchst |
| Google als Startseite setzt du in denselben Einstellungen des Browsers | trägt nur, wenn du vom Start weg suchst | |
| PowerPoint | die Titelfolie | Thema, Anlass, Name, sonst nichts |
Der Rest dieses Textes geht um die erste Zeile der Tabelle, also um die Startseite deiner eigenen Website.
Farben, Schriften und Bilder ohne Bastelei
Gestaltung fängt beim Aufbau an und hört bei den Farben auf, nicht umgekehrt. Steht die Reihenfolge, brauchst du wenig: eine Grundfarbe für Flächen und Text, eine Signalfarbe für den Knopf, eine Schrift für Überschriften und eine für den Fliesstext.
Die Signalfarbe verdient Zurückhaltung. Wenn drei Elemente auf der Startseite in derselben kräftigen Farbe leuchten, führt keines mehr. Reservier sie für die eine Handlung, die du willst, und lass Kontaktangaben und Fussbereich ruhig aussehen. Welche Töne sich daneben vertragen und wie du prüfst, ob Text darauf lesbar bleibt, zeigt der Text darüber, wie du eine Farbpalette findest, die überall hält.
Bei Bildern zählt das Gewicht so viel wie das Motiv. Ein Foto direkt aus dem Handy ist um ein Vielfaches grösser als nötig, und auf einer Startseite liegen davon meist mehrere übereinander. Skalier sie auf die Breite, in der sie angezeigt werden, und gib jedem Bild einen Alternativtext, der sagt, was darauf zu sehen ist.
Startseite gestalten für kleine Bildschirme
Auf dem Handy steht alles untereinander, was am grossen Bildschirm nebeneinander lag. Aus drei Spalten werden drei Blöcke, und was in der dritten Spalte stand, rutscht weit nach unten. Die Reihenfolge deiner Bausteine entscheidet also, was jemand am Telefon überhaupt sieht.
Drei Dinge fallen auf kleinen Bildschirmen zuerst durch. Ein Bild mit eingebautem Text, weil die Schrift darin nicht mitwächst. Eine Tabelle mit vielen Spalten, weil sie seitlich aus dem Bild läuft. Und Knöpfe, die so dicht beieinanderliegen, dass der Daumen den falschen trifft.
Prüf die Seite nicht nur im schmalen Browserfenster, sondern auf einem Gerät, das du wirklich benutzt, und unterwegs statt im eigenen WLAN. Wie du dabei vorgehst und welche Breiten sich lohnen, steht in der Anleitung für jede Bildschirmbreite.
Wer die Startseite nach dem Livegang pflegt
Eine Startseite altert schneller als der Rest. Öffnungszeiten, Preise, Termine, das Team, die Aktion vom letzten Frühling stehen gern zuoberst, und alles davon stimmt irgendwann nicht mehr. Wer die Seite baut, hat dieses Thema am Tag des Livegangs noch nicht.
Klär vorher zwei Dinge. Wer darf den Text oben ändern, und wie lange dauert das. Läuft jede Zeile über eine Anfrage bei einer Agentur, bleibt die veraltete Zeile stehen, weil sich der Aufwand für einen Satz nicht lohnt. Kommst du selbst ins System, brauchst du eine Stelle, an der dieser Satz steht, und nicht drei.
Bei Melta laufen solche Änderungen nach dem Livegang über einen Chat, und Farben und Schriften sind ohne Neubau änderbar, was die Seite zur Marke im Produkt beschreibt. Der Bau selbst dauert bis zu 24 Stunden. Wo dieser Schritt zwischen Inhalten, Bau und Livegang sitzt, ordnet die Anleitung für den gesamten Ablauf ein.
FAQ
Wie lang darf eine Startseite sein?
So lang, bis die erste Frage beantwortet und der Weg zur Anfrage benannt ist. Alles, was danach noch kommt, gehört meist auf eine eigene Seite und wird von der Startseite aus verlinkt.
Wie oft muss ich die Startseite neu gestalten?
Immer dann, wenn sich eine Angabe darauf ändert: Öffnungszeiten, Preise, Zuständigkeit, Gebiet. Ein fester Termin dafür hilft, etwa eine kurze Durchsicht zu Beginn jedes Quartals.
Brauche ich für die Startseite eigene Fotos?
Ja, zumindest für die Arbeit selbst und für die Personen. Gekaufte Bilder wirken auf einer Startseite austauschbar, weil dieselben Motive bei anderen Betrieben derselben Branche stehen.
Was gehört nicht auf die Startseite?
Alles, was erst nach der Entscheidung interessiert: die lange Firmengeschichte, das vollständige Leistungsverzeichnis, die Rechtstexte. Die stehen besser auf eigenen Seiten, verlinkt aus dem Fussbereich.
Startseite gestalten: die Reihenfolge, die hält
Erst die Antwort, dann der Beleg, dann der Weg. Diese Reihenfolge trägt auf jedem Bildschirm und überlebt jeden Geschmackswechsel bei Farben und Schriften.
Wenn du unsicher bist, ob deine Seite das schafft, nimm die Probe von weiter oben und schreib mit, was dein Testleser antwortet. Weicht die Antwort von dem ab, was du verkaufst, ändere zuerst den Satz ganz oben und nicht das Bild darunter.
Themen: Startseite, Website erstellen, Webdesign, Inhalte
Quellen
Weiterlesen
Beschreib dein Produkt - den Rest übernimmt Melta.
Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.
Frühzugang sichern