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

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.

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.

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.

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.

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.

1. Wix: Grenzenloses Branding-Potenzial

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.

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.

2. Squarespace: Atemberaubende vorgefertigte Designs

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.

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.

3. SITE123: Einfache Designs für Einsteiger

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

Menü

Konzentrieren wir uns also auf das Menü Deiner Website.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.