Website-Design: Der vollständige Leitfaden

Offenlegung: Dieser Inhalt wird von Lesern unterstützt, was bedeutet, dass wir möglicherweise eine Provision erhalten, wenn Sie auf einige unserer Links klicken.

Website-Design war früher sehr schwierig, aber das ist nicht mehr der Fall.

Als ich vor Jahren anfing, meine Websites zu entwerfen, gab es nicht viele Ressourcen. Es gab im Grunde zwei Möglichkeiten: Erlernen Sie die Grundlagen der Programmiersprachen für Websites oder engagieren Sie einen Designer. Die erste Wahl ist schwierig und zeitintensiv. Letzteres ist teuer.

Nach einem kurzen Versuch, alles selbst zu entwerfen, gab ich schließlich den höchsten Dollar für einen Designer aus. Es war mehr, als ich ausgeben wollte, aber ich hatte nicht wirklich eine große Wahl.

Heutzutage stehen neuen Website-Eigentümern mehr Ressourcen zur Verfügung. Es ist möglich, eine professionelle Website zu entwerfen, ohne einen Designer einzustellen oder Programmieren zu lernen.

Egal, ob Sie ein absoluter Anfänger sind oder einfach nur nach einer alternativen Möglichkeit suchen, Websites zu gestalten, Sie sind an der richtigen Stelle. Wie man eine Website gestaltet, erkläre ich weiter unten in dieser Schritt-für-Schritt-Anleitung.

Mein Lieblingstool für Website-Design

Wix ist mein Lieblingstool für das Design von Websites. Es ist im Wesentlichen eine alternative Methode, um das Webdesign vollständig zu umgehen.

Als kostenloser Website-Builder macht es Wix jedem leicht, eine Website von Grund auf neu zu erstellen und zu gestalten – es sind keine Erfahrung, Entwicklungsfähigkeiten oder Designkenntnisse erforderlich.

Der Grund, warum ich Wix so liebe, ist, dass es einfach so mühelos ist. Selbst bei einem so einfachen Werkzeug sieht das endgültige Design immer professionell aus. Die Leute werden einfach annehmen, dass Sie einen Designer eingestellt haben – so gut ist das.

Diese Mühelosigkeit erstreckt sich auch auf wichtige Dinge, um die Sie sich nicht selbst kümmern möchten, wie Sicherheit und Zuverlässigkeit.

Wix verwaltet die Optimierung für beide auf ihrer Seite, sodass Ihre Website immer geschützt ist und ihre Server Ihre Website immer für Besucher bereitstellen können.

Außerdem gehen sie noch einen Schritt weiter mit automatisierten Standortdatensicherungen, die sicherstellen, dass Sie nie wieder bei Null anfangen müssen, falls etwas Schreckliches passieren sollte.

Ein weiterer Grund, warum ich Wix so sehr empfehle, ist seine Vielseitigkeit. Es kann die Designanforderungen von praktisch jeder Art von Website unter der Sonne erfüllen.

Von einfachen Blogs bis hin zu Portfolio-Websites, Online-Shops, Restaurant-Websites, Websites für kleine Unternehmen und mehr, Wix kann alles. Andere Website-Ersteller auf dem Markt haben einfach nicht die gleiche Vielseitigkeit.

Fahren Sie unten fort und ich werde Ihnen beibringen, wie Sie mit Wix kostenlos eine Website entwerfen.

Das erste, was Sie tun müssen, ist sich bei Wix anzumelden. Gehen Sie also zu Wix.com und erstellen Sie ein Konto. Dies ist zu 100 % kostenlos und Sie müssen nicht einmal Ihre Kreditkartendaten angeben.

Klicken Sie einfach auf eine der vielen „Erste Schritte“-Schaltflächen auf der Startseite oder an einer anderen Stelle auf der Website.

Im Gegensatz zu anderen Plattformen kann der Anmeldevorgang bei Wix in Sekundenschnelle abgeschlossen werden. Es müssen keine komplizierten Formularfelder ausgefüllt werden. Sie brauchen nur Ihre E-Mail und ein Passwort.

Sie können sogar die Eingabe umgehen und sich mit einem einzigen Klick über Google oder Facebook anmelden.

Sobald Sie sich angemeldet haben, führt Wix Sie automatisch durch den Website-Designprozess.

Schritt Nr. 2: Wählen Sie Ihren Website-Typ

Als nächstes müssen Sie herausfinden, welche Art von Website Sie entwerfen möchten. Ihre Antwort wird einen erheblichen Einfluss auf Ihre Designentscheidungen haben.

Zum Beispiel werden ein persönlicher Blog und eine E-Commerce-Website große Unterschiede in der Designauswahl haben. Eine Portfolio-Website, die zur Präsentation von Fotografien oder individueller Kunst verwendet wird, hat nicht das gleiche Design wie die Website eines lokalen Restaurants.

Wix erleichtert dir diesen Schritt. Sie werden aufgefordert, Ihren Website-Typ aus einer Vielzahl möglicher Optionen auszuwählen.

Basierend auf deiner Antwort präsentiert dir Wix automatisch passende Vorlagen in dieser Kategorie. Wenn Sie beispielsweise „Online-Shop“ auswählen, passt das Layout Produktseiten und Produktkategorien an und erleichtert Ihnen die Gestaltung eines Checkout-Prozesses.

Sobald du einen Website-Typ ausgewählt hast, bietet dir Wix zwei Optionen für dein Design:

• Lassen Sie Wix ADI eine Website für Sie erstellen.
• Erstellen Sie Ihre Website mit dem Editor.

Die erste Option ist unkompliziert und eignet sich hervorragend für Leute, die es eilig haben. Du beantwortest nur ein paar einfache Fragen und Wix entwirft basierend auf deinen Antworten eine Website für dich. Es ist beeindruckend, wie schnell der Prozess dauert.

In weniger als einer Minute haben Sie ein brandneues individuelles Website-Design. Das Design sieht wunderschön aus, und abgesehen davon, dass Sie die Seiten mit Ihren eigenen Inhalten anpassen, sind Sie fertig.

Für die Zwecke dieses Tutorials bleiben wir bei der zweiten Option – dem Erstellen einer Website mit dem Editor von Wix. Dies gibt Ihnen mehr Freiheit und Kontrolle über jeden Aspekt der Designauswahl.

Schritt #3: Wählen Sie eine Vorlage aus

Anstatt zu versuchen, eine Website mit einer leeren Leinwand zu entwerfen, ist es viel einfacher, mit einer Vorlage zu beginnen.

Nehmen Sie sich ein paar Minuten Zeit, um durch die verschiedenen Optionen zu blättern. Welche Stile magst du? Welche Vorlagen bilden Ihr Markenimage ab? Wix hat Tausende von Vorlagen zur Auswahl. Es kann anfangs etwas überwältigend sein. Aber grenzen Sie Ihren Fokus basierend auf Ihrer spezifischen Art von Website ein.

Für dieses Beispiel wähle ich eine „Business“-Website. Aber das ist eine wirklich breite Kategorie. Wenn Sie auf die linke Seite des Bildschirms schauen, können Sie Ihren Fokus weiter auf die Arten von Unternehmen eingrenzen.

Wix hat spezifische Vorlagen für Berater, Immobilienunternehmen, professionelle Dienstleistungen wie Finanzen und Recht, Marketing und vieles mehr. Jeder Website-Typ hat verschiedene Unterkategorien mit Vorlagen.

Wenn Sie beispielsweise „Online-Shop“ auswählen, werden Vorlagen für Kleidung, Schmuck, Elektronik, Heimdekoration, Schönheitsartikel, Sportausrüstung und mehr angezeigt. Wenn Sie eine Blog-Website entwerfen, bietet Wix Vorlagen für persönliche Blogs, Reiseblogs, Modeblogs, Podcasts usw.

Ihre Vorlage wird zur Grundlage für den Rest Ihres Website-Designs. Es ist also wichtig, sich Zeit zu nehmen und diesen Schritt nicht zu überstürzen. Sie können immer noch verschiedene Designelemente nach Ihren Wünschen anpassen, aber das ist mit der richtigen Vorlage viel einfacher.

Schritt #4: Bearbeiten Sie Ihr Layout

Website-Besucher bilden sich in weniger als einer Sekunde, nachdem sie auf der Startseite gelandet sind, eine Meinung über Ihre Website. Deshalb ist das Design so wichtig, und alles beginnt mit dem richtigen Layout.

Vorlagen von Wix wurden bereits für ein benutzerfreundliches Design optimiert. Aber Sie haben die Freiheit und Flexibilität, hier einige Änderungen vorzunehmen.

In diesem Beispiel bearbeite ich die Vorlage „Business Consultant“. Nehmen wir an, ich wollte die Positionierung der Überschrift auf dieser Homepage verschieben. Ich klicke einfach auf das Kästchen im Editor von Wix und ziehe es an eine andere Stelle auf der Seite.

Oder vielleicht möchte ich den Call-to-Action „Learn More“ auf der rechten Hälfte des Bildschirms neu positionieren. Ich kann darauf klicken und die Schaltfläche an eine beliebige Stelle ziehen.

Ich ermutige Sie, ein paar Dinge zu verschieben, wenn Sie zum ersten Mal anfangen. Dies wird dich in den Editor von Wix einführen, damit du dich später wohler fühlst. Wenn Sie letztendlich keine Layoutänderungen vornehmen möchten, können Sie jederzeit zum ursprünglichen Design zurückkehren.

Schritt Nr. 5: Bereiten Sie Ihre Inhalte vor

Inhalt ist ein wesentlicher Bestandteil des Designs Ihrer Website. Sie können das Design nicht vollständig fertigstellen, ohne genau zu wissen, welche Materialien auf der Website zu sehen sein werden.

Sammeln Sie Bilder, Videos, GIFs, Logos, Slogans, Text (Kopie) und alles andere, was Sie auf Ihrer Website anzeigen möchten.

Lassen Sie mich Ihnen ein Beispiel zeigen, um meinen Standpunkt zu veranschaulichen.

Ich bearbeite immer noch dieselbe Vorlage für Unternehmensberater. Eines der ersten Dinge, die ich auf diesem Teil der Seite tun würde, ist, das Bild mit einem Bild von mir auszutauschen. Aber bevor ich das tue, muss ich mir auch noch Gedanken über die entsprechende Textkopie auf der unteren linken Seite des Bildschirms machen.

Standardmäßig hat die Vorlage hier einige Leerzeichen, wie ich oben hervorgehoben habe. Obwohl Leerzeichen ein wichtiges Webdesign-Feature sind, mag ich es nicht, wie es in diesem Fall verwendet wird.

Das sind also meine Optionen:

• Verwenden Sie ein Foto in voller Länge (wie oben) und fügen Sie einen Absatz in die Leerstelle ein.
• Verwenden Sie ein kleineres Foto (z. B. einen Kopfschuss) und verwenden Sie nur einen einzelnen Textabsatz.

Beide werden mein Ziel erreichen, diesen leeren Abschnitt der Seite zu beseitigen. Sehen Sie, wie sich eine Komponente auf eine andere auswirkt? All dies hängt mit dem Design zusammen, und es ist viel einfacher, wenn Sie Ihre Inhalte im Voraus vorbereiten.

Schritt Nr. 6: Definieren Sie Ihre Markenstrategie

Beginnen Sie darüber nachzudenken, wie Besucher Ihre Website wahrnehmen werden. Dinge wie das Farbschema, Schriftarten und andere Designkomponenten wirken sich direkt auf Ihr Markenimage aus.

Klicken Sie auf den „Design-Manager“ auf der linken Seite Ihres Wix-Editors. Das ist der Knopf mit einem „A“ und etwas, das wie ein Regen- oder Farbtropfen aussieht.

Von hier aus können Sie die Designfarben Ihrer Website ändern. Sie haben auch die Möglichkeit, Ihre Standardtextthemen für Überschriften und Absätze zu bearbeiten.

In diesem Fall funktioniert die aktuelle Farbgebung gut für einen Unternehmensberater. Es ist modern und professionell. Aber nehmen wir an, Sie entwerfen eine Website für Kinder. Mit leuchtenden Farben und großen, fetten Schriftarten könnten Sie etwas mehr Spaß haben.

Wenn Sie Ihre Firmenlogos und andere Materialien bereits in Schritt 5 hinzugefügt haben, sollten Sie sicherstellen, dass das Farbschema gut zum Rest Ihres Inhalts passt.

Schritt Nr. 7: Landingpages hinzufügen

Ihre Zielseiten haben jeweils einzigartige Designs. Während sie alle den gleichen Branding-Prinzipien und dem gleichen Thema Ihrer Homepage folgen sollten, werden die Designoptionen einige Variationen aufweisen.

Um eine Seite hinzuzufügen, klicken Sie auf das obere Symbol auf der linken Seite Ihres Wix-Editors. Klicken Sie dann auf „Seite hinzufügen“, wie ich unten hervorgehoben habe.

Neue Seiten sind im Wesentlichen eine leere Leinwand, mit Ausnahme Ihrer Kopf- und Fußzeile. Aber anstatt bei Null anzufangen, können Sie jeder Seite „einen Streifen hinzufügen“, je nachdem, welchen Inhalt sie enthalten wird.

Klicken Sie einfach auf die Schaltfläche „+“ im Editor, um einige Optionen zu durchsuchen.

Betrachten Sie dies als eine Mini-Vorlage. Wenden Sie die gleichen Prinzipien an, die Sie in Schritt 3 verwendet haben, als Sie zum ersten Mal Ihre allgemeine Website-Vorlage ausgewählt haben.

Dies ist nur eine einfachere Möglichkeit, neue Zielseiten zu entwerfen. Wix hat bereits so viele großartige Optionen, dass es sich nicht lohnt, zu versuchen, Ihre Seiten von Grund auf neu zu erstellen.

Schritt Nr. 8: Konzentrieren Sie sich auf die Benutzerfreundlichkeit

Manchmal verlieren Sie während des Designprozesses den Fokus darauf, wie Besucher mit Ihrer Website interagieren. Aber die Benutzererfahrung (UX) darf nicht übersehen werden.

Es gibt bestimmte Best Practices für das Design, die Menschen erwarten, wenn sie eine Website besuchen. Beispielsweise erwarten sie, dass sich das Navigationsmenü oben auf der Seite befindet. Sie erwarten, dass die Fußzeile Kontaktinformationen enthält. Sie erwarten, dass das Logo sie auf die Startseite zurückführt.

Schauen wir uns etwas Einfaches an, wie ein Navigationsmenü:

In diesem Beispiel enthält das Menü nur vier Seiten. Sie könnten vielleicht davonkommen, ein oder zwei weitere hinzuzufügen. Aber darüber hinaus ist es zu viel.

Stellen Sie sich vor, diese Website hätte 10 oder 20 Seiten im Menü. Es wäre eine Katastrophe. Der obere Teil der Seite wäre zu unübersichtlich und Besucher würden nie finden, wonach sie suchen. Insgesamt wäre das eine schlechte Design-Wahl.

Denken Sie bei jeder Designentscheidung, die Sie treffen, an die Benutzerfreundlichkeit, von der CTA-Platzierung über Scroll-Effekte, Leerraum, Architektur und alles dazwischen.

Versuchen Sie hier nicht, das Rad neu zu erfinden. Befolgen Sie die Best Practices für das Webdesign, und die UX wird in Ordnung sein.

Schritt Nr. 9: Optimieren Sie das Design für Mobilgeräte

Laut Statista stammt etwa die Hälfte des weltweiten Web-Traffics von mobilen Geräten. Es besteht also die Chance, dass jeder Besucher Ihrer Website von einem Smartphone oder Tablet aus surft.

Sie müssen sicherstellen, dass Ihr Website-Design mobilfreundlich ist. Andernfalls springen die Besucher ab und Sie erhalten niemals mobile Conversions.

Glücklicherweise macht Wix diesen Vorgang für dich einfach.

Klicken Sie auf der Editor- oder Vorschauseite einfach auf das mobile Symbol, um die Desktop-Ansicht Ihrer Website zu verlassen.

Wix optimiert deine Website automatisch für Mobilgeräte. Aber es ist trotzdem eine gute Idee, alles selbst zu überprüfen, um zu sehen, ob Sie Änderungen vornehmen möchten. Wenn Sie etwas sehen, das Sie ändern möchten, können Sie das mobile Design Ihrer Website bearbeiten, ohne die Desktop-Version zu ändern.

Schritt Nr. 10: Veröffentlichen Sie Ihre Website

Sobald Sie das Design fertiggestellt haben, ist es an der Zeit, Ihre Website online zu stellen.

Beachten Sie, dass Ihre Website nicht zu 100 % fertig sein muss, um sie zu veröffentlichen. Sie können jederzeit zurückgehen und zu einem späteren Zeitpunkt Seiten hinzufügen. Aber sobald Sie eine Homepage, eine Info-Seite, eine Kontaktseite und eine Handvoll Website-Elemente haben, lassen Sie sie veröffentlichen, damit Sie anfangen können, Traffic zu generieren. Stellen Sie nur sicher, dass Sie keine unvollständigen Seiten veröffentlichen.

Klicken Sie oben rechts in Ihrem Dashboard von Wix auf die blaue Schaltfläche „Veröffentlichen“, um fortzufahren.

Wie ich bereits sagte, können Sie eine Website mit Wix zu 100% kostenlos entwerfen und veröffentlichen. Aber da ist ein Fang.

Kostenlose Nutzer von Wix können ihre Domain nicht anpassen. Alle Domains enthalten den Namen Ihres Wix-Kontos, gefolgt vom Branding von Wix und dem Namen Ihrer Website. Wie Sie dem obigen Beispiel entnehmen können, wäre die Domäne hier:

http://neilpatelsample.wixsite.com/mysite-1

Dies ist keine praktikable Option für geschäftliche Websites. Es ist in Ordnung, wenn Sie die Website nur verwenden, um mit Webdesign-Prinzipien herumzuspielen. Wenn Sie jedoch eine legitime Website mit echten Besuchern wünschen, müssen Sie auf einen Premium-Tarif von Wix upgraden.

Jetzt können Sie einen benutzerdefinierten Domainnamen verwenden, der entweder direkt bei Wix oder bei einem Drittanbieter-Domainregistrar erworben wurde. Wenn Sie noch keine Domain haben, besorgen Sie sich einfach eine von Wix. Es ist einfacher, alles über eine einzige Plattform zu verwalten.

Fazit

Das Website-Design hat sich im Laufe der Jahre wirklich weiterentwickelt. Was einst eine große Herausforderung oder ein kostspieliges Wagnis für neue Websitebesitzer war, kann jetzt mit Leichtigkeit bewerkstelligt werden.

Website-Builder wie Wix machen es im Wesentlichen überflüssig, Websites von Grund auf neu zu entwerfen.

Nicht-technische Benutzer und Personen ohne Designerfahrung können eine Vorlage auswählen und ihre Website mit benutzerdefinierten Inhalten füllen. Sie müssen keine Web-Programmiersprachen lernen oder einen Designer einstellen.

Melden Sie sich bei Wix an, folgen Sie der oben aufgeführten Schritt-für-Schritt-Anleitung und Sie haben in wenigen Minuten eine professionell gestaltete Website. So einfach ist das!

Erfahren Sie, wie meine Agentur enorme Mengen an Traffic auf Ihre Website lenken kann

• SEO – Schalten Sie riesige Mengen an SEO-Traffic frei. Siehe echte Ergebnisse.
• Content Marketing – unser Team erstellt epische Inhalte, die geteilt werden, Links erhalten und Traffic anziehen.
• Paid Media – effektive Bezahlstrategien mit klarem ROI.

Buchen Sie einen Anruf