So gestaltet ihr eine Website – ein Schritt-für-Schritt-Tutorial.

Mit Adobe Experience Manager Sites könnt ihr mühelos eigene Websites erstellen – egal ob für Desktop oder Mobile. Doch bevor ihr mit der Umsetzung startet, braucht ihr ein klares Design, das euch als Leitfaden dient. In diesem Leitfaden zeigen wir euch Schritt für Schritt, wie ihr den Zweck eurer Website definiert, eure Zielgruppe bestimmt, ein Design entwickelt, die passende Plattform auswählt und Wireframes erstellt.

Inhalt:

• Bestimmt Zweck und Ziel eurer Website.
• Definiert die Zielgruppe eurer Website und ihre Erwartungen.
• Wählt die passende Plattform für eure Website.
• Plant Struktur und Layout eurer Website mit einer Sitemap.
• Legt Seitentypen fest und entwickelt Wireframes für jede Seite.
• Plant und erstellt Content für eure Website: Texte, Bilder, Grafiken.
• Gestaltet die strukturellen und visuellen Elemente eurer Website für eine optimale User Experience (UX).
• Prüft eure Website und Inhalte auf Barrierefreiheit.
• Testet und launcht eure Website.
• Überwacht die Performance mit Analytics-Tools und optimiert kontinuierlich.

Bevor ihr Entscheidungen über das Design eurer Website trefft, solltet ihr euch klar machen, warum ihr überhaupt eine Website erstellt. Überlegt, wer eure Seite besuchen wird – denn das beeinflusst spätere Entscheidungen.

Fragt euch zunächst, was eure Website leisten soll. Wollt ihr beispielsweise als Händler oder Händlerin neue Kundschaft erreichen? Oder geht es euch eher darum, Informationen über eure Non-Profit-Organisation zu teilen? Oft gibt es mehrere Gründe dafür, eine Website zu erstellen. In diesem Fall empfiehlt es sich, für jeden Zweck eine eigene Seite oder einen eigenen Bereich anzulegen.

Gängige Website-Typen:

• E-Commerce-Website
• Event-Website
• Non-Profit-Website
• Reise-Website
• Unternehmens-Website
• Nachrichten-Website

Sobald ihr wisst, welche Art von Website ihr braucht und welchen Zweck sie erfüllen soll, könnt ihr euch Gedanken über das Design eurer Seiten machen.

Neben dem Zweck eurer Website bestimmt auch eure Zielgruppe das Design eurer Web-Seiten.

Wenn ihr genau wisst, wer eure Zielgruppe ist, bringt das viele Vorteile: Es ermöglicht euch, eure Botschaft und eure Website auf die Personen zuzuschneiden, die ihr ansprechen möchtet, und sie auf die richtigen Kanäle zu lenken.

Wenn ihr eure Zielgruppe wirklich versteht, fällt es euch leichter, ihre Herausforderungen und Hauptsorgen nachzuvollziehen – und diese gezielt auf eurer Website zu adressieren. Indem ihr euren Content auf die Bedürfnisse eurer Zielgruppe zuschneidet, könnt ihr starke Beziehungen aufbauen und Kundenbindung, Weiterempfehlungen und Treue steigern.

Website-Baukästen und Content-Management-Systeme (CMS) sind Tools, mit denen ihr eure Website entwerfen, veröffentlichen und individuell anpassen könnt. Sie beschleunigen die Entwicklung, da sie mit vorgefertigten Lösungen und Templates vieles einfacher machen.

Die Wahl der passenden Plattform oder des richtigen CMS ist ein wichtiger Schritt im Website-Design. Achtet bei der Auswahl auf Faktoren wie Benutzerfreundlichkeit, Anpassungsmöglichkeiten, Skalierbarkeit und verfügbare Templates.

Worauf ihr bei der Auswahl einer Plattform für achten solltet.

Bei der Auswahl einer Plattform für eure Website solltet ihr auf folgende Funktionen achten:

• Schnelle Site-Erstellung
• Benutzerfreundlichkeit auf Mobilgeräten und Desktop-Computern sowie schnelle Ladezeiten der Seiten
• Content-Management-System zur Erstellung einer gemeinsamen Umgebung
• Content-Erkenntnisse auf der Plattform
• Projekt-Workflows
• Website-Baukasten oder CMS, der in euer Budget passt
• Vielseitigkeit

Website-Builder-Plattformen, die ihr euch anschauen solltet.

Hier die wichtigsten Vor- und Nachteile einiger führender Plattformen:

• WordPress.Dank ihrer Flexibilität eine der beliebtesten Plattformen. Einfach nutzbar, solange ihr bei den Basiselementen bleibt – komplexere Funktionen erfordern jedoch oft einen Entwickler oder eine Entwicklerin.
• Wix.Intuitiv und leicht bedienbar, mit einer großen Auswahl an Templates, integrierten SEO-Funktionen und hilfreichem Support.
• Squarespace.Besonders beliebt bei Kreativen und bekannt für hochwertige, preisgekrönte Templates.
• Adobe Creative Cloud.Mit Adobe Express habt ihr einen kostenlosen Website-Builder, mit dem ihr schnell und einfach eine einzelne Web-Seite erstellen könnt. Erfahrt hier, wie Deloitte Adobe Creative Cloud eingesetzt hat, um mit Content Wirkung zu erzielen.
• Shopify.Ideal für Online-Shops. Shopify bietet umfangreiche Verkaufsfunktionen, mit denen ihr verschiedene Kanäle bespielt und euren Bestand verwalten könnt.
• Adobe Commerce.Ebenfalls auf E-Commerce spezialisiert. Mit KI-gestützten Funktionen und Integrationen mit anderen Adobe-Produkte erstellt ihr hochgradig personalisierte Kundenerlebnisse. Dank Drag-and-Drop-Interface leicht zu bedienen – und perfekt geeignet, um mehrere Kanäle, Marken und Regionen zu verwalten. Seht hier, wie Coca-Cola mit Adobe Commerce Umsatz und Conversions gesteigert hat.

Eine solide Struktur ist das Fundament jeder Website. Sie sorgt dafür, dass sowohl Nutzer und Nutzerinnen als auch Suchmaschinen sich leicht zurechtfinden. Eine klare Navigation – also die Möglichkeit, schnell die richtige Seite zu finden – ist entscheidend für eine gute User Experience und verhindert Frust beim Besuch eurer Website.

Single-Page-Layout.

Ein Layout mit einer einzelnen Seite ist genau das, was der Name vermuten lässt. Statt mehrere Seiten auf einer Website zu haben, habt ihr alles auf einer einzigen scrollbaren Seite. Dieses Format ist ideal, wenn ihr nur wenige Informationen teilen möchtet.

Multi-Page-Struktur.

Die am häufigsten gewählte Website-Form: Multi-Page-Websites verfügen in der Regel über eine Startseite mit Links zu anderen Seiten. Der mehrseitige Aufbau eignet sich besonders für Websites, die viele Informationen enthalten und verschiedene Zwecke erfüllen sollen.

Rasterbasiertes Design.

Ein übersichtliches Raster erleichtert das Scannen von Inhalten und sorgt für Interaktivität. Außerdem stellt es Konsistenz auf verschiedenen Bildschirmgrößen sicher.

F-Muster und Z-Muster

Eye-Tracking-Software hat gezeigt, dass Benutzerinnen und Benutzer Websites in der Regel nach einem F- oder Z-förmigen Muster scannen. Content-Designende versuchen deshalb, diesen reinen „Scan-Modus“ zu durchbrechen und Leserinnen und Leser dazu zu bringen, sich wirklich mit den Inhalten zu beschäftigen.

Euer Layout hängt immer davon ab, welches Ziel ihr verfolgt. Wichtig ist, dass die Besuchenden die wichtigsten Informationen schnell gefunden werden können. Schauen wir uns genauer an, wie ihr die genannten Website-Typen strukturieren könnt.

• Online-Shops:Ein Online-Shop könnte eine Startseite mit Produkten haben, die für Besuchende interessant sind – wie Amazon. Oder man verwendet eine Seite, die Produkte mit redaktionellen Inhalten kombiniert – wie Nike.com.
• Portfolio-Websites: Fachleute in Bereichen wie Fotografie, Print- und Grafik-Design und Marketing erstellen oft Portfolio-Websites, um ihre Arbeit zu präsentieren. Das kann eine reine Galerie sein oder eine Mischung aus Text und Bildern, etwa in Form von Case Studies.
• Unternehmens-Websites.Unternehmens-Websites sollten so aufgebaut sein, dass der Mehrwert des Unternehmens klar erkennbar wird. Unternehmen sollten außerdem überlegen, wie sie Benutzerinnen oder Benutzer mit einem Besuch der Website dazu bewegen können, einen Kauf zu tätigen oder ein Lead-Capture-Formular auszufüllen.
• Event-Seiten.Veranstaltungsseiten sollten klar und deutlich die wichtigsten Informationen vermitteln, nach denen die meisten Menschen suchen.
• Blogs:Blogs sollten so aufgebaut sein, dass Besuchende schnell den neuesten oder beliebtesten Content finden und neuen Leserinnen und Lesern sofort klar ist, worum es auf der Seite geht.

Der nächste Schritt beim Design eurer Website ist es, eine Übersicht über alle benötigten Seiten zu erstellen. Dies könnte eine einfache Liste sein oder eine grafische Darstellung der Seiten mit Linien, die zeigen, wie sie miteinander verbunden sind.

Eine Sitemap stellt sicher, dass ihr alle wichtigen Seiten und Inhalte berücksichtigt. Das ist ein guter Zeitpunkt, um eure Ziele noch einmal zu überprüfen und sie auf die einzelnen Seiten anzuwenden.

Beginnt mit einer Startseite, die klare Navigationslinks zu den anderen Seiten bietet. Es ist außerdem wichtig, eine Kontaktseite zu erstellen, auf der Besuchende erfahren, wie sie euch erreichen können. Ergänzend könnt ihr auch eine FAQ-Seite oder sogar eine kreative 404-Fehlerseite einbauen. Welche Seiten ihr letztlich wählt, hängt ganz vom Zweck eurer Website ab.

Seiten, die fast jede Website braucht:

1. Homepage:Eure Startseite ist meist die wichtigste Seite eurer Website. Platziert einen gut sichtbaren CTA auf eurer Startseite, der Benutzende dazu ermutigt, mit eurer Website zu integrieren.
2. Über.Die Über-uns-Seite stellt eure Mission, euren Hintergrund, euer Team und euren einzigartigen Mehrwert vor.
3. Kontakt.Diese Seite sollte Besucherinnen und Besuchern alle Informationen bieten, um mit euch oder eurem Kundenservice in Kontakt zu treten.
4. Produktseite:Eine Produktseite bietet detaillierte Informationen zu einem bestimmten Produkt oder einer angebotenen Dienstleistung.
5. Blog:Eure Blog-Seite zeigt in der Regel eine Liste oder ein Raster eurer neuesten Blog-Artikel an, die auf eurer Website veröffentlicht wurden.
6. FAQ.Damit euer Team nicht immer wieder dieselbe Frage beantworten muss, könnt ihr eine FAQ-Seite veröffentlichen, auf der die Fragen eurer Kundinnen und Kunden beantwortet werden.

Sobald das Fundament und der Aufbau eurer Website stehen, könnt ihr damit beginnen, Inhalte hinzuzufügen.

Die ersten Seiten, die ihr erstellen solltet, sind in der Regel die bereits erläuterten Kernseiten. Welche Inhalte ihr benötigt, hängt jedoch vom Zweck eurer Website ab. Zum Inhalt können Bilder, Texte, Logos, Videos und vieles mehr gehören.

Gebt jeder Seite einen klaren Zweck.

Nutzt eure Sitemap und überlegt, welche Informationen potenzielle Kundinnen und Kunden auf jeder Seite suchen. Jede Seite sollte ein eindeutiges Ziel verfolgen.

Schreibt klar und verständlich und verzichtet auf komplexen Fachjargon.

Überzeugender Content ist der Hauptbestandteil jeder erfolgreichen Website. Erstellt originellen und ansprechenden Content, der eure Botschaft klar kommuniziert. Euer Content sollte relevant, konkret, leicht verständlich und leserfreundlich sein.

Gliedert eure Seiten-Inhalte mit Überschriften und Aufzählungspunkten.

Mit Überschriften, Bullet Points und anderen Formatierungen könnt ihr lange Textblöcke auflockern und macht es euren Besucherinnen und Besuchern viel einfacher, die Inhalte schnell zu erfassen.

Bearbeitet Texte und Bilder so, dass sie den Markenrichtlinien entsprechen.

Nutzt diesen Schritt, um eure Markenrichtlinien anzuwenden und sicherzustellen, dass Tonalität und Bildsprache durchgängig markenkonform sind.

Verwendet eigene Fotos oder hochwertige Stockbilder.

Es mag verlockend scheinen, auf einer neuen Website Stockfotos zu nutzen – gerade wenn ihr keine eigenen Bilder habt. Das macht eure Website jedoch weniger attraktiv für eure Zielgruppe.

Beispiele für Content-Typen auf verschiedenen Websites.

• Online-Shops:Im Fall von E-Commerce-Sites ist es wichtig, für die Benutzerinnen und Benutzern viele Produktinformationen und Bilder von hoher Qualität bereitzustellen, da sie eure Produkte nicht persönlich sehen und anfassen können.
• Portfolio-Websites:Eine Portfolio-Website bietet wahrscheinlich eine Mischung aus visuellen Medien und Textinhalten.
• Unternehmens-Websites.Unternehmens-Websites nutzen eine Reihe von Content-Typen wie Referenzen, Produktinformationen oder Blog-Posts.
• Event-Websites- Event-Websites präsentieren möglicherweise Fotogalerien vergangener Veranstaltungen, Werbegrafiken oder Textinhalte.
• Blogs:Traditionell waren Blogs eine textbasierte Plattform. Heutige Blogs enthalten Fotos und Videoinhalte, Animationen, Infografiken und mehr.

Auch wenn jede Website anders ist, solltet ihr folgende Elemente berücksichtigen, um eine positive User Experience auf eurer Website zu gewährleisten:

• Website-Architektur:Damit eure Website leicht zu navigieren ist, sollten eure Seiten intuitiv organisiert und verknüpft werden. Besucherinnen und Besucher sollten die wichtigsten Seiten eurer Website schnell in der Navigationsleiste oder über Links auf den Seiten eurer Website finden können.
• Navigationsmenü:Euer Navigationsmenü sollte Links zu den wichtigsten Seiten eurer Website enthalten, die logisch organisiert sind. Überlegt, Kategorien oder Gruppen zu verwenden, damit euer Menü nicht überladen wirkt. Euer Menü muss außerdem responsiv sein, damit es auf allen Geräten richtig funktioniert.
• Farben:Ihr könnt ein Farbrad verwenden, um eine harmonische Farbpalette zu erstellen, die ihr auf eurer Website verwenden könnt. Als Regel gilt: Euer Farbschema sollt sich auf drei Farben beschränken – eine Primärfarbe (60 %), eine Sekundärfarbe (30 %) und eine Tertiärfarbe (10 %).
• Schriftarten:Wie die Farben sollten auch die gewählten Schriftarten euren Markenrichtlinien entsprechend. Achtet besonders darauf, dass sie gut lesbar sind – und das auch auf kleinen Bildschirmen.
• Header und Footer:Im Header sollten Logo und Navigation mit Links zu den wichtigsten Seiten klar erkennbar sein. Der Footer sollte Kontaktinfos, Social-Media-Links und einen CTA enthalten.
• Bewegung:Animationen können Besuchende fesseln, sollten aber sparsam eingesetzt werden. Zu viele bewegte Elemente verlangsamen die Ladezeit und lenken vom Wesentlichen ab.

Die visuellen Design-Entscheidungen, die ihr auf eurer Website trefft, prägen den Eindruck, den Besuchende von eurer Marke erhalten, maßgeblich. Ein aufgeräumtes, konsistentes Design vermittelt Professionalität und Vertrauen – ein überladenes oder inkonsistentes Erscheinungsbild hingegen kann dazu führen, dass Nutzende schnell abspringen.

Die Barrierefreiheit eurer Website ist ein wichtiger Faktor. Unabhängig von ihren Bedürfnissen sollten eure Besucherinnen und Besucher die Website bequem navigieren und Aufgaben erledigen können. Es gibt viele Möglichkeiten, eure Website zugänglicher zu gestalten. Hier ein Überblick:

So nutzen Menschen eure Website.

Die meisten Besuchenden scrollen mit der Maus durch eure Website und sehen sie mit Standardeinstellungen an. Das gilt jedoch nicht für alle. Ihr solltet Folgendes berücksichtigen:

• Manche Besucherinnen und Besucher navigieren mit der Tastatur statt mit der Maus.
• Manche Besucherinnen und Besucher ändern möglicherweise die Browser-Einstellungen, um Ihren Content leichter lesbar zu machen.
• Menschen mit Sehbeeinträchtigungen nutzen oft einen Screenreader, der die Inhalte eurer Website vorliest oder akustisch wiedergibt.
• Andere verwenden möglicherweise eine Bildschirmlupe, um Teile ihres Bildschirms zu vergrößern.
• Manche benutzen möglicherweise Sprachbefehle, um auf einer Website zu navigieren.

Content-Struktur.

Besucher, die einen Screenreader verwenden, kann die Überschriftenstruktur dabei helfen, sich auf einer Seite zu orientieren und die Beziehungen zwischen den Absätzen zu verstehen. Die Verwendung von HTML-Überschriften wie H1, H2 und H3 kann äußerst nützlich sein.

Nur-Tastatur-Nutzer und -Nutzerinnen.

Wer nur mit der Tastatur navigiert, muss mit eurer Website interagieren können. Orientiert euch an typischen Interaktionen und vergewissert euch, dass sie auch per Tastatur funktionieren.

Bilder und Medien.

Ein wichtiger Aspekt bei der Barrierefreiheit ist die Verwendung von Alt-Text für Bilder und Medien. Alternativtext wird auf einer Website in der Regel nicht angezeigt, kann aber von Bildschirmlesern gelesen werden und beschreibt, was im Bild oder Medium zu sehen ist.

Farbe und Kontrast.

Achtet bei der Gestaltung eurer Website auf die Schrift- und die Hintergrundfarbe. Manche Farben harmonieren besser miteinander als andere, besonders wenn Besucher seine Sehbeeinträchtigung haben oder farbenblind sind. Text und Hintergrund sollten einen starken Kontrast bilden, damit der Text auf der Seite klar lesbar ist. Verlasst euch nicht allein auf Farben, um Informationen zu vermitteln.

Bewegte Inhalte.

GIFs, Videos, Animationen und andere bewegte Inhalte ollten immer steuerbar sein. Bietet einfache Play-, Pause- und Stopp-Funktionen an. Falls Inhalte blinken oder flackern, muss es eine Möglichkeit geben, diese zu deaktivieren.

Gründliches Testen eurer Website vor dem Launch stellt sicher, dass eure Website in puncto Funktionalität, Geschwindigkeit, Sicherheit und Benutzerfreundlichkeit überzeugt. Es ist wichtig, Ihre Website regelmäßig gründlich zu testen, um Probleme wie defekte Seiten oder Links zu vermeiden, die die User Experience beeinträchtigen können.

Funktionstests.

Nichts nervt Besuchende mehr als eine Website, die nicht funktioniert. Prüft deshalb vor dem Launch, ob alle Links, Navigationsmenüs, Buttons, Dropdowns und Formulare korrekt funktionieren.

Mobile Responsiveness testen.

Die meisten Menschen greifen heute über ihr Smartphone aufs Internet zu. Stellt also sicher, dass eure Seite nicht nur im klassischen Browser, sondern auch auf allen gängigen Mobilgeräten optimal funktioniert.

Website-Geschwindigkeit und Performance-Test.

Die Geduld im Internet ist kurz, weshalb eure Website innerhalb weniger Sekunden laden muss. Mit Tools wie dem Google Page Speed Insights Tool könnt ihr testen, wie schnell eure Website lädt.

A/B-Tests.

A/B-Tests sind eine bewährte Methode, um verschiedene Optionen auszuprobieren und herauszufinden, was bei eurer Zielgruppe am besten ankommt. Ihr könnt alles testen – von Bildern über Texte bis hin zum kompletten Layout.

Usability-Tests.

Usability-Tests – auch User-Tests genannt – bedeuten, dass ihr beobachtet, wie Menschen eure Website nutzen, um mögliche Probleme oder Hürden zu erkennen. Oft werden solche Tests vor dem Launch durchgeführt, um sicherzustellen, dass alles so funktioniert, wie ihr es geplant habt.

Sobald Ihre Website online ist, können ihr von allen Vorteilen profitieren – einschließlich der Möglichkeit, Performance-Daten zu erfassen. Diese Informationen sind Gold wert, denn sie helfen euch, eure Website kontinuierlich zu optimieren und zu pflegen.

Verfolgt die Site-Performance mithilfe der Web-Analyse.

Die meisten Plattformen verfügen über integrierte Analytics-Funktionen, mit denen ihr die Performance eurer Website messen könnt. Außerdem könnt ihr eure Website mit Google Analytics verbinden und so gezielt Kennzahlen wie Seitenaufrufe, Verweildauer, Conversion Rates oder Absprungraten tracken.

Diese Daten zeigen euch, wie Besucherinnen und Besucher auf eurer Website bewegen – und welche Seiten noch Optimierungspotenzial haben, etwa durch besseres On-Page-SEO. Je genauer ihr eure Analytics im Blick behaltet, desto mehr erfahrt ihr über eure Zielgruppe und darüber, was für sie funktioniert.

Aktualisiert und wartet eure Website regelmäßig.

Wartung ist auch ein wichtiger Bestandteil des Website-Designs. Links und Keywords ändern sich im Laufe der Zeit – genauso wie Design-Trends. Deshalb könnt ihr eine Website nicht einfach einmal erstellen und dann ohne laufende Aktualisierung sich selbst überlassen. Das regelmäßige Überprüfen von Links und Bildern, die Aktualisierung von Keywords, das Monitoring der Ladegeschwindigkeit der Website sowie das regelmäßige Hinzufügen oder Entfernen von Content sorgen dafür, dass eure Website frisch und relevant bleibt.

Analytics und kontinuierliche Pflege sind mächtige Werkzeuge: Sie helfen euch nicht nur bei der Fehlersuche, sondern auch dabei, eure Website zu verbessern und flexibel zu skalieren, wenn die Nachfrage steigt. Behaltet ihr die Performance konsequent im Blick, versteht ihr eure Zielgruppe besser – und könnt zum richtigen Zeitpunkt kluge, agile Entscheidungen für euer Business treffen.

Los geht’s.

Jetzt, da ihr mit dem Wissen und den Tipps aus diesem Artikel ausgestattet seid, könnt ihr eure eigene Website-Design-Reise starten. Holt euch Inspiration von erfolgreichen Websites und lasst dann eurer Kreativität freien Lauf.

Mit Adobe Experience Manager erstellt und verwaltet ihr Websites ganz einfach selbst – und begeistert eure Zielgruppe mit personalisierten Web-Erlebnissen. Ihr könnt Inhalte für mehrere Kanäle ausspielen, Templates individuell anpassen und eure Seiten zentral aktualisieren – alles auf einer Plattform.

Erfahrt mehr darüber, wie euch Adobe Experience Manager beim Erstellen eurer eigenen Unternehmens-Sebsite unterstützt.