Pannenfrei zum professionellen Webauftritt

 

Das sollten Sie beachten, wenn Sie eine neue Website planen

Sie wissen nicht, was für Ihre neue Website notwendig ist und wo Sie anfangen sollen? Sie wollen aber bei der Planung und Umsetzung vieles selbst machen oder die damit verbundenen Schritte zumindest beurteilen können? Mit unserer Erfahrung aus zahlreichen Webprojekten haben wir hier alle wesentlichen Bausteine gesammelt und sortiert – vom ersten planerischen Gedanken über den Content bis zur technischen Umsetzung.


Die gute Planung Ihrer Website spart Zeit und Geld.

In erster Linie ist eine neue Website ein Kommunikations-Projekt, das konsequent Zielgruppen-orientiert geplant werden sollte – nicht nur technisch, sondern genauso inhaltlich.

5 grundlegende Fragen sollten Sie sich stellen, bevor Sie mit der Umsetzung einer neuen Website loslegen.

1. Was erwarte ich mir von einer neuen Website für mein Unternehmen?
Die Unternehmensziele können variieren, aber meistens geht es um mehr Sichtbarkeit, mehr Kunden, mehr Verkäufe – und natürlich um eine klare Positionierung im Marktsegment.

2. Wer soll die Website nutzen?
Sie bauen die Website nicht für sich selbst, sondern für Ihre Zielgruppe(n). Deshalb nicht vergessen: Nutzer-orientiert denken von Anfang an!

3. Was muss die Website können?
Hier geht es um die Nutzerführung, die „Usability“.
Der erste Schritt ist der strukturelle Aufbau: Was kommt auf welche Seite, welche Menüpunkte gibt es, Teamvorstellung, Services usw.?
Im zweiten Schritt ist es auch eine Frage der Technik – z.B. Blog, Shop, Formulare, Sprachen, Mitgliederbereich, SEO.

4. Wie könnte die Seite nach dem Livegang wachsen?
Wenn das Geschäft floriert, steigen auch die Anforderungen an eine Website: mehr Angebote, mehr Unternehmensbereiche, mehr Themen, mehr Kaufanregungen, mehr Kunden oder Mitglieder.
Kann die Technik der Website mithalten, bei z.B. Sprachversionen, erweitertem Tracking, aufwendigerem Shop mit Merkliste oder Produktvergleich, Automatisierung, Schnittstellen?

5. Und nicht zuletzt ist alles eine Frage des Budgets.
Wollen Sie die Website ganz, teilweise selber machen oder komplett an einen Dienstleister rausgeben?
Werfen Sie hier alles in die Waagschale: Eigener Zeitaufwand, vorhandenes (oder fehlendes) Know-how, technische Unterschiede bei den Anbietern von Website-Systemen, Programmierkosten, Agenturkosten …

… und natürlich müssen Sie die Fragen 1 bis 4 beantworten können ;-)


Die ZIELGRUPPE ist der rote Faden für Ihre neue Website.

Nur wer seine Zielgruppe(n) wirklich kennt, kann auch eine neue Website zielgerichtet planen. „Das ist doch selbstverständlich“, werden Sie jetzt vielleicht denken. Ja. Aber oft verdecken interne Abläufe, Gewohnheiten oder Vorurteile den freien Blick auf die tatsächlichen Erwartungen der Zielgruppen. Deshalb empfehlen wir: Holen Sie sich jemanden von außen, der mit frischem Blick und den richtigen Methoden Ihre Unternehmensziele und die Bedürfnisse Ihrer Zielgruppen verbindet.

Eine Website bedient meistens mehrere und damit oft sehr unterschiedliche Zielgruppen. Die Zielgruppen können Kunden, Mitarbeiter, Unternehmensteilhaber, Bewerber, Öffentlichkeit usw. sein.

Es gibt viele Fragen zu beantworten, wie zum Beispiel:

  • Wie viele Zielgruppen möchte ich differenziert ansprechen?

  • Was haben meine verschiedenen Zielgruppen gemeinsam, was trennt sie?

  • Was wollen sie, was bewegt sie?

  • Wie und wo steigen meine Zielgruppen in die Website ein?

  • Welchen Sprachstil bevorzugen meine Zielgruppen?

Repräsentative Nutzerbefragungen bzw. Usability-Tests in einem UX-Labor durchzuführen, ist der Idealfall – aber eben auch ein nicht unwesentlicher Kostenfaktor. Bei einem kleineren Budget ist Einfallsreichtum gefragt, um an ein direktes Feedback der Zielgruppe(n) zu kommen:

  • Sprechen Sie Ihre Kunden und Mitarbeiter an und stellen Sie konkrete Fragen.

  • Entwickeln Sie gemeinsam mit Kollegen, die zum Beispiel mit den Kunden in Kontakt stehen, Persona-Modelle Ihrer Zielgruppen.

So gewonnene Erkenntnisse decken konkrete Bedürfnisse auf, die Ihnen helfen, eine bessere Website zu bauen.


Planen sie den Content Ihrer Website konsequent nutzerzentriert.

Der Inhalt einer Website sollte den Lesern übersichtlich und schnell Informationen liefern und sie dabei emotional ansprechen. Aber welche Inhalte eignen sich dafür?

Besonders für die klassischen Hauptseiten wie Startseite, Über uns, Team, Leistungen, Referenzen, Kontakt usw. gilt: Langweilen Sie die Leser nicht mit ausschweifenden Details, die nichts zum Thema beitragen. Wenn sich jemand für Ihr Unternehmen interessiert, wird er von selbst tiefer in die Website einsteigen und zum Beispiel im Blog längere Texte lesen. Dafür ist eine schlaue interne Link-Strategie erforderlich, die Inhalte der eigenen Website sinnvoll verknüpft. Die Nutzer sollten nie in einer Sackgasse landen.

Sichten und prüfen Sie zuerst den vorhandenen Content – Text und Bild! Jedes Unternehmen verfügt bereits über Inhalte. Entweder sind schon Werbemittel, Präsentationsmaterialien, Website & Co vorhanden oder es gibt Strategiepapiere usw.

Denken Sie aus der Nutzer-Perspektive:

  • Was erwarten meine Zielgruppen?

  • Was sind die Aufgaben und wo liegt der Schwerpunkt der Website?

  • Welche Inhalte und Bereiche sind dafür notwendig?

  • Welche Inhalte sind relevant?

  • Welche Inhalte sollten angepasst werden?

  • Welche Inhalte können weg?

  • Was fehlt und was muss neu erstellt werden?

TIPP: Lösen Sie sich von Inhalten, die zwar Ihnen persönlich (besonders) gut gefallen, aber Ihre Leser eher verwirren. Stellen Sie immer die Frage aus Sicht des Nutzers: Was habe ich davon?


Strukturieren Sie die Inhalte Ihrer Website mediengerecht.

Eine Website ist kein Buch und wird nicht von vorne nach hinten gelesen. Strukturieren Sie Ihre neue Website so, dass der Leser auf jeder Seite beginnen könnte.

Alle ausgewählten Inhalte sind wichtig und müssen ihren Platz finden – ganz egal ob es um Ihr Angebot oder die Datenschutzerklärung geht. Doch lange bevor es ans Texten geht, brauchen Sie ein Konzept, was wo auf Ihrer neuen Website stehen soll. Dazu muss die Frage nach dem Sinn und Zweck der neuen Website geklärt werden.

Welche Seiten brauchen Sie überhaupt? Betrachten Sie alles aus der Nutzer-Perspektive, sammeln Sie Ideen und machen Sie sich erst einmal Notizen. Skizzieren Sie die Struktur Ihrer Website als sogenannten Wireframe – also ohne Design. So haben sie alle Seiten/Menüpunkte übersichtlich im Blick und erkennen schnell, wenn etwas fehlt oder anders positioniert werden sollte.

Es gibt hilfreiche Tools für die Wireframe-Planung, die auch weiterführend zur Layoutentwicklung verwendet werden können, wie zum Beispiel:
Figma (nutze ich gerne, weil es sehr übersichtlich und einfach zu bedienen ist)
Sketch
Adobe XD


Das sind die wesentlichen Seiten bzw. Inhalte:

Startseite: Die ersten Zeilen sollten kurz und knapp erzählen, was die Website Ihren Zielgruppen bietet. Im Anschluss schaffen Sie Einstiege in die wichtigsten Themen für Ihre Zielgruppen.

Über uns: Je nach Unternehmensgröße kann „Über uns“ auch auf der Startseite oder unter Team stattfinden. Zeigen Sie hier Transparenz! Ihre Interessenten möchten genau wissen, mit wem sie es zu tun haben, für was Sie stehen und ob sie Ihnen vertrauen können.

Team: Verraten Sie Ihren Lesern, wer die Menschen hinter dem Unternehmen sind und bauen Sie so eine Beziehung auf.

Angebot/Services/Shop: Zeigen Sie, was Sie haben! Geben Sie einen Überblick Ihrer Leistungen/Produkte oder gehen Sie hier gleich in Ihren Shop.

Referenzen: Inspirieren Sie Ihre Leser und zeigen Sie Ihre Fähigkeiten an konkreten Projekten.

Kontakt: Wer hier landet, möchte den ersten Schritt wagen. Bauen Sie hier keine Barrieren auf und kommen Sie sofort zum Punkt. Am besten bieten Sie hier ein übersichtliches Kontaktformular, evtl. spezielle Ansprechpartner und einfach Ihre Adresse.  

Impressum: Diese Seite wird häufig von neuen Kontakten besucht. Eine übersichtliche und transparente Unternehmensdarstellung schafft Vertrauen.

AGB/Datenschutz/Cookie-Banner: Hier lohnt es sich nicht, zu sparen, denn alles muss aus rechtlicher Sicht wasserdicht gestaltet sein.

Je nach Ausrichtung der Website können Sie Karriereseiten, FAQ, einen Blog usw. anbieten.


Wählen Sie das technische System für Ihre Website nach Ihren Bedürfnissen: Jedes System ist ein Kompromiss.

Hier zeigen wir Ihnen hilfreiche Kriterien für die Auswahl des richtigen CMS (Content-Management-System), um die Inhalte Ihrer neuen Website verwalten zu können.

Unabhängig davon was sie kosten, haben alle CMS ihre Vor- und Nachteile. Deshalb ist es wichtig, dass Sie sich klar machen, was Sie jetzt und in den nächsten Jahren mit Ihrer Website anstellen möchten. Entscheiden Sie sich nicht einfach für das erste System, das Ihnen jemand empfiehlt, sondern schauen Sie sich sorgfältig um. Die Bedürfnisse, die ein System erfüllen muss, können individuell sehr verschieden sein. Und so ist ein Unternehmen mit einem System glücklich und beim anderen funktioniert es überhaupt nicht.

10 Fragen, die Ihnen dabei helfen, das für Sie richtige CMS zu finden:

  1. Wie zukunftsfähig ist das CMS, also ist es auch noch in einigen Jahren am Markt?

  2. Können Sie Ihre Website mit dem System selbst erstellen oder brauchen Sie Unterstützung durch Programmierer und Designer?

  3. Wer soll das System im Betrieb technisch pflegen und weiterentwickeln?

  4. Wie sicher ist das CMS und lässt es sich datenschutzkonform einrichten?

  5. Wie lässt sich das System erweitern – z.B. Funktionen, Schnittstellen, Shop?

  6. Wie nutzerfreundlich ist das CMS für Sie oder Ihre Redakteure?

  7. Erreicht das System Google-freundliche Ladegeschwindigkeiten und lässt es sich auch ansonsten gut für Suchmaschinen optimieren (SEO)?

  8. Können Sie das CMS internationalisieren, also wie komfortabel lassen sich wie viele Sprachversionen Ihrer Website einrichten und verwalten?

  9. Welche Rechte und Rollen bietet das System, also wie viele Menschen können damit arbeiten?

  10. Und natürlich: Was darf das CMS im Aufbau und Betrieb kosten?

Tipp: Nehmen Sie sich die Zeit und gehen Sie mit diesen Fragen auf mehrere Anbieter zu. Oder suchen Sie sich einen vertrauenswürdigen Partner, der Sie bei der Auswahl unterstützt.


Alle Content-Management-Systeme (CMS) haben Vor- und Nachteile.

„Ihre Homepage schnell & einfach: Vorlage wählen und in wenigen Minuten mit der eigenen Website online gehen.“

Aber so einfach, wie es viele Werbeversprechen im Internet behaupten, ist es meiner Erfahrung nach nicht. Wenn Sie klare Ziele mit Ihrer Website verbinden – und das sollten Sie –, dann werden Sie bei jedem System auf Vor- und Nachteile stoßen. Wir möchten Ihnen hier eine Orientierungshilfe geben: Mit welchen gängigen Systemen können Sie am ehesten im Rahmen Ihres Budgets, Ihrer Zeitplanung, mit internen oder/und externen Teams Ihre Ziele erreichen?

Drei wesentliche Kategorien, die für kleine bis größere Unternehmenswebsites in Frage kommen:

1. Open Source Typo3, Drupal u.ä. – für mittlere und größere Unternehmen mit vielschichtigen Websites

Vorteile: technisch und gestalterisch sehr flexibel, skalierbar + sicher, stabil, leistungsfähig + Open Source, d.h. Communities entwickeln ständig weiter + freie Serverwahl + volle Kontrolle über die Daten …

Nachteile: man benötigt Technik-Experten, was hohe Kosten bedeutet - zeitaufwendig bei Installation und Wartung, z.T. für technische Laien wie z.B. Redakteure nicht sehr intuitiv und benutzerfreundlich …

 

2. Open Source WordPress – geringer bis mittlerer technischer Aufwand; für mittlere bis kleine Unternehmen und Einzelunternehmer mit eher einfacheren Websites

Vorteile: vergleichsweise benutzerfreundlich + bei Standardeinsatz geringer Installations- und Wartungsaufwand, dadurch kostengünstig + vielfältige Designvorlagen + erweiterbar und individualisierbar + Weiterentwicklung durch Community + freie Serverwahl + volle Kontrolle über die Daten …

Nachteile: Spezialisten sollten regelmäßig die auftretenden Sicherheitslücken schließen - bei unsachgemäßer Handhabung entstehen schnell eingeschränkte Stabilität und Performance - nicht beliebig skalierbar …

 

3. Baukasten-Systeme wie Squarespace, Wix, Webflow u.v.a. – kaum technischer Aufwand; für kleinere Unternehmen, Einzelunternehmer mit einfacheren Websites, Shops, Blogs usw.

Vorteile: überwiegend benutzerfreundlich + Website ohne Expertenwissen meist schnell erstellbar, dadurch pflegeleicht und kostengünstig + kein technischer Wartungsaufwand + viele Designvorlagen …

Nachteile: technisch und gestalterisch eingeschränkt - nur die Anbieter entwickeln das Produkt, wenige technische Möglichkeiten zur Individualisierung - Ungeübte bringen oft Chaos ins Design - teilweise nicht EU-datenschutzkonform - oft keine freie Serverwahl - keine Kontrolle über die eigenen Daten …


Web-Baukästen sind praktisch, aber mit Vorsicht zu genießen.

Die zwei Gesichter von Baukasten-Systemen:
„0h, so schön einfach! Aber warum geht das denn nicht?!“

Großes Plus bei Web-Baukästen: Jeder kann sie ohne Vorkenntnisse und externe Dienstleister bedienen und eine Website auf die Straße bringen.
Großes Minus bei Web-Baukästen: Nicht jeder ist in der Lage, die angebotenen Möglichkeiten so zu nutzen, dass eine funktionale und ansehnliche Website entsteht.

2014 haben wir unsere Unternehmenswebsite mit dem Baukasten-System Squarespace“ eingerichtet. Damals gab es keine anderen Web-Baukästen mit anspruchsvollen Designs – das war unser primäres Auswahl-Kriterium. Die Seite funktioniert für uns sehr gut – mit bewussten Einschränkungen.

Stellen Sie sich auch bei Website-Baukästen alle wichtigen Fragen, die wir Ihnen oben empfohlen haben.

Wir haben bereits Websites für kleine Unternehmen, Einzelunternehmer, Vereine etc. mit verschiedenen Baukasten-Systemen erstellt – oder öfter noch, bereits vorhandene Websites umgebaut und optimiert. Mit Web-Baukästen fahren Sie gut, wenn Sie ohne Fachkenntnisse schnelle Landingpages, kleine Websites, Blogs oder Shops einrichten möchten. Die Vor- und Nachteile von Squarespace, Wix, Shopify, Webflow & Co sind sehr verschieden. Vergleichen Sie deshalb genau, was welches System kann und wie Sie damit zurechtkommen!

Vorteile Website-Baukastensysteme:

  • Erstellen, betreiben, pflegen ohne Expertenwissen

  • Überwiegend benutzerfreundlich

  • Viele Designvorlagen

  • Anbieter sorgt für technische Bereitstellung und Entwicklung des Systems

  • Standard SEO-Pflegetool integriert

  • Meist guter Service/Hilfe

  • Geringe Betriebskosten

 

Nachteile Website-Baukastensysteme:

  • Einschränkungen bei Designdetails, Schriften, Funktionen, Mehrsprachigkeit, Rechte/Rollen …

  • Nur teilw. anspruchsvolle Designvorlagen

  • Designs können durch Unerfahrenheit schnell aus der Form geraten

  • Responsives Design bedingt editierbar

  • Teilw. muss das Mobile-Layout stark nachbearbeitet werden (z.B. bei Wix)

  • SEO wenig individualisierbar

  • Support teilw. nur in Englisch

  • In Shops oft nur wenige Bezahlsysteme verfügbar

  • Teilw. nicht EU-datenschutzkonform: Shops, Cookie-Banner

  • Meist keine Kontrolle über die eigenen Daten

  • Anbieter und Server oft im Ausland (weltweit)

  • Abhängigkeit vom Anbieter


Eine reibungslose Umsetzung Ihrer Website erfordert durchdachte Prozesse.

Eins nach dem anderen oder vieles gleichzeitig? Die richtige Mischung macht’s! Sie können die einzelnen Schritte nacheinander umsetzen oder teilweise parallel arbeiten. Egal, wie die Abläufe sind, es geht immer darum, dass bei jedem Schritt auch die Belange der anderen Gewerke berücksichtigt werden. Dass also Konzept, Technik, Design und Redaktion Hand-in-Hand arbeiten.

Websites sind Teamarbeit: Die schönsten Funktionen nützen Ihnen nichts, wenn diese zu einer technisch langsamen Seite führen.

Designer lieben manchmal Zeichenbegrenzungen bei Textelementen oder auch schmale Textspalten. Vielleicht kann aber der Redakteur die zu vermittelnden Inhalte nicht unterbringen. Deshalb sollten beide Gewerke schon in der Konzeptionsphase mit allen Beteiligten über die jeweiligen Bedürfnisse sprechen.

Möglicher Ablauf …
… bei Do-it-yourself-Systemen:

  1. „Theme“ mit der richtigen Kombination aus Funktionen und Design auswählen

  2. Grob die Seite aufbauen, alle Unterseiten anlegen, Struktur prüfen

  3. Texte und Bilder erstellen + Content einpflegen + Design verfeinern

  4. Technik, Design und Content prüfen und optimieren

… mit überwiegend externen Dienstleistern:

  1. Wireframe aufbauen

  2. Grund-Design anlegen

  3. Programmieren + Design ausfeilen

  4. Texte auf den Punkt schreiben + Bilder anfertigen

  5. Content einpflegen

  6. Technik, Design und Content prüfen und optimieren

Ein Website-Projekt gelingt, wenn allen Gewerken bewusst ist, dass sie nicht nur Teil der Lösung sind, sondern bei mangelnder Abstimmung auch zum Problem werden können. Teamwork gewinnt!


Webdesign ist die Verbindung von Ästhetik & Funktionalität.

Das Zusammenspiel wird für Ihre Zielgruppe zur – positiven oder negativen – Nutzer-Erfahrung (UX/User Experience). Gestalten Sie deshalb Ihre Website immer aus Sicht Ihrer Zielgruppen!

Üblicherweise haben Unternehmen Gestaltungselemente wie Logo, Farben und Schriftarten. Oder sie verfügen bereits über ein umfangreicheres Design. Dann sollten Sie diesem folgen – soweit es praktikabel ist. Essenziell für Ihre neue Website sind: Logo, Farben und Schriftarten. Zumindest als Basis. Denn manchmal muss ein z.B. sehr kleinteiliges Logo für die digitale Darstellung modifiziert werden, oder die Schriften eignen sich nicht 1:1 fürs Web. Und die bestehenden Unternehmensfarben sollten Sie zu einer stimmungsvollen Farbpalette für die gesamte Website erweitern.

Achten Sie auf klare Strukturen, funktionales Design und schlanke Technik!

Es gibt unglaublich viele Gestaltungsmöglichkeiten. Doch nach meiner Erfahrung legen Sie den Fokus am besten auf EINFACHHEIT. Verlieren Sie sich nicht in unnötigen Spielereien, die Ihre Leser nur ablenken oder verwirren. Fragen Sie sich immer, welchen Nutzen Ihre Website-Besucher davon haben und behalten Sie Ihre Website-Ziele im Auge.

Gestaltungskriterien für Ihre Website:

  • Schriftbild

  • Bildsprache

  • Farbschema

  • Auf gute Farbkontraste achten (auch bei Ton-in-Ton)

  • Verständliche und einfache Navigation

  • Blickführung mit visueller Hierarchie (Schrift, Farbe, Form)

  • Nutzerfreundliche Buttons, Formulare usw.

  • Einheitliche Darstellung gleicher Funktionen

  • Hochwertige und möglichst individuelle Inhalte (Text, Bild, Video …)

  • Optischer Zusammenhalt durch nur ein oder zwei Schriftfamilien

  • Angenehme Mindestschriftgröße für Lesetexte

  • Nicht zu viele verschiedene Formen und grafische Elemente

  • Ruhe fürs Auge durch Weißraum (der kann natürlich auch farbig sein)

  • Responsive Design: alle Elemente von Anfang an für verschiedene Displaygrößen denken

 

Ihre Website ist eine Einladung an Ihre Zielgruppe, sich mit Ihrer Marke zu beschäftigen. Machen Sie es Ihren Lesern so leicht wie möglich.


Wählen Sie eine Schriftart, die zu Ihren Produkten und Dienstleistungen passt.

Text transportiert nicht nur Information, sondern ist auch ein mächtiges Gestaltungsmittel. Noch vor dem Lesen des Inhalts, wirkt das Schriftbild emotional auf den Betrachter.

Die Charakteristik der Schrift, Größe, Stärke, Laufweite, Zeilenabstand, Farbe, Spaltenbreite usw. prägen das Erscheinungsbild Ihrer Seite.

Schriftart: Serifenlose Schriften sind allgemein gut zu lesen. Auch Serifenschriften sind möglich. Schreibschriften oder „sehr individuelle“ Formschriften würde ich dosiert als Schmuckschrift einsetzen.

Schrift-Hierarchien: Machen Sie über die Hierarchie die Bedeutung eines Textelements im Kontext klar – Überschrift, Vorspann, Fließtext … Wählen Sie nicht zu viele Größen. Trennen Sie die Schriftgrößen deutlich voneinander – z.B. unterscheiden sich 14 und 16 Punkt kaum, bringen aber Unruhe ins Schriftbild. Von hauchdünn bis extra fett können Sie im Grunde alles verwenden – solange es lesbar bleibt.

Mischen Sie verschiedene Schriften mit Bedacht: Am besten maximal zwei Schriftarten (aus verschiedenen Schriftfamilien) – die miteinander harmonieren. Vermeiden Sie zu ähnliche Schriften. Lassen Sie eine Schrift optisch dominieren und eine Schrift eher im Hintergrund begleiten.

Buchstabenabstand: Im Internet wird eine Schrift gerne in der Laufweite etwas gesperrt. Achten Sie darauf, dass Ihnen die Wörter nicht „zerfliegen“. Ich halte weniger Sperrung in der Regel für ratsamer, damit die Charakteristik der Schrift erhalten bleibt.

Zeilenabstand: Der Weißraum zwischen den Textzeilen sollte so groß sein, dass die Zeilen beim Lesen klar getrennt sind. Für digitale Medien rate ich zu etwas mehr Abstand für gute Leserlichkeit.

Schriftsatz: In digitalen Medien ist Linksbund nie verkehrt. Rechtsbündigen Text sollte man mit gestalterischem Geschick setzen. Zentrierter Text funktioniert wunderbar, außer bei zu langen Lesetexten. Vom Blocksatz rate ich ab, weil so gut wie immer unschöne Lücken den Lesefluss stören. Außerdem sollten Sie die Texte nicht zu breit laufen lassen, damit der Leser die Zeilen nicht aus den Augen verliert. Im der Mobile-Darstellung ist die Breite begrenzt und die Texte laufen automatisch schmaler.

Kontrast: Achten Sie auf deutliche, aber nicht zu harte Kontraste. Oft liest sich eine dunkelgraue Schrift auf weißem Hintergrund angenehmer als eine tiefschwarze. Und bei manchen Farbkombinationen verschmilzt die Schrift mit dem Hintergrund oder beginnt zu flimmern.


Erzeugen Sie mit dem Farbklima eine passende Grundstimmung für Ihre Website.

Farben wirken auf den Leser emotional. Dabei können Sie es sicher nicht jedem recht machen, weil Menschen mit Farben unterschiedliche Erlebnisse und Gefühle verbinden. Das macht aber nichts. Wählen Sie die Farben, die zu Ihrem Unternehmen passen. Farben, die in Ihrem Kulturkreis das ausdrücken, was Sie Ihren Lesern vermitteln möchten.

Sanft Ton-in-Ton oder lieber starke Kontraste mit schrillen Farben? Manche Farben wirken beruhigend und andere belebend. Stimmt Ihr eigenes Gefühl mit der Wahrnehmung Ihrer Zielgruppe überein? Beziehen Sie die Erkenntnisse aus der Farbspychologie, der Farbenlehre oder dem Feng-Shui in Ihre Entscheidungen mit ein.

Vergessen sie bei aller Farbtheorie aber nicht die technische Seite! Ein deutlicher Farbkontrast ist wichtig für lesefreundliche Texte. Verwenden Sie nicht zu ähnliche Farben bzw. Tonwerte für Schriften und ihre Hintergründe.

Vermeiden Sie bei Text auf Farbfläche sogenannte Komplementär-Kontraste wie reines Rot-Grün, Blau-Orange und Gelb-Violett. Durch Ihre Gegensätzlichkeit steigern sich diese Farben direkt nebeneinander platziert. Das kann beim Lesen unangenehm flimmern.

Denken Sie auch an Menschen mit z.B. Rot-Grün-Sehschwäche.

 

Erzeugen sie Stimmung mit Farbpaletten und nehmen Sie zur Unternehmensfarbe andere Farben hinzu.
Kombinieren Sie:

  • 1 Primärfarbe (z.B. Unternehmens-, Logofarbe)

  • 1 Sekundärfarbe – eher auffällig, für Hervorhebungen, Buttons usw.

  • evtl. Farbabstufungen der Primär- oder Sekundärfarbe

  • hellere, neutralere Farbe(n) für Hintergrundflächen

  • evtl. Kontrastfarbe(n)

  • Wenn die Primärfarbe kräftig ist (z.B. Rot, Dunkelblau), eignet sie sich hervorragend für auffällige Textkästen mit negativer (z.B. weißer) Schrift. 

Tool-Tipps: Für die Ermittlung von Farbkontrasten und die Zusammenstellung von Farbpaletten empfehlen wir github. Lassen Sie sich von fertigen Farbpaletten inspirieren oder lassen Sie sich passend zu Ihrer Primärfarbe Paletten generieren, z.B. bei coolors oder mycolor.

Übrigens können auch Bilder bedeutend zum Farbklima beitragen.


Senden Sie Ihre Botschaften blitzschnell über eine aussagestarke Bildsprache.

Wir sind gewohnt, aus Bildern Informationen zu lesen: Verkehrszeichen, Wegweiser, Piktogramme in der digitalen Welt wie Login, Drucken, Speichern, Play …

Nutzen Sie die Stärke der Bilder, denn sie kommunizieren Inhalte und Stimmungen deutlich schneller als Text und bleiben meist länger im Gedächtnis.

Bildsprache ist ein Teil der visuellen Kommunikation, die auf Ihrer Website durch das Gesamtbild der Gestaltung mit Elementen, Farben, Texten, Grafiken, Fotos, (Bewegt)Bildern usw. entsteht. Die Bildsprache lässt mehrere Bilder zu einer Einheit werden und prägt damit den Charakter Ihrer Website.

Kern der Bildsprache sind meistens Fotos. Fotografisch lässt sich fast alles ausdrücken – Freude, Ernsthaftigkeit, Erfolg, Kompetenz, Zuverlässigkeit, Leichtigkeit, Kreativität, Spannung …

Grundsätzlich rate ich Ihnen, auf Stockfotografie weitestgehend zu verzichten (bis auf z.B. Artikelfotos in News-Portalen usw., weil hier die Eigenproduktion oft viel zu teuer wäre) und ihre eigenen Fotos auf Ihrer Website zu zeigen. Zeigen Sie echte Menschen. Das Unternehmen, die Mitarbeiter, die Produkte/Services wirken damit authentisch und real. So können Sie schon via Internet Vertrauen aufbauen.

Dabei ist es nicht wichtig, dass die Bilder einen extrem eigenwilligen Stil haben. Manchmal reicht es, einfach alles darzustellen, wie es ist – ohne Schnörkel, aber mit Sympathiefaktor. Die Bilder müssen nicht alle gleich sein, sollten aber zusammenpassen, also eine Sprache sprechen (Stil, Farbstimmung, Kontrast …).

Lassen Sie professionelle Fotos für Ihre Website machen. Im Blog o.ä. sind natürlich auch Handyfotos erlaubt. ;-)

Mit individuellen Fotos können Sie eine starke Bildsprache für Ihre Website prägen, die Sie z.B. auch nach Social Media übertragen können.

Fotografien vermitteln authentische Charaktere blitzschnell. Besonders bei Portrait-Bildern darf auch mal humorvoll übertrieben werden. Mimik und Gestik können sehr kreativ für die unterschiedlichsten Botschaften eingesetzt werden – passend zum Charakter. Wie wollen Sie dem Betrachter in Erinnerung bleiben? Menschen verändern sich, deshalb rate ich Ihnen: Stellen Sie alle paar Jahre aktuelle Portraits auf Ihre Website.

Vereinen Sie Text und Bild zu einer starken Botschaft. Am besten ergänzen sich Text und Bild und bringen verschiedene Perspektiven ins Spiel. Oder überraschen Sie den Leser mit vermeintlich gegenteiligen Inhalten oder Kontrasten zwischen Text und Bild. Der Betrachter nimmt als erstes Farbe und Form eines Bildes emotional wahr. Im zweiten Schritt punkten die konkreten Bildinhalte. Beides weckt – hoffentlich – das Interesse.


Behalten sie beim Texten SEO und Ihre Zielgruppen im Blick

Ohne Suchmaschinenoptimierung, abgekürzt SEO (search engine optimization) geht heute nichts mehr. Schließlich wollen Sie von Kunden und Interessenten über Google & Co gefunden werden. Sehr viel können Sie über die richtigen Texte und die richtigen Formatierungen auf der Website beeinflussen.

Schreiben Sie Ihre Texte in erster Linie für Ihre Zielgruppen. Für die Bewertung durch die Suchmaschinen sollte eine gewisse Textmenge auf einer Website vorhanden sein. Für die Textlänge gilt: So wenig wie möglich, so viel wie nötig. Wenn Texte nur nach SEO-Kriterien ausgerichtet sind, sind sie meistens nicht lesefreundlich. Da springen Ihnen die Seitenbesucher frühzeitig ab und die Enttäuschung bleibt in Erinnerung.

Inhaltlich sollten Sie möglichst viele Fragen beantworten, die bei Ihren Zielgruppen während Ihres Entscheidungs- oder Kaufprozesses auftreten könnten. Denn genau die werden in die Suchmaschinen eingegeben. 

Optimieren Sie die Texte für SEO, indem Sie relevante Suchbegriffe, also Keywords, einarbeiten. Ideal ist ein individuelles Fokus-Keyword, das Sie mit Synonymen und thematisch verwandten Begriffen als weitere Keywords ergänzen. Das steigert das Suchvolumen und hilft außerdem bei einem abwechslungsreichen Textaufbau. Verteilen Sie die Keywords locker – aber immer sinnvoll – über den gesamten Text. Übertreiben Sie es aber nicht, denn Google & Co erkennen das im Kontext und bewerten das unter Umständen negativ. Es gibt Tools, zur Keywordrecherche und zur Berechnung der Keyworddichte. Wichtig sind die Keywords in der Überschrift H1 plus H2 und im Vorspann oder/und am Anfang des Textes noch einmal.

Bestücken Sie auch die Metadaten mit Keywords: Meta-Description, Title-Tag, Bildunterschriften und -beschreibungen (Alt-Tags). Die Suchmaschinen lesen auch „unsichtbare“ Texte aus. Der Title-Tag (oft die H1) wird in den Suchergebnissen als Überschrift angezeigt und ist einer der wichtigsten Google-Rankingfaktoren.

Die Meta-Description wird bei den Suchmaschinen-Ergebnissen direkt unter dem Titel angezeigt und sollte in kurzen Sätzen auf das Thema der Seite hinweisen. Hier können Sie auch einen Call-to-Action platzieren. Gibt es keine Meta-Description, wählt Google einen scheinbar passenden Textabschnitt vom Anfang der Seite.

Mit dem kostenlosen Tool „Serp-Snippet-Generator“ von Sistrix können Sie in einer Vorschau die Anzeige der Suchmaschinen prüfen.

Die Überschriftenstruktur H1 und H2, möglichst auch H3, sollten Sie auf jeder Seite in der richtigen Reihenfolge einsetzen. Wenn Ihnen die H1 optisch zu groß ist, verwenden Sie stattdessen bitte nicht die Formatierung H2. Die Suchmaschinen lesen die H1 für die Anzeige der Suchergebnisse ein und dafür muss die H1 ganz oben stehen.

Sinnvoll ist auch eine durchdachte Link-Strategie: Setzen Sie interne Links, die innerhalb Ihrer Website zu anderen Themen/Bereichen verlinken. Interne Links helfen dem Suchmaschinen-Crawler, die Website zu verstehen. Wenn es inhaltlich passt, verlinken Sie auf andere Domains. Stellen Sie für externe Links die Funktion „in neuem Tab/Fenster öffnen“ ein, damit Ihre eigene Website nicht von der anderen Domain ersetzt wird, sondern beide Seiten im Browser als eigenes Fenster geöffnet werden.


Wenn Ihnen unser Ansatz gefällt und Sie bei einem Projekt Unterstützung möchten, sind wir gerne für Sie da.

 

Verwandte Themen