Webdesign in 7 einfachen Schritten

Webdesign-Prozess in 7 einfachen Schritten

Webdesigner denken oft über den Webdesign-Prozess mit einem Fokus auf technische Angelegenheiten wie Wireframes, Code und Content Management nach. Aber bei großartigem Design geht es nicht darum, wie Sie die Social-Media-Buttons integrieren oder sogar um schicke Visuals. Bei großartigem Design geht es tatsächlich darum, einen Website-Erstellungsprozess zu haben, der sich an einer übergreifenden Strategie ausrichtet.

Gut gestaltete Websites bieten viel mehr als nur Ästhetik. Sie ziehen Besucher an und helfen den Menschen, das Produkt, das Unternehmen und das Branding durch eine Vielzahl von Indikatoren zu verstehen, die Bildmaterial, Text und Interaktionen umfassen. Das bedeutet, dass jedes Element Ihrer Website auf ein definiertes Ziel hinarbeiten muss.

Aber wie erreichen Sie diese harmonische Synthese der Elemente? Durch einen ganzheitlichen Webdesign-Prozess, der sowohl Form als auch Funktion berücksichtigt.

Der Webdesign-Prozess in 7 einfachen Schritten

Um Ihre Website zu entwerfen, zu erstellen und zu starten, ist es wichtig, diese Schritte zu befolgen:

  1. Zielbestimmung

In dieser Anfangsphase muss der Designer das Endziel des Website-Designs identifizieren, normalerweise in enger Zusammenarbeit mit dem Kunden oder anderen Beteiligten. Zu den Fragen, die in dieser Phase des Design- und Website-Entwicklungsprozesses untersucht und beantwortet werden müssen, gehören:

  • Für wen ist die Website gedacht?
  • Was erwarten sie dort zu finden oder zu tun?
  • Ist das primäre Ziel der Website zu informieren, zu verkaufen (E-Commerce, irgendjemand?) oder zu unterhalten?
  • Muss die Website die Kernbotschaft einer Marke klar vermitteln, oder ist sie Teil einer umfassenderen Branding-Strategie mit eigenem Schwerpunkt?
  • Welche Konkurrenz-Websites gibt es, wenn überhaupt, und wie soll sich die Website von diesen Wettbewerbern inspirieren/unterscheiden?

Dies ist der wichtigste Teil eines jeden Webentwicklungsprozesses. Wenn diese Fragen nicht alle klar im Briefing beantwortet werden, kann das ganze Projekt in die falsche Richtung gehen.

Es kann sinnvoll sein, ein oder mehrere klar identifizierte Ziele zu formulieren, oder eine Zusammenfassung der erwarteten Ziele in einem Absatz. Dies wird helfen, das Design auf den richtigen Weg zu bringen. Vergewissern Sie sich, dass Sie die Zielgruppe der Website verstehen, und machen Sie sich ein Bild von der Konkurrenz.

Tools für die Phase der Website-Zielfindung

  • Zielgruppen-Personas
  • Kreatives Briefing
  • Mitbewerber-Analysen
  • Marken-Attribut
  1. Definition des Umfangs

Eines der häufigsten und schwierigsten Probleme, die Webdesign-Projekte plagen, ist die schleichende Ausweitung des Umfangs. Der Kunde beginnt mit einem Ziel vor Augen, aber dieses erweitert sich allmählich, entwickelt sich weiter oder ändert sich während des Webdesign-Prozesses – und das nächste, was Sie wissen, ist, dass Sie nicht nur eine Website entwerfen und bauen, sondern auch eine Web-App, E-Mails und Push-Benachrichtigungen.

Das ist nicht unbedingt ein Problem für Designer, da es oft zu mehr Arbeit führen kann. Aber wenn die gestiegenen Erwartungen nicht mit einer Erhöhung des Budgets oder des Zeitrahmens einhergehen, kann das Projekt schnell völlig unrealistisch werden.

Ein Gantt-Diagramm, das einen realistischen Zeitplan für das Projekt mit allen wichtigen Meilensteinen enthält, kann dabei helfen, Grenzen und erreichbare Fristen festzulegen. Dies ist eine unschätzbare Referenz sowohl für Designer als auch für Kunden und hilft, dass sich jeder auf die Aufgabe und die Ziele konzentriert.

Tools zur Umfangsbestimmung

  • Gantt-Diagramm (oder eine andere Visualisierung der Zeitachse)
  1. Sitemap und Wireframe Erstellung

Die Sitemap bildet die Grundlage für jede gut gestaltete Website. Sie hilft Webdesignern, eine klare Vorstellung von der Informationsarchitektur der Website zu bekommen und erklärt die Beziehungen zwischen den verschiedenen Seiten und den Inhaltselementen.

Eine Website ohne Sitemap zu erstellen ist wie ein Hausbau ohne Bauplan. Und das geht selten gut aus.

Der nächste Schritt besteht darin, Design-Inspiration zu finden und ein Mockup des Wireframes zu erstellen. Wireframes bieten einen Rahmen für die Speicherung des visuellen Designs und der Inhaltselemente der Website und können helfen, potenzielle Herausforderungen und Lücken in der Sitemap zu identifizieren.

Obwohl ein Wireframe keine endgültigen Designelemente enthält, dient es als Leitfaden dafür, wie die Website letztendlich aussehen wird. Er kann auch als Inspiration für die Formatierung der verschiedenen Elemente dienen

Tools für Sitemapping und Wireframing

  • Balsamiq
  • Moqup
  • Axure
  • Slickplan
  • Writemaps
  • Mindnode

Sobald das Gerüst Ihrer Website steht, können Sie mit dem wichtigsten Aspekt der Website beginnen: dem geschriebenen Inhalt.

  1. Erstellung der Inhalte

Der Content dient zwei wesentlichen Zielen:

Ziel 1: Er fördert Engagement und Aktion

Erstens fesselt der Inhalt die Leser und veranlasst sie dazu, die für die Erfüllung der Ziele einer Website erforderlichen Handlungen auszuführen. Dies wird sowohl durch den Text selbst als auch durch die Art und Weise, wie er präsentiert wird (Typografie und Strukturelemente), beeinflusst.

Langweilige, leblose und überlange Prosa hält die Aufmerksamkeit der Besucher selten lange aufrecht. Kurze, prägnante und interessante Inhalte fesseln sie und bringen sie dazu, sich zu anderen Seiten durchzuklicken. Selbst wenn Ihre Seiten viel Inhalt benötigen – und das tun sie oft – kann das richtige „Chunking“ dieses Inhalts durch Aufteilung in kurze Absätze, ergänzt durch visuelle Elemente, dazu beitragen, dass der Inhalt leicht und einnehmend wirkt.

Ziel 2: SEO

Der Content steigert auch die Sichtbarkeit einer Website für Suchmaschinen. Das Erstellen und Verbessern von Beiträgen, um bei der Suche gut abzuschneiden, wird als Suchmaschinenoptimierung (SEO) bezeichnet.

Die richtige Auswahl von Keywords und Key-Phrases ist entscheidend für den Erfolg einer Website. Google Keyword-Planer zeigt das Suchvolumen für potenzielle Zielkeywords und -phrasen an, so dass Sie herausfinden können, wonach tatsächlich Menschen im Web suchen. Während Suchmaschinen immer cleverer werden, sollten das auch Ihre Content-Strategien. Google Trends ist auch praktisch, um Begriffe zu identifizieren, die Menschen tatsächlich bei ihrer Suche verwenden.

Der Webdesign-Prozess konzentriert sich auf die Gestaltung von Websites rund um SEO. Keywords, für die Sie ranken möchten, müssen im Titel-Tag platziert werden – je näher am Anfang, desto besser. Keywords sollten auch im H1-Tag, in der Meta-Beschreibung und im Hauptinhalt erscheinen.

Beiträge, die gut geschrieben, informativ und mit Keywords versehen sind, werden von Suchmaschinen leichter gefunden, was dazu beiträgt, dass die Website leichter gefunden wird.

Normalerweise wird Ihr Kunde den Großteil des Inhalts erstellen, aber es ist wichtig, dass Sie ihm Anleitungen dazu geben, welche Keywords und Phrasen er in den Text aufnehmen sollte.

Großartige Tools zur Erstellung von Inhalten

  • Google Docs
  • Dropbox Papier Quip
  • Gather Content

Praktische SEO-Tools

  1. Visuelle Elemente

Schließlich ist es an der Zeit, den visuellen Stil für die Website zu erstellen. Dieser Teil des Designprozesses wird oft durch bestehende Branding-Elemente, Farbwahl und Logos geprägt, wie sie vom Kunden vorgegeben wurden. Aber es ist auch die Phase des Webdesign-Prozesses, in der ein guter Webdesigner wirklich glänzen kann.

Bilder spielen im Webdesign heute eine wichtigere Rolle als je zuvor. Hochwertige Bilder verleihen einer Website nicht nur ein professionelles Aussehen, sondern kommunizieren auch eine Botschaft, sind mobil-freundlich und helfen, Vertrauen aufzubauen.

Es ist bekannt, dass visuelle Inhalte die Klicks, das Engagement und den Umsatz erhöhen. Aber noch mehr als das: Menschen wollen Bilder auf einer Website sehen. Bilder machen eine Seite nicht nur weniger umständlich und leichter verdaulich, sondern sie verstärken auch die Botschaft im Text und können sogar wichtige Botschaften vermitteln, ohne dass die Leute überhaupt lesen müssen.

Beauftragen Sie einen professionellen Fotografen, um die Bilder richtig zur Geltung zu bringen. Sie können kostenlose Stock-Fotos ausprobieren, aber bedenken Sie, dass große, schöne Bilder eine Website ernsthaft verlangsamen können. Verwenden Sie Optimizilla, um Bilder ohne Qualitätsverlust zu komprimieren und so die Ladezeiten der Seite zu verkürzen. Sie sollten auch sicherstellen, dass Ihre Bilder genauso reaktionsfähig sind wie Ihre Website.

Das visuelle Design ist eine Möglichkeit, mit den Benutzern der Website zu kommunizieren und sie anzusprechen. Wenn Sie es richtig machen, kann es über den Erfolg der Website entscheiden. Machen Sie es falsch, sind Sie nur eine weitere Webadresse.

Tools für visuelle Elemente

  • Die üblichen Verdächtigen (Sketch, Illustrator, Photoshop, etc.)
  • Moodboards, Style Tiles, Element-Collagen
  • Visual Style Guides
  1. Testen

Sobald die Website über alle visuellen Elemente und Inhalte verfügt, sind Sie bereit für das Testen.

Testen Sie jede Seite gründlich, um sicherzustellen, dass alle Links funktionieren und dass die Website auf allen Geräten und Browsern korrekt geladen wird. Fehler können das Ergebnis von kleinen Codierungsfehlern sein, und obwohl es oft mühsam ist, diese zu finden und zu beheben, ist es besser, es jetzt zu tun, als der Öffentlichkeit eine fehlerhafte Website zu präsentieren.

Anmerkung: Nutzen Sie für diese Phase den SEO-Spider von Screaming Frog. Damit können Sie viele der Standard-Auditing-Aufgaben in einem einzigen Tool erledigen, und es ist für bis zu 500 URLs kostenlos.

Werfen Sie auch einen letzten Blick auf die Meta-Titel und -Beschreibungen der Seiten. Sogar die Reihenfolge der Wörter im Meta-Titel kann die Leistung der Seite in einer Suchmaschine beeinflussen.

Wir haben einen ausgezeichneten Artikel über den Pre-Launch-Prozess.

Website-Test-Tools

  1. Launch

Jetzt ist es Zeit für den beliebtesten Teil des Webdesign-Prozesses: Wenn alles gründlich getestet wurde und Sie mit der Website zufrieden sind, ist es Zeit, sie zu starten.

Erwarten Sie nicht, dass dies perfekt abläuft. Möglicherweise gibt es noch einige Elemente, die korrigiert werden müssen. Webdesign ist ein fließender und fortlaufender Prozess, der ständige Wartung erfordert.

Beim Webdesign – und eigentlich beim Design im Allgemeinen – geht es darum, die richtige Balance zwischen Form und Funktion zu finden. Sie müssen die richtigen Schriftarten, Farben und Designmotive verwenden. Aber die Art und Weise, wie Menschen auf Ihrer Website navigieren und sie erleben, ist genauso wichtig.

Erfahrene Designer sollten sich mit diesem Konzept gut auskennen und in der Lage sein, eine Website zu erstellen, die den Spagat zwischen diesen beiden Aspekten meistert.

Eine wichtige Sache, die man bei der Einführung bedenken sollte, ist, dass die Arbeit noch lange nicht zu Ende ist. Das Schöne am Web ist, dass es nie fertig ist. Sobald die Website live geht, können Sie kontinuierlich Benutzertests für neue Inhalte und Funktionen durchführen, Analysen überwachen und Ihre Botschaften verfeinern.

Weitere Beiträge zum Thema Webdesign:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.