Ansprechendes Webdesign Schritt für Schritt

Eine eigene Website braucht keinen Profi. Mit einem Homepage-Baukasten oder WordPress erstellen Sie ohne Programmierkenntnisse eine ansprechende Seite. Zerlegen Sie die Arbeit in einzelne Schritte und klären Sie vorher, was die Seite leisten soll. Dann bleibt der Aufwand überschaubar: Werkzeug wählen, Struktur planen, gestalten, Inhalte erstellen.

Baukasten oder WordPress wählen

Bevor Sie gestalten, entscheiden Sie, wie Sie die Website technisch umsetzen möchten. Zwei Wege führen am häufigsten zum Ziel: ein Homepage-Baukasten oder WordPress.

Ein Baukasten funktioniert nach dem Prinzip „fertige Bausteine zusammenfügen“. Sie wählen eine Vorlage, tauschen Texte und Bilder aus und verschieben Elemente per Maus. Der Anbieter kümmert sich um Speicherplatz, Updates und Sicherheit. Das ist die schnellste Lösung, wenn Sie eine übersichtliche Seite mit wenigen Unterseiten planen, etwa für ein kleines Geschäft oder ein Portfolio.

WordPress ist flexibler, verlangt aber etwas Einarbeitung. Sie installieren das System bei einem Hosting-Anbieter, wählen ein Theme als Grundgerüst und ergänzen Funktionen über Plugins. Dafür haben Sie später mehr Freiheit bei Layout und Erweiterungen. Wer einen Online-Shop oder einen Blog mit vielen Beiträgen plant, ist mit WordPress besser beraten.

Die Entscheidung hängt also von Ihrem Ziel ab: Wollen Sie in wenigen Tagen online sein, nehmen Sie den Baukasten. Planen Sie eine Seite, die mitwächst, lohnt sich WordPress.

Die Seitenstruktur planen

Die Struktur steht am Anfang jeder Gestaltung. Überlegen Sie, welche Unterseiten Ihre Besucher brauchen, und notieren Sie diese auf einem Blatt Papier. Typische Seiten sind Startseite, Über uns, Leistungen oder Produkte, Kontakt und gegebenenfalls ein Impressum.

Die Navigation sollte nicht mehr als fünf bis sieben Punkte umfassen. Zu viele Menüeinträge überfordern Besucher und verwässern Ihre Botschaft. Ordnen Sie die wichtigsten Seiten an erster Stelle, denn die meisten Nutzer entscheiden innerhalb weniger Sekunden, ob sie auf der Seite bleiben.

Zeichnen Sie für jede Unterseite eine grobe Skizze, welche Inhalte oben, in der Mitte und unten stehen sollen. Das erspart späteres Umräumen und zeigt Ihnen, welche Texte und Bilder Sie noch benötigen.

Farben, Schriften und Layout abstimmen

Ein ansprechendes Design entsteht, wenn Farben, Schriften und Abstände zusammenpassen. Wählen Sie eine Grundfarbe, die zu Ihrer Marke passt, und dazu eine oder zwei Akzentfarben. Zu viele Farben wirken unruhig. Als Faustregel gilt: eine dominante Farbe für Überschriften und Flächen, eine neutrale Farbe für den Hintergrund und eine Akzentfarbe für Buttons und Links.

Bei den Schriften setzen Sie auf maximal zwei Schriftarten: eine für Überschriften, eine für den Fließtext. Serifenschriften wie Georgia wirken klassisch, serifenlose wie Arial oder Helvetica modern und gut lesbar am Bildschirm. Achten Sie auf eine ausreichende Schriftgröße für Fließtext und auf einen Zeilenabstand, der das Lesen erleichtert.

Das Layout folgt einem Raster. Richten Sie Texte und Bilder an unsichtbaren Linien aus, statt sie frei zu verteilen. Weißraum ist dabei wichtig: Leere Flächen geben dem Auge Ruhe und lenken die Aufmerksamkeit auf das Wesentliche.

Inhalte und Texte erstellen

Ohne gute Inhalte hilft das schönste Design nichts. Schreiben Sie Texte, die Ihre Besucher verstehen und die eine klare Botschaft transportieren. Vermeiden Sie Fachjargon und lange Schachtelsätze. Jede Seite sollte eine Hauptaussage haben und den Besucher zu einer Handlung führen, etwa zu einem Anruf oder einer Bestellung.

Bilder sind wichtig. Verwenden Sie eigene Fotos, wenn möglich, denn sie wirken authentischer als Stockfotos. Achten Sie darauf, dass die Bilder scharf sind und zur Farbwelt der Seite passen. Zu viele Bilder verlangsamen die Ladezeit, also wählen Sie sparsam aus und komprimieren Sie die Dateien.

Für Suchmaschinen vergeben Sie pro Seite einen aussagekräftigen Titel und eine Beschreibung. Diese Angaben erscheinen in den Suchergebnissen und entscheiden mit, ob jemand Ihre Seite anklickt.

Mobile und Barrierefreiheit prüfen

Die meisten Besucher erreichen Ihre Website heute über das Smartphone. Ihr Design muss daher auf kleinen Bildschirmen genauso funktionieren wie am Desktop. Die meisten Baukästen und WordPress-Themes sind von Haus aus responsiv, das heißt, sie passen sich automatisch an die Bildschirmgröße an. Prüfen Sie trotzdem jede Seite am Handy: Sind die Buttons groß genug, lässt sich das Menü bedienen, und sind die Texte ohne Zoomen lesbar?

Barrierefreiheit bedeutet, dass auch Menschen mit Einschränkungen Ihre Seite nutzen können. Achten Sie auf ausreichende Kontraste zwischen Text und Hintergrund, beschreiben Sie Bilder mit einem Alternativtext und sorgen Sie dafür, dass sich alle Funktionen mit der Tastatur bedienen lassen. Diese Punkte sind nicht nur ethisch geboten, sondern verbessern auch die Nutzerfreundlichkeit für alle.

Usability-Regeln anwenden

Bewährte Richtlinien helfen Ihnen, typische Fehler zu vermeiden. Die zehn Usability-Heuristiken von Jakob Nielsen beschreiben Grundprinzipien, die für fast jede Website gelten. Dazu gehören etwa: Der Nutzer sollte jederzeit wissen, wo er sich befindet, und er sollte Fehler leicht rückgängig machen können. Auch die Normen DIN EN ISO 9241 und die Richtlinien der WCAG für barrierefreie Webinhalte bieten konkrete Anhaltspunkte.

Sie müssen diese Regeln nicht auswendig lernen. Es reicht, wenn Sie sich beim Testen Ihrer Seite fragen: Finde ich mich auf jeder Seite zurecht? Ist klar, wohin ein Klick führt? Kann ich meine Eingaben korrigieren? Wenn Sie diese Fragen mit Ja beantworten, sind Sie auf einem guten Weg.