Website-Entwicklung mit Webflow | Daniel Öttl × UX Design

Sitemap

Der erste Schritt bei der Erstellung einer Website ist die Erstellung einer Sitemap. Damit verschaffe ich mir einen Überblick über alle Seiten der Website und strukturiere grob den Inhalt jeder einzelnen Seite.

Diese Struktur dient dann als Grundlage, um zu entscheiden, welche Inhalte für die Benutzerführung notwendig sind. Die Sitemap zeigt auch, wo Unterseiten benötigt werden, um bestimmte Informationen zu vertiefen oder wo verschiedene Inhalte mit der gleichen Seitenstruktur (z. B. Blog) benötigt werden.

Nachdem die Sitemap steht, sind das Ziel der Website, die Navigation und der Inhalt der obersten Ebene definiert.

Wireframes

Das Erstellen von Wireframes ist der zweite Schritt beim Erstellen der Website. In dieser Phase gehe ich jede Seite der Sitemap durch und definiere Bereiche für Überschriften, Fließtexte, Bilder und so weiter.

Die Wireframes sind immer noch grob und skizzenhaft. In der Regel erstelle ich sie in Graustufen, damit der Fokus auf der Struktur anstelle der Details liegt. Diese Skizzen sind optimal, um sich den Aufbau der Website vorzustellen und über die konkreten Inhalte zu diskutieren.

Moodboard

Ein Moodboard wird oft als Look & Feel beschrieben. In diesem Schritt geht es darum, wie die Website aussehen und wie sie sich verhalten soll. Wichtig sind die Bereiche Typographie, Farbe, Bildsprache und Animation. Dazu können wir beide Beispiele aus verschiedensten Quellen sammeln und dann in einem Moodboard zusammenstellen.

Das Moodboard ist die Grundlage für die Definition einer Designrichtung.

Design der Website

Jetzt geht’s an die Details!

Im Design kommen die Inhalte aus den Wireframes mit dem Moodboard zusammen. Anhand des ausgearbeiteten Stils werden die einzelnen Sektionen der Website gestaltet. In diesem Schritt werden die verschiedenen Ansichten der Website (Desktop, Tablet und Mobile) ausgearbeitet.

Nachdem das Design fertig ist, kann die Website entwickelt werden.

Entwicklung und Hosting

Neben der Konzeption und dem Design, kann ich die Website bei Bedarf mit dem No-Code-Tool Webflow umsetzen. Mit diesem sind spätere Aktualisierungen durch das eingebaute Content Management System (CMS) sehr einfach.

Bei der Entwicklung der achte ich auf eine saubere SEO-Struktur, damit die Seite in den Suchmaschinen auch gefunden wird. Die Entwicklung mit Webflow bedingt, dass die Seite anschließend auch dort gehostet wird. Somit fallen dort die monatlichen Kosten dafür an, mit dem Vorteil das Aktualisierungen jederzeit möglich sind.

Und schon ist die Website fertig!

Bitte zögere nicht, mich zu kontaktieren, wenn du daran interessiert bist, eine Website für dein Produkt oder deine Dienstleistung zu erstellen und zu hosten.

Die Details und deine Idee für die Website können wir bei unserem ersten Treffen besprechen.