Websites sind unglaublich vielseitig und können für fast alles genutzt werden: um Produkte oder Dienstleistungen zu verkaufen, in einem Blog über deine Leidenschaften zu schreiben, deine gemeinnützige Organisation zu präsentieren oder deine schönsten Momente und Fotos zu dokumentieren.

Egal, was dein Ziel ist – die Elemente des Webdesigns zu kennen ist wichtig, damit du das Beste aus deiner WordPress-Website herausholen kannst. Es gäbe jede Menge darüber zu sagen, aber keine Sorge, wir starten hier ganz entspannt mit den Grundlagen.

1. Farbschema

Das Farbschema deiner Website ist die Kombination von Farben, die du in deinem gesamten Design verwendest. Es ist aus mehreren Gründen wichtig:

• Es bestimmt das Erscheinungsbild deiner Website. Farben vermitteln Emotionen. Eine Website voller heller Grün- und Gelbtöne kann fröhlich und energiegeladen wirken, während ruhige Blau- und Grautöne ein Gefühl von Professionalität und Seriosität vermitteln können. Überlege dir, welche Botschaft deine Website transportieren soll.
• Es trägt zur Markenkonsistenz und -wiedererkennung bei. Wenn du ein einheitliches Farbschema auf deiner Website, in deinem Logo, auf deinen Social-Media-Kanälen, auf deinen Verpackungen etc. verwendest, wissen Besucher beim Aufrufen deiner Website sofort, dass es deine Website ist.
• Es hilft Besuchern beim Navigieren auf deiner Website. Farben können den Blick von Besuchern lenken, zum Beispiel auf Buttons, Überschriften oder Ankündigungen. Wenn du Teile deines Farbschemas entsprechend einsetzt (zum Beispiel eine bestimmte Farbe für alle Buttons und Links), finden Besucher dadurch leichter, was sie suchen, und führen eher die von dir gewünschten Aktionen durch. Weitere Informationen dazu findest du weiter unten bei dem Punkt „Call-to-Action“.

Es ist am besten, sich auf zwei oder drei Farben zu beschränken. Alles darüber hinaus kann die Besucher deiner Website verwirren oder überfordern. Denk daran – Einfachheit ist oft die beste Strategie!

2. Typografie 

Typografie ist mehr als nur die Wahl einer schönen Schriftart. Es geht insgesamt darum, wie die Texte auf deiner Website gestaltet sind – von der Schriftgröße bis zum Zeilenabstand. Ohne gute Typografie sind deine Inhalte nicht so leicht lesbar, und das kann dazu führen, dass deine Besucher dein Produkt oder deine Dienstleistung nicht kaufen, deinen Newsletter nicht abonnieren oder dir nicht auf deinen Social-Media-Kanälen folgen.

Hier sind einige wichtige Dinge, die du beachten solltest:

• Größe. Stelle sicher, dass deine Schriftgröße für alle gut lesbar ist, auch für Menschen mit eingeschränktem Sehvermögen.
• Schriftarten. Dekorative Schriftarten können lustig aussehen und deiner Marke das gewisse Etwas verleihen, aber vermeide Handschriften oder schwer lesbare Schriftarten in längeren Fließtexten. Verwende diese stattdessen nur für Überschriften und setze bei längeren Absätzen auf klare Schriftarten mit oder ohne Serifen.
• Abstände. Achte auf genügend Abstand zwischen den Textzeilen (Leading) und Buchstaben (Kerning), damit deine Texte gut lesbar sind.
• Einheitlichkeit. Beschränke dich auf wenige Schriftarten – zum Beispiel eine für Überschriften und eine für den Fließtext – und bleib dabei. Das sorgt für ein stimmiges Gesamtbild.

3. Seitenstruktur

Eine durchdachte Seitenstruktur sorgt dafür, dass deine Besucher schnell alle Informationen finden, die sie suchen. Überlege dir genau, wie du die Inhalte auf jeder Seite anordnest. Die wichtigsten Informationen sollten sich dabei ganz oben auf der Seite befinden („above the fold“), also im sofort sichtbaren Bereich, für den nicht gescrollt werden muss.

Es kann hilfreich sein, deine Seiten zu skizzieren, bevor du sie erstellst, damit du dir ihren Fluss veranschaulichen kannst: 

Das Tolle ist, dass es mit dem Block-Editor einfacher als je zuvor ist, deine Inhalte umzugestalten, bis du die perfekte Anordnung gefunden hast. Erfahre mehr über die Anordnung deiner Seitenlayouts. 

4. Taxonomie und Navigationsstruktur  

Die Navigationsstruktur (oder Taxonomie) deiner Website beschreibt, wie die Seiten auf deiner Website miteinander verbunden und organisiert sind. Während sich die Seitenstruktur auf einzelne Seiten konzentriert, betrachtet die Taxonomie die Website als Ganzes.

Das Ziel deiner Navigationsstruktur ist, es deinen Besuchern so einfach wie möglich zu machen, die gewünschten Inhalte zu finden. Gleichzeitig hilft eine klare Struktur Suchmaschinen, die Verbindungen zwischen deinen Seiten besser zu verstehen.

Hier ist ein Beispiel für eine Navigationsstruktur:

• Startseite
  • Über uns
    • Das Team
    • Unsere Geschichte
  • Dienstleistungen
    • Digitale Beratungen
    • Innenarchitektur
    • Staging 
  • Portfolio
  • Blog
  • Kontakt

Mit der richtigen Seitenstruktur schaffst du die besten Voraussetzungen für deinen Erfolg. Du solltest dich darauf konzentrieren, WordPress-Kategorien und -Schlagwörter richtig zu verwenden, eine intuitive Hauptnavigation zu erstellen und den Footer deiner Website effektiv zu nutzen, um Besucher zu spezifischeren Inhalten zu führen. 

5. Gestaltung des Menüs

Das Hauptmenü deiner Website befindet sich typischerweise oben auf jeder Seite und soll Besuchern helfen, durch deine Seiten und Beiträge zu navigieren. Dein Menü kann mehrere Ebenen haben, die die Navigationsstruktur deiner Website widerspiegeln. Zum Beispiel könntest du im Hauptmenü fünf Seiten auflisten und als Dropdown-Option mehrere weitere untergeordnete Seiten anzeigen.

Du solltest dein Menü so einfach wie möglich gestalten, damit du Besucher nicht mit zu vielen Optionen überforderst. 

Die Navigation von WordPress.com ist ein großartiges Beispiel. Die oberste Ebene des Hauptmenüs hat nur wenige Optionen mit den wichtigsten Seiten. Aber wenn du mit der Maus über eine dieser Seiten fährst, erscheint eine Dropdown-Auswahl mit weiteren Optionen, damit Besucher schnell spezifischere Inhalte finden können.

Erfahre, wie du hilfreiche, gut gestaltete WordPress-Navigationsmenüs hinzufügst.

6. Header

Der Header deiner Website erscheint oben auf allen Seiten deiner Website und enthält typischerweise dein Hauptmenü, dein Logo oder den Namen deiner Website sowie andere wichtige Informationen. Du könntest hier zum Beispiel auch Öffnungszeiten, eine Suchleiste und einen Button, der zur Anmeldeseite für deinen E-Mail-Newsletter führt, einfügen.

Brauchst du ein Logo? Unser Logo-Maker kann dir helfen.

Wie bei deinem Menü solltest du auch deinen Header so einfach wie möglich halten, damit er nicht zu viel wertvollen Platz auf deinen Seiten einnimmt. Füge hinzu, was die Besucher deiner Website am hilfreichsten finden werden. Bei einem E-Commerce-Shop könnte das ein Link zum Warenkorb sein. Bei einem Blog könnten das Social-Media-Icons sein. Und bei einer Mitgliedschafts-Website könnte das ein Link sein, um sich auf einer Kontoseite anzumelden. 

Neben ihrem Logo und dem Hauptmenü haben die Superdrug Health Clinics in ihrem Header einen Link zu Kundenbewertungen, eine Telefonnummer, eine Suchleiste, einen Button für Online-Buchungen und einen Link zu ihren Standorten.

Du kannst deinen Header auch fixieren, wenn du möchtest, dass er Besuchern beim Scrollen auf der Seite folgt. Dies kann besonders hilfreich für Websites mit langen Seiten sein, da wichtige Informationen dadurch immer im Blickfeld bleiben.

7. Footer

Der Footer befindet sich ganz unten auf allen Seiten deiner Website. Er ist ideal für Informationen, die leicht gefunden werden sollen, aber nicht so wichtig sind, dass sie ganz oben auf jeder Seite erscheinen müssen.

Typischerweise enthalten Footer Informationen wie Geschäftszeiten, Kontaktinformationen, E-Mail-Anmeldeformulare, Links zu wichtigen Seiten, Logos von Partnern, Copyright-Informationen, Links zu sozialen Medien und Anmeldeformulare. Auch wenn es verlockend sein kann, deinen Footer mit Informationen vollzupacken, sei vorsichtig. Wenn es zu viele Informationen gibt, die deine Besucher durchsuchen müssen, werden sie sie gar nicht erst ansehen.

Erfahre, wie du deinen WordPress-Footer anpassen kannst.

8. Responsives Design 

Eine responsive Website sieht auf Geräten aller Größen gut aus, von Desktop-PCs und Laptops bis hin zu Tablets und Handys. Dies stellt sicher, dass jeder einzelne Besucher deine Website nutzen kann. Wenn du zum Beispiel eine Website zu Hause auf deinem Computer öffnest und sie dann auf deinem iPhone ansiehst, solltest du sehen, dass sie das Design automatisch an den höheren, schmaleren Bildschirm anpasst. 

Jedes einzelne WordPress.com-Theme ist responsiv. Wenn du also deine Website auf WordPress.com erstellt hast, bist du schon auf einem ausgezeichneten Weg. Aber du solltest dir deine Website trotzdem auf mobilen Geräten ansehen – BrowserStack ist ein hervorragendes Tool dafür –, um sicherzustellen, dass Bilder nicht abgeschnitten werden, Schriftarten groß genug sind und Buttons leicht angeklickt werden können. Du könntest auch eine eigene, einfachere Version deines Hauptmenüs nur für Handys erstellen.

9. Bilder und Ikonografie

Bilder und Icons sind unverzichtbar, um deine Website ansprechend und einprägsam zu gestalten. Sie sind ein kraftvolles Werkzeug, um die Aufmerksamkeit deiner Besucher zu wecken, deine Botschaft zu verdeutlichen und deine Marke visuell zu präsentieren. Mit gut ausgewählten Bildern kannst du Emotionen wecken, Geschichten erzählen und komplexe Konzepte einfach erklären.

Egal, ob du Stockfotos verwendest, einen Fotografen beauftragst oder eigene Fotos machst – die Qualität der Bilder sollte immer im Vordergrund stehen. Verschwommene, schlecht belichtete oder pixelige Fotos hinterlassen keinen professionellen Eindruck und können Besucher abschrecken. Deine Bilder sollten also gestochen scharf sein und optimal zur Stimmung deiner Website passen.

Der Nachteil hochwertiger Fotos ist, dass sie deine Website verlangsamen können. Aber mit einem Plugin-fähigen WordPress.com-Tarif kannst du Jetpacks CDN für Bilder nutzen, das deine Bilder automatisch optimiert, sie für mobile Geräte anpasst und deine Website beschleunigt. 

Icons sind eine effektive und superschnelle Möglichkeit, Konzepte zu vermitteln und interessante Elemente zu deiner Website hinzuzufügen. Du könntest sie zum Beispiel verwenden, um jede der von dir angebotenen Dienstleistungen darzustellen, in deinem Header neben dem Warenkorb ein Korb-Icon einzufügen oder auf jedes deiner Social-Media-Konten zu verlinken.

WordPress.com verwendet beispielsweise Icons, um Funktionen darzustellen, die Benutzer erhalten, wenn ihre Websites bei uns gehostet werden.

Manche Themes verfügen bereits standardmäßig über verschiedene Icons. Alternativ dazu kannst du mit einem Plugin-fähigen WordPress.com-Tarif Plugins wie FontAwesome verwenden, um Icons zu deiner Website hinzuzufügen. 

10. Parallax-Effekte

Parallax-Effekte treten auf, wenn sich Hintergrundinhalte (wie ein Bild) mit einer anderen Geschwindigkeit bewegen als die Inhalte im Vordergrund, wenn Besucher durch deine Seite scrollen. Das ist eine nette Möglichkeit, auf deiner Website für Tiefe und Abwechslung zu sorgen. Ein paar visuelle Beispiele dafür findest du in der Demo des Lodestar-Themes von WordPress.com.

11. Call-to-Action (CTA)

Ein Call-to-Action (CTA) fordert deine Besucher dazu auf, eine bestimmte Aktion auf deiner Website auszuführen. Das kann alles Mögliche sein: einen Kauf abschließen, sich für deinen Newsletter anmelden, ein Formular ausfüllen oder dich anrufen. Der genaue CTA hängt von den Zielen deiner Website ab. CTAs können verschiedene Formen annehmen, z. B. Buttons, Links oder Pop-ups.

Damit ein CTA funktioniert, sollte er konkret formuliert sein. Statt einen Button unspezifisch mit „Herunterladen“ zu beschriften, könntest du schreiben „Jetzt Checkliste für erfolgreiches Webdesign herunterladen“. Solche präzisen Formulierungen sagen Besuchern genau, was sie anklicken, und erinnern sie daran, warum sie den CTA anklicken sollten.

Auf der Zielseite für Professional E-Mail von WordPress.com zum Beispiel gibt es zwei klare CTAs: „Jetzt starten“ und „Jetz kostenlos testen“ Beide sind konkret und handlungsorientiert.

Platziere deine CTAs an mehreren Stellen auf deiner Seite, nicht nur am Ende. Setze sie z. B. in die Mitte deines Inhalts oder in die Seitenleiste, damit Besucher, die nicht bis ganz unten scrollen, trotzdem direkt handeln können. Das erhöht die Chance, dass sie die gewünschte Aktion ausführen.

12. White Space (Leerraum)

White Space ist der leere Raum, der die Elemente auf deiner Seite umgibt. Durch ihn erhalten deine Inhalte „Raum zum Atmen“, damit jedes Element für sich stehen kann, ohne Leser zu überfordern. Der Leerraum hilft Besuchern auch beim Navigieren auf deiner Website.

Du kannst dir den Leerraum als visuelle Pause für deine Besucher vorstellen. Er macht deine Seite übersichtlicher und angenehmer zu lesen. Und das Beste daran: Der White Space muss nicht weiß sein. Da der Bereich leer bleibt, kann er auch eine Hintergrundfarbe oder einen Farbverlauf haben.

Sieh dir wieder die Zielseite für Professional E-Mail von WordPress.com an. Der Bereich rund um die Überschrift, den Text und die Auflistung der Dienste ist ein großartiges Beispiel für effektiven White Space, obwohl der Hintergrund hellblau ist. Er hebt den Inhalt hervor und trennt ihn von den Bildern darüber und darunter.

13. Banner und Hero-Bilder (Hero Images)

Banner und Hero-Bilder nehmen den prominentesten Platz auf deiner Website ein – direkt unter dem Header. Da sie das Erste sind, was Besucher sehen, solltest du hier deinen wichtigsten Inhalt präsentieren.

Wenn du ein Blog betreibst, könnte hier ein Karussell mit deinen beliebtesten Beiträgen stehen. Wenn du einen Onlineshop hast, könnte es ein aktuelles Angebot sein, das du hervorheben möchtest. Wenn du ein dienstleistungsbasiertes Unternehmen hast, könnte es dein Untertitel sein, zusammen mit einem Button, um deine Dienstleistungen anzusehen oder zu kaufen. 

14. Chatbots

Ein Chatbot ist eine Art virtueller Assistent für deine Website, der künstliche Intelligenz verwendet, um eine menschliche Konversation zu simulieren. Er beantwortet Fragen zu Produkten oder Dienstleistungen, informiert Besucher über den Status ihrer Bestellungen oder leitet sie an dein Team weiter, falls sie weitere Hilfe benötigen.

Ein Chatbot kann dir viel Arbeit abnehmen und bietet gleichzeitig schnellen und hochwertigen Support für deine Besucher. Du kannst Chatbots hinzufügen, indem du eine Vielzahl von kostenlosen und kostenpflichtigen WordPress-Plugins verwendest.

15. Web-Texturen

Web-Texturen sind abstrakte Designelemente, die als Hintergrund dienen und deine Website visuell interessanter machen. Sie ersetzen eintönige Flächen und vermitteln das Gefühl, Materialien wie Holz, Metall oder Papier zu berühren.

OKdo verwendet in einem Bannerbild die Textur von Karton, um das Thema Recycling zu unterstreichen. Die Textur sticht hervor, vermittelt eine Botschaft und macht die Seite lebendiger.

Du findest Texturen auf Stockfoto-Websites oder kannst sie mit Pexels direkt in der WordPress-Mediathek hinzufügen.

16. Breadcrumbs

Breadcrumbs sind eine sekundäre Form der Navigation auf einer Website, mit deren Hilfe Besucher leichter durch deine Inhalte navigieren können. Breadcrumbs funktionieren ähnlich wie eine Fortschrittsanzeige und zeigen die Seite an, auf der sich eine Person gerade befindet, zusammen mit den in der Hierarchie deiner Website übergeordneten Seiten. Hier ist ein Beispiel:

Startseite → Dienstleistungen → Grafikdesign → Logos

Breadcrumbs sind besonders hilfreich, wenn du viele Inhalte auf deiner Website hast. In einigen Themes ist die Breadcrumb-Navigation bereits integriert, aber wenn das bei deinem Theme nicht der Fall ist, kannst du auch ein Plugin verwenden. 

17. Autorenboxen

Eine Autorenbox ist ein spezieller Abschnitt eines Blogbeitrags, der Informationen über die Autorin oder den Autor anzeigt, wie Namen, E-Mail-Adresse, Biografie und Foto. Diese können deinen Inhalten ein Gesicht geben und deine Website dadurch noch ansprechender machen. Autorenboxen sind besonders empfehlenswert für Blogs mit mehreren Autoren oder für Blogs, die Gastbeiträge akzeptieren. Hier ist ein Beispiel für eine Autorenbox auf dem Jetpack-Blog. 

18. Kontaktformulare

Ein Kontaktformular hat Felder, die Besucher einer Website nutzen können, um Informationen zu übermitteln, zum Beispiel ihren Namen, ihre E-Mail-Adresse, eine Telefonnummer und einen Kommentar. Ob mit Fragen, Ideen oder Feedback – ein Formular macht es Besuchern einfach, mit dir in Kontakt zu treten. Ein Kontaktformular ist ein wichtiger Teil jeder Website, da es eine direkte Verbindung zu dir darstellt und oft die bevorzugte Kontaktmethode für Personen ist, die nicht zum Telefon greifen oder ihren E-Mail-Posteingang öffnen möchten.

Mit dem Formular-Block im WordPress-Editor kannst du mit nur wenigen Klicks ein benutzerfreundliches Kontaktformular hinzufügen.

19. Schema-Markup

Schema-Markup sind spezielle Mikrodaten, die Informationen zu Inhalten hinzufügen, damit Suchmaschinen sie besser verstehen können. Diese zusätzlichen Informationen werden auch in den Suchmaschinenergebnissen angezeigt und helfen so, deine Inhalte hervorzuheben und die Wahrscheinlichkeit zu erhöhen, dass Leute sie anklicken.

Zum Beispiel werden bei einer Veranstaltung, die richtig markiert ist, zusätzliche Informationen wie Datum, Uhrzeit und Ort angezeigt. Bei einem Rezept werden Dinge wie Kochzeit, Portionen, Nährwertinformationen und Zutaten gezeigt.

Das Schema-Markup für diese WooCommerce-Erweiterung zeigt beispielsweise ihre Sternebewertung, Bewertungen und den Preis an.

Die einfachste Methode, Schema-Markup zu deiner WordPress-Website hinzuzufügen, ist mit einem Plugin. Dieses übernimmt den schwierigen Teil der Einrichtung und ist ideal für Website-Betreiber, die über keine Programmierkenntnisse verfügen.

20. Meta-Titel („Title-Tags“) und Meta-Beschreibungen

Die Suchmaschinenoptimierung ist der Prozess, deine Website so einzurichten, dass sie wahrscheinlicher in den Suchmaschinenergebnisseiten (SERPs) angezeigt wird. Meta-Titel (oder Title-Tags) und Meta-Beschreibungen sind nur zwei Elemente, die zur richtigen SEO beitragen. 

Ein Meta-Titel beschreibt den Titel einer Seite oder eines Beitrags und erscheint in Suchmaschinen als anklickbarer Link. Dein Meta-Titel sollte Aufmerksamkeit erregen, damit er sich von anderen Ergebnissen abhebt, aber auch handlungsorientiert sein, damit Benutzer motiviert sind, ihn anzuklicken. Der Titel sollte außerdem höchstens 60 Zeichen lang sein.

Eine Meta-Beschreibung erscheint in den Suchmaschinenergebnissen unter dem Meta-Titel. Sie besteht typischerweise aus ein paar Sätzen (160 Zeichen oder weniger), die den Inhalt der Seite beschreiben und Benutzer dazu bringen sollen, den Link anzuklicken, um auf deine Website zu gelangen. So sieht ein typischer Meta-Titel und eine Meta-Beschreibung in einer Google-Suche aus.

Mit einem Plugin-fähigen WordPress.com-Tarif kannst du die SEO-Tools von Jetpack nutzen und die Meta-Beschreibung für jede einzelne Seite oder jeden Beitrag anpassen.

Baue auf deinem Fundament auf

Nachdem du jetzt die grundlegenden Elemente des Webdesigns verstehst, kannst du auf diesem Fundament aufbauen! Wende diese Konzepte an und nutze ihr volles Potenzial aus, indem du deine einzigartige Marke und Vision einbringst. 
Brauchst du ein paar Inspirationen? Sieh dir den WordPress-Design-Schaukasten an.

---