Das Konzept steht: Zielgruppe, Wettbewerb und Struktur sind geklärt, wie ich hier am Beispiel meiner Kundin Susanne beschrieben habe. Jetzt beginnt die Umsetzung: Aus Stichpunkten werden fertige Texte, aus Ideen ein Bildkonzept, aus der Struktur eine technische Website, die auch gefunden wird.
In diesem Artikel zeige ich dir meinen Ablauf von Text bis Launch, wieder am Beispiel von Susanne Möpert, Ernährungsberaterin für Frauen in den Wechseljahren: Content, Suchmaschinenoptimierung, Design, Technik und der letzte Feinschliff vor dem Launch.
Content-Strategie: Texte strukturieren, Headlines formulieren
Wenn die Struktur steht, fülle ich sie nicht einfach mit Text. Ich überlege, welche Inhalte welche Aufgabe übernehmen. Die Architektur gibt den Rahmen vor, aber der Content entscheidet, ob eine Website Erfolg hat.
Bei der Ernährungsberaterin Susanne bedeutet das: Welche Themen gehören auf die Startseite – und welche nicht? Was muss eine Besucherin sofort verstehen, damit sie weiß, dass ihr auf dieser Website geholfen werden kann. Wie findet die Besucherin die für sich wichtigen Informationen?
Lange Texte teile ich in appetitliche, leicht verdauliche Happen. Wir sind von Natur aus bequem, lange Textpassagen am Bildschirm lesen die wenigsten zu Ende. Diese Einteilung visualisiere ich dadurch, indem ich die Website in unterschiedlich farbigen Segmenten oder Blöcken teile. Das erleichtert das Lesen unterschiedlicher Bereiche.
Content-Strategie: Bilder ergänzen die Texte
Bildsprache finden
Welche Bildsprache Susannes Website trägt, also der Wechsel zwischen ihren eigenen Marktfotos, dem beauftragten Fotoshooting und den bewusst eingesetzten Stockfotos zum Thema Lebensmittelindustrie, habe ich im Konzept-Artikel beschrieben. Hier geht es um den nächsten Schritt: Wie werden aus diesen Entscheidungen fertige, technisch saubere Bilder auf der Website?
Als ausgebildete Fotografin sehe ich das besonders deutlich.
* Ein Bild kann Atmosphäre schaffen.
* Es kann Nähe herstellen.
* Es kann Professionalität zeigen.
* Falsch gewählt kann es aber die Aussage verwischen.
* Auch professionelle Fotos müssen für den Webbereich bearbeitet werden
* Wichtig sind Dateigröße, Dateimaße, Dateinamen und Alternativtext.
Bilder richtig bearbeiten und Dateinamen ändern
Die Fotos spielen in mehrfacher Hinsicht eine wichtige Rolle auf Websites. Das wird leider immer wieder unterschätzt. Die Punkte Atmosphäre und Professionalität habe ich bereits angesprochen. Es ist das, was die Besucherin vorn auf der Webseite sieht. Aber wie sieht es im Backend der Website aus? Denn Fotos müssen für die Website optimiert werden: Dateigröße, Dateinamen, Alternivtexte, Keywords. Leider sehe ich immer wieder viel zu große Dateigrößen: Fotos mit einer Dateigröße von über 100 KB verlangsamen die Ladezeit der Website. Auf vielen Websites sehe ich sogar mehr als 1 MB. Hier wurde offensichtlich das Foto direkt aus der Kamera bzw. dem Handy in die Website geladen. Das ist nicht nur nervig für Menschen, die die Website auf dem Handy öffnen und ewig lange warten müssen, bis die Seite geladen ist, sondern es beeinflußt auch die Suchmaschinenplatzierung. Wie du die vermeidest, habe ich in diesem Artikel beschrieben.
Content-Strategie bedeutet für mich deshalb nicht „viel Inhalt“, sondern gezielter Inhalt.
Suchmaschinenoptimierung – von Anfang an mitgedacht
Suchmaschinenoptimierung beginnt für mich nicht mit einem Plugin und auch nicht mit einer Liste von Keywords. Sie beginnt in dem Moment, in dem wir über Zielgruppe und Inhalte sprechen. SEO ist für mich Haltung und Denkweise.
Bei der Ernährungsberaterin Susanne stellte sich früh die Frage: Wie suchen ihre potenziellen Kundinnen eigentlich? Geben sie „Ernährungsberatung Wechseljahre“ ein? „Hormonbeschwerden“? „Gewichtszunahme ab 50″? Oder sehr konkrete Symptome wie „Schlafprobleme Wechseljahre was hilft“, „Was hilft mir bei Hitzewallungen“, „Welche Ernährung hilft mir bei Kopfschmerzen“?
Was wir mittlerweile auch von Anfang an mitdenken müssen: Immer mehr Menschen geben ihre Suchanfrage nicht in Google ein, sondern geben ganze Sätze in einer KI wie ChatGPT ein.
Diese Überlegungen beeinflussen bereits die Struktur. Wenn wir wissen, dass viele Frauen mit konkreten Beschwerden suchen, kann es sinnvoll sein, diese Themen klar zu benennen – nicht versteckt im Fließtext, sondern sichtbar in Überschriften und eigenen Abschnitten.
Suchmaschinenoptimierung heißt für mich: Die Sprache meiner Kundin mit der Sprache ihrer Zielgruppe abzugleichen.
Später kommen technische Aspekte hinzu: saubere Überschriftenstruktur, sinnvolle Seitentitel, Meta-Beschreibungen, Ladezeiten. Aber die Grundlage entsteht schon in der Konzeptphase.
Konkret heißt das bei Susanne: Jede Überschrift (H1, H2, H3) folgt einer klaren Hierarchie, keine Überschrift wird nur wegen der Formatierung vergeben, sondern weil sie eine echte Gliederungsebene markiert. Der Seitentitel, der bei Google als schwarze Überschrift erscheint, enthält den wichtigsten Suchbegriff der Seite, zum Beispiel „Hitzewallungen“ und „Wechseljahre“ statt nur „Angebot“. Die Meta-Beschreibung darunter ist kein Fülltext, sondern eine kurze Einladung: Sie beantwortet in ein bis zwei Sätzen, was die Besucherin auf der Seite erwartet. Die Ladezeit hängt eng mit den Bildern zusammen, dazu mehr im Abschnitt zur technischen Umsetzung.
Webdesign – Stimmung, Farbe und Typografie
Typografie: Schrift als wichtiges Gestaltungsmoment
Form follows Content. Auch bei Websites.
Erst wenn Struktur, Inhalte und Suchbegriffe geklärt sind, beginne ich mit der gestalterischen Ebene. Dafür lege ich ein Moodboard an.
Ich sammle visuelle Eindrücke, Farbwelten, Bildstimmungen, Typografie-Beispiele. Die Basis ist wieder das, was wir zuvor strategisch erarbeitet haben.
Für die Texte auf Websites verwende ich meistens Google-Fonts, die ich natürlich lokal einbinde, damit die Seite DSGVO-konform bleibt. Dafür nutze ich keine der üblichen Plugin-Lösungen, sondern eine einfache PHP-Anweisung von Sonia Rieder. Der Vorteil: Anders als ein echtes Plugin braucht sie keine Updates. Wie die Schriften lokal eingebunden werden, habe ich hier beschrieben.
Für die Fließtexte und Headlines auf Susannes Website habe ich mich für die Schriften Lato und Abel entschieden. Beide Schriften sind Grotesk-Schriften, das heißt, sie haben keine Serifen. Dadurch wirken die Textblöcke ruhig und sachlich. Auf Schreibschriften, wie sie oft auf Beratungsseiten insbesondere für Frauen zu sehen sind, habe ich bewußt verzichtet, um den professionellen und sachlich informierenden Charakter der Website zu unterstreichen.
Akzente habe ich in den Headlines und schmalen Teasern gesetzt: Die Headlines erhalten die Farben Grün und Lila, die Schriften in den Teasern die Schrift Abel, da wir hier wenig Platz haben und die Abel sehr schmal läuft.
Insgesamt habe ich die Schrift bewußt groß gesetzt mit großem Zeilenabstand, damit die Texte flüssig zu lesen sind. Durch den Zeilenabstand wirken die Textblöcke zudem leicht und luftig.
Farben: Die richtige Farbwahl unterstützt die Aussage der Texte
Bei der Ernährungsberaterin stellt sich zum Beispiel die Frage: Welche Farben unterstützen ihre Aussage? Mit welchen Farben kann ich die Besucherinnen abholen? Welche Farben passen zum Angebot und sorgen für Vertrauen?
Soll sie mit warmen Naturtönen arbeiten oder mit reduzierten, aber eindeutigen Farben? Was lässt sich als primäre Farbe definieren und welche Farbe wählen wir für Buttons – die auffällig, aber nicht zu knallig sein sollen, um nicht vom Thema abzulenken?
Das Moodboard ist keine Spielerei, sondern hilft uns, Entscheidungen zu treffen. Auf dieser Grundlage entwickle ich dann das visuelle Konzept: Farbpalette, Schriftkombination, Grundlayout, Bildsprache. [Welche 9 Fehler besonders häufig gemacht werden, hab ich hier beschrieben.](https://constanzestraub.de/website-richtig-gestalten/)
Design ist für mich die Übersetzung der Strategie in eine visuelle Sprache. Wenn die Architektur steht und die Inhalte klar sind, erfüllt das Design seine eigentliche Aufgabe: die Aussagen der Inhalte verstärken.
Die Farbentscheidung auf Susannes Website war relativ schnell getroffen: Wir wollten eine Farbe haben, die frisch wirkt, den Bereich „Gesundheit“ und „gesunde Ernährung“ abdeckt und gleichzeitig beruhigend wirkt. Deshalb lag die Farbe Grün nahe, die diesen Bereich sehr gut widergibt. Wir haben uns für zwei helle, leicht abgestufte Grüntöne und Weiß entschieden, um damit die unterschiedlichen Textbereiche zu segmentieren.
Als Akzentfarbe für die Buttons und Links hatte Susanne sich für ein kräftiges Lila entschieden, fast schon Pink, der sehr gut zum weiblichen Bereich passt. Gleichzeitig ist diese Farbe eine Kontrastfarbe (komplementär), die sich klar vom umgebenden Grün absetzt und damit schnell gesehen wird.
Mit der Wahl dieser reduzierten Farbsprache hat Susanne ein relativ ruhiges Umfeld auf ihrer Website erhalten. Ruhe ist hier wichtig, da einige Besucherinnen mit körperlichen Leiden und vielleicht Schmerzen zu ihr kommen. Die Wechseljahre sind eine sehr besondere Phase im Leben einer Frau, in der es auch unruhig zugeht. Eine dezente Farbgebung wirkt dann eher beruhigend. Außerdem setzt Susanne farbenfrohe Fotos ein von bunten Gemüsen und Obst, die mit der reduzierten Farbwelt gut harmonieren.
Technische Umsetzung der Website
Die technische Umsetzung ist relativ unabhängig vom Inhalt. Relativ, denn ein Shop als Beispiel benötigt bestimmte technische Voraussetzungen. Eine Website mit Blog braucht ein dynamisches System. Eine weitere Überlegung ist, ob die Websitebetreiberin als Laiin die Website nach der Fertigstellung selber editieren möchte. Ein Pagebuilder könnte dann die richtige Wahl sein. Welche Plattform für dein Projekt sinnvoll ist, habe ich hier ausführlicher beschrieben.
Für diejenigen, die ganz am Anfang stehen und wissen möchten, was WordPress überhaupt ist, habe ich diesen etwas humorvollen Artikel geschrieben.
Ich arbeite ausschließlich mit WordPress, in der Regel mit dem Theme Divi. WordPress ist sehr flexibel, ebenso das Theme Divi. Ich kann beliebige Erweiterungen hinzufügen, egal ob technische oder gestalterische Erweiterungen (CSS). Viele Websitebetreiber nutzen fertige Seiten-Layouts. Die gibt es bei mir nicht. Es gibt bei mir keine „Website von der Stange“. Jede Seite entsteht aus dem zuvor entwickelten Konzept.
Auch technische Grundlagen gehören dazu: saubere Seitenstruktur, klare Überschriftenhierarchie, sinnvolle Permalinks, Bildgrößen, Dateibezeichnungen, Ladezeiten. Vieles davon ist später nicht sichtbar. Aber es entscheidet darüber, wie nachhaltig die Website funktioniert.
Dafür setze ich auf eine feste Auswahl bewährter Plugins, statt bei jedem Projekt neu zu suchen: Real Cookie Banner für den Cookie-Hinweis, falls nötig, Perfect Images für die Bildoptimierung, Rank Math SEO oder Yoast SEO für die Suchmaschinenoptimierung, WP Armour gegen Spam über einen Honeypot, WP Mail SMTP für zuverlässigen Mailversand, WP-Sweep zum Aufräumen der Datenbank und UpdraftPlus für die wichtigen Backups von WordPress und der Datenbank. Als Sicherheits-Plugin hat sich Wordfence Security bewährt. Für die lokale Einbindung von Google-Fonts nutze ich kein Plugin, sondern eine schlanke PHP-Anweisung von Sonia Rieder, die im Gegensatz zu einem Plugin keine Updates braucht. Für die Auswertung nutze ich Koko Analytics und nicht Google Analytics, weil ich der Meinung bin, dass Koko datenschutzkonformer ist. Koko speichert keine personenbezogenen Daten, nutzt keine Dienste von Drittanbietern und erfasst lediglich aggregierte Zahlen. Das bedeutet, dass ich die Leistung meiner Website verfolgen kann, ohne Besucherprofile zu erstellen oder Nutzer im Internet zu verfolgen.
Die Technik folgt bei mir immer dem Konzept. Sie löst nichts, was vorher nicht geklärt wurde. Und genau deshalb steht sie in meinem Prozess fast am Ende.
Usability-Tests und Mobil-Optimierung
Wenn die Website technisch steht, ist sie noch nicht fertig. Jetzt beginnt die Phase, in der ich prüfe, wie sie sich tatsächlich anfühlt – und wie sie auf verschiedenen Geräten funktioniert. Ich teste die Seiten auf mehreren Bildschirmgrößen auf originalen Geräten, nicht nur simuliert im Programm: auf Desktop, Tablet (hoch und quer) und Smartphones.
Eine Website wird heute überwiegend auf dem Smartphone gelesen. Diese Tatsache denke ich im gesamten Konzept mit. Manche Unstimmigkeiten fallen erst jetzt auf. Diese Feinjustierung gehört für mich genauso zum Prozess wie die strategischen Vorüberlegungen.
Typische Beispiele, die mir dabei fast auf jeder Website begegnen: Schriften sind auf dem Smartphone oft zu groß und müssen angepasst werden. Außerdem teste ich auch auf dem Pad, in meinem Fall dem iPad, ein weiteres beliebtes Arbeitsgerät, das von vielen Webdesignerin leider vergessen wird. Hier teste ich auch Hoch- und Querformat, die sich stärker unterscheiden, als man denkt: Im Hochformat ähnelt die Darstellung einem großen Smartphone, im Querformat eher einem kleinen Monitor, und beides braucht eigene Anpassungen.
Bei umfangreicheren Menüs wird die Navigation in der Queransicht des iPads oft ein Problem: sie bricht um. Die Folge ist oft genug, dass man die einzelnen Links im Menü nicht mehr sauber ansteuern kann. Bei Susanne war das kein Problem, ihre Navigation hat nur fünf Links. Aber bei umfangreicheren Websites gehört das zu den Punkten, die ich in diesem Schritt korrigiere. Unter Umständen kann das bedeuten, die Schrift in der Navigation zu ändern: entweder einen schmal laufenden Font zu wählen, hierfür eignen sich die Condensed-Schriften sehr gut, wie als Beispiel die Roboto Condensed. Oder man wählt die Schrift kleiner, damit kein Umbruch entsteht.
Wie lange dauert die Erstellung der Website bis zum Launch?
Wie lange dieser gesamte Ablauf dauert, hängt stark davon ab, wie weit die Texte schon vorbereitet sind. Bei einer kleineren Website wie der von Susanne rechne ich mit vier bis acht Wochen von der Konzeptphase bis zum Launch. Muss ich die Texte selbst noch verfassen, dauert es entsprechend länger.
Abschluss
Wenn du merkst, dass du zwischen Selbermachen und Abgeben schwankst: Genau an diesem Punkt steige ich mit meinen Kundinnen ein, in jeder Phase, die du brauchst. [Hier geht es zu meinem Angebot.](https://constanzestraub.de/website-und-logo-aus-einer-hand/) Oder vereinbare gleich ein kostenloses Kennenlerngespräch mit mir.
Fazit: Vom Konzept zur fertigen Website
Text, Bilder, Suchmaschinenoptimierung, Design, Technik, Usability-Tests: Sechs Bereiche, die auf den ersten Blick unabhängig voneinander wirken. Bei Susanne griffen sie ineinander, weil jede Entscheidung auf dem Konzept aufbaute, das vorher stand. Die Farbwahl folgte der Zielgruppe, die Bildsprache folgte den Texten, die Struktur der Navigation folgte der Informationsarchitektur.
Genau das unterscheidet eine Website mit Konzept von einer Website ohne: Nicht die einzelnen Bausteine sind das Besondere, Text, Farbe und Technik gibt es überall. Entscheidend ist, dass sie alle dieselbe Sprache sprechen.
FAQ zur Website-Erstellung
**Welche Farbe passt zu meiner Website?** Ausgangspunkt ist nie die Lieblingsfarbe, sondern die Zielgruppe und die Aussage. Bei Susanne stand die Frage: Welche Farbe wirkt beruhigend und passt zum Thema Gesundheit? Die Antwort war Grün, dazu eine Komplementärfarbe als Kontrast für Buttons und Links. Zwei bis drei Farben reichen für eine stimmige Website völlig aus.
**Welche Schriftart soll ich nehmen?** Serifenlose Schriften wirken sachlich und modern, Serifenschriften eher traditionell und elegant. Wichtiger als die Wahl selbst: Nicht mehr als zwei Schriften kombinieren, und im Fließtext geht Lesbarkeit immer vor Kreativität.
**Es gibt tausend Plugins, welche brauche ich wirklich?** Die meisten Websites brauchen eine kleine, feste Grundausstattung, keine hundert Plugins: eines für Sicherheit, eines für Backups, eines für Suchmaschinenoptimierung, eines für Bildoptimierung. Ich arbeite mit einer festen Auswahl, statt bei jedem Projekt neu zu suchen, das erspart auch dir spätere Kompatibilitätsprobleme.
**Welches WordPress-Theme sollte ich verwenden?** Ich arbeite ausschließlich mit Divi. Der Grund: Es ist flexibel genug für jedes Konzept, ich muss also nie das Theme wechseln, wenn sich die Anforderungen ändern. Für Einsteigerinnen ist wichtig: Ein Theme sollte langfristig gepflegt werden, sonst entstehen später Sicherheitslücken.
0 Kommentare