Beitragsbild_Blog-Webdesign-tipps

5 Tipps für gutes Webdesign: So wissen Sie, wie Sie anfangen sollen

Sie wollen eine Website designen und wissen nicht, wo Sie anfangen sollen? Kein Problem, mit diesen 5 Tipps wird Ihre Website zum Hingucker und Kundenmagnet!

Das Wichtigste zuerst: Bei Ihrer Website steht nicht das Design im Vordergrund, sondern der Inhalt! Das Design unterstützt den Benutzer, den Inhalt Ihrer Website zu erfassen, zu verstehen und darauf zu reagieren. Machen Sie es ihm so einfach wie möglich.

1. Content First: Der Inhalt muss zuerst fertig sein

Das Grundgerüst für Ihr Webdesign bildet der Inhalt. Erstellen Sie Ihre Texte nach dem Gerüst, das sich aufgrund Ihrem Konzept, Ihrer Marktanalyse und der daraus resultierenden Informationsarchitektur ergibt.

Erst wenn Sie Ihren gesamten Inhalt erstellt haben, ist es sinnvoll, mit dem eigentlichen Design zu beginnen. Denn erst dann wissen Sie, welche Inhaltselemente Sie auf welcher Seite benötigen. Suchen Sie bereits vorab inhaltsrelevante Bilder und Videos aus und legen Sie fest, wo „Call-to-Actions“ (Buttons mit Handlungsaufruf) platziert werden.

Warum Sie zuerst das Konzept, dann den Inhalt und zum Schluss das Design erstellen sollen

Wer zum ersten Mal eine Website erstellt, neigt dazu, zuallererst nach einem passenden Design zu suchen. Machen Sie diesen Fehler nicht!

Viel einfacher – und sinnvoller – ist es, das Design zum Schluss zu erstellen. Dann wissen Sie bereits, welche Elemente und Funktionen Sie benötigen werden, um Ihren gesamten Inhalt bestmöglich auf Ihrer Website unterzubringen.

Seien Sie also konsequent.

  • Beginnen Sie mit dem Konzept.

    webdesign-tipps_content-first_informationsarchitektur-300x212

    Die Informationsarchitektur ist die Grundlage für alle Texte und definiert die Struktur Ihrer Website.

  • Anschließend führen Sie eine Marktanalyse inklusive Keywordrecherche durch.
  • Anhand der gewonnen Daten können Sie jetzt die Informationsarchitektur erstellen.
  • Schreiben Sie alle Texte. Für jede einzelne Seite, die sich aus Ihrer Informationsarchitektur ergibt.
  • Suchen Sie alle weiteren Inhaltselemente wie Bilder, Videos und Audiodateien aus.
  • Markieren Sie alle Stellen im Text, an denen Buttons platziert werden sollen.
  • Markieren Sie auch Textstellen, an denen Sie Links innerhalb Ihrer Website setzen werden.

Dann, endlich, ist der richtige Zeitpunkt gekommen. Jetzt ist es an der Zeit, sich dem optischen Auftritt – also dem Webdesign zu widmen.

Nur so können Sie Inhalt und Design in Einklang bringen.

Es ist logisch, dass zum Beispiel ein verspieltes Design mit leuchtenden Farben und einer „Schnörkelschrift“ völlig unpassend für ein Bestattungsunternehmen ist. Genauso ist ein dunkel gehaltenes Design mit goldenen Buttons und Bildern in Graustufen nicht für die Website einer Kinderspielgruppe geeignet.

Aber die perfekte Abstimmung von Inhalt und Design geht noch viel weiter:

Beispielsweise müssen Buttons perfekt angeordnet werden. Es stellt sich die Frage: Wann ist ein Bild besser für den Transport der Botschaft, wann ein Text oder ein Video? Wie werden die Inhaltstypen perfekt im Webdesign angeordnet, sodass die Information am besten verstanden wird?

Solche und weitere Fragen können Sie nur klären, wenn Sie die Regel „Content first“ beachten.

2. Finden Sie Ihre Farbwelt

Wofür benötigen Sie Farben?

Noch bevor das erste Wort gelesen wird, vermittelt das gewählte Farbschema den ersten Eindruck Ihrer Website. Auch hier gilt: es dient dazu, den Inhalt widerzuspiegeln.

Vielleicht gibt es in Ihrem Unternehmen bereits eine Farbe, die dominiert? Häufig ist dies die Logofarbe.

Für eine Website ist es von Vorteil, zwei bis drei Hauptfarben zu definieren. Dazu kommen nochmals ein bis drei Zusatzfarben.

Die Hauptfarben sind kräftig und dienen dazu, wichtige Inhaltselemente hervorzuheben. In erster Linie sind das:

  • Buttons
  • Elemente im Menü
  • Icons
  • Links im Text

Die Zusatzfarben sind eher gedeckte Farben, welche als Hintergrundfarben eingesetzt werden. Sie erleichtern die optische Trennung der einzelnen Inhaltselemente auf Ihrer Website.

Textfarbe

Verwenden Sie zusätzlich schwarz/weiß für Ihre Texte. Generell gilt: je höher der Kontrast, desto höher die Lesbarkeit. Alternativ können Sie auf einen sehr hellen/sehr dunklen Grauton ausweichen. Dadurch wirkt der Fließtext ein wenig „freundlicher“ fürs Auge und weniger hart. Vermeiden Sie die Verwendung von farbigem Fließtext. Das verwirrt den Leser und nimmt den tatsächlich wichtigen Elementen auf Ihrer Website die Kraft.

Die richtige Farbwahl treffen

Aber wie kommen sie jetzt zu Ihren Farben? Ich könnte jetzt ausholen und darüber schreiben, wie Farben wirken, auf welche kulturellen Hintergründe Sie bei internationalen Websites achten sollten und so weiter. Aber das hat Andreas Hecht bereits für mich gemacht. In seinem Blogbeitrag, veröffentlicht am 20. Februar 2015 auf drweb.de, finden Sie die wichtigsten Infos zum Thema Farbpsychologie und Farbenlehre. Mit den vorgestellten Tools zur Erstellung von Farbschemata und den zahlreichen Beispielen für farblich gelungene Webseiten wird Ihnen die Wahl Ihrer Website-Farben bestimmt leicht fallen.

Achtung: Einschränkungen durch Farbenblindheit bedenken

Die häufigste Form der sogenannten Farbblindheit ist die Rot-Grün-Schwäche. Während sie nicht einmal eine von hundert Frauen betrifft, sind 8-9 % der Männer betroffen (zum Artikel https://www.dasgehirn.info/wahrnehmen/sehen/ich-sehe-was-was-du-nicht-siehst).

Sie können bei der Wahl Ihrer Website-Farben natürlich nicht alle Formen der Farb-Fehlsicht berücksichtigen. Jedoch können Sie betroffenen Personen die Nutzung Ihrer Website erleichtern, indem Sie ein paar einfache Regeln beachten.

Achten Sie besonders bei Diagrammen und aneinander liegenden Farbflächen darauf, dass diese auch einen hell-dunkel-Kontrast bzw. ein Muster aufweisen oder durch eine Linie getrennt sind.

Mehr dazu lesen Sie im Blogartikel „Webdesign: Wie Ihre Website optimal auf Farbenblindheit eingestellt ist“.

webdesign-tipps_ishara-farbtest

Mit Ishihara Farbtafeln werden verschiedene Formen der Farbenblindheit festgestellt. Screenshots: www.sehtestbilder.de, 29.8.2017

3. Textformatierung passend zum Webdesign

Lesbarkeit geht vor

Achten Sie auf beste Lesbarkeit. Was nutzt Ihnen der perfekte Text, wenn niemand ihn lesen kann? Setzen Sie daher schwer lesbare Schriftarten (z.B. Schreibschriften) nur sehr sparsam ein. Für Fließtext eigenen sich gut lesbare (serifenlose) Schriften wie Open Sans.

Immer öfter werden auch Serifenschriften für Mengentext verwendet, jedoch setzt das einen hochauflösenden Monitor beim Besucher voraus. Verwenden Sie Serifenschriften also mit Bedacht. Generell gilt: je kleiner der Text, desto klarer und schnörkelloser muss die Schriftart sein.

Auch bei der Schriftgröße gilt es, auf gute Lesbarkeit zu achten. Bedenken Sie dabei Ihre Zielgruppe. Wenn Sie Senioren ansprechen möchten, sollten Sie den Fließtext standardmäßig eine Spur größer wählen.

Woher bekomme ich Schriften?

webdesign-tipps_schriften_beispiel2-236x300

Screenshot: fonts.google.com, 29.8.2017

Die Verlockung ist groß, eine der zahlreichen kostenlosen Schriften aus dem Web auf der Website zu verwenden. Widerstehen Sie! Der Grund: Sie wissen nicht, woher eine Schrift genau kommt.

Greifen Sie besser auf Google Fonts zurück. Der Vorteil von Google Fonts: Sie dürfen die Schriften auf Ihrer Website einbetten und haben garantiert keine Lizenzprobleme. Sie werden auch fehlerfrei auf jedem Browser dargestellt. Und: die Schriften sind qualitativ hochwertig inklusive Ligaturen (Verschmolzene Buchstaben), Umlaute und Sonderzeichen.

Wir wollen hier keine Werbung für Google machen, aber Google Fonts zu verwenden macht bei der Gestaltung Ihrer Website vieles einfacher. Zum Beispiel Font Pairing.

Kleines Detail mit großer Wirkung: Richtige Kombination von Schriften

Die Auswahl einer Schriftenkombination nennt man Font Pairing. Klassischerweise setzt sie sich zusammen aus einer Schriftart, die für Überschriften verwendet wird und einer Schrift für Fließtext. Das Wichtigste beim Font Pairing: die Schriften müssen harmonieren. Am einfachsten ist das mit zwei Fonts aus derselben Familie. Jedoch lassen sich auch unterschiedliche Schriften kombinieren.

Google Fonts schlägt bei der Auswahl einer Schriftart immer mehrere Kombinationsmöglichkeiten vor. Mehr zum Thema Schriften Auswahl und Font Pairing lesen Sie in dem Artikel „7 Methoden, um passende Schriftarten zu finden und 21 klassische Google-Webfonts-Kombinationen“ von Martin Hahn.

4. Die Zauberformel hinter erfolgreichen Webseiten: Die auffällige Handlungsaufforderung

Wie bringen Sie den Besucher Ihrer Website dazu, das zu tun, was Sie wollen? Ganz einfach: Sagen Sie ihm, was er tun soll. Ich weiß, das klingt hart. Aber diese Methode hat sich bewährt.

Fügen Sie gut sichtbare Buttons ein mit dem Hinweis Jetzt kaufen, Termin vereinbaren oder Anfrage schicken.

Hauptsache gut sichtbar

Ja, dezente Farben und ein minimalistisches Design sind absolut im Trend. Aber: Sie wollen, dass Ihr Produkt oder Ihre Dienstleistung gekauft wird! Also dürfen Buttons ruhig auffallen, sie müssen „knallen“.

Je auffälliger, desto besser. Und seien Sie auch nicht zu sparsam damit. Wo etwas gekauft werden soll, muss auch ein auffälliger Button hin. Als Faustregel gilt: 1x pro Standard-Computerbildschirm. So hat der Besucher beim Scrollen jederzeit die Möglichkeit, direkt auf den Button zu klicken. Rein informative Buttons – zum Beispiel Verlinkungen zu einer anderen Unterseite werden besser dezent gestaltet.

Die drei CTA-Typen

Damit Sie alle Menschen abholen, sollten Sie daher folgendes berücksichtigen:

Buttons: Wie bereits oben beschrieben müssen sich Buttons mit einer klaren Handlungsaufforderung farblich stark vom übrigen Inhalt abheben. Das gilt vor allem für Buttons, die zu Ihrem Hauptziel (Verkauf, Kontaktanfrage etc.) führen. Auf rein informative Unterseiten können Sie ggf. mit dezenter gestalteten Buttons verlinken.

Textlinks: Verlinken Sie innerhalb Ihrer Seite mindestens Ihr Hauptziel (zB. Kontaktanfrage) immer auch im Text. Benutzen Sie für die Hervorhebung eine Farbe. Sollte diese zu wenig auffällig sein, unterstreichen Sie den Link zusätzlich. Das Unterstreichen hat sich weltweit als Linksignal etabliert.

Verlinkte Bilder: Viele Menschen klicken lieber auf Bilder als auf Text. Vor allem Bilder, die zu Handlungsaufforderungen gehören, sollten daher auch Ziellinks sein.

5. Benutzerfreundlichkeit: Der Grund, warum Menschen Ihre Website lieben werden

Benutzerfreundlichkeit ist das A und O jeder Website. Die schönste Website mit den gelungensten Texten nützt Ihnen nichts, wenn der Besucher sich darauf nicht zurechtfindet. Damit war die ganze Liebesmüh vergebens.

Vertrauen Sie auf Altbewährtes

Über Jahre hinweg haben wir gelernt, dass sich die Menüleiste zentriert am oberen Seitenrand befindet. Darin befindet sich – meist links – auch das Firmenlogo. Versuchen Sie nicht, allzu kreativ in der Platzierung der Navigationsleiste zu sein. Der Besucher wird es Ihnen danken, wenn er sich ohne lange zu suchen auf der Website leicht zurechtfindet.

Textlinks sind klassischerweise blau und unterstrichen. Wenn Sie die Farbe ändern, behalten Sie die Unterstreichung bei. Das erleichtert dem Besucher das Erkennen eines Links.

Responsive Design: Fit für Handy, Tablet und PC

Mittlerweile surfen mehr Menschen über mobile Endgeräte als am klassischen Computer. Entsprechend muss auch das Design ihrer Website auf iPad, iPhone und Co tadellos funktionieren. Responsive Webdesign heißt das Zauberwort und beschreibt ebendiese Anpassung der Website auf unterschiedliche Monitorbreiten.

Mehr Scrollen, weniger klicken

Auch auf die vermehrte Nutzung mobilier Endgeräte zurückzuführen ist der Trend zu „längeren“ Websites. Vom Smartphone sind wir gewohnt, viel zu scrollen und zu wischen. Daher kommt auch diese Entwicklung im Webdesign. Langes Scrollen haben wir gelernt und wird mittlerweile auch am Desktop-Gerät zur Gewohnheit. Nutzen Sie dieses Wissen zu Ihrem Vorteil: Packen Sie zusammengehörige Informationen auf eine Seite und zwingen Sie den Nutzer nicht unnötig zum Klicken. Klicken hat viele Nachteile in Hinblick auf Benutzerfreundlichkeit: Die Ladezeiten werden mehr, da jedes Mal eine neue Seite geladen werden muss. Die Navigation wird umständlicher, da jedes Mal der Link zu vorherigen Seite gefunden werden muss etc.

Speed – wer bremst, verliert

Es gibt unzählige Effekte im Webdesign. Doch bedenken Sie: jeder Effekt verlangsamt Ihre Website! Und im Jahr 2021 sind kurze Ladezeiten wichtiger denn je. Bilder auf voller Bildschirmbreite sind zwar schön anzusehen, jedoch müssen Sie so klein wie möglich sein. Mit dem Photoshop Plugin tiny-png, welches auch über die Website https://tinypng.com genutzt werden kann, können Sie Bilder um bis zu 70% komprimieren. Auch der beliebte Parallax Effekt ist ein Ladezeitfresser. Verwenden Sie also Effekte mit bedacht und verzichten Sie lieber auf den einen oder anderen zugunsten der Ladezeit.

Slider – laaaangweilig

Seien Sie mal ehrlich: Wann haben Sie zuletzt bewusst einen Slider weiter als bis zum dritten Bild durchgeklickt? Sie erinnern sich nicht? Sehen Sie, ich auch nicht. Und Google auch nicht. Aus diesem Grund sollten Sie Slider eher meiden. Oder zumindest nicht mehr als drei Bilder einfügen.

Nachvollziehbarkeit

Der Einsatz von Schriftarten, Schriftgrößen, Farben, Icons, Bildern etc. muss für den Besucher Ihrer Website nachvollziehbar sein. Sie sind dazu da, ihm beim Verständnis des Inhalts zu unterstützen. Deshalb: verwirren Sie den User nicht mit zu vielen verschiedenen Schriftgrößen, Farben und sonstigen Gestaltungselementen. Weniger ist oft mehr!

Deshalb: Wählen Sie ein Design, einen Stil und bleiben Sie dabei!

Königstipp: Testen, testen, testen!

Testen Sie! Bitten Sie Personen, die Ihnen ehrliches Feedback geben, sich Ihre Website vorab anzusehen. Aber fragen Sie nicht: Wie finden Sie meine Website? Stellen Sie Ihnen lieber Aufgaben (Kaufen Sie ein Produkt, Fordern Sie Infomaterial an, etc.). Sie sollen sich umsehen. Haben sie die Botschaft sofort verstanden? Vermittelt das Design und die Gesamtwirkung einen professionellen Eindruck?

Haben Sie keine Angst vor Feedback! Sie können davon nur profitieren.

Weitere Tipps zur Benutzerfreundlichkeitsoptimierung von Online-Marketing-Kurse Gründer Manuel Diwosch finden Sie unter https://www.drweb.de/magazin/usability-tests-selber-durchfuhren/

Fazit

Sie müssen kein Webdesigner sein, um eine erfolgreiche Website zu gestalten. Beherzigen Sie unsere 5 Tipps zur Gestaltung und Ihre Kunden werden Ihre Seite lieben.

Hat Ihnen dieser Beitrag gefallen oder hat Ihnen etwas gefehlt? Haben Sie Kritik, Anregungen oder Wünsche zu Themen des Online-Marketings? Dann hinterlassen Sie uns einfach einen Kommentar oder schreiben Sie uns eine Mail an hallo@klickbeben.com.

Verfasst von Ines Kuscher

Foto: Mockup von ©Genetic96 – graphicriver.net

klickbeben-redaktion-profilbild

Die klickbeben Redaktion besteht aus Experten rund um das Thema Online Marketing. Unser Ziel: Wir möchten Ihnen Einblick sowie Tipps zu Themen wie E-Mail Marketing, Marketing Theorie, SEO, Social Media Marketing, Suchmaschinenwerbung und vielem mehr geben. Außerdem möchten wir Ihnen immer wieder kleine Einblicke in unseren spannenden Agenturalltag und somit Einblick hinter unsere Kulissen bieten.

Das sagen Kunden über uns

klickbeben-rysit

Diese Strategie funktioniert. Seit ich auf überzeugende Inhalte, SEO und SEA setze, bekomme ich auch Kundenanfragen über die Website. Klasse und vielen Dank!

Richard Schranz, Geschäftsführer, RysIT Consulting GmbH

klickbeben-formikon

Ich habe mit meinem Unternehmen schon sehr viel Geld für Marketing ausgegeben, doch erst seit dem wir die klickbeben Agentur beauftragt haben, zahlt es sich endlich richtig aus. Wir erhalten gezielte Anfragen über das Internet und können regelmäßig abschließen. Vielen Dank!

Andreas Tschigg, Geschäftsführer, formikon GmbH

klickbeben-steuerberatung-breit

Ich arbeite im B2B-Marketing mit Manuel Diwosch und klickbeben seit 2018 zusammen. Die Strategien bringen nachweislich regelmäßig Anfragen, die immer wieder zu guten Kundenbeziehungen mit großen Projekten führen.

Thomas Breit, Geschäftsführer & Inhaber, Thomas Breit Steuerberatung

Ausgewählte Kundenbeispiele

Ihre Vorteile bei klickbeben

klickbeben-profi-icon<br />

Know-how direkt vom Profi

Geschäftsführer und Gründer Manuel Diwosch verfügt über 15 Jahre Expertise im digitalen Marketing. Er ist Amazon-Bestseller-Autor, dozierte bereits an Masterstudiengängen zweier Fachhochschulen für Marketing und ist gefragter Redner in Österreich und Deutschland.

klickbeben-content-marketing-interviews

Spezifische Marktkenntnisse

Als Agentur mit Spezialisierung auf B2B-Marketing und Strategien für den Fachhandel kennen wir diese Märkte genau. Wir wissen, was der Markt will und welche Methoden funktionieren. So bringen wir Ihnen top Ergebnisse und steigern Ihren Umsatz.

klickbeben-leistungen-icon

Alle Leistungen inhouse

Wir beschäftigen keine Freelancer oder zusätzliche Arbeitskräfte in Billiglohnländern. Unsere Fachkräfte sind vor Ort. Da wir alle Leistungen innerhalb unserer Webagentur in Innsbruck erbringen, haben wir kurze Kommunikationswege. Das erleichtert die Projektsteuerung und beschleunigt die Arbeitsprozesse.

klickbeben-ausgebildete-fachkraefte-icon

Einschlägig ausgebildete Fachkräfte

In unserem Standort in Innsbruck arbeiten hauptsächlich Vollzeit-Fachkräfte. Jedes unserer Team-Mitglieder hat ein einschlägiges Studium bzw. Ausbildung abgeschlossen. Zudem legen wir bei klickbeben einen großen Wert auf Weiterbildung: Das Team wird regelmäßig geschult, um auf dem aktuellen Stand der Branche zu bleiben.

Weitere Marketing Angebote bei klickbeben im Detail