Code, der läuft.

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

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.

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

Den Fehler finden – und wirklich verstehen, warum.

Bugs sind frustrierend – besonders dann, wenn man nicht versteht, warum etwas funktioniert hat, und jetzt plötzlich nicht mehr. Debugging ist kein Raten: es ist ein systematischer Prozess, bei dem man die Ursache einkreist, statt blind Varianten auszuprobieren. Genau das unterscheidet eine nachhaltige Lösung von einem Workaround, der beim nächsten Update wieder bricht.

Ich arbeite im Bereich HTML, CSS und JavaScript – also dem klassischen Frontend-Stack, der hinter fast jeder Website steckt. Typische Probleme, die ich löse: Layouts, die auf manchen Bildschirmen brechen, Animationen die haken, Formulare die nicht senden, JavaScript-Fehler in der Browser-Konsole, oder eine Seite, die nach einem Update plötzlich anders aussieht als erwartet.

Wie gehe ich vor?

Zuerst das Problem reproduzieren: Unter welchen Bedingungen tritt es auf? Immer? Nur auf bestimmten Browsern? Nur auf Mobilgeräten? Dann isolieren: den kleinsten Code-Ausschnitt finden, der das Problem zeigt. Dann verstehen: warum verhält sich der Code so? Was erwartet der Browser, was bekommt er, was gibt er aus? Erst dann kommt die Lösung – und die wird erklärt, nicht nur eingespielt.

Bei JavaScript-Fehlern ist die Browser-Konsole (F12 → Console) der erste Anlaufpunkt. Fehlermeldungen wie TypeError: Cannot read properties of null sagen oft genau, was fehlt – wenn man weiß, wie man sie liest. Ich zeige dir, wie du selbst Fehler in der Konsole einordnest und was die häufigsten Meldungen bedeuten.

Manchmal ist das Problem kein Fehler im Code, sondern ein Caching-Problem: der Browser zeigt eine alte Version der Seite, weil er die CSS-Datei aus dem Cache lädt. Manchmal liegt es an einem Leerzeichen zu viel oder einer fehlenden schließenden Klammer. Manchmal steckt der Bug in einer externen Bibliothek, die in einer neuen Version sich anders verhält. Ich helfe dir, das auseinanderzuhalten.

• Layout-Bugs in CSS – Flexbox, Grid, Positionierung, responsive Brüche
• JavaScript-Fehler in der Konsole lokalisieren und beheben
• Formular-Probleme: Validierung, Senden, Fehleranzeige
• Verhalten in verschiedenen Browsern prüfen und angleichen
• Caching-Probleme identifizieren und Workarounds erklären
• Code-Review: bestehenden Code lesen, erklären und verbessern