Wie gestaltet man eine Webseite von Grund auf?

In diesem Artikel lernen Sie wie man eine Website von Grund auf neu gestaltet und einige kostenlose und kostenpflichtige Programme zum Erstellen Ihrer ersten Unternehmenswebsite.

Wenn eine Website gut gestaltet ist, sei es mit einem Website-Builder oder mit Hilfe von Webdesignern und -entwicklern, zeigt sie, was Sie zu bieten haben, unterstützt die Generierung von Geschäftsmöglichkeiten und zieht Ihre ideale Zielgruppe an. .

Wenn Sie einen Online-Shop einrichten, sollten Sie auch beim Verkauf von Produkten eine sichere und einfach zu bedienende Plattform bereitstellen.

Eine gute Website ermöglicht es Ihnen, eine starke Markenidentität aufzubauen und Ihre Geschichte so zu erzählen, wie Sie sie erzählen möchten. Sie haben die volle Kontrolle über jedes Element, bis hin zum letzten Pixel.

Die gute Nachricht ist, dass Sie zu Beginn eine Website von Grund auf selbst erstellen können. Die Quintessenz ist, dass Sie beim Erstellen des visuellen Designs Ihrer Website bestimmte Richtlinien befolgen, um die Aufmerksamkeit der Benutzer mit einer benutzerfreundlichen Benutzeroberfläche effektiv zu erregen und zu halten.

Verwenden Sie die folgende Schritt-für-Schritt-Anleitung und Tipps, um eine großartige Website von Grund auf zu entwerfen, die den einzigartigen Wert Ihres Unternehmens vermittelt.

Lassen Sie uns beginnen!

1. Ziele und Prioritäten festlegen

Wenn viele an erfolgreiches Website-Design und -Entwicklung denken, denken sie an die Namen von Web-Domain, ein zuverlässiger Webserver, Website-Farbschemata und Content-Management-Systeme…

Ein erfolgreiches Website-Design setzt jedoch auf klare Prioritäten. Beginnen Sie Ihr Website-Projekt, indem Sie bestimmen, was für Ihr Unternehmen am wichtigsten ist, damit Sie wissen, was Ihre Website enthalten muss.

Schreiben Sie auf, wie Erfolg aussieht und arbeiten Sie von dort aus. Dieser Prozess hilft Ihnen bei der Entscheidung, was Teil Ihrer Website sein soll.

Es kann nützlich sein, andere Websites in Ihrem Nische um Sie mit dem Design zu inspirieren. Durchsuchen Sie ihre Seiten und notieren Sie die Informationen, die sie bereitstellen, wie ihre Marken kommunizieren und was sie anbieten, um die Aufmerksamkeit der Besucher zu gewinnen und zu halten ...

Überlegen Sie, was Ihrer Meinung nach gut auf Ihrer Website funktioniert und was Sie mit Ihrem eigenen Design verbessern möchten.

Diese Liste wichtiger Website-Elemente hilft Ihnen beim Erstellen einer Sitemap.

Erstellen Sie eine Sitemap

Eine Sitemap, wie der Name schon sagt, bildet Ihre Website ab und skizziert, welche Seiten Sie haben werden und wie die Seiten miteinander in Beziehung stehen, und hilft Ihnen, Ihr Design und Ihre Informationsarchitektur von Grund auf neu zu erstellen.

Ziehen Sie in Erwägung, diese einzubeziehen grundlegende Arten von Webseiten Auf deiner Webseite :

Hauptseite

Dies ist die erste Seite Ihrer Website, daher ist es oft die erste Seite, die neue Besucher sehen. Sie müssen zuerst die wichtigsten Informationen sehen, verstehen, was Sie anbieten, und wissen, wie sie leicht zu den nächsten Aufgaben navigieren können.

Über uns

Hier finden Besucher grundlegende Informationen über Ihr Unternehmen, wie Sie angefangen haben, wo Sie sich befinden, Ihre Mission und die Profile der wichtigsten Mitglieder Ihres Teams.

Sie können auch Links zu Öffnungszeiten und Standorten (sofern vorhanden), Links zu Social-Media-Seiten und Kontaktinformationen einfügen.

Dienstleistungen

Je nachdem, was Ihr Unternehmen oder Ihre Organisation tut, kann eine Seite mit kurzen Erläuterungen zu den von Ihnen angebotenen Dienstleistungen oder den visuellen Inhalten Ihrer Produkte und Links zu detaillierten Seiten, auf denen Sie mehr über diese Dienstleistungen erfahren, für neue Besucher sehr hilfreich sein. .

Karriere

Wenn Sie häufig neue Teammitglieder benötigen, ziehen Sie eine Seite in Betracht, auf der Sie verfügbare Stellen hervorheben können, oder ein Formular, auf dem Personen nach offenen Stellen fragen können.

Blog

Wenn Sie regelmäßig Inhalte veröffentlichen, kann eine Blog-Seite ein zentraler Ort sein, den Besucher finden können ...

Dies kann Produkt- oder Service-Updates, Artikel zu Ihrem Angebot, Profile neuer Projekte und alle anderen Inhalte umfassen, die dazu beitragen, Website-Besucher über Ihre Organisation zu informieren.

Literatur-Empfehlungen: So starten Sie Schritt für Schritt einen Blog.

2. Erstellen Sie ein Drahtmodell

Un Drahtgitter- ist ein Skelettdiagramm für Ihre Website. Wie ein Plan für ein Haus erhalten Sie ein zweidimensionales Bild von Design, Struktur und Funktionalität Ihrer Website.

Wireframes können mit einem einfachen Stift und Papier oder digital mit Webdesign-Tools oder einem Website-Builder erstellt werden, der Ihnen helfen kann, Ihre Webseitenstruktur visuell zu kommunizieren.

dort 3 Arten von Wireframes und während Sie Ihre Website entwickeln, werden Sie zwischen ihnen wechseln, um mehr "Loyalität" oder Details zu gewinnen.

1. Low-Fidelity-Wireframes

Diese frühen Skizzen, die normalerweise einfache Formen und Platzhaltertext haben, eignen sich hervorragend, um Ihren Browsing-Flow zu kartieren.

Konzentrieren Sie sich an dieser Stelle auf den Inhalt und darauf, wie der Benutzer damit interagiert, und nicht darauf, wie die Website tatsächlich aussieht. Dies ist die Planungsebene, Sie skizzieren also nur die Website und denken über die Hierarchie nach.

2. Wireframes mit mittlerer Wiedergabetreue

Zu diesem Zeitpunkt haben Sie noch keinen Live-Text oder Bilder. Sie erstellen Schwarzweiß-Renderings, die eine genaue Darstellung des Webseiten-Layouts zeigen.

Es gibt Tools zum Erstellen dieser Renderings, die kostenlose Testversionen anbieten, wie z Skizze ou Balsamiq. Dieser Schritt ist das Rückgrat Ihrer Website. Sie brauchen kein bestimmtes Design, aber klare Linien und eine präzise Größe.

3. High-Fidelity-Wireframes

In diesem letzten Schritt Ihres Website-Designs erstellen Sie ein Modell, das wie Ihre echte Website aussieht, mit Bildern, Farbkombinationen und echtem Text ...

Jetzt können Sie Dinge wie Ihre Menüs und interaktive Inhalte für Ihre Website von Grund auf neu gestalten. Hier fügen Sie Farbe und Text hinzu, aber verwechseln Sie es nicht mit einem funktionierenden Prototyp. Dies ist immer noch nur ein Beispiel für Ihre Website-Hierarchie.

3. Gestalten Sie mit Ihrem Publikum im Hinterkopf

Konzentrieren Sie sich beim Durchlaufen der Designphasen einer Website darauf, ein Asset aufzubauen, das Ihrem Publikum dient. Schließlich ist das der Punkt.

Stellen Sie sicher, dass Sie bei jedem Schritt Ihrer Website-Entwicklung, von der Priorisierung und Formatierung bis hin zur Bestimmung der Navigation, an die Bedürfnisse Ihrer Zielgruppe denken.

So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, Sie sollten immer den Endbenutzer in den Vordergrund stellen.

Bietet eine visuelle Hierarchie

Die robuste Hierarchie ermöglicht es Besuchern, schnell Informationen zu sammeln und zu verstehen, wo sie auf Ihrer Website weitere Informationen finden können.

Die visuelle Hierarchie umfasst Abstände, Farben, Weißraum, Wiederholung usw.

Halte es einfach

Achten Sie bei der Gestaltung Ihrer Website darauf, dass das Besuchererlebnis benutzerfreundlich ist, indem Sie überlegen, ob die Benutzer alle Elemente benötigen. Möglicherweise fügen Sie Funktionen hinzu, die die Website komplizieren und die Navigation für Ihr Publikum erschweren.

Habe einen klaren Call-to-Action

„Bestellung aufgeben“, „Jetzt kaufen“, „Registrieren“, „Kontakt“ und andere Calls-to-Action (CTAs) sollten leicht zu finden und intuitiv sein.

Fragen Sie sich immer wieder, ob Ihr Website-Design es Ihrem Publikum leicht macht, zu wissen, wohin es als nächstes gehen soll.

Machen Sie es zugänglich

Ihre Website sollte responsive und von jedem Gerät aus zugänglich sein. Überprüfen Sie das Design und die Leistung verschiedener Aspekte Ihrer Website auf PCs, Tablets und Mobiltelefonen.

Stellen Sie sicher, dass Benutzer Text und Bilder auf verschiedenen Geräten richtig sehen können und dass Schaltflächen und Handlungsaufforderungen auf Bildschirmen unterschiedlicher Größe leicht angeklickt werden können.

4. Verwenden Sie Fotos, um Ihre Geschichte zu erzählen

Eine Website ist ein visuelles Erlebnis. Konzentrieren Sie sich daher auf Bilder, die Ihre Zielgruppe ansprechen, um zu vermitteln, worum es bei Ihrer Marke geht.

Wenn Sie noch kein eigenes Foto haben, um Ihre Produkte oder Dienstleistungen zu veranschaulichen, gibt es viele Quellen für Stock-Bilder. Websites wie Pixabay, Pexels et Unsplash bieten eine große Auswahl an kostenlosen Bildern für Sie an aider anfangen.

Finden Sie eine Reihe von Archivbildern desselben Sets oder eines bereitgestellten Fotografen. Auf diese Weise können Sie die stilistische Konsistenz Ihrer Website beibehalten. Es wird Ihr Website-Design professioneller und Ihr Geschäft vertrauenswürdiger machen.

canva ist ein weiteres großartiges Tool, mit dem Sie Ihr Website-Design von Grund auf verbessern können .

Es ist ein großartiges Programm mit vielen Funktionen, um Ihre Website großartig aussehen zu lassen.

Literatur-Empfehlungen: Was ist Canva und wofür wird es verwendet?

Tipps zur Bildauswahl

• Stellen Sie sicher, dass Ihre Fotos eine Geschichte erzählen
• Wählen Sie nicht nur ein Bild aus, weil es hübsch ist. Fragen Sie sich, ob das Bild zu Ihren Inhalten passt, um Ihre Marke zum Leben zu erwecken.
• Seien Sie originell, auch wenn Sie Aktionen verwenden.
• Wählen Sie nicht die naheliegendste Option. Sie möchten nicht etwas auswählen, das ein Besucher sofort wiedererkennt, wie ein Archivfoto, das er auf einem Dutzend anderer Websites gesehen hat.
• Stellen Sie sicher, dass die Personen auf den Bildern wie Ihre Zielgruppe aussehen. Dadurch fühlen sich die Besucher wie Ihre Website und Ihre Marke, Ihr Produkt oder Ihre Dienstleistung ist etwas, mit dem sie sich identifizieren können und das sie brauchen.

Seien Sie im Einklang mit dem Stil des Bildes

Stellen Sie sicher, dass Ihre Website-Visuals Ihrer Marke treu bleiben. Behalten Sie die Konsistenz bei Farben, Schriftarten und Bildern bei, damit sie Ihr Markenimage stärken.

Bilder zuschneiden, um eine größere Wirkung zu erzielen

Wenn Sie beispielsweise importierten Kaffee verkaufen und ein Bild finden, das einen Mann zeigt, der in einer Gruppe Kaffee trinkt, schneiden Sie das Foto zu, um den Mann hervorzuheben. Sie erhalten mehr Aufmerksamkeit und es wird im Vergleich zu anderen Websites, die das Bild möglicherweise ohne Zuschneiden verwendet haben, einzigartig aussehen.

5. Verfolgen Sie Ihre Leistung

Eine Website wird sich ständig weiterentwickeln, wenn Ihr Unternehmen wächst. Verfolgen Sie Ihre Leistung frühzeitig mithilfe Ihrer Website-Berichte, um zu sehen, was funktioniert und was nicht. Passen Sie dann an, um die Benutzererfahrung und die Ergebnisse für Sie zu verbessern.

Die Integration von Google Analytics zu Ihrer Website kann Ihnen dabei helfen, Aktivitäten zu verfolgen, um zu sehen, welche Seiten den meisten Traffic erhalten und auf welche Nutzer klicken.

Was ist ein A/B-Test?

L ' A / B, in dem 2 verschiedene Versionen verglichen werden, hilft Ihnen festzustellen, welche Elemente Ihrer Website am besten funktionieren und stellen sicher, dass Ihr CTA Ihre Besucher motiviert.

Eine Möglichkeit, um zu sehen, wie Benutzer mit Ihrer Website interagieren, ist ein Heatmap-Tool wie Hotjar.

Die Heatmap bietet eine farbcodierte grafische Darstellung, wo die Augen der Menschen auf der Website natürlich gezeichnet werden. Dies kann Ihnen zeigen, welche Bereiche Ihrer Website die meiste Aufmerksamkeit erhalten, und kann Ihre zukünftigen Designverbesserungen leiten.

Da der Traffic in Echtzeit verfolgt wird, ist es sowohl für neue Websites als auch für langlebige Websites geeignet. Und das Beste daran ist, dass das Heatmap-Layout einfach und leicht zu verstehen ist.

5 Programme zum Gestalten von Webseiten

Hier sind 5 der besten Programme zum Entwerfen einer Website von Grund auf. Einige dieser Programme sind kostenpflichtig und ermöglichen Ihnen den kostenlosen Einstieg.

1. Klicktrichter

ClickFunnels ist ein Generator von Verkaufstrichter für Unternehmer. Sie wählen eine vordefinierte Vorlage aus und beginnen mit der Gestaltung Ihrer Webseiten mit dem Drag-and-Drop-Editor.

Der Aufbau Ihres Verkaufsprozesses ist einfach, da ClickFunnels das Rätselraten überflüssig macht. Lesen Sie Online-Bewertungen und Sie werden sehen, dass das beste Merkmal des Tools seine Ressourcen sind.

ClickFunnels bietet a kostenlose Testversion von 14 Tagen. Bezahlte Pläne beginnen bei 97 USD / Monat.

2. Hauptseiten

Leadseiten ist am besten bekannt für seine dort landen Seite Baumeister et Verkauf | Baumeister, aber Sie werden sehen, dass es genauso gut funktioniert fürvollständige Webseiten.

Die Leadpages-Software bietet konversionsorientierte Funktionen wie One-Click-Anmeldungen und Warnleisten, was sie zu einem Kinderspiel macht, wenn Sie hochwertige Leads auf Ihrer gesamten Website anziehen möchten ...

Es bietet auch viele hochgradig konvertierte und mobilfreundliche Vorlagen ohne jegliche Codierungsanforderungen.

Der Standard Leadpages-Plan beginnt bei 37 US-Dollar pro Monat. Sie können Leadpages 14 Tage kostenlos testen.

3. Erhalten Sie eine Antwort

GetResponse verfügt über einen eleganten Drag-and-Drop-Webseiten-Designer, mit dem Sie jedes Element auf der Seite von Grund auf anpassen und an jedes Gerät anpassen können.

Wie andere Webdesigner bietet GetResponse auch eine Vielzahl von gebrauchsfertigen Zielseitenvorlagen.

Aber GetResponse ist mehr als nur ein Webdesigner. Es ist eine All-in-One-Lösung, spezialisiert auf Marketing-Automatisierung. Und wenn wir alles in einem sagen, meinen wir es auch so. Es ist auch eine der besten Plattformen für E-Mail Marketing von der Markt.

Alle GetResponse-Pläne enthalten 220 E-Mail-Vorlagen, 180 Zielseitenvorlagen, 700 Formularvorlagen, 40 Vorlagen für den automatischen Trichter, 150 Integrationen und Live-Chat-Support rund um die Uhr.

Der Basic GetResponse-Plan kostet 15 US-Dollar pro Monat.