Die 8 Gebote eines Webdesign-Prozesses (für Neulinge & ohne Code)

Finden Sie heraus, wie Sie eine erfolgreiche Website erstellen können, indem Sie einem strukturierten Website-Designprozess folgen.

Unsere Hypothese ist, dass Sie bereits einen Domainnamen und einen Hosting-Anbieter gefunden haben.

Wenn Sie sich noch nicht für Ihren Host entschieden haben, empfehlen wir Ihnen unbedingt unseren Partner Cloudways .

Im folgenden Beispiel werden die Schritte für den Fall dargestellt, dass Sie eine Website für sich selbst erstellen. Wenn die Website für einen Kunden bestimmt ist, können neue Schritte in Bezug auf die Projektplanung, die Einrichtung von Fristen, den Vertrag und mehr erfolgen. Aber im Kern müssen Sie sich immer noch an die unten aufgeführten Schritte halten.

Nun, hier sind die Schritte:

1. Scope-Identifikation : Welche Bedürfnisse muss die Website erfüllen? Mit wem spricht die Website? Was sind seine Ziele und Motivatoren? Welche Unternehmen haben den gleichen Umfang und die gleiche Zielgruppe wie Sie?
2. Definieren der Sitemap der Website : Welche Webseiten und Funktionen helfen dem Unternehmen und dem Publikum, ihre Ziele zu erreichen?
3. Inhaltserstellung : Vorbereitung der Kopie für die Seiten der Website;
4. Erstellen der visuellen Marke : Vorbereitung der Farbpalette, Schriftarten und Grafiken, die in Ihrem Website-Design verwendet werden sollen, was letztendlich Ihre visuelle Identität prägen wird;
5. Wireframing: Skizzieren des Layouts Ihrer Webseiten;
6. Website-Design : Beim Erstellen der eigentlichen Website sollten Sie sich der Einschränkungen der von Ihnen verwendeten Tools bewusst sein;
7. Testen : Sicherstellen, dass alles funktioniert, von Links bis hin zu Formularen und Schaltflächen. Testen Sie die Website auf verschiedenen Browsern und Geräten, um sicherzustellen, dass sie ordnungsgemäß funktioniert;
8. Launch: Machen Sie mit einer sorgfältig geplanten Kommunikationsstrategie Lärm, bevor Sie live gehen.

Nehmen wir sie einzeln.

Die Schritte eines Website-Designprozesses

1. Bereichsidentifikation

In dieser Phase müssen Sie und Ihr Team Antworten auf einige der folgenden Fragen finden:

• Für wen ist die Seite?

Eine auffällige Website mag ihre Vorteile haben, aber wenn Sie möchten, dass die Besucher Ihrer Website ihr Geld oder ihre Zeit investieren, bedeutet dies, dass Sie mehr graben müssen, um sie davon zu überzeugen, dass sich das Engagement lohnt. Um überzeugend zu sein, müssen Sie Ihre Zielgruppe, ihre Bedürfnisse, interne und externe Motivatoren verstehen.

Dieses Graben bedeutet auch, dass Sie ein Produkt entwickeln müssen, das nützlich ist und die Bedürfnisse von jemandem erfüllt.

Nehmen wir zum Beispiel an, ich habe ein Hobby, Blumenarrangements aus Papier zu machen, und möchte es weiterführen und es in ein Geschäft umwandeln. Papiert jemand Blumen? Wo finde ich diese Personen?

Nun, ich könnte denken, dass Hochzeitsplaner und zukünftige Bräute eine solche Option wünschen könnten.

Aber ich muss noch weiter gehen. Würde jede Braut meine Papierblumen wollen oder nur eine Art Braut?

Dies bedeutet, dass Sie einige Nachforschungen anstellen und Ihre Konkurrenten überprüfen müssen. Gibt es noch andere Papierblumenhändler? Sie konkurrieren auch mit den guten alten Blumenläden. Was wäre dann Ihr Mehrwert bzw. Ihr Alleinstellungsmerkmal?

• Was würden Ihre Website-Besucher auf Ihrer Website erwarten?

Um auf unser Beispiel zurückzukommen, Ihre Besucher möchten wahrscheinlich eine Vielzahl von Produkten, Farben, Informationen zum Versand (sie benötigen möglicherweise besondere Sorgfalt, da die Papierblumen zerbrechlich sind) usw. Was ist mit einigen Erwähnungen, dass das Papier recycelt ist? ? Vielleicht sind sich Ihre Kunden ihrer Auswirkungen auf die Umwelt sehr bewusst und kümmern sich um solche Details

Kann jemand die Blumen auch mieten?

Nun, was ist, wenn Sie einige Erfahrungsberichte hinzufügen? Vielleicht haben Sie für die Hochzeiten Ihrer Freunde ein paar Blumenarrangements aus Papier entworfen.

Sehen Sie, wo ich hinkomme? Sie müssen Ihre Recherche durchführen, bevor Sie sich mit dem Website-Design befassen.

• Wie sieht es mit Conversions aus?

Sprechen wir über die Kursanmeldung, den Kauf eines Produkts, das Abonnement eines Newsletters?

Im Fall von Montag können Sie ihre Conversions leicht von der Homepage aus herausfinden.

Die Hauptumwandlung ist aus dem Call-to-Action „Loslegen“ ersichtlich, der direkt über dem Falz in der Mitte positioniert ist.

Eine weitere Mikrokonversion ist eine Konferenzregistrierung, die Sie an der Nachricht in der oberen linken Ecke erkennen können.

Eine weitere Micro-Conversion ist die „Contact Sales“.

Was ist mit Ihrer Website, gibt es eine Hauptkonvertierung? Gibt es sekundäre?

• Wie sieht die Customer Journey aus?

Eine Customer Journey Map ist eine visuelle Darstellung des Weges, den ein Besucher von seinem Eingang durch Ihre Website nimmt, bis er das gewünschte Ziel erreicht und verlässt.

Eine Customer Journey Map sollte Informationen enthalten wie die Seiten, die besucht werden und in welcher Reihenfolge, die erforderlichen Schritte, damit ein Website-Besucher seine Ziele erreicht, die Interaktionspunkte zwischen Ihrem Unternehmen und den Besuchern der Website (Formulare, Chat usw.), potenzielle Reibungspunkte.

Eine Customer Journey ist nicht festgelegt. Sie beginnen mit einer Annahme und passen sie im Laufe der Zeit an. Sie können Tools wie Google Analytics verwenden, um das Website-Verhalten zu analysieren und Optimierungen auf der Grundlage echter Erkenntnisse vorzunehmen.

2. Definition der Sitemap der Website

Quelle

Nachdem die Customer Journey nun klar ist, ist es an der Zeit, die Sitemap zu erstellen. Die Sitemap einer Website wird verwendet, um die Informationsarchitektur der Website festzulegen und die Beziehungen zwischen verschiedenen Seiten zu erläutern.

Sie können Sitemaps in Tools von Excel bis Figma erstellen.

3. Inhaltserstellung

Nachdem nun die Struktur der Website festgelegt ist, ist es an der Zeit, Inhalte für die einzelnen Seiten zu erstellen.

Hier sind einige Best-Case-Praktiken, wenn es um das Verfassen von Texten geht:

• Verwenden Sie Wörter und Konzepte, die Ihren idealen Benutzern vertraut sind;
• Gehen Sie nicht mit Flusen und Jargon;
• Versuchen Sie, so zu kommunizieren, wie Sie es bei einer normalen Begegnung von Angesicht zu Angesicht tun würden. Auf diese Weise erzeugen Sie ein Gefühl der Vertrautheit;
• Schreiben Sie im Präsens und vermeiden Sie Passiv;
• Überprüfen Sie immer Ihre Lesbarkeit. Dazu können Sie Tools wie Readable verwenden .
• Testen Sie Ihre Schlagzeilen mit Freunden, Fremden, Kollegen. Wie David Ogilvy es ausdrückt:

„Im Durchschnitt lesen 5x so viele Leute die Überschrift wie den Fließtext. Wenn Sie Ihre Überschrift geschrieben haben, haben Sie achtzig Cent von Ihrem Dollar ausgegeben.“

Das bedeutet, dass Überschriften auf einer Website von entscheidender Bedeutung sind.

Versuchen Sie, Ihre Inhalte um bestimmte relevante Keywords für Ihr Publikum (SEO) herum zu optimieren. Sie können Tools wie Google Trends (kostenlos), Ubersuggest (kostenlos) oder Ahrefs (kostenpflichtig) verwenden.

• Nutzen Sie das AIDA Copywriting Framework.

A – Aufmerksamkeit : Erstellen Sie Inhalte, die Aufmerksamkeit erregen, Neugier wecken und Ihr Publikum davon überzeugen, dass es mehr über Ihre Marke erfahren muss.

I – Interesse : Geben Sie Ihren Besuchern einen Grund, sich zu engagieren. Der Schlüssel hier ist, das Problem persönlich zu machen, sodass Sie nur mit dem Interessenten sprechen und mit niemand anderem.

D – Wunsch : Hier zeigen Sie Ihren Homepage-Besuchern, wie Ihre Angebote eine Lösung für ihr Problem/Schmerz bieten. Hier können Sie damit beginnen, die Funktionen Ihres Produkts zu erklären, wobei Sie sich darauf konzentrieren, wie diese Funktionen ihr Leben verbessern können.

A – Aktion : Jetzt ist es an der Zeit, potenzielle Kunden zum Handeln zu bewegen: kaufen, abonnieren, ein Freebie herunterladen, eine Testversion starten usw.

4. Erstellen der visuellen Marke

Dieser Schritt muss nicht immer dein 4. Schritt sein. Damit können Sie noch früher im Prozess beginnen.

Die visuelle Identität bezieht sich auf die Art und Weise, wie Sie die Wahrnehmung rund um Ihre Marke gestalten.

Das ist ein ganzer Prozess für sich.

Hier müssen Sie:

• Definieren Sie, wie Ihre Grafiken aussehen sollen. Werden Sie Formen, 3D-Grafiken, Illustrationen verwenden?

Quelle

• Definieren Sie die Typografie Ihrer Website ;

Quelle

• Wählen Sie eine Farbpalette . Aus der Farbpalette können Sie sich zu einem Styleguide entwickeln, in dem Sie die Farben von Links, Überschriften, Schaltflächen, Hintergründen usw. festlegen können. Dazu können Sie Tools wie das Adobe-Farbrad verwenden .

Quelle

• Kuratieren Sie Bilder , die die Geschichte Ihrer Marke erzählen;

Quelle: https://convertsquad.com/blog/

• Entwerfen Sie Ihr Logo

Quelle

• Bereiten Sie physische Vermögenswerte vor (Produktverpackung usw.).

Quelle

Die meisten der oben genannten Elemente können zum Erstellen eines Moodboards verwendet werden. Wenn Sie Ihre Schriftarten, Grafiken und Farben in einem Moodboard zusammenstellen, können Sie die allgemeine Stimmungsvision der Website besser verstehen. Wie wird Ihr allgemeiner Ton und Ihre Stimme sein: hell oder dunkel? Formell oder verspielt?

Quelle

5. Wireframing

Quelle

Wireframes sind Skizzen einer Webseite oder App. Sie können sie je nach Komplexität Ihrer Website von Hand zeichnen oder in Google Docs, Sketch oder Figma erstellen. Ein Wireframe wird verwendet, um Inhalt und Funktionalität auf einer Seite zu gestalten. Es sollte einem Designer sagen, wo er ein Video, Bilder, Überschriften, Inhaltsblöcke, Schaltflächen usw. platzieren soll. Es ist gut, Wireframes zu verwenden, bevor Sie mit dem Design beginnen, da Sie damit flexibler sind. Es ist einfacher, die Struktur eines Wireframes zu ändern als die einer fertig gestalteten Website.

6. Website-Design

Quelle

Jetzt reden wir übers Geschäft!

Wir haben unsere Inhalte, Wireframes und visuellen Elemente, jetzt ist es an der Zeit, sich an die Arbeit zu machen.

Wie im Titel erwähnt, müssen Sie kein Webdesigner oder Code-Freak sein, um eine Website zu erstellen. Es gibt viele Tools, mit denen Sie eine Website ohne Code erstellen können. Sie werden Page Builder genannt.

Die meisten von ihnen ermöglichen es Ihnen, jeden Zentimeter Ihres Designs anzupassen und es reaktionsschnell zu machen.

Innerhalb von WordPress können Sie beispielsweise unseren eigenen Colibri-Builder oder Elementor verwenden. Außerhalb von WordPress sind Wix und Squarespace sehr beliebt. Diese Tools können Ihnen Vorlagen zur Verfügung stellen, die Sie durch Hinzufügen Ihrer eigenen Abschnitte, Grafiken und Inhalte anreichern können.

Wenn Ihr Design nun bestimmte Animationen und Effekte erfordert, müssen Sie möglicherweise etwas Code hinzufügen.

7. Testen

Ok, nehmen wir an, Ihre Inhalte und Grafiken sind verfügbar. Ihr Job ist noch nicht fertig. Es ist an der Zeit sicherzustellen, dass alles funktioniert: Sie haben keine Links, die ins Nirgendwo führen (auch bekannt als defekte Links oder 404-Fehler), dass alle Ihre Schaltflächen und Formulare funktionieren, dass die Website auf den meisten Browsern und Geräten gut aussieht.

Jetzt könnten Sie vor dem Launch ein wenig testen, wie Ihre Website von Externen wahrgenommen wird. Auf diese Weise können Sie vermeiden, in Ihren eigenen Vorurteilen gefangen zu sein. Dazu könnten Sie eine einfache Nutzerforschung durchführen: den 5-Sekunden-Test . Mit dieser Methode können Sie beispielsweise den ersten Eindruck messen, den Benutzer in den ersten fünf Sekunden nach dem Aufrufen einer Homepage bekommen

8. Starten

Wenn Sie jetzt starten, klicken Sie einfach auf „Veröffentlichen“ und Sie sind fertig. Nein, Sie müssen etwas Aufsehen erregen, einige PR-Kampagnen starten, einen Social Media Shoutout machen, um die Leute wissen zu lassen, dass Sie draußen sind!

Und das ist ein Wrap Leute. Jetzt haben Sie die richtigen Schritte für einen Webdesign-Prozess.

Viel Spaß beim Erstellen der Website!

Wenn Ihnen dieser Artikel gefallen hat und Sie mehr darüber erfahren möchten, wie man eine WordPress-Website gestaltet , abonnieren Sie unbedingt den Youtube-Kanal von Colibri und folgen Sie uns auf Twitter und Facebook!

Willst du deinem Geschäft auf die Sprünge helfen?

Erhalten Sie zweimonatliche Updates zu:

• Entwerfen atemberaubender WordPress-Websites
• Aufbau einer Online-Präsenz
• Förderung Ihrer Website

E-Mail-Addresse:

Kreuzen Sie an, wenn Sie über 18 Jahre alt sind und exklusive Werbegeschenke, Neuigkeiten zu WordPress und unseren Produkten per E-Mail erhalten möchten. Sie können sich jederzeit abmelden. Weitere Informationen finden Sie in unserer Datenschutzrichtlinie und unseren Nutzungsbedingungen.