Wir bewerten die Anbieter auf Grundlage strenger Tests und Bewertungen, berücksichtigen aber auch Dein Feedback und unsere geschäftlichen Vereinbarungen mit den Anbietern.Diese Seite enthält Affiliate-Links.
  1. Website Planet
  2. >
  3. Blog
  4. >
  5. Website-Gestaltung: Einfache Schritt-für-Schritt-Anleitung [2024]

Website-Gestaltung: Einfache Schritt-für-Schritt-Anleitung [2024]

Emma Ayres Emma AyresExperte für Webseiten-Entwicklung
Du denkst, dass Du ohne eine Website auskommst? Falsch gedacht. Kunden erwarten nicht nur, dass Dein Unternehmen eine Website hat, sie wollen auch, dass Deine Website einfach zu bedienen ist und alle Informationen enthält, die sie für ihre Kaufentscheidung benötigen. Deine Website ist für einen guten ersten Eindruck verantwortlich, weshalb Du sie sorgfältig gestalten musst.

Aber keine Sorge, Du musst kein Geld für einen professionellen Webdesigner ausgeben. Die Zusammenarbeit mit einem Profi ist zwar immer eine Option, aber in diesem Fall ist sie nicht notwendig. Dank der zunehmenden Verbreitung von DIY-Baukästen war es noch nie so einfach, selbst eine schöne und erfolgreiche Website zu gestalten.

Allerdings ist Webdesign nicht so einfach, wie ein Theme in einem Baukasten auszuwählen, ein paar Textfelder auszufüllen und dann auf „Veröffentlichen“ zu klicken, wenn Du fertig bist. Natürlich erleichtern vorgefertigte Vorlagen die Gestaltung Deiner Website, aber es gibt noch viel mehr zu beachten, bevor Du Deine Website der Welt präsentierst.

Nachdem wir tausende von Stunden an hunderten von Websites in verschiedenen Nischen gearbeitet haben, wissen wir, worauf es bei der Gestaltung einer schönen und funktionalen Website ankommt. Lies also weiter, um zu erfahren, wie Du es selbst schaffst, ohne die Hilfe von teuren professionellen Designern in Anspruch nehmen zu müssen.

Definiere Dein Ziel

Wie in jedem anderen Bereich Deines Unternehmens auch, musst Du genau wissen, warum Du überhaupt eine Website erstellen willst.

Es gibt drei Arten von Websites für Unternehmen: Portfolios, Onlineshops und Websites für professionelle Dienstleistungen. Sie sind alle ziemlich selbsterklärend, aber lass sie uns noch etwas weiter aufschlüsseln.

Wix Food Photographer template
Portfolio-Websites konzentrieren sich auf das, was das Unternehmen von seinen Mitbewerbern unterscheidet, ohne direkt ein Produkt oder eine Dienstleistung zu verkaufen
Portfolios präsentieren etwas Wichtiges über Deine Marke, ohne direkt ein Produkt oder eine Dienstleistung zu verkaufen. Dabei kann es sich um einfache einseitige Lebensläufe, die Online-Galerie eines Fotografen oder sogar um eine nicht-kommerzielle Unternehmenswebsite handeln. In der Regel zielt alles auf einer Portfolio-Website darauf ab, die Nutzer davon zu überzeugen, das Unternehmen zu kontaktieren oder zu besuchen. Auf diesen Websites werden keine Produkte oder Dienstleistungen verkauft.

Wix Sportswear Store template
Onlineshops konzentrieren sich mehr auf den Vertriebsprozess: Bewusstsein > Überlegung > Entscheidung
Onlineshops bringen Nutzer dazu, ein Produkt zu kaufen. Natürlich wird auch beschrieben, was das Geschäft auszeichnet, aber das ist nicht das Hauptaugenmerk. Das Hauptaugenmerk liegt auf dem Kaufabschluss, deshalb sind sie in der Regel mit dem Verkaufstrichter im Hinterkopf gestaltet. Diese Websites sind etwas komplexer als Portfolio-Websites, da sie für den elektronischen Handel gedacht sind.

Wix template
Obwohl alle drei „Website-Typen“ ähnliche Layouts verwenden, hat jede einen anderen Schwerpunkt
Websites für professionelle Dienstleistungen sollen die Nutzer dazu bringen, Dienstleistungen zu buchen. Je nach Dienstleistung muss die Website nicht unbedingt Käufe abwickeln, weshalb diese Websites eine eigene Kategorie darstellen. Sie verfügen nicht unbedingt über E-Commerce-Funktionen, haben aber ein Buchungssystem.

Natürlich gibt es auch Ausnahmen von dieser „Regel“. Selbstständige zum Beispiel haben wahrscheinlich eine kombinierte Website für ihr Portfolio und ihre Dienstleistungen. Manche Onlineshops bieten zudem professionelle Dienstleistungen an. Ich will damit nur zeigen, dass Dein Geschäftsschwerpunkt das Design Deiner Website bestimmt.

Top-Tipp: Nutzeranalyse

Du solltest Dir auch überlegen, was Deine Nutzer auf Deiner Website erreichen wollen. Das kann so einfach sein wie der Wunsch, ein Produkt zu kaufen (was das Leben für Onlineshops vereinfacht!). Es kann aber auch so komplex sein, dass sie sich sicher sein wollen, dass die Dienstleistungen, die sie buchen, ihre Zeit und ihr Geld wert sind. Wenn Du die Ziele der Nutzer kennst, kannst Du später die Elemente Deiner Website besser bestimmen.

Wähle eine Plattform für Deine Website

Es ist an der Zeit, eine Plattform für Deine neue Website zu wählen. Du hast zwei Möglichkeiten: Du kannst einen Baukasten benutzen oder Deine eigene Website hosten. Website-Baukästen sind ideal, wenn Du eine einsteigerfreundliche All-in-One-Lösung suchst. Allerdings kannst Du Deine Website nicht immer mühelos migrieren, wenn Du die Dienste des Baukastens nicht mehr nutzt. Wenn Du diesen Weg gehen willst, empfehle ich Dir die folgenden Plattformen.

Wix Japanese Restaurant template
Die Vorlagen von Wix sind vollständig anpassbar, also scheue Dich nicht, eine außerhalb Deiner Nische zu wählen
Website-Baukästen stehen oft in dem Ruf, dieselbe Basisvorlage anzubieten, hier und da ein paar Farben und Bilder zu verändern und dann zu behaupten, dass es sich um eine völlig andere Vorlage handelt. Nicht so bei Wix! Die mehr als 850 Vorlagen von Wix sind einzigartig und bieten Dir jede Menge Inspiration und eine tolle Grundlage für Dein Branding.

Außerdem hast Du die Freiheit, jede Vorlage individuell gestalten zu können. Während andere Baukästen Dich zwingen, die Elemente in ein Raster einzupassen, kannst Du jedes Element genau dort platzieren, wo Du es haben willst. Das hat allerdings auch einen Haken.

Deine Vorlagen sind zwar mobilfähig, aber aufgrund des hohen Maßes an Anpassungsmöglichkeiten können einige Elemente auf mobilen Geräten falsch ausgerichtet sein. Du musst also die mobilen Versionen Deiner Website separat bearbeiten, um sicherzustellen, dass alles funktioniert. Zum Glück ist das mit dem intuitiven Drag-and-Drop-Editor von Wix kein Problem.

wix logo alt 2

Wix jetzt für nur $11.00 pro Monat!

Verpasse dieses tolle Angebot nicht!

7299 Benutzer verwendeten diesen Coupon

Merkmale

  • AI-gestütztes Design. Wenn Du nicht weißt, wo Du mit Deinem Branding anfangen sollst, lass Dir von Wix helfen. Erzähle der Artificial Design Intelligence (ADI) von Wix von Deinem Unternehmen, Deinen Zielen und wie Deine Website aussehen soll und sie erstellt Dir in wenigen Minuten eine individuelle (und anpassbare!) Vorlage.
  • Eingebautes SEO-Tool. Suchmaschinenoptimierung (SEO) ist ein wichtiger Teil des Webdesigns und ohne sie ist es für die Nutzer schwierig, Dich zu finden. Zum Glück vereinfacht Wix diesen Teil Deines Designs mit einem integrierten Tool, das eine Checkliste für die Optimierung jeder Seite für Suchmaschinen bereitstellt.
  • Vorgefertigte Inhaltslayouts. Zusätzlich zu den Hunderten von Vorlagen bietet Wix auch viele vorgefertigte Layouts. Das ermöglicht es, eine professionell aussehende Website zu gestalten, ohne fortgeschrittene Designprinzipien zu kennen.
  • Toller kostenloser Tarif. Der kostenlose Tarif von Wix ist ziemlich großzügig und schränkt Dich in Bezug auf Anpassungen und Designfunktionen nicht ein.
In unserem Expertenbericht erfährst Du, wie Du eine tolle Website mit Wix gestalten kannst.

Vorlagen Mehr als 870
Editor auf Deutsch
Mobilfähiges Design
Andere Designmerkmale
  • Wix ADI
  • Intuitiver Drag-and-Drop-Editor
  • Vorgefertigte Layouts
  • Zusätzliche Funktionen im App Store verfügbar
Support auf Deutsch
  • Hilfe-Center
  • Live-Chat
  • Rückruf
Startpreis $16.00

2. Squarespace: Atemberaubende vorgefertigte Designs

Squarespace Hales template
Die mobilfähigen Vorlagen von Squarespace folgen alle modernen Webdesign-Prinzipien
Eine Website mit Squarespace zu erstellen ist so, als hättest Du einen professionellen Webdesigner an Deiner Seite, der sicherstellt, dass jedes Element modernen Designprinzipien entspricht und ein außergewöhnliches Nutzererlebnis bietet. Du hast zwar keine freie Hand bei der Gestaltung Deiner Websites, aber das ist durchaus von Vorteil für Dich. Die Auswahl wird Dich nicht überfordern und Du bekommst keine Website, die aussieht wie die eBay-Homepage aus den 90er Jahren.

Um loszulegen, kannst Du eine vorgefertigte Vorlage verwenden, Deine eigene erstellen oder einen Squarespace-Designer dafür bezahlen, eine für Dich zu entwerfen. Glücklicherweise sind die mehr als 140 Squarespace-Vorlagen modern, mobilfreundlich und anpassbar. Es ist wirklich nicht nötig, mehr als die übliche monatliche Gebühr zu zahlen, um eine funktionierende Website einzurichten.

squarespace logo alt 2 1 1

Spare heute bis zu $30.00 beim Paket von Squarespace!

Erhalte zusätzliche ein Jahr lang eine kostenlose Domain!

1073 Benutzer verwendeten diesen Coupon

Merkmale

  • Zahlreiche Integrationen. Zusätzlich zu den Inhaltsblöcken, die im Baukasten vorinstalliert sind, bietet Squarespace noch weitere Blöcke für Nischenanforderungen an. Dazu gehören Blöcke für Tischreservierungen, Tourdaten, Sounddateien, interaktive Google Maps-Blöcke und mehr.
  • Bibliothek mit Fotos. Spare Zeit bei der Gestaltung, indem Du im Squarespace-Editor nach Stockfotos suchst. Du kannst sogar Premium-Bilder kaufen, ohne die App verlassen zu müssen.
  • Großartiger Support. Neben dem hilfsbereiten und reaktionsschnellen Squarespace-Team, das Dir per E-Mail und Live-Chat zur Seite steht, hast Du auch Zugang zu einem Community-Forum. Es ist eine hervorragende Quelle für Design-Inspiration und Feedback von anderen Designern.
  • Kostenloser Logo-Designer. Der Logo-Designer von Squarespace ist relativ einfach, aber wenn man bedenkt, dass es sich um ein kostenloses Tool handelt, ist es ziemlich effektiv. Das ist besonders praktisch, wenn Dein Budget für Dein Branding gering ist.
In unserem ausführlichen Squarespace-Testbericht findest Du weitere fantastische Funktionen.

Vorlagen Mehr als 140
Editor auf Deutsch
Mobilfähiges Design
Andere Designmerkmale
  • Nischenspezifische Inhaltsblöcke
  • Benutzerdefinierte Vorlagen von Squarespace-Designern
  • Kostenloser Logo-Maker
  • Zusätzliche Funktionen im App Store verfügbar
Support auf Deutsch
  • Wissensdatenbank
  • E-Mail
Startpreis $16.00

3. SITE123: Einfache Designs für Einsteiger

SITE123 INFINITEA template
Die Vorlagen von SITE123 sind für Unternehmen gedacht, die eine minimalistische, unkomplizierte Website wünschen
Wenn Du Dich schlecht entscheiden kannst (keine Angst, das kenne ich), solltest Du Dir SITE123 ansehen. Die Vorlagen von SITE123 wirken sehr reduziert, aber genau das ist die Idee. Ohne visuelles Durcheinander kannst Du eine übersichtliche Website gestalten, die ins Auge fällt.

Obwohl alle Vorlagen anpassbar sind, verwenden sie dasselbe Grunddesign. Wenn Du auf der Suche nach einem völlig einzigartigen Design bist, ist SITE123 wahrscheinlich nicht das Richtige für Dich. Allerdings eignet sie sich hervorragend für Beginner im Bereich Website-Design, die sich mit den Grundlagen vertraut machen wollen, bevor sie sich mit fortgeschrittenen Designprinzipien beschäftigen.

site123 logo alt 2

Dapatkan POTONGAN $40.00 SITE123

Spare $40.00, wenn Du das Jahrespaket von SITE123 abonnierst

93 Benutzer verwendeten diesen Coupon

Merkmale

  • Mobilfähig. Egal, wie sehr Du Deine Vorlage anpasst, Dein SITE123-Design wird auf dem Handy genauso gut aussehen wie auf dem Desktop.
  • Dutzende von Apps. Du kannst vorgefertigte Integrationen einbinden, um die Funktionalität Deiner Website zu erweitern. Von Kalenderblöcken für dienstleistungsorientierte Unternehmen bis hin zu Preisvergleichstabellen hast Du alles, was Du brauchst, um Dein Webdesign für Deine Ziele zu optimieren.
  • Intuitiver Editor. Mach Dir keine Sorgen, wenn Du noch keine Erfahrung mit Webdesign hast. Der Editor von SITE123 ist intuitiv und benutzerfreundlich, sodass Du auch ohne Vorkenntnisse sofort loslegen kannst.
  • Rund um die Uhr verfügbarer Support. Wenn Du auf Probleme stößt, wird Dir geholfen. Du kannst SITE123 über den rund um die Uhr verfügbaren Live-Chat kontaktieren, eine E-Mail senden oder das hervorragende Support-Center nutzen.
In unserem ausführlichen SITE123-Testbericht erfährst Du mehr.

Vorlagen Mehr als 270
Editor auf Deutsch
Mobilfähiges Design
Andere Designmerkmale
  • Nischenspezifische Inhaltsblöcke
  • Zusätzliche Funktionen im App Store verfügbar
Support auf Deutsch
  • Wissensdatenbank
  • Live-Chat
  • E-Mail
Startpreis $12.80

4. Shopify: Moderne Designs, optimiert für den Verkauf

Shopify Shapes template
Die kostenpflichtigen Themes von Shopify sind nicht günstig, aber sie sind wunderschön
Shopify ist die ideale Wahl für Onlineshops und Dienstleistungsanbieter. Shopify bietet nicht nur die meisten E-Commerce-Funktionen für diese Unternehmen, sondern ermöglicht es Dir auch, einen (fast) völlig einzigartigen Onlineshop zu erstellen. Ich sage „fast“, weil Deine Homepage zwar genauso gut anpassbar ist wie die anderen Optionen, die ich hier aufgelistet habe, Deine Produktseiten aber durch Dein Theme festgelegt sind.

Apropos Themes: Bei Shopify steht Dir eine große Auswahl an Optionen zur Verfügung. Es gibt mehr als 120, aber nur 12 davon sind kostenlos. Wenn Dir keines davon zusagt, kannst Du auch eines der Tausenden von Shopify-Themes importieren, die online verfügbar sind. Außerdem kannst Du bei Shopify kostenlos auf den Basiscode Deiner Website zugreifen, sodass Du sogar benutzerdefinierten Code hinzufügen kannst, um Dein Shop-Theme nach Deinen Wünschen zu gestalten.

shopify logo alt 1

Sparen Sie bis zu $25.00 auf Ihren Shopify Tarif!

Nur begrenzt verfügbar - nicht verpassen!

311 Benutzer verwendeten diesen Coupon

Merkmale

  • Mobilfähig. Jedes Shopify-Webseitendesign ist nicht nur mobilfähig, sondern Du kannst es auch auf Deinem mobilen Gerät bearbeiten. So kannst Du sicher sein, dass Dein Design auch auf kleineren Bildschirmen so aussieht, wie Du es Dir vorstellst.
  • 3D-Assets. Dank der Unterstützung von Shopify für 3D-Produktmodelle kannst Du Deinen Besuchern einen guten Eindruck von Deinen Produkten vermitteln.
  • Tausende von Apps. Füge Deiner Website benutzerdefinierte Galerien, Produktbewertungsfelder, Suchleisten und vieles mehr hinzu. Mit Dutzenden von Optionen für so einfache Designfunktionen wie Kaufschaltflächen findest Du garantiert die perfekte Lösung für Dein Unternehmen.
  • Quickstart-Checkliste. Wenn Du zum ersten Mal eine Website gestaltest, hilft Dir Shopify mit einer Checkliste, die auf Deine Unternehmensziele zugeschnitten ist.
In unserem Expertenbericht zu Shopify erfährst Du, wie Du einen wunderschönen Onlineshop erstellen kannst.

Vorlagen Mehr als 120
Editor auf Deutsch
Mobilfähiges Design
Andere Designmerkmale
  • 3D-Produktmodelle
  • Nischenspezifische Inhaltsblöcke
  • Zusätzliche Funktionen im App Store verfügbar
Support auf Deutsch
  • Hilfe-Center
  • E-Mail
Startpreis $29.00

Top-Tipp: Website-Baukästen

Die vier oben genannten Optionen sind unserer Erfahrung nach die besten Website-Baukästen, die der Markt zu bieten hat, aber es gibt noch viele weitere Möglichkeiten. Wenn Dir die oben genannten nicht zusagen, schau Dir unsere Liste der 10 besten Website-Baukästen im Jahr 2024 an. Wir aktualisieren sie regelmäßig, sodass Du bestimmt eine Option findest, die für Dein Unternehmen geeignet ist.

WordPress ist eine gute Alternative

Website-Baukästen sind nicht die einzige Option für Dich. Deine Website selbst zu hosten ist eine gute Alternative, weil Du damit mehr Flexibilität bei der Gestaltung und Leistung hast. Allerdings würde ich das Anfängern nicht empfehlen, da es zu Beginn ein wenig mehr technisches Wissen erfordert. Unser kompletter Leitfaden zum selbst hosten Deiner Website hilft Dir, herauszufinden, ob dies die beste Option für Dich ist.

WordPress ist meine Top-Empfehlung für selbst gehostete Websites. Das Open-Source Content-Management-System (CMS) wird von 43 % aller Websites genutzt und ist damit eine der beliebtesten Plattformen. Weil es eine so beliebte Website-Lösung ist, gibt es über 20.000 Themes und Tausende weitere sind über verschiedene Theme-Bibliotheken von Drittanbietern verfügbar. Darüber hinaus kann der Editor auf Deutsch angezeigt werden. Außerdem hast Du vollen Zugriff auf den Code Deiner Website, sodass Du nach Belieben Änderungen vornehmen kannst.

Obwohl WordPress selbst kostenlos ist, musst Du für das Hosting bezahlen. Zum Glück ist das Hosting nicht so teuer, wie Du vielleicht denkst. Der von uns empfohlene Hosting-Anbieter Hostinger ist schon ab einem sehr niedrigen Preis pro Monat für 100 GB Speicherplatz und unbegrenzte Bandbreite für bis zu 100 WordPress Websites zu haben. Außerdem erhältst Du einen kostenlosen Domänennamen für ein Jahr und ein SSL-Zertifikat für die Dauer Deines Tarifs.

Top-Tipp: SSL-Zertifikate

Ein SSL-Zertifikat ist eine digitale Signatur, die einem Webbrowser mitteilt, dass Deine Website das Secure Socket Layer-Protokoll verwendet, um Daten zwischen einem Webserver und Deinem Browser zu verschlüsseln. Deine Website muss ein gültiges SSL-Zertifikat haben. Es verhindert eine kostspielige Datenpanne und schützt Deinen Ruf. Glücklicherweise bieten die meisten Baukästen und Hosting-Anbieter ein kostenloses SSL-Zertifikat an, da es als Industriestandard gilt.

Erstelle Seiten für Deine Website

Wenn Du Dich für ein mehrseitiges Layout Deiner Website entschieden hast, musst Du einige Standardseiten einrichten, die die Nutzer erwarten. Das heißt nicht, dass einseitige Websites nicht auch die Informationen enthalten müssen, die auf diesen Seiten zu finden sind, sie machen das nur anders. Wir zeigen Dir anhand eines Beispiels aus der Vorlagenbibliothek von Wix, wie diese Seiten funktionieren.

Homepage

Deine Homepage ist wohl die wichtigste Seite auf Deiner Website. Schließlich hast Du nur eine Chance, einen guten ersten Eindruck zu hinterlassen und das ist die Aufgabe Deiner Homepage

Wix homepage example
Deine Homepage sollte sich ausschließlich auf das konzentrieren, was Dein Unternehmen anbietet

Diese Seite muss keine spezifischen Informationen enthalten, sollte aber Dein Logo und Deinen Firmennamen enthalten. Die besten Homepages sagen dem Nutzer genau, was das Unternehmen anbietet, und zwar oberhalb der Falz (oder bevor der Nutzer nach unten scrollt). Du kannst auch kurze Informationen darunter einfügen, z. B. ein Zeugnis, einen Link zu Deiner Galerie oder einen kurzen Absatz über Dich. Wichtig ist, dass die Informationen auf Deiner Homepage kurz und prägnant sind.

Über

Auf Deiner Über-Seite beschreibst Du Dein Unternehmen und was Dich von Deinen Mitbewerbern unterscheidet. Hier kannst Du genauer erklären, warum Du tust, was Du tust, um Deine Marke menschlich zu machen und eine Verbindung zu Deinen Besuchern herzustellen.

Wix about me page example
Deine Über-Seite muss nicht lang sein, aber sie muss den Besuchern Dein „Warum“ beschreiben
Eine Info-Seite schafft Vertrauen. Sie gibt Deinen Besuchern die Gewissheit, dass ein Mensch (oder mehrere!) hinter der Marke steht und Du nicht nur ein gesichtsloses Gebilde bist. Je nach Nische und Branche wird dies wahrscheinlich die erste Seite sein, zu der Besucher von Deiner Homepage aus navigieren.

Kontakt

Abschließend solltest Du Deinen Besuchern eine Möglichkeit bieten, mit Dir in Kontakt zu treten. Deine Kontaktseite sollte nur dazu dienen, dass Deine Kunden mit Dir in Kontakt treten können. Nimm hier keine Geschäftsinformationen auf, es sei denn, es handelt sich um eine geschätzte Antwortzeit, die Öffnungszeiten oder einen Link zu Deinen FAQs.

Wix contact me page example
Deine Kontaktseite sollte frei von irrelevanten Geschäftsinformationen sein
Zumindest solltest Du ein sicheres Kontaktformular anbieten. Diese können an Deine Anforderungen angepasst werden und Du kannst Pflichtfelder festlegen, sodass die Kunden die Nachricht erst absenden können, wenn sie alle Informationen angegeben haben, die Du zur Beantwortung ihrer Fragen benötigst.

Optionale Seiten

Es ist wahrscheinlich, dass Dein Unternehmen noch weitere Seiten benötigt. Die obige Beispiel-Website hat Seiten für die Online-Kurse des Redners, Vortragspakete, andere Erfahrungen, einen Blog und einen Benutzerbereich. Onlineshops benötigen einen Produktkatalog mit einzelnen Produktseiten, während Websites mit einem Portfolio eine Galerie oder eine Seite mit einer Auflistung der bisherigen Arbeit des Unternehmens enthalten.

Bei den Seiten, die Du Deiner Website hinzufügst, sind Dir keine Grenzen gesetzt, und ohne Dein Ziel zu kennen, kann ich keinen festen Weg vorgeben. Ich empfehle Dir, die Websites Deiner Konkurrenten durchzusehen, um ihre Seiten und die Informationen, die sie anbieten, zu prüfen.

Top-Tipp: Flache Navigation

Ein wichtiges Gestaltungsprinzip, das Du Dir merken solltest, ist die flache Navigation. Das bedeutet, dass alle Seiten Deiner Website von der Startseite aus mit höchstens drei Klicks erreichbar sind. Je weniger Klicks die Nutzer benötigen, um zu einer Seite zu gelangen, desto schneller finden sie die gesuchten Informationen. Wenn Du viele Seiten benötigst, lohnt es sich, Elemente wie Suchleisten oder Dropdown-Menüs einzubauen, die den Besuchern die Navigation auf Deiner Website erleichtern.

Einzelne Elemente der Website gestalten

Okay, lass uns zur Sache kommen. Es ist an der Zeit, das Branding-Dokument und alles, was wir bis jetzt gelernt haben, in die Praxis umzusetzen. Hier sind also die wichtigsten Elemente, die Du kennen musst und wie Du sie optimal gestalten kannst.

Kopf- und Fußzeile

Deine Kopf- und Fußzeile sind, wie Du vielleicht schon vermutet hast, die Teile am oberen und unteren Rand jeder Seite. Auch wenn diese Elemente einfach aussehen, solltest Du Dich nicht täuschen lassen. Die Nutzer erwarten, dass Deine Kopf- und Fußzeile auf eine bestimmte Art und Weise gestaltet sind. Du kannst bei Deinem Design an anderer Stelle etwas riskieren, aber hier ist es am besten, wenn Du Dich an den Status quo hältst.

Auch Deine Kopf- und Fußzeile sollten zu den schlichtesten Elementen auf Deiner Website gehören. Besucher wollen keine ausgefallenen Grafiken oder ein ausgefallenes Design. Sie wollen die Seiten, nach denen sie suchen, mit minimalem Aufwand finden. 88 % der Nutzer kehren nach nur einem schlechten Nutzererlebnis nicht mehr auf eine Website zurück, weshalb Du hier kein Risiko eingehen solltest.

Konzentrieren wir uns also auf das Menü Deiner Website.

Wix header and footer examples
Wenn Du den kostenlosen Tarif von Wix nutzt (wie ich), wird Wix in der Fußzeile deiner Website erwähnt.
Wenn Du Dein Menü einrichtest, denke an Marie Kondo. Die Nutzer erwarten nicht nur bestimmte Seiten in Deinem Menü, sie möchten auch nicht alle Seiten Deiner Website darin aufgelistet sehen. Verwende Untermenüs (wie Dropdown-Menüs), um Deine Seiten zu gruppieren und Ordnung zu schaffen.

Scroll-Effekte und Bewegung

Hier gilt: „Entweder Du liebst sie, oder Du lässt die Finger von Websites mit diesen Designelementen“, aber sei nachsichtig mit mir. In Maßen eingesetzt, können animierte Elemente wirklich gut funktionieren, aber sie können auch Probleme mit der Barrierefreiheit verursachen. Darauf gehe ich gleich noch etwas genauer ein.

Wix scroll effects
Scrolleffekte sind nicht für alle Inhaltsblöcke verfügbar, aber Du willst Deine Nutzer sowieso nicht überfordern
Der beliebteste Scrolleffekt für moderne Websites ist das sogenannte Parallax Scrolling. Bei dieser Animation scrollt der Hintergrund Deiner Website langsamer als der Text im Vordergrund, wodurch der Inhaltsblock an Tiefe gewinnt. Das ist eine gute Möglichkeit, um die Aufmerksamkeit auf Deinen Text zu lenken und Deiner Website ein visuelles Flair zu verleihen. Allerdings ist dies nicht immer der beste Weg, um Bewegung in Deine Website zu bringen. Je nachdem, was Du erreichen willst, kannst Du auch Videos, kurze Schleifenanimationen oder sogar komplexere Scroll-Effekte verwenden.

Text, Bilder und Audio

Diese drei Elemente machen den größten Teil des Inhalts Deiner Website aus. In vielen Fällen wirst Du Audio nicht brauchen, aber ich habe es hier mit aufgenommen, weil es für manche Unternehmen wichtig ist. Achte nur darauf, dass der Ton nicht automatisch abgespielt wird, okay? Jeder Millennial kennt das Grauen der automatischen Wiedergabe. Wenn Du uns also dazu bringen willst, auf Deiner Website zu bleiben, solltest Du den Ton hinter einem Play-Button verstecken.

Editing text on Wix
Vorgefertigte Textideen sind toll, aber denke daran, sie so zu bearbeiten, dass sie zu Deiner Marke passen!
Um das Gleichgewicht zu wahren, solltest Du übermäßigen Text vermeiden, denn zu viel davon kann die Nutzer überfordern und verwirren. Ergänze den Text stattdessen mit Bildern und reichlich Leerraum. Das heißt nicht, dass Du auf informationslastigen Seiten nicht auch größere Textblöcke präsentieren kannst, aber Du musst sie auflockern, damit die Besucher das Gefühl haben, dass sie genügend Platz zum Atmen haben.

Top-Tipp: Ladegeschwindigkeiten

Laut Google steigt die Wahrscheinlichkeit, dass ein Nutzer Deine Website verlässt, auf 32 %, wenn die Ladezeit von einer auf drei Sekunden ansteigt. Je länger das Laden Deiner Website dauert, desto weniger Besucher werden bleiben, um zu sehen, was Dein Unternehmen zu bieten hat. Achte darauf, wie viele Inhalte Du auf jeder Seite hinzufügst, denn das wirkt sich direkt auf die Ladezeit aus.

Berücksichtige die Barrierefreiheit

Jetzt kannst Du es wahrscheinlich kaum erwarten, Deine Website einzurichten und mit Farbpaletten zu spielen, aber warte noch ein bisschen, bevor Du das tust. Einer der wichtigsten Gestaltungsgrundsätze, die Du beachten musst, ist die Barrierefreiheit, die sich auf Dein gesamtes Design auswirkt.

Die Web Content Accessibility Guidelines (WCAG) sind eine internationale Initiative unter der Leitung des World Wide Web Consortium (W3C). Es handelt sich um freiwillige (aber notwendige) Richtlinien, die Websites für Menschen mit Behinderungen zugänglicher machen, die beim Surfen im Internet auf Hilfsmittel angewiesen sind.

Da wir nicht die Zeit haben, die WCAG 2 (die neueste Version dieser Richtlinien) in ihrer Gesamtheit zu besprechen, möchte ich Dir die wichtigsten Punkte nennen.

Alt-Text, Untertitel und Transkripte

Wenn Du ein Bild auf Deine Website hochlädst, solltest Du davon ausgehen, dass nicht jeder Nutzer erkennen kann, was auf dem Bild zu sehen ist. Alt-Text ist eine Beschreibung, die Bildschirmlesegeräte verwenden, um den Nutzern mitzuteilen, was in einem Bild passiert.

How to add alt text on Wix
Auch Google nutzt den Alt-Text, um Deine Website zu crawlen, also solltest Du auch aus SEO-Gründen einen Alt-Text hinzufügen
Ebenso musst Du Videos und Audiodateien für gehörlose und schwerhörige Nutzer umschreiben. Videos, die keinen erzählenden Inhalt haben, sollten mit einer beschreibenden Transkription versehen werden (ähnlich wie der Alt-Text).

Farbkontrast

Sehbehinderte Nutzer haben oft Schwierigkeiten, zwischen Farben zu unterscheiden. Das heißt, wenn der Kontrast zwischen Text und Hintergrund zu gering ist, können manche Nutzer auf Deiner Website nicht viel erkennen.

Adjusting color contrast on Wix
Texte sollten einen möglichst hohen Kontrast haben, damit sie von allen gelesen werden können
Glücklicherweise wurde der Assistent für Barrierefreiheit von Wix mit Blick auf die WCAG 2 Richtlinien entwickelt. Wenn Du den Assistenten startest, wird er Dir sagen, wo der Farbkontrast verbessert werden muss.

Bewegung reduzieren

Animationen und Bildlaufeffekte können für manche Nutzer unangenehm sein, vor allem wenn sie unter Schwindel oder Reisekrankheit leiden. Ich weiß, dass ich vorhin gesagt habe, dass Scrolleffekte wie Parallax Scrolling beliebt sind, aber bedenke, dass sie nicht als barrierefreie Designoption empfohlen werden.

Um Deine Website barrierefrei zu gestalten, empfehle ich Dir, auf Parallaxen-Scrolling zu verzichten und so wenig Animationen und Bewegungen wie möglich zu verwenden. Wenn Du eine Bewegung einbauen willst, ist die zugänglichste Option ein Video, das der Nutzer anklicken muss, um es abspielen zu können.

DOM

Das Document Object Model (DOM) legt die Reihenfolge fest, in der sich Screenreader und „Tabbing“ (Navigation mit der Tabulatortaste) zwischen den Elementen bewegen. Die meisten Baukästen stellen die DOM-Reihenfolge Deiner Website automatisch ein, aber es lohnt sich, vor der Veröffentlichung zu prüfen, ob sie korrekt ist.

Top-Tipp: Barrierefreie Apps und Dienste

Die WCAG 2 sind ein umfangreiches Dokument. Es gibt zwar kostenlose Tools zur Überprüfung der Barrierefreiheit, aber eine App oder ein Dienst für Barrierefreiheit liefert fortlaufend Berichte, damit keine neuen Änderungen übersehen werden. Unsere Top-Empfehlung ist accessiBe, da die AI-gestützte App schon während der Fertigstellung Deines Designs nach Problemen mit der Barrierefreiheit sucht.

Optimiere für mobile Nutzer

Die Hälfte des gesamten Internetverkehrs kommt von mobilen Nutzern. Deshalb muss Deine Website auf mobilen Geräten genauso gut aussehen wie in Deinem Browser. Du kannst aber nicht davon ausgehen, dass jeder Nutzer von einem mobilen Gerät mit der gleichen Bildschirmgröße kommt. Deine Websites müssen responsive sein (d. h. sie müssen sich automatisch an verschiedene Geräte anpassen).

Wix websites on different devices
Nutze die Entwickler-Tools Deines Browsers, um eine Vorschau Deiner Websites auf verschiedenen Geräten anzuzeigen
Die meisten Baukästen für Websites sind bereits in ihrem Basisdesign und ihren Vorlagen mobilfähig. Bei einigen, wie z. B. Wix, musst Du die mobile Version Deiner Website separat bearbeiten. Squarespace hingegen passt die Größe der Inhalte automatisch an, wenn jemand mit seinem Smartphone oder Tablet Deine Website besucht.

Bei einer selbst gehosteten Website ist das nicht ganz so einfach. WordPress bietet zwar viele responsive Themes, aber Du musst Dich vor den benutzerdefinierten Elementen in Acht nehmen. Wenn Du mehr als ein paar Elemente einfügst, solltest Du auch CSS-Media-Queries (Code, der Designregeln basierend auf der Bildschirmgröße anwendet) hinzufügen, damit sie auf mobilen Geräten funktionieren.

Top-Tipp: Webdesigner beauftragen

Wenn Du Dich für ein eigenes Hosting entscheidest, empfehle ich Dir, einen Webdesigner zu beauftragen, um sicherzustellen, dass Deine Website vollständig mobilfähig ist. Ich weiß, dass das nicht die budgetfreundlichste Option ist, aber wenn man bedenkt, wie viele Nutzer Deine Website von mobilen Geräten aus besuchen werden, ist es die zusätzlichen Kosten für ein tolles Nutzererlebnis wert. Einen freiberuflichen Webdesigner zu beauftragen, muss Dein Budget nicht sprengen. Sieh Dir unsere 7 besten Websites für Freelancer im Jahr 2024 an, die ein gutes Preis-Leistungs-Verhältnis bieten.

Veröffentliche Deine Website und halte sie auf dem neuesten Stand!

Wenn Du mit Deinem Design zufrieden bist, ist es Zeit, auf Veröffentlichen zu klicken. Hurra!

Das heißt aber nicht, dass Du Deine Website von Deiner To-Do-Liste streichen kannst. Du musst Deine Website ständig aktualisieren und auf das Feedback der Nutzer achten. Der Betrieb einer Website ist ein ständiger Kreislauf, der nie endet.

Wenn Du Deine Website regelmäßig aktualisierst, hältst Du nicht nur Deine Kunden bei der Stange, sondern zeigst auch den Suchmaschinen, dass Du Deine Website nicht aufgegeben hast. Und wie die Besitzer Deines örtlichen Einkaufszentrums werden Suchmaschinen eher Schaufenster bewerben, die aussehen, als ob sie zumindest ab und zu mal abgestaubt worden wären.

Top-Tipp: Aktualisiere Deine Website

Eine der besten Möglichkeiten, Deine Website auf dem neuesten Stand zu halten (und damit Deine Marketingbemühungen zu verbessern!), ist ein eigener Blog. Content Marketing ist ein mächtiges, aber zu wenig genutztes Tool, um Besucher anzusprechen, neue Informationen zu liefern und den Umsatz zu steigern. Außerdem ist es eine großartige Möglichkeit, Deiner Kreativität freien Lauf zu lassen und die Bereiche Deines Unternehmens zu präsentieren, die Dich inspirieren, das kannst Du mir glauben!

Gestalte im Jahr 2024 eine moderne Website

Die Gestaltung Deiner eigenen Website ist einfacher, als Du vielleicht denkst. Zwischen Markenrichtlinien, Designprinzipien und Barrierefreiheit gibt es eine Menge zu beachten, aber das heißt nicht, dass es eine unmögliche Aufgabe ist. Dank moderner Baukästen wie Wix, die vorgefertigte moderne und mobile responsive Themes anbieten, musst Du Dein Budget nicht mehr für einen Webdesigner ausgeben, um eine beeindruckende Website zu erhalten.

Aber nur weil Du keinen Webdesigner beauftragen musst, heißt das nicht, dass es keine Überlegung wert ist. Wenn Du Dich für eine selbst gehostete Website entscheidest, wirst Du wahrscheinlich zusätzliche Hilfe von einem Profi benötigen. Und wenn Du keine Erfahrung mit Designprinzipien wie mobilgerechtem und barrierefreiem Design hast, ist die Beauftragung eines freiberuflichen Designers eine Investition, die sich langfristig auszahlt.

FAQ

Wie kann ich meine eigene Website gestalten?

Am besten gestaltest Du Deine eigene Website mit einem Baukasten oder als Selbsthoster mit WordPress. Beide Möglichkeiten helfen Dir, mit modernen, mobilgerechten Vorlagen zu starten. Baukästen eignen sich gut für Beginner, aber wenn Du schon etwas Erfahrung im Programmieren hast (oder einfach mehr Kontrolle über Deine Website haben möchtest), solltest Du in Betracht ziehen, Deine Website selbst zu hosten.

Wie viel kostet die Erstellung einer Website?

Du kannst Deine Website kostenlos gestalten! Wix hat einen großartigen kostenlosen Tarif, mit dem Du Zugriff auf die Tools zur Anpassung Deiner Website erhältst. WordPress selbst ist kostenlos, wenn Du stattdessen die selbst gehostete Variante wählst. Du musst für das Hosting bezahlen, aber unser empfohlener Hosting-Anbieter Hostinger hat sehr niedrige monatliche Kosten und eine tolle Geld-zurück-Garantie, falls Du Deine Meinung änderst.

Was sind die 3 Grundsätze für gutes Webdesign?

Eine gut gestaltete Website muss schnell, responsiv und barrierefrei sein. Wenn eine Seite zu lange zum Laden braucht, auf mobilen Geräten nicht richtig funktioniert oder von Menschen mit Behinderungen nicht genutzt werden kann, werden die Nutzer Deine Website verlassen.

Wie sollte ich meine Website organisieren?

Eine gute Faustregel ist, dass die Nutzer jede Seite innerhalb von 3 Klicks von Deiner Homepage aus erreichen können. Wenn Du viele Seiten auf Deiner Website hast (wie es bei Onlineshops oft der Fall ist), verwende Dropdown-Menüs und Suchleisten, um Deine Website übersichtlicher zu gestalten.

Diesen Artikel bewerten
4.7 Bewertet von 3 Nutzern
Du hast schon abgestimmt! Rückgängig
Das Feld ist erforderlich Maximal length of comment is equal 80000 chars Die Minimallänge des Kommentars ist 10 Zeichen
Irgendwelche Kommentare?
Antworten
%s Antworten ansehen
View %s reply
Relevante Beiträge
Mehr relevante Beiträge anzeigen
Wir prüfen alle Nutzerkommentare innerhalb von 48 Stunden, um sicherzustellen, dass sie von einer realen Person stammen. Es freut uns, dass Du diesen Artikel hilfreich fandest. Wir wären Dir dankbar, wenn Du ihn anderen Personen empfehlen würdest.
Popup final window
Diesen Blog-Eintrag jetzt mit Freunden und Kollegen teilen:

We check all comments within 48 hours to make sure they're from real users like you. In the meantime, you can share your comment with others to let more people know what you think.

Einmal pro Monat bekommst Du interessante und nützliche Tipps, Tricks und Ratschläge, wie Du die Leistung Deiner Website verbesserst und Deine digitalen Marketing-Ziele erreichst!

Freut mich, dass es Dir gefallen hat!

Mit Deinen Freunden teilen!

Oder bewerte uns auf

3160477
50
5000
64933911