Wie du einen Webdesign-Entwurf erstellen kannst

Produkte erwähnt
Lerne Inhalte und nützliche Tools für deinen Webdesign-Entwurf kennen

Die Entwicklung einer Website beginnt mit der Planung – ganz gleich, ob du eine Internetpräsenz für dich oder im Kundenauftrag erstellst. Mit den folgenden Tipps erarbeitest du einen sinnvollen Projektrahmen, der dir die Arbeit im Anschluss leichter macht. Die Tools helfen dir bei der Erstellung eines Webdesign-Entwurfs. Gehe dafür wie folgt vor!

1. Übersicht der Inhalte, Struktur und Funktionen erstellen

Befasse dich mit der Seitenstruktur der Webseite. Startseite, Impressum und Kontakt sind Standard und Pflicht. Welche weiteren Seiten soll es geben? Liste diese auf und denke über eine Strukturierung in Kategorien und Unterkategorien nach. Soll die Webseite zum Beispiel über einen Blog-Bereich oder einen Onlineshop verfügen?

Welche Funktionen werden gebraucht und wie wird die Interaktion der Seitenbesucher erfasst? Sollen Besucher die Beiträge mit Sternen bewerten oder Kommentare hinterlassen können, gibt es ein Kontaktformular oder einen Mitgliederbereich? Schreibe alles zusammen.

Wenn du die Webseite für einen Kunden erstellst, ist dieser Schritt besonders wichtig. Im Nachhinein gewünschte Änderungen beziehungsweise Erweiterungen kosten viel Zeit und sollten entsprechend bezahlt werden. Erkläre das unbedingt deinem Kunden: Nachträgliche Änderungen bedeuten eine Zeitverzögerung und höhere Kosten.

Tipp: Versuche als Anfänger eine realistische Abschätzung des Zeitaufwands zu erfassen und verdopple diesen – irgendwas dauert in der Regel meist länger als geplant.

2. Hosting und Kosten für den Betrieb

Liste alle anfallenden Ausgaben auf:

  • Kosten für den Hosting-Provider
  • Kosten durch Nutzung der Dienste von Drittanbietern wie Google Maps
  • Kosten durch den Kauf von Bildern für die Webseite etc.

3. Beim Webdesign-Entwurf für Kunden: Termine und Konditionen vereinbaren

In welchen Schritten die Zahlung erfolgen soll, hängt von der Größe des Projekts ab. Bei kleinen Projekten kannst du eine 50/50-Zahlung vereinbaren: 50 Prozent bei Beginn der Arbeit und 50 Prozent bei Fertigstellung. Wenn der Kunde ebenfalls Inhalte beisteuert und sich damit unendlich viel Zeit lässt, solltest du besser verschiedene Meilensteine aushandeln, bei deren Erreichung Zahlungen fällig sind. So kannst du die Webseite in ihrer Funktionalität fertigstellen und dem Kunden im Wartungsmodus übergeben. Gemeinsam verifiziert ihr die Funktion aller vereinbarten Teile und du übergibst die Abrechnung. Wie lange der Kunde dann mit seinen Inhalten beschäftigt ist, bleibt seine Sache.

4. Tools für den Webdesign-Entwurf

Für die Konzeption einer Website brauchst du einen Layout-Entwurf, dafür kommen Wireframes und Mockups zum Einsatz.

Wireframes dienen der Positionierung der Elemente einer Website: Was sind die Hauptelemente, wo und in welcher Anordnung werden sie dargestellt? Zeichne die Positionen von Komponenten wie Logo, Menü und Suchfeld ein. Es gilt, die inhaltliche Zusammensetzung, die Platzierung der Inhalte und die Möglichkeiten der Interaktion zu klären. Wireframes sind schnell erstellt.

Mockups sind der nächste Schritt und detaillierter. Sie beinhalten bereits die Typografie und das gewünschte Farbschema. Das Mockup entspricht dem Design der Website so genau wie möglich. Folgende Tools helfen dir beim Webdesign-Entwurf mit Wireframes und Mockups.

Auch interessant: 90 essentielle WordPress Tools für Webdesigner und Entwickler

4.1. Balsamiq für Wireframes

Wie du einen Webdesign-Entwurf erstellen kannst_Webdesign-Entwurf-mit-Balsamiq
Mit Balsamiq erstellst du schnell Wireframes.

Balsamiq kannst du 30 Tage kostenlos testen. Mit den zahlreichen vorgefertigten Elementen kreierst du einen ersten Webdesign-Entwurf schnell per Drag & Drop. Nutze die Kommentarfunktion, um die Elemente zu erklären. Als Ergebnis erhältst du eine gute Übersicht. Es gibt eine Desktop-Version zum Herunterladen und eine cloudbasierte Web-Anwendung. Schaue dir gerne die Demo-Version an.

Wie du einen Webdesign-Entwurf erstellen kannst_Webdesign-Entwurf-mit-Balsamiq_1
Fokussiere dich auf Struktur und Benutzerführung.

4.2. Webdesign-Entwurf mit Mockingbird erstellen

Wie du einen Webdesign-Entwurf erstellen kannst_Webdesign-Entwurf-mit-Mockingbird
Mockingbird ist eine beliebte Alternative für schnell erstellte Wireframes.

Mockingbird eignet sich für Einsteiger und Fortgeschrittene. Eine Vielzahl vorgefertigter Elemente hilft bei der Website-Strukturierung. Du kannst mehrere Seiten anlegen, diese jedoch nicht miteinander verlinken. Ein Vorteil: Nutzt du das Grid-System zur Orientierung, sparst du bei der Umsetzung wertvolle Zeit. Das Design der meisten modernen Websites basiert auf einem Grid-System.

4.3. Moqups für Webdesign-Entwurf nutzen

Wie du einen Webdesign-Entwurf erstellen kannst_Webdesign-Entwurf-Moqups
Mit Moqups kreierst du Wireframes, Mockups, Diagramme und Prototypen.

Moqups ist ebenfalls eine Web-Anwendung mit übersichtlichem Aufbau. Zwar integriert es weniger vorgefertigte Elemente, dafür sind zahlreiche Schablonen zum Erstellen beliebiger Inhalte vorhanden. In der kostenlosen Version kannst du deine Entwürfe allerdings nicht exportieren.

 

Wie du einen Webdesign-Entwurf erstellen kannst_Webdesign-Entwurf-Moqups_1
Visualisiere dein Konzept.

4.4. Pencil Project ist komplett kostenlos

Webdesign-Entwurf-mit-Pencil-Project
Pencil Project begeistert als kostenlose Open-Source-Software für Mockups.

Ein entscheidender Vorteil von Pencil Project: Die Software ist komplett kostenlos. Sie enthält sämtliche Funktionen, um professionelle Wireframes und Mockups zu erstellen, und erfreut durch eine große Auswahl an Vorlagen. Lade die Desktop-Version für Windows, Mac und Linux herunter und probiere den Funktionsumfang aus. Seit Oktober 2019 steht eine aktuelle Version zum Download bereit.

5. Fazit

Ob du für dich oder einen Kunden eine Website entwirfst – investiere anfangs besser mehr Zeit in die Planung und den Webdesign-Entwurf. So sparst du dir während der Umsetzung Mehrarbeit. Probiere dafür am besten gleich die Tools für Wireframes und Mockups aus. Diese helfen dir selbst bei der Umsetzung und machen dank der ersten Visualisierungen auch die Kommunikation mit Kunden einfacher.

 

Bildnachweis: Unsplash

Franzi Thoms
Franzi hat Medienkommunikation studiert und ist mit Herz und Seele Social Media und Content Managerin im deutschen GoDaddy-Team. Hier kann sie ihr Herzblut für Social Media und Texten verwirklichen und gibt am liebsten kleinen Unternehmen und Startups Tipps & Tricks in den Bereichen Social Media, Online Marketing und WordPress. Neben ihrer Leidenschaft für News rund um Technik und digitale Trends lebt sie ihre Kreativität in der Fotografie aus.