Website‑Design für Anfänger

1. Lege Ziele und Prioritäten fest, bevor du loslegst

Wenn wir an erfolgreiches Webdesign und -entwicklung denken, denken wir an Domain-Namen, einen zuverlässigen Web-Host, Website-Farbschemata und Content-Management-Systeme. Ausschlaggebend für erfolgreiches Website-Designs sind jedoch klare Prioritäten. Starte dein Website-Projekt, indem du festlegst, was deinem Unternehmen am wichtigsten ist, damit du weißt, welche Inhalte deine Website enthalten sollte.

„Schreibe auf, wie Erfolg aussieht und arbeite von dort aus zurück“, sagt Jonathan. „Auf diese Weise kannst du entscheiden, was Teil deiner Website wird.“

Es kann hilfreich sein, wenn du dir andere Websites in deiner Branche ansiehst, um dir Inspiration für das Design zu holen. Sieh dir die Seiten an und achte darauf, welche Informationen sie bereitstellen, wie sie ihre Marken kommunizieren und was sie anbieten, um die Aufmerksamkeit der Besucher zu gewinnen und zu halten. Sieh dir an, was deiner Meinung nach gut funktioniert und was du besser machen möchtest.

Diese Liste von wichtigen Website-Elementen hilft dir dabei, eine Sitemap zu erstellen. Wie der Name schon sagt, ordnet eine Sitemap deine Website, indem sie die Seiten festlegt, die du haben wirst, und bestimmt, wie die Seiten miteinander verknüpft werden. Später hilft sie dir, deine Informationsarchitektur festzulegen.

Diese grundlegenden Arten von Seiten sollten auf deiner Website nicht fehlen.

• Homepage:
  

Dies ist die Hauptseite deiner Website und daher oft die erste Seite, die neue Besucher sehen. Sie sollten die wichtigsten Informationen, die sie benötigen, zuerst sehen, um zu verstehen, was du anbietest, und sie sollten schnell verstehen, wie die Navigation funktioniert.

• Über uns:
  

Hier finden Besucher die grundlegenden Informationen über dein Unternehmen, z. B. wie du angefangen hast, wo du ansässig bist, deine Mission und Profile deiner wichtigsten Teammitglieder. Du kannst auch Links zu Ladenöffnungszeiten und Standorten (falls vorhanden), Links zu Social Media-Seiten und Kontaktdaten einfügen.

• Services:
  

Je nachdem, in welchem Sektor dein Unternehmen oder deine Organisation tätig ist, kann eine Seite mit kurzen Erklärungen zu den Dienstleistungen, die du anbietest, oder Abbildungen deiner Produkte sowie Links zu den detaillierten Seiten, um mehr über diese Dienstleistungen zu erfahren, für neue Besucher sehr hilfreich sein.

• Stellenangebote:
  

Wenn du häufig auf der Suche nach neuen Teammitgliedern bist, könntest du eine Seite mit verfügbaren Positionen einrichten oder ein Formular bereitstellen, über das sich Personen nach offenen Stellen erkundigen können.

• Blog:
  

Wenn du regelmäßig Inhalte veröffentlichst, kann eine Blog-Seite ein zentraler Ort sein, an dem Besucher diese finden. Das können Produkt- oder Service-Updates, Artikel zu deinem Angebot, Profile neuer Projekte und andere Inhalte sein, die dazu beitragen, Website-Besucher über dein Unternehmen zu informieren.

2. So erstellst du einen Wireframe zur Visualisierung deiner Website

Ein Wireframe ist das Grundgerüst für deine Website. Ähnlich wie ein Bauplan für ein Haus liefert er ein zweidimensionales Bild des Layouts, der Struktur und der Funktionalität deiner Website.

Wireframes können einfach mit Zettel und Stift oder digital mit Website-Design-Tools oder einem Website-Creator erstellt werden, mit denen du die Struktur deiner Website visuell kommunizieren kannst. Es gibt drei Arten von Wireframes – beim Aufbau deiner Website, gelangst du von einem zum nächsten und erreichst dabei mehr Detailtreue („Fidelity”).

• Low-Fidelity Wireframes: Diese frühen, groben Skizzen – in der Regel einfache Formen und Platzhaltertexte – eignen sich gut zum Mapping des Navigationsflusses. „Konzentriere dich in dieser Phase lediglich auf den Inhalt und darauf, wie der Benutzer darauf reagieren wird, anstatt darauf, wie die Website tatsächlich aussehen wird“, sagt Jonathan. „Dies ist die Planungsstufe, d. h. du skizzierst die Website lediglich grob und machst dir Gedanken über die Hierarchie.“

• Mid-Fidelity Wireframes: In dieser Phase hast du noch keine Bilder oder Live-Text. Du erstellst Schwarz-Weiß-Renderings, die eine genaue Darstellung des Website-Layouts zeigen. Zur Erstellung dieser Renderings gibt es Tools, für die es kostenlose Testversionen gibt, zum Beispiel Sketch oder Balsamiq. „In diesem Stadium baust du das Gerüst deiner Website“, sagt Jonathan. „Du brauchst kein bestimmtes Design, aber du brauchst klare Linien und genaue Größenangaben.“

• High-Fidelity Wireframes: In dieser letzten Phase des Designs erstellst du ein Modell, das aussieht wie deine eigentliche Website, mit Bildern, Farbschema und echten Texten. Jetzt kannst du Dinge wie Menüs und interaktive Inhalte gestalten. „Hier fügst du Farben und Texte hinzu, aber es handelt sich noch nicht um einen funktionierenden Prototyp“, sagt Jonathan. „Dies ist nach wie vor nur ein Beispiel für den Aufbau deiner Website.“

3. Denke beim Design an deine Zielgruppe

Konzentriere dich in den Phasen des Website-Designs darauf, einen Asset für deine Zielgruppe zu erstellen. Das ist schließlich der Sinn der Sache. Stelle sicher, dass du in jeder Phase der Website-Entwicklung – von der Festlegung von Prioritäten über die Formatierung bis hin zur Navigation – an die Anforderungen deiner Zielgruppe denkst.

„So spannend es auch sein mag, eine völlig einzigartige und unorthodoxe Website zu erstellen, zuerst solltest du immer an den Endnutzer denken“, sagt Jonathan.

Anhand dieser Checkliste kannst du für eine positive Benutzererfahrung (UX) sorgen.

• Sorge für eine visuelle Hierarchie:
  Eine solide Hierarchie erleichtert es den Besuchern, schnell Informationen zu erhalten und zu verstehen, wo sie auf deiner Website mehr erfahren können. Zur visuellen Hierarchie zählen Absätze, Farben, Leerzeichen, Wiederholungen und mehr.
• Weniger ist mehr:
  Achte beim Design auf eine besucherfreundliche Erfahrung, indem du überlegst, ob die Benutzer die Elemente wirklich alle benötigen. Möglicherweise fügst du Features hinzu, die die Website kompliziert machen und die Navigation für deine Zielgruppe erschweren.
• Sorge für einen klaren Handlungsaufruf (CTA):
  „Bestellung aufgeben“, „Jetzt kaufen“, „Registrieren“, „Kontakt“ und sonstige CTAs sollten leicht zu finden und intuitiv sein. Frage dich immer wieder, ob dein Website-Design so konzipiert ist, dass deine Zielgruppe weiß, wohin sie als nächstes klicken soll.
• Sorge dafür, dass sie zugänglich ist:
  Deine Website sollte responsiv und von jedem Gerät aus zugänglich sein. Überprüfe, wie unterschiedliche Aspekte deiner Website auf PCs, Tablets und Handys aussehen und funktionieren. Vergewissere dich, dass den Benutzern Texte und Bilder auf verschiedenen Geräten richtig angezeigt werden können und dass sich Buttons und CTAs problemlos auf verschiedenen Bildschirmen anklicken lassen.

4. Verwende Fotos, um deine Geschichte zu erzählen

Eine Website ist ein visuelles Erlebnis, also konzentriere dich auf Bilder, die deine Zielgruppe ansprechen, um zu vermitteln, worum es bei deiner Marke geht. Wenn du noch keine eigenen Fotos zur Veranschaulichung deiner Produkte oder Dienstleistungen hast, gibt es viele Quellen für Stock-Bilder. Websites wie Unsplash, Pexels und Pixabay bieten eine große Auswahl an kostenlosen Bildern, mit denen du sofort loslegen kannst.

Jonathan schlägt vor, eine Serie von Stockbildern vom selben Set oder vom selben Fotografen auszusuchen. „Auf diese Weise kannst du dafür sorgen, dass der Stil deiner Website konsistent ist“, sagt er. „Dies lässt deine Website professioneller und dein Unternehmen vertrauenswürdiger erscheinen.“

Beachte diese Tipps, wenn du Bilder auswählst.

• Sorge dafür, dass deine Bilder eine Geschichte erzählen.
  Wähle ein Bild nicht nur deshalb aus, weil es hübsch aussieht. Überlege dir, ob das Bild zu deinem Inhalt passt und deine Marke zum Leben erweckt.
• Sei originell, auch wenn du Stock-Bilder verwendest.
  Triff nicht die offensichtlichste Wahl. Du willst kein Foto auswählen, das ein Besucher sofort als Stock-Bild erkennt, das er bereits auf einem Dutzend anderer Websites gesehen hat.
• Sorge dafür, dass die Personen auf den Fotos deiner Zielgruppe ähneln:
  

So haben die Besucher das Gefühl, dass deine Website – und deine Marke, dein Produkt oder dein Service – etwas ist, mit dem sie sich identifizieren können und das sie brauchen.

• Sorge für einen einheitlichen Bildstil:
  Vergewissere dich, dass die visuellen Elemente deiner Website zu deiner Marke passen. Sorge für einheitliche Farben, Schriftarten und Bilder, sodass sie dein Markenbild stärken.
• Schneide Stock-Bilder zu, um mehr Wirkung zu erzielen:
  Wenn du z. B. selbstgemachtes Eis verkaufst und ein Bild findest, auf dem ein süßes Kind zu sehen ist, das mit seiner Familie Eis isst, dann schneide das Foto so zu, dass das Kind im Vordergrund steht. Im Vergleich zu anderen Websites, auf denen das nicht zugeschnittene Bild verwendet wurde, wird es mehr Aufmerksamkeit erhalten und einzigartig aussehen.

5. Verfolge deine Performance und verbessere dich mit der Zeit

Deine Website wächst mit deinem Unternehmen. Verfolge deine Performance von Anfang an mithilfe deiner Website-Berichte, um festzustellen, was funktioniert und was nicht. Nimm anschließend Anpassungen vor, um das Erlebnis für Benutzer zu verbessern – und deine Ergebnisse.

Durch die Integration von Google Analytics auf deiner Website kannst du die Aktivität verfolgen und sehen, welche Seiten den meisten Traffic erhalten und was die Besucher anklicken. A/B-Tests – hier vergleichst du zwei verschiedene Versionen miteinander. So kannst du feststellen, welche Elemente deiner Website am besten funktionieren, und dafür sorgen, dass dein CTA deine Besucher motiviert. „Wenn du CTAs erstellen möchtest, die zu einem unvergesslichen Web-Erlebnis beitragen, musst du ständig testen, was am besten funktioniert“, sagt Jonathan.

Eine Möglichkeit zu sehen, wie Benutzer mit deiner Website interagieren, ist ein Heatmapping-Tool wie Hotjar, sagt Jonathan. Heatmapping bietet eine farbkodierte, grafische Darstellung der Seiten, die sich Besucher von sich aus ansehen. So siehst du, welche Bereiche deiner Website die meiste Aufmerksamkeit erhalten und wie sich dein Design und deine Iterationen zukünftig verbessern lassen.

„Da es sich um den Echtzeit-Traffic handelt, der nachverfolgt wird, eignet es sich sowohl für neue Websites als auch für Websites, die bereits lange online sind. „Und das Beste daran ist, dass die Darstellung der Heatmaps einfach und verständlich ist.“

Achte auf Details

Denke bei der Gestaltung deiner Website daran, dass sie der Dreh- und Angelpunkt für deine Marketingaktivitäten ist. Vielleicht ist sie der erste Eindruck, den jemand von deinem Unternehmen hat, und da du möchtest, dass dieser Eindruck gut ist, solltest du keine halben Sachen machen.

Scheue keine Mühen, um es richtig zu machen, rät Jonathan. Stelle sicher, dass alle deine Funktionen auf Bildschirmen jeder Größe funktionieren, damit die Benutzer auf deiner Website navigieren und sie nutzen können. Anderenfalls gehen sie einfach zur Konkurrenz.

„Ein kostengünstiges Webdesign bietet dir nicht die Flexibilität und Kontrolle, die du benötigst, um deinen digitalen Raum identifizierbar und funktional zu deinem eigenen zu machen“, sagt er. „Jedes Element zählt – selbst die grundlegenden. Verzichte nicht auf Qualität.“