Design & Aufbau

So wird deine Webseite richtig modern

Du brauchst keinen Designer, um eine moderne, professionelle und ansprechende Webseite zu gestalten.

Mit Battery Pages reicht es, wenn du ein paar Grundregeln beachtest – besonders im Hero-Bereich, dem wichtigsten Abschnitt deiner Seite.

1. Der Hero-Bereich – der erster Eindruck zählt

Der Hero-Bereich ist das Erste, was deine Besucher sehen – und oft auch das Letzte, wenn er langweilig oder nichtssagend ist.

Nutze diesen Bereich, um sofort klarzumachen, wer du bist, was du machst und was der Besucher tun soll.

Was gehört in den Hero-Bereich?

Das richtige Bild oder Hintergrund

• Eigene Bilder wirken echt und vertrauenswürdig
  → z. B. du bei der Arbeit, dein Laden, dein Team, dein Produkt
• Hintergrundfarbe oder Farbverlauf: Ideal bei Text-lastigem Hero
• Optional: Video als Hintergrund
  → Nur wenn hochwertig & ruhig (z. B. Drohnenflug, Werkstatt, Naturaufnahme)

Wichtig: Der Text im Hero muss immer gut lesbar sein – setze bei Bedarf einen Farbverlauf über das Bild oder achte auf ausreichend Kontrast.

Überschrift

Sage in einem Satz, was du tust, für wen du es tust und wo.

Beispiele:

• „Photovoltaik & Wallboxen für Privathaushalte – im Raum Rhön“
• „Tattoo-Studio in Schwäbisch Hall – sauber, individuell, professionell“
• „Kfz-Meisterbetrieb in Großerlach – für Reparatur, Service und Beratung“

Keine Begrüßung wie „Willkommen“ – sondern direkt sagen, was du machst.

Kurzbeschreibung

Die Kurzbeschreibung (Subheadline) ist der erste Satz unter der Hauptüberschrift im Hero-Bereich.
Sie konkretisiert oder vertieft die Aussage der Überschrift – emotional oder sachlich. Sie ist wie eine Ergänzung, die dem Leser hilft, das Angebot besser zu greifen. Oft hilft sie, Vertrauen aufzubauen oder einen klaren Nutzen zu vermitteln.

Typische Funktionen einer Subheadline:

Beispiele für gelungene Subheadlines:

USPs/Alleinstellungsmerkmale – deine Vorteile auf einen Blick

Nutze 2–4 kurze Aussagen, die direkt sagen, was du besser machst.

Beispiele für typische USPs:

• Mobil optimiert
• DSGVO-konform mit Impressum & Datenschutz
• SEO-stark – besser bei Google gefunden
• Kein Wartungsaufwand
• Persönlicher Ansprechpartner
• Monatlich kündbar
• Komplettpreis ohne versteckte Kosten

Diese Punkte dürfen ruhig auffällig sein – sie ziehen Aufmerksamkeit auf sich.

Gute Buttons (Call-to-Action)

Sag dem Besucher, was er tun soll.

Beispiele für Buttons:

• „Jetzt unverbindlich anfragen“
• „Anrufen: 0171 1234567“
• „Termin vereinbaren“
• „Kostenloses Angebot sichern“

Der Button sollte kurz, klar und aktiv sein.

2. Aufbau deiner Startseite – bewährte Reihenfolge

Damit deine Webseite übersichtlich und überzeugend wirkt, empfehlen wir diese Reihenfolge:

3. Farben – So sieht deine Seite modern & harmonisch aus

Du kannst folgende Farben bei Battery Pages individuell einstellen:

• Textfarbe
• Akzentfarbe
• Hintergrundfarbe
• Navigationsfarbe & Navigationstext
• Buttonfarbe & Buttontext

Tipps für dein Farbschema:

• Nutze max. 2 Hauptfarben + 1 Akzentfarbe
• Wähle Farben mit gutem Kontrast (z. B. dunkle Schrift auf hellem Hintergrund)
• Vermeide grelle Mischungen – lieber ruhige Töne

Tools zur Farbauswahl:

• https://coolors.co
• https://paletton.com

4. Texte – klar, kurz, konkret

Gute Texte sprechen deine Zielgruppe direkt an.

Texttipps:

• Kein Fachchinesisch oder leere Phrasen
• Sag in kurzen Sätzen, was du anbietest und welchen Vorteil das hat
• Nutze Aufzählungen statt langer Fließtexte
• Vermeide „wir sind innovativ“ → lieber: „Seit 10 Jahren Spezialist für...“

5. Bilder – echt schlägt perfekt

Bilder machen deine Webseite lebendig. Sie zeigen, wer du bist und was du tust – viel besser als lange Texte.

Das solltest du beachten:

• Verwende eigene Fotos: z. B. von dir, deinem Team, deinem Laden oder deiner Arbeit.
• Lieber ein ehrliches Handybild als gar kein Bild.
• Querformat bevorzugt – und keine abgeschnittenen Köpfe.
• Gute Bilder zeigen Vertrauen, Persönlichkeit und Professionalität.

Achtung: Keine fremden Bilder aus dem Internet nutzen!
Viele Bilder im Netz sind urheberrechtlich geschützt. Wenn du sie einfach verwendest, kann das teuer werden.

Tipp: Kostenlose Bildquellen

Falls du keine eigenen Fotos hast, findest du auf Unsplash.com viele hochwertige und kostenfreie Bilder – auch für kommerzielle Webseiten.

Weitere kostenlose Bilddatenbanken:

• Pixabay
• Pexels
• Kaboompics
• Reshot

Alle diese Plattformen bieten kostenlose Bilder an, die auch für gewerbliche Webseiten verwendet werden dürfen – ohne Nennung des Fotografen (meist unter der Unsplash- oder CC0-Lizenz).

Wenn du etwas ganz Besonderes willst:
Für kleines Geld kannst du auch professionelle Bilder bei kostenpflichtigen Plattformen kaufen, z. B. bei:

• Adobe Stock
• Shutterstock
• iStock

So bekommst du genau das Bild, das zu deiner Branche und deinem Stil passt – rechtlich sicher und in Top-Qualität.

Fazit

Mit Battery Pages hast du alles, was du brauchst, um eine starke, moderne Seite zu gestalten – auch ohne Designkenntnisse.

Nimm dir ein paar Minuten Zeit für:

• einen guten Hero
• harmonische Farben
• klare Texte
• echte Bilder

Dann wirkt deine Seite automatisch professionell – und bringt dir neue Anfragen.