Starke Webseiten gestalten – 9 Tipps für Dich
Du kennst sie, diese Webseiten, die Dich einfach abholen, wo Du sagst: „Wow, supercoole Webseite!“ Aber Du kennst unter Garantie auch das Gegenstück: Seiten mit Ladezeiten, in denen sogar der Kaffee in der Thermoskanne kalt wird. Und dazwischen liegt eine weite Spanne. Schließlich gibt es jede Menge Stolpersteine, die für eine starke Webseite zur Seite geräumt werden müssen.
Was macht eine gute Webseite überhaupt aus?
Schrauben kann an mehreren Stellen: Inhaltlich, an Design und Technik. Wobei ich hier einmal die technische Seite etwas außen vor lasse. Um die Website als wichtiges Marketinginstrument erfolgreich zu nutzen und Kunden zu gewinnen, ist es – Spoiler – nicht damit getan, nur einmal den Schraubenschlüssel auszupacken. So let’s dive in in meine hilfreichen Webdesign-Tipps!
Auf die Zielgruppe ausrichten
Eine Webseite im Format eines Gemischtwarenladens oder Grabbeltischs? Das kann nur schiefgehen. Besucher kommen mit einem Problem oder einer Frage bzw. einer Erwartungshaltung auf Deine Site. Ziel ist, sie exakt dabei abzuholen – in ihrer Tonalität. Und anschließend aufzuzeigen, wie die Transformation zum Ziel gelingen kann.
Das Ziel der Webseite wird unweigerlich verfehlt, wenn gar nicht klar ist, was auf der Site passieren soll und wie der Weg des Kunden darauf verläuft. Darauf baut alles auf. Gibt es kein klares Konzept, steht das Fundament zu einer erfolgreichen Website bereits auf tönernen Füßen.
Truthbomb: Klipp und klar
Wenn Du noch nicht weißt, für wen Du die Webseite mit welchem Ziel für den Benutzer und auch für Dich (!) machst, dann bitte setze Dich erst an diese Hausaufgaben.
Einfachheit und Klarheit – biete Orientierung
Ob ein Besucher über die Startseite kommt oder durch einen Link zuerst auf einer Unterseite oder Landingpage landet: Du hast rund 3 Sekunden für einen Ersteindruck, vielleicht noch weitere 30 Sekunden als „zweite Chance“. Also nutze die kurzen Zeitspannen weise und verwirre nicht.
Optische Klarheit
Weniger ist hier oft mehr: Schaffe optische, konsistente Klarheit und verwende daher grundsätzlich
- nicht zu viele Farben
- eine gut lesbare Schrift
- nicht zu viele unterschiedliche Schriftgrößen
- Grafiken und Statistiken als unterstützende Elemente
Hier ein deep dive dazu: Website-Inhalte und Websitetexte optimieren und als weitere Empfehlung Website-Texte leichter lesbar machen – 9 Top-Tipps.
Extratipp: Styleguide und Stylevorlagen
Um auf der gesamten Site konsistent zu bleiben, hat es sich bewährt, einen Styleguide festzulegen. Gerade das Zusammenspiel von Farben ist wichtig, wenn es um Kontraste geht. Die Vorgaben daraus setzt Du idealerweise in Vorlagen für Webseiten-Elemente um, deklarierst Farben und Schriften global.
Das spart Dir Zeit, weil Du Dir nicht jedes Mal aufs Neue und spontan überlegst, wie z. B. ein Button aussehen soll. Vielleicht braucht es manchmal etwas Disziplin, das anzulegen und konsequent anzuwenden – aber es lohnt sich.
Orientierung
Was erwartest Du selbst auf Startseiten? „Das ist doch klar“, meinst Du, „mein Angebot.“ Ja, und weiter? Was ist mit dem Nutzen für den Kunden? Dein Alleinstellungsmerkmal? Wie kann man Kontakt mit Dir aufnehmen?
By the way: Denke daran, dass Besucher nicht immer über die Startseite kommen: Sorge dafür, dass sie den richtigen Kontext erhalten.
Gerade dem Bereich, den man als erstes sieht ohne zu scrollen, kommt dabei eine große Bedeutung zu. Man nennt ihn „above the fold“, also „über dem Falz“ und kommt aus dem Printbereich: Du kennst es von Tageszeitungen, da ist es der Teil mit der Schlagzeile und über dem Falz der Seite. Hier wird entschieden, ob es sich lohnt, weiter zu lesen. Logisch also, diesem Teil auch die entsprechende Aufmerksamkeit zu schenken. Patzen wir hier als Webdesigner springen die Besucher ab und damit ist die Seite nicht gut.
Viel zu viele Websitebesitzer ergießen sich immer noch in nichtssagenden Willkommensblablas. Oder überfallen die Besucher wie auf einem Bazar mit durchlaufenden Bildergalerien (kill them …), die oft genug scheußlich lange Ladezeiten haben. Getoppt werden kann das fast nur noch von automatisch laufender Musik – kommt gut an in Großraumbüros …
Teile Deine Story in eine visuelle Hierarchie ein
Dein Kunde soll auf Deinen Seiten Ziele erreichen: Dazu musst Du ihn aber an die Hand nehmen. Unterteile die klassische Kundenreise, die unternommen werden soll, in eine Story mit logischer inhaltlicher Abfolge. Das ist Schritt Nummer 1, der schon im Website-Konzept angelegt sein sollte.
Der Folgeschritt ist, dass die einzelnen Schritte auch optisch voneinander abgegrenzt werden. Das geht sehr einfach mit andersfarbigen Hintergründen. Bevor Du aber in den dicken Farbtopf langst: Pass darauf auf, dass die Lesbarkeit erhalten bleibt. Die Farbe des Hintergrundes sollte nicht den Text erschlagen.
Eine andere Variante ist, ein passendes Bild als Unterteiler einzusetzen. Das lässt das gestresste Lesehirn etwas entspannen und Luft holen, bevor es weiter geht mit Lesen.
Glaubwürdigkeit, Transparenz, rechtliche Klarheit
Es gibt Basics, die müssen einfach sein: Das Impressum und die Datenschutzhinweise gehören dazu. Mach sie ordentlich und richtig: Falsche oder fehlende Angaben können nicht nur teuer werden, sondern empfindlich das Vertrauen zerstören. Die meisten Website-Besucher kennen Dich nicht und müssen erst einmal Vertrauen fassen können. Kommst Du an dieser Stelle schräg um die Ecke, dann hast Du schnell verspielt.
Insbesondere bei den Datenschutzhinweisen – auch wenn es öde sein mag – ist es angeraten, immer wieder einmal auf Aktualiät zu prüfen. Transparenz und Offenheit darüber, wie mit persönlichen Daten umgegangen wird, zeigt, wie sehr Dir die Belange Deiner Kunden am Herzen liegen.
Realistische Leistungs- und Produkt-Beschreibungen
Und noch ein paar Punkte kommen dazu: Ehrliche und realistische Beschreibungen sind deutlich produktiver als markschreierische, übertriebene Aussagen zu Produkten bzw. Dienstleistungen. In diese Kategorie gehört auch Kleingedrucktes: Vermeide es dringend!
Ansprache und Rechtschreibung
Ob „Du“ oder „Sie“: Für die Ansprache gibt es kein allgemeingültiges Rezept. Entscheide so, wie Du meinst, dass es richtig wäre für Deine Lieblingskunden. Dann aber einheitlich – auch wenn ich an dieser Stelle den Kopf etwas einziehe und kein leuchtendes Beispiel bin: Ich habe noch nicht überall auf „Du“ umgestellt.
Ich persönlich schreibe auch ganz gerne mal etwas lockerer, allerdings solltest Du die Formulierungen an Deine Klientel anpassen: Bei Arztpraxen formuliert man besser seriöser und nicht so locker-flockig wie bei einer Vereinswebseite.
Eines aber finde ich schon wichtig: Ordentliche Rechtschreibung. Sicher, vertippt hat man sich schnell und die Geschichte mit dem Wald und den vielen Bäumen kennen wir alle. Aber ein Auge oder gerne noch ein paar Augen mehr, die Lektorat lesen, schaden absolut nicht.
Inhalte die Mehrwert bieten – auch für Suchmaschinen
Überschriften
Und das beginnt mit sinnvollen Überschriften, die klar beschreiben, was im kommenden Textabschnitt auf den Leser zukommt. Das Topbeispiel, wie man es nicht machen sollte, ist ein „Herzlich willkommen“ als h1-Überschrift. Höflich ja, aber null-nada-niente informativ. Gerade Überschriften haben viel Potential, um darin gezielt Suchwörter zu versenken – aber gut geschriebene Knallerüberschriften holen die Leser einfach in den Text.
Inhalte: Den Lesefluss steuern
Dass Besucher nicht immer über die Startseite hereinschneien, erwähnte ich ja schon: Die ersten zwei Sätze auf einer Seite sind entscheidend für die Orientierung der Leser. Das solltest Du bei jeder Unterseite im Hinterkopf haben.
Kurze, prägnante, aktiv geschriebene Sätze lesen sich am Monitor leichter – na, auch sonst. Verschwurbelte, über mehrere Zeilen gehende Ergüsse sind schon fast ein Garant dafür, dass der Lesen in den Scan-Modus übergeht.
Einfangen kann man das geneigte Leserauge aber mit Ankerwörtern, die idealerweise auch Keywords sind: Das sind im Kontext wichtige Wörter, die Du einfach fett schreibst. Wird der Text nur flott gescannt, wirken diese Wörter als Lesebremse. Aber Vorsicht: Hier macht auch die Dosis das Gift – zu viel fetter Text macht Einheitsbrei.
Inhalte mit nutzerorientierten Informationen
Wahrscheinlich ist das mein allerwichtigster Tipp: Versetze Dich in Deine Leser und mach Dir klar, mit was für einem Anliegen sie auf Deine Website kommen. Du wirst sie nicht abholen, wenn Du über Deine Mega-Methoden und Dein Wahnsinns-Renommé schreibst. Was ist das Ziel Deiner Leser? Mit was werden sie glücklicher oder ein besserer Mensch oder gar beides? Es ist die Transformation, die interessiert.
Ein Beispiel:
Besser:
In 3 Monaten hast Du mit mir gelernt, wie Du eine gute Webseite aufbaust.
Im Gegensatz zu:
Ich habe 20 Lernvideos, die zeigen, wie man gute Webseiten baut.
Mach den Website-SEO-Check
Du willst wissen, was für ein Potenzial in deiner Website steckt? Lasse deine Site doch kostenfrei checken!
Klares Design und Aufbau einer guten Website
Zentrale Zielvorgabe auf einer guten Webseite ist ein nutzerfreundliches Design, dass den Leser leitet. Im Verlaufe meiner Webdesigner-Karriere habe ich viele Gadgets kommen und gehen sehen – von Blinke-Gifs, Flash-Animationen, Vorschaltseiten mit Intros, seitenfüllende Videos, Parallaxen, etc. Klar, logisch bin ich von solchen Features auch erst einmal begeistert – yippieh, was Neues! Aber wenn ich so etwas als Webdesigner einsetze, muss ich mich jedes Mal aufs Neue fragen: Wozu ist das jetzt gut? Welche Aussage unterstützt das, was illustriert es? Oder lenkt es gar ab? Wohin führt es den Nutzer?
Inhalte aufteilen und Raum geben
Es gibt Design-Prinzipien und die kommen nicht von ungefähr. Design-Prinzip Nummer 1 ist, dass zusammengehörige Inhalte oder Elemente gruppiert werden. Das erkennt man beispielsweise gleich: Ein Kasten, der Vorteile auflistet.
Und jetzt ist es die Kunst des Designers, diese Gruppen visuell zu verbinden, ihnen aber dennoch genügend (Weiß-)Raum zu geben. Farbige Hintergründe helfen, Bereiche abzugrenzen. Gut ist es auch, Kontraste zu schaffen. Aber bitte mit Feingefühl: Machst Du das gut, dann hebst Du die Wahrnehmung der einzelnen Inhalte – ansonsten erschlägst Du sie.
Sondertipp: Einspaltigkeit vs Mehrspaltigkeit
Mehrspaltige Bereiche haben den Nachteil, unruhiger zu sein und den Lesefokus zu nehmen: Schließlich werden auf gleicher Lesehöhe mehrere Angebote gemacht.
Setze Mehrspaltigkeit daher gezielt ein und bevorzuge Einspaltigkeit. Das fällt umso leichter, wenn man von einem mobile-first-Ansatz ausgeht.
Bilder und Illustrationen
Irgendwo habe ich mal gelesen „If Content ist King, then Design is the Queen“. Und das trifft es ziemlich gut: Farben, Bilder und Illustrationen schaffen eine Umgebung für Texte. Sie versetzen uns in die Welt des Themas der Webseite wie ein Bühnenbild – das Wort „Internetauftritt“ geht genau in diese Richtung.
Gehe mit dem Blick eines Bühnenbildners an die Auswahl von Bildmaterial oder Grafiken heran. Überlege, ob die Aussage des Bildes mit dem Kontext einher geht bzw. unterstützt. Ein Bild nur um des Bildes willen, ist Platz- und Ladezeit-Verschwendung. A propos Ladezeit: Auch wenn es Plugins gibt, die Bilder optimieren, ist eine Größen- und Web-Optimierung vor Upload effektiv. Auch das Bildformat spielt eine große Rolle, aber das führt hier zu weit.
Vermeide diese Bildsünden
Stockbilder können nur eine Notlösung sein. Authentizität kommt damit selten rüber.
Bildmaterial mit ganz unterschiedlichen Farbwelten lassen Seiten unprofessionell wirken – hier können transparente Farb-Overlays bis zu einem gewissen Grad Abhilfe schaffen.
Call-to-Action (CTA = Handlungsaufforderungen)
Eine besondere Bedeutung kommen auf einer guten Website die Call-to-Action-Buttons zu. Sie übernehmen die Aufgabe, dem Nutzer Handlungsmöglichkeiten zu geben. Das heißt, dass der Button-Titel klar aussagt, wohin die Reise gehen soll. Je kürzer und knackiger, desto besser: Untersuchungen haben gezeigt, dass kürzere Button-Texte wirksamer sind.
Du kennst es vom Straßenverkehr: Je mehr Schilder, desto weniger weißt Du, was Du zu tun oder zu lassen hast. Auf der Webseite ist es mit den CTAs genau so: Zu viele davon auf einem Fleck führen in die Irre – und am Ende wird keiner geklickt. Optimal ist daher, wenn die CTAs nicht in Konkurrenz stehen: Ein Abschnitt, ein Call-to-Action.
Ein Indikator eines schlechten Seitenkonzepts ist eine überladene Navigation. Mehr als 7 Menüpunkte können von Menschen kaum auf einmal erfasst werden, daher sind 5 Menüpunkte für die allermeisten Websites eine gute Anzahl. Bei Portal-Webseiten ist die Planung der Navigation nochmals eine ganz andere Nummer.
Die Menüpunkte zu Impressum und Datenschutz bzw. AGB können gut in den Fußbereich einer Seite wandern Hinweis am Rande: Das Cookie-Banner darf sie nicht überdecken.
Klare Menütexte
Benenne Menüpunkte nicht vermeintlich kreativ – schreibe klar drauf, was drin steckt
Verlinkungen: Intern und extern
Klicke hier, hier oder hier – hast Du Links mit solchen Texten auf deiner Website? Autsch – dann verschenkst Du aber richtig Potential!
Ein einfaches „hier” ist nicht besonders klickanregend. Es ist weder informativ noch eine Charmeoffensive. Wenn Du deinen Besuchern die Links mit einem beschreibenderen Linktext präsentierst, dann erleichterst Du einmal mehr die Orientierung und steigerst die Nutzerfreundlichkeit.
Setzt du als Linktext relevante Keywords ein, dann sind die Suchmaschinen auch noch gleich mit happy. Aber Vorsicht: Verlinkst du auf zwei unterschiedliche Seiten mit gleichen oder sehr ähnlichen Keywords, dann lauert die Gefahr des Keyword-Kannibalismus, weil die Seiten zueinander in Konkurrenz stehen.
Lasse Links mit Zielen innerhalb deiner Webseite im gleichen Tab öffnen, Links mit externen Zielen auf einen neuen Tab. So hast Du die Chance, dass der Besucher wieder auf deine Seite zurückkommt.
Interne Links
Diese Querverweise helfen, den Besucher zu weiterführenden bzw. vertiefenden Inhalten zu führen. Damit kommt den internen Links die Rolle zu, Besucher möglichst lange auf der Site zu halten.
Eine Variante sind komfortable Ankerlinks, die innerhalb einer Seite zu Inhalten scrollen.
Externe Links
Neben der inhaltlichen Nützlichkeit für die Leser helfen Links nach außen den Suchmaschinen, Deine Seite einzuordnen. Je mehr auf Deine Seite verwiesen wird (Backlinks), aber auch wie stark Du am WorldWideWeb webst, ist für Suchmaschinen relevant: Ein bisschen so wie im echten Leben – wer viele und gute, starke Kontakte hat, hat eine bessere Reputation.
Breadcrumbs
Auf manchen, etwas umfangreicheren Webseiten macht es Sinn, wie im Märchen Hänsel und Gretel Brotkrumen zu hinterlassen. Das sind kleine Linkschnipsel, wo die Besucher schnell erkennen können, auf welcher Seite und welcher Ebene sie sich gerade befinden und ggf. schnell zurückfinden können.
Usability und Konventionen beachten
Die Leute haben sich an manche Dinge im Web gewöhnt bzw. haben sich etabliert. Willst Du, dass Deine Seite (fast) intuitiv benutzt werden kann, dann halte Dich an folgende Konventionen:
- Ein Logo (meist oben links) führt als Link zur Startseite
- Verwende das Cart-Icon und das (Hamburger-)Menü-Icon nicht für anderes als für „Einkaufswagen“ bzw. „Menü“
- Sind Icons nicht eindeutig, versehe sie mit einem zusätzlichen Text – das macht insbesondere gute Buttons aus
- Lass bei Formularen Datensparsamkeit walten: Niemand füllt die Dinger gerne aus. Und gib klare Rückmeldung bei Pflichtfeldern.
Kontakt, Über uns, Support, FAQ: Vertrauen schaffen
Bei einer wirklich guten Website wird systematisch Vertrauen aufgebaut, indem Möglichkeiten zum Beziehungsaufbau zwischen Besucher und Websitebetreiber angeboten werden.
Vordergründig ist das die komplette Palette an Möglichkeiten zur Kontaktaufnahme, wie Formular, Mailkontakt, etc.. Gerade eine Online-Terminvereinbarung wird für Arztpraxen oder auch beratende Branchen immer wichtiger und sind ein Zeitsparfaktor.
Aber Über-uns-, Firmenprofil-, Mitarbeitervorstellungs-, Firmenhistorie-Seiten sind die Seiten mit denen man Vertrauen aufbaut. Dabei interessieren Lebensläufe eher weniger, sondern es geht darum, wie schlüssig sich jemand oder ein Business entwickelt und welche Visionen, welcher Antrieb dahinter stecken – ohne bitte allzu philosophisch zu werden.
Wir wollen doch alle gerne gut behütet werden: Schnelle Möglichkeit für Supportanfragen oder auch FAQ-Seiten zeigen, dass das Unternehmen kundenorientiert ist. Es bedeutet Entgegenkommen und Mitdenken.
Fazit
Die beste Seite nützt nichts, wenn sie nicht inhaltlich und technisch aktuell gehalten wird. Eine gute Website ist, wie Unternehmen auch, permanent im Wandel. Und das muss eine Unternehmens-Webseite widerspiegeln.
Wenn Deine Website noch immer so aussieht, wie vor 10 Jahren, dann hast Du nicht verstanden, was Deine Website für Deine Nutzer und damit für Dein Unternehmen leisten kann.
Hat Dein Webdesigner Dir mit hoffentlich viel Sorgfalt und Sachverstand eine gute und schöne Webseite aufgesetzt, wird sie nur erfolgreich sein, wenn sie
- kontinuierlich mit neuen Inhalten befüttert wird, sei es auf den Seiten oder über Blogartikel. Auch Gastbeiträge sind eine gute Gelegenheit.
- laufende Onpage-Optimierung: Texte und Bilder haben durchaus ein gewisses Verfallsdatum
- analysiert wird und die Seiten und Themen ausgebaut werden, die nutzerrelevant oder höher frequentiert sind
- technisch mit der Zeit mitgeht und wachsenden und wechselnden Anforderungen gewachsen ist. Das betrifft z. B. Ladezeiten, responsive Ausgabe, Sicherheit, etc.
Besonders gut ist es, wenn die Webseite dann strategisch mit anderen Kanälen verknüpft wird und Synergien damit genutzt werden.
Hier noch ein Lesetipp:
Website Marketing: Aktiv Kunden gewinnen
Eine gute Webseite macht man mal nicht nebenbei, auch wenn das manche Anbieter von Baukastensystemen gerne suggerieren. Es ist leicht vorstellbar, dass
- ein schlüssiges, auf die Zielgruppe abgestimmtes Webseiten-Konzept
- ein sorgfältiges, dem Branding entsprechendes Design-Konzept
- gut geschriebene Inhalte und passendes Bildmaterial
- eine technisch saubere Umsetzung mit allem was dazu gehört
niemals in einem Stündchen umgesetzt wird. Und damit ist klar, was wiederum ein guter Webdesigner für die Kunden leistet: Alle diese Dinge hat er im Blick und führt sie zusammen. Und dann wird auch die Webseite gut! Heureka!
Gefällt Dir der Beitrag? Dann freue ich mich über eine Empfehlung:
Hallo, ich bin Elke
und ich arbeite seit über 20 Jahren als Webdesignerin, Webentwicklerin und SEO-Strategin.
Spezialisiert habe ich mich auf kleine und mittlere Unternehmen in vielerlei Branchen: Arztpraxen, Beratungen, Reisen, Sport und viele mehr. Dabei liegt es mir sehr am Herzen nicht einfach nur schöne Websites zu entwickeln oder zu relaunchen.
Mein Fokus als zertifizierte SEO-Managerin liegt insbesondere darauf zu zeigen, wie mit den Sites gezielt und strategisch für die Unternehmensziele gearbeitet werden kann.
Du willst noch mehr wissen? Dann schaue gerne auf meine Über mich-Seite.
Das könnte Dich auch noch interessieren
Website Marketing
Deine Website als aktive Marketing-Plattform: Steigere mit Website Marketing organischen Traffic und mache Besucher zu begeisterten Kunden.
9 entscheidende Faktoren für erfolgreiches Webdesign
9 entscheidende Faktoren, die dein Webdesign optimieren und Kunden anziehen – gestalte jetzt deine Webseite erfolgreich!
Website-Pflege und Betreuung: Warum regelmäßige Pflege ein Muss für den Website-Erfolg ist
Website-Pflege: Wie regelmäßige Betreuung den Erfolg deiner Webseite beeinflusst und wie du deine Online-Präsenz optimierst und lebendig hältst. Mit Checkliste Content-Pflege.
0 Kommentare