www.meine-website.de < > DESIGN WEB
02 — Website Development

Websites, die begeistern.

Von der Idee bis zur fertigen Website – modern gestaltet, mobil optimiert und mit dem Fokus auf das, was wirklich zählt.

🎨 Webdesign-Beratung & Konzept 🌐 Statische Websites & One-Pager 🗂️ Mehrseiter Website

Erst denken, dann bauen – der Unterschied liegt im Konzept.

Die meisten Websites scheitern nicht am Code, sondern an fehlender Klarheit davor. Was soll die Seite leisten? Für wen ist sie gemacht? Welche Aktion soll ein Besucher als nächstes tun – und macht der aktuelle Aufbau das überhaupt möglich? Webdesign-Beratung bedeutet, genau diese Fragen zu stellen, bevor irgendetwas gebaut wird.

Ich helfe dir, deinen Webauftritt zu durchdenken: vom groben Use-Case über Zielgruppe und Inhalte bis hin zu Struktur, Seitenaufbau und visueller Sprache. Das Ergebnis ist kein fertiges Design – sondern ein klares Bild davon, was entstehen soll und warum. Auf dieser Grundlage entsteht dann echte Umsetzung, die funktioniert, statt gut aussehender Baustellen.

Use-Case und Ziel klären

Der erste Schritt ist immer die Frage nach dem Zweck. Eine Handwerker-Website braucht vor allem eine gut sichtbare Telefonnummer und Bilder von Projekten. Ein Portfolioauftritt braucht Fokus auf das Werk und eine klare Kontaktmöglichkeit. Ein kleiner Online-Shop braucht Vertrauen und einfache Navigation. Jeder dieser Fälle sieht strukturell völlig anders aus – und das ist kein Zufall, sondern das Ergebnis bewusster Entscheidungen.

Ich stelle dir gezielte Fragen: Wer besucht die Seite? Was wissen sie schon? Was sollen sie tun oder denken, wenn sie sie verlassen? Wie viel Content existiert bereits, was muss noch entstehen? Aus diesen Antworten ergibt sich eine Struktur, die nicht aus einer Vorlage kommt, sondern aus deiner konkreten Situation.

Struktur und Seitenarchitektur

Wie viele Seiten braucht es wirklich? Ist ein One-Pager die richtige Wahl, oder macht eine Mehrseiter-Struktur mehr Sinn? Welche Inhalte gehören auf die Startseite, was gehört tiefer in die Navigation? Ich skizziere eine Seitenarchitektur, die Besucher intuitiv durch dein Angebot führt – ohne dass sie suchen müssen.

Dabei denke ich auch an die Ladezeiten, an mobile Nutzung (die meisten Besucher kommen mit dem Handy) und an die Lesbarkeit: Schriftgrößen, Kontraste, Abstände. Diese Entscheidungen sehen marginal aus, machen aber den Unterschied zwischen einer Seite, die man sofort versteht, und einer, bei der man sofort wieder wegklickt.

Visuelles Konzept und Designsprache

Farben, Schriften und Bildsprache sind keine Geschmackssache – sie sind Kommunikation. Eine handwerkliche Dienstleistungsseite braucht Seriosität und Klarheit. Eine kreative Agentur darf mutig sein. Ein Arzt oder Therapeut braucht Ruhe und Vertrauen. Ich helfe dir zu definieren, welche visuelle Tonalität zu deinem Angebot und deiner Zielgruppe passt – und welche konkreten Entscheidungen daraus folgen.

Das bedeutet nicht, dass du ein ausgefeiltes Brand Manual bekommst. Es bedeutet, dass wir gemeinsam auf zwei bis drei Farben, eine Schriftpaarung und einen klaren Bildstil einigen – so dass alles aus einem Guss wirkt und nicht wie zusammengewürfelt.

  • Ziel und Use-Case der Website gemeinsam herausarbeiten
  • Zielgruppe definieren und Inhalte darauf abstimmen
  • Seitenstruktur planen: One-Pager vs. Mehrseiter, Navigationstiefe
  • Inhaltliche Hierarchie: Was ist wichtig, was ist nachrangig
  • Farbschema, Typografie und visuelle Tonalität abstimmen
  • Technologieentscheidung: statisch, (CMS oder Shop-System / noch im learning)
  • Realistische Einschätzung von Aufwand und Kosten vor der Umsetzung
Meine Empfehlung: Plane 1–2 Stunden für ein erstes Konzeptgespräch ein, bevor du irgendetwas beauftragst oder selbst anfängst zu bauen. Was dabei entsteht, spart dir in der Umsetzung ein Vielfaches an Zeit – und sorgt dafür, dass das Ergebnis wirklich zu dir passt.

Eine Seite, die wirkt – ohne unnötigen Overhead.

Eine statische Website braucht kein CMS, keine Datenbank und kein monatliches Hosting-Abo für ein komplexes Backend. Sie besteht aus HTML, CSS und optional ein wenig JavaScript – und ist damit blitzschnell, günstig zu hosten und praktisch wartungsfrei. Für Visitenkartenseiten, Portfolios, Landingpages und kleine Unternehmensauftritte ist das in vielen Fällen die ehrlichste und beste Lösung.

Ein One-Pager bündelt alles auf einer einzigen, durchgängig scrollbaren Seite: ein Hero-Bereich mit klarer Botschaft, eine Leistungsübersicht, ein Über-mich-Abschnitt, Fotos und ein Kontaktformular. Die Navigation springt per Anker direkt zum richtigen Abschnitt – kein Laden einer neuen Seite, keine Wartezeit.

Was entsteht konkret?

Ich baue Seiten ohne Baukastensystem oder Page-Builder, kein generiertes Markup, kann aber eventuelle Codebasen miteinbeziehen. Das bedeutet: sauberer, lesbarer Code, der genau das tut, was er soll. Das Ergebnis ist responsiv (funktioniert auf Handy, Tablet und Desktop), lädt ohne spürbare Verzögerung und ist für Suchmaschinen semantisch korrekt aufgebaut.

<!-- Bsp. einer typischen Struktur eines One-Pagers -->
<section id="hero"> ← Einstieg, Headline, CTA
<section id="leistungen"> ← Was du anbietest
<section id="about"> ← Wer du bist
<section id="galerie"> ← Fotos / Referenzen
<section id="kontakt"> ← Formular oder Direktkontakt

Das Kontaktformular wird über einen externen Dienst wie formsubmit.co oder formspree.io abgewickelt – kein eigener Server nötig. Nachrichten landen direkt in deiner Inbox, das Formular ist spam-geschützt und funktioniert zuverlässig ohne Backend-Kenntnisse.

Wer die Seite später selbst pflegen möchte, bekommt von mir eine kurze Einweisung: wo Texte geändert werden, wie Bilder ausgetauscht werden und was beim Hochladen zu beachten ist. Hosting-Optionen erkläre ich ebenfalls – von GitHub Pages (kostenlos) bis zu Netlify oder einem einfachen Webhosting-Paket.

  • One-Pager mit Hero, Leistungen, Galerie und Kontaktformular
  • Mehrseiter mit einheitlichem Design und konsistenter Navigation
  • Responsives Layout – optimiert für Handy, Tablet und Desktop
  • Semantisch korrektes HTML für solide SEO-Grundlage
  • Einbindung eigener Fotos, Logos und Markenfarben
  • Übergabe mit Einweisung – du verstehst, was wo steht
Mein Anspruch: Du bekommst keine Black Box übergeben. Der Code ist kommentiert, die Struktur nachvollziehbar – und wenn etwas geändert werden muss, weißt du oder jemand anderes danach, wo anzufassen ist.

Für Beispielprojekte hier klicken.

Wenn eine Seite nicht reicht – wachse mit Struktur.

Ein Mehrseiter ist die richtige Wahl, wenn dein Angebot mehr Tiefe braucht als eine scrollbare Seite bieten kann. Du hast verschiedene Zielgruppen, mehrere Leistungsbereiche oder willst Inhalte klar voneinander trennen – dann braucht jedes Thema seinen eigenen Raum.

Während ein One-Pager alles auf einmal zeigt, gibt ein Mehrseiter deinen Besuchern die Möglichkeit, sich gezielt durch dein Angebot zu navigieren: eigene Unterseiten für Leistungen, Portfolio, Über mich und Kontakt – konsistent designed, klar verlinkt, professionell strukturiert.

Wann macht ein Mehrseiter Sinn?

  • Du hast mehrere Leistungen, die je eine eigene Erklärung verdienen
  • Du möchtest Portfolio oder Galerie separat und übersichtlich zeigen
  • Dein Team, deine Geschichte oder deine Werte brauchen eigenen Platz
  • Du planst Unterseiten für Blog, FAQ oder einzelne Angebote
  • Deine SEO-Strategie erfordert eigene Seiten für verschiedene Themen

Vorteile gegenüber dem One-Pager

  • Klare Struktur bei viel Inhalt – kein endloses Scrollen
  • Gezieltere SEO-Optimierung für jede Unterseite und jedes Thema
  • Professionellere Wirkung bei Unternehmen mit breitem Angebot
  • Einfach erweiterbar – neue Seiten lassen sich jederzeit hinzufügen
  • Navigation stärkt das Vertrauen und führt Besucher gezielt
Mein Ansatz: Ein guter Mehrseiter entsteht nicht durch das Aneinanderreihen von Einzelseiten – sondern durch eine durchdachte Seitenarchitektur. Welche Seiten wirklich gebraucht werden, wie die Navigation geführt wird und wie das Design überall konsistent bleibt: das planen wir gemeinsam im Konzeptgespräch.
Zurück zur Startseite Beispielprojekte ansehen Leistungen ansehen