Zum Artikel-Inhalt springen
Dr. Web Digital Experts-Logo
  • Kostenloser Grundeintrag
  • Ratgeber
  • Auf Dr. Web werben
  • Mein Konto
  • Jobs
  • Alle Digitalagenturen
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Stuttgart
  • Düsseldorf
  • Leipzig
  • Dresden
  • Agentur eintragen →
  • × 🍔 schliessen
  • ☰ Menu

Webdesign für eine erfolgreiche Website

Die Website ist die Visitenkarte Ihres Unternehmens. Doch sie ist noch viel mehr als das. Sie ist zentrales Kommunikationsinstrument und erste Anlaufstelle für potenzielle Neukunden. Diese erwarten aussagekräftige Inhalte und ein nutzerfreundliches Design. Wer bei der Onlinepräsenz Professionalität walten lässt, macht auf sich aufmerksam und gewinnt mehr Kunden.

Top of the Stack

GeneratePress

GeneratePress ist ein WordPress-Theme, das bekannt ist für seine schlanke und SEO-freundliche und PageSpeed-optimierten Struktur. Mehr erfahren ↗

Elementor

Elementor ist ein Page- & Theme-Builder für WordPress. Mit Elementor kann man individuelle Seiten bauen und Templates anlegen. Mehr erfahren ↗

Sendinblue

Sendinblue ist ein Tool für datenschutz-konforme Marketing-Automation, die viel Zeit spart und die Konversionsraten erhöht. Mehr erfahren ↗

SEOfolgreich

Deine Experten für Local SEO in München. Local SEO richtet sich an lokale Unternehmen, die ihre Sichtbarkeit erhöhen wollen. Mehr erfahren ↗

Wichtige Studien zum Webdesign und ihre Konsequenzen

Über die Jahre hinweg haben Internetnutzer ihr Surfverhalten verändert. In erster Linie suchen User heute über Google nach der Lösung für ihr Problem. Innerhalb von Sekunden können sie zwischen zahlreichen Seiten wählen, die möglicherweise eine Lösung versprechen.

Beim ersten Besuch auf einer Website entscheiden Nutzer dann innerhalb weniger Sekunden, ob sie bleiben oder nicht. Untersuchungen zeigen, dass ein User abspringt, wenn er nicht innerhalb von zwei Mausklicks die Lösung für sein Problem findet. Hier ist ein ansprechendes, nutzerfreundliches Design das A und O, um Nutzer auf der eigenen Website zu halten. Das Jahrbuch Marketing 2012/2013 liefert zu diesem Thema weiterführende Informationen.

Eye-Tracking-Studien, wie die von Jakob Nielson fanden heraus, wie der menschliche Blick über eine Website schweift. Das erste Ergebnis: User lesen nicht, sie scannen die Website nach den gesuchten Informationen. Dementsprechend müssen Webdesigner darauf achten, wichtige Schlagwörter, Grafiken und Co. prominent zu positionieren. Das sogenannte F-Schema basiert auf diesen Eye-Tracking-Studien und erklärt, wie der menschliche Blick sich auf der Seite bewegt: Zuerst setzt der Blick oben links auf der Website an, bewegt sich dann nach bewegt, zurück zur linken Seite und zuletzt nach unten, um danach wieder nach rechts gerichtet zu werden. Weitergehend lässt sich von Eye-Tracking-Studien ableiten, dass Männer und Frauen unterschiedlich surfen. Während die Herren sich eher von Bildern angezogen fühlen, orientieren Frauen sich vorranging an der Navigation der Website. Aus den Studien lassen sich folgende To-Dos für Webdesigner ableiten:

  • Sie sollten wichtige Inhalte weit oben und prominent platzieren.
  • Das Logo gehört nach oben links oder rechts.
  • Beschriften Sie Suchfelder.
  • Verwenden Sie qualitativ hochwertige Bilder, die die User ansprechen.
  • Überlasten Sie Ihre Seite nicht mit unnötigen Elementen. Usability ist wichtiger als Design!

Was ist beim Webdesign zu beachten?

Bereits bei der Planung einer Website ist es essentiell, einige Punkte zu beachten. Sonst leidet die Nutzerfreundlichkeit und User bleiben nicht länger auf der Seite. Folgende Dinge sind für eine gute Strategie unerlässlich:

Wireframe und Struktur

Die Basis der Planung bildet das Wireframe. Hierbei handelt es sich um eine reduzierte Darstellung der Konzeption einer Internetseite. Es geht darum, alle Elemente der Internetseite inklusive der Inhalte auf das Wesentliche zu reduzieren und schematisch darzustellen. Das Wireframe zeigt den Aufbau einer Website oder der Unterseiten und präsentiert die einzelnen Seitenstrukturen nebst ihren Inhalten. Design und Farben kommen in dieser Entwicklungsphase nicht zum Einsatz, da sie mehr ablenken als helfen. Sie können so herausfinden, welche Elemente Sie für den Aufbau der Website benötigen. Die Inhalte sind dabei ein wesentlicher Bestandteil, um das spätere Design der Seite perfekt an die Bedürfnisse der Zielgruppe anpassen zu können. Planen Sie die Struktur Ihrer Website detailliert, um sich spätere Anpassungen zu ersparen.

Dazu passt:   Performance: Einfache Tipps zur Video-Optimierung auf Websites

Das Design – Corporate Identity

Das Design der Website muss den Inhalten gerecht werden. Für eine erste Orientierung können Sie sich mit Seiten der Konkurrenz und vorgefertigten Themes vertraut machen. Allerdings ist es wichtig, dass Sie Ihre Website frei und individuell gestalten. Templates, die Sie im Internet finden, bieten nur bedingte Individualisierungsmöglichkeiten, sodass die Website nicht professionell wirkt. Um die Seite an Ihr Corporate Design anzupassen, reicht es nicht, die Farben entsprechend einzustellen und das Logo hochzuladen. Vielmehr geht es um den Wiedererkennungswert des Unternehmens. Als Beispiel können hier die Seiten großer Unternehmen dienen: Die Website von Apple arbeitet mit kleinen Animationen und Mikrointeraktionen. Das Design ist dabei clean und in kontrastierenden Farben gehalten. Die Seite wirkt schlicht, bis der User über einzelne Elemente fährt oder weiter herunter scrollt. Die Animationen lenken den Blick auf das Wesentliche.

Für kleine Seiten muss es nicht das größte CMS sein. Schlichte Designs sind oft wesentlich aussagekräftiger als überladene Seiten. Wichtig ist, dass Sie die Website gut bedienen und an die aktuellen Entwicklungen anpassen können. So schaffen Sie sich ein Umfeld, in dem Webdesign Spaß macht.

Für alle Geräte optimal

Damit am Smartphone, am Desktop, auf dem Laptop oder dem Tablet eine Website perfekt dargestellt wird, muss die Website responsive sein. Ist sie es nicht, verspringen Inhalte auf dem Bildschirm optisch und beeinflussen die Usability drastisch. Ist eine Website beispielsweise nicht für Smartphone-Bildschirme optimiert, verlieren Sie zahlreiche User.

Neben diesen zentralen Elementen spielen weitere Aspekte wie zum Beispiel längere IPS mit klarem Ablauf beim Webdesign eine Rolle. Wenn Sie nicht verstehen, was das bedeutet, sind Sie dabei nicht alleine und Sie dürfen sicher sein: Sie müssen es auch nicht verstehen, dann dazu gibt es Profis. Bei der Webagentur OSG in München finden Sie Experten, die sich in der Materie auskennen und ihr Know-how an Firmen weitergeben.

Tipp: Sie können die Leistungen von OSG durch den Staat bezuschussen lassen

Firmen, die sich die Beratung zum Internetauftritt bis zu 50 Prozent bezuschussen lassen wollen, können vom Förderprogramm „Go Digital“ profitieren. Bis zu 16.500 Euro sind drin. Umfassende Informationen zum Programm hält das Bundesministerium für Wirtschaft und Energie bereit.

MacBook Air - Apple MacBook Pro
Usern stehen unterschiedliche Geräte zur Verfügung, so dass die Website entsprechend optimal angezeigt werden muss. Dazu braucht es Responsive Design.

Das funktioniert für User und SEO

Es gibt eine Reihe von Faktoren, die eine gute von einer schlechten Website unterscheiden. Oft geben Kleinigkeiten den Ausschlag. Denn: Gutes Webdesign liegt im Detail. Die wichtigsten sieben Faktoren kommen jetzt.

Dazu passt:   Darauf musst du beim Einsatz von Stockphotos achten

Usability

Die Nutzerfreundlichkeit ist essentiell, um User auf der Website zu halten. Dafür müssen Nutzer ihre Ziele schnell und zufriedenstellend erreichen. Ist die Usability hoch, bemerken Nutzer einer Webseite diese meistens gar nicht. Ist sie aber schlecht, springen sie ab.

Barrierefreiheit

Barrierefreiheit im Web besteht dann, wenn User sich ohne Einschränkungen und unabhängig von ihrer Bewegungs-, Seh- und Hörfähigkeit sowie der Fähigkeit, Informationen zu verarbeiten, online bewegen können. Das schließt auch barrierefreie Websites von Firmen mit ein. Achten Sie deshalb darauf, Ihre Inhalte entsprechend aufzubereiten, um allen Menschen mit und ohne körperliche und kognitive Einschränkungen die Möglichkeit zu geben, sich zurechtzufinden. Beispiele für eine barrierefreie Seite sind:

  • Content in einfacher Sprache anbieten
  • Bilder mit alternativen Texten versehen (das ist mittlerweile auch in den sozialen Netzwerken üblich)
  • Videos und Podcasts bereitstellen, die die Inhalte der Website wiedergeben

SEO-Optimierung

Bei der Onsite-SEO geht es im Prinzip darum, eine Website so aufzustellen, dass sie in den organischen Suchergebnisse einer Suchmaschine weit oben angezeigt wird. Wichtig: Oft sind die ersten Ergebnisse einer Suche Werbeanzeigen, die die Unternehmen gekauft haben. Viele User klicken bewusst nicht auf diese Anzeigen! Zahlreiche Ansatzpunkte sorgen im Zusammenspiel miteinander für ein gutes Ranking. Sie sollten in jedem Fall eine Platzierung weit oben in der Suchmaschine anstreben, so dass die Wahrscheinlichkeit steigt, dass User die Seite anklicken. Zu den typischen SEO-Maßnahmen gehören:

  • Content-Erstellung unter Berücksichtigung relevanter Keywords
  • Aufbereitung der Informationen in verständlichen Info-Häppchen in klar strukturierten Beiträgen
  • Auflockerung des Contents durch Listen, Bilder, Videos, Infokästen
  • Ideale Zielgruppenansprache
  • klare Abgrenzung von der Konkurrenz

Die Onsite SEO-Optimierung beginnt aber nicht erst mit den medialen Inhalten. Bereits bei der Programmierung können Webdesigner einiges zur Suchmaschinenoptimierung beitragen. Dazu ist es wichtig, lange Ladezeiten zu vermeiden, JavaScript sauber einzubinden, um Fehler bei der Darstellung zu verhindern und passende Bildformate zu verwenden. Sie können zudem festlegen, wann welche Elemente geladen werden, sodass eine gute Usability entsteht.

Mit dem Free Account der Performance Suite können Sie alle wichtigen SEO-Punkte im Blick halten. Es handelt sich um ein Tool, das dem Nutzer über die wichtigsten SEO-Optimierungsmaßnahmen berichtet und alle Möglichkeiten zur Kontrolle bietet. Eine Künstliche Intelligenz bietet Vorschläge zur Optimierung. Webseitenbetreiber haben damit eine Möglichkeit, die Website zu verbessern und augenblicklich Änderungen vorzunehmen.

Lesbarkeit

Ist der Content nicht verständlich, springen User ab. Auch komplexe Sachveralte müssen so dargestellt werden, dass Website-Besucher ohne spezielle Kenntnisse sie verstehen können. Dabei herrschen im B2B-Bereich anderer Anforderungen als im B2C-Bereich. Dennoch gilt: Potenzielle Kunden, die zum ersten Mal auf eine Website kommen, müssen sofort verstehen, worum es geht. Bei der Gestaltung textlicher Inhalte achten Sie auf prägnante Überschriften, kurze Aufzählungen und eine lebhafte Sprache. So finden Nutzer, die nach bestimmten Informationen suchen, schnell die wichtigen Punkte. Denn: Die wenigsten User lesen den ganzen Text, wenn sie ausschließlich gezielt auf der Suche nach etwas sind.

Dazu passt:   Website-Vorlagen: Die 101 besten, kostenlosen HTML-Templates (2021-Update)

Responsive

Responsive Design bedeutet, dass die Website auf jedem beliebigen mobilen Endgerät optimal dargestellt wird. Auf diese Weise können Webseitenbesucher sich unabhängig von ihrem Gerät auf der Seite zurechtfinden. Eine Website ohne Responsive Design verliert Nutzer in Sekundenschnelle. Hier verschenken Sie Potenzial, wenn Sie sparen.

Sicherheit

User legen großen Wert auf die Sicherheit einer Website. Insbesondere, wenn sie über die Website etwas kaufen wollen und deshalb Bankdaten oder Adressen angeben müssen, spielt die Sicherheit der Website eine große Rolle. In einem Browser lassen sich Einstellungen vornehmen, die störende Pop-ups blockieren, unsichere Flash-Inhalte deaktivieren und generell regeln, welche Website auf Mikrofon oder Kamera zugreifen darf. Unsichere Websites werden wesentlich seltener angeklickt, und haben alleine deshalb weniger Chancen, ihr Umsatzpotenzial zu entfalten. Um Ihre Website sicher zu gestalten, achten Sie beispielsweise auf HTTPS und eine aussagekräftige Datenschutzrichtlinie. Die deutsche Datenschutzgrundverordnung DSGVO macht Webseitenbetreibern zahlreiche Vorgaben, die einzuhalten sind und auch der Europäische Gerichtshof (EUGH) ist immer wieder mit diesem Thema befasst. Unter anderem stehen Cookie-Banner und deren Verwendung im Fokus. In diesem Zusammenhang ist die Zusammenarbeit mit einer spezialisierten Agentur empfehlenswert, die stets die rechtlichen Entwicklungen im Auge hat und die Rechtsprechung bei ihren Planungen berücksichtigt.

WordPress: günstig und effektiv

Um sich maximale Flexibilität zu bewahren, können Sie Ihre Website mit WordPress aufsetzen. Angefangen vom Aufbau über die Gestaltung bis hin zu den Vermarktungsoptionen können Sie mit einfachen Methoden das Optimum aus einer WordPress-Website herausholen. Änderungen können Sie hier schnell und günstig einbauen. Das hat gleich zwei Vorteile: Zum einen bleiben Sie aktuell und können auf Entwicklungen schnell reagieren. Zum anderen bleibt so mehr Budget für Content, Links und Media Spendings.

Fazit: Basisstrukturen sorgsam planen, kreative Gestaltung darauf aufbauen

Sorgfältig geplante Grundstrukturen sind die Basis Ihrer Website. Viele Einzelaspekte müssen ineinandergreifen: Dazu gehören unter anderem Inhalt, Design, Usability, Sicherheit, SEO und Conversion-Optimierung. User wollen eine moderne Website, die sie schnell zum Ziel bringt und sämtliche Informationen verständlich und übersichtlich darstellt. Ein modernes Design in Ihrer Corporate Identity ist dann das i-Tüpfelchen. Die besten Ergebnisse lassen sich in Zusammenarbeit mit Experten erzielen.

Bildquellen:

https://pixabay.com/de/users/free-photos-242387/

https://pixabay.com/de/users/nastya_gepp-3773230/

Markus Seyfferth

Markus Seyfferth

ist seit 2006 aktiv im Thema Medien, Vertrieb und Kundenbindung. Zunächst als studentischer Mitarbeiter einer Berliner Business School, später hauptberuflich als Vertriebsleiter bei einem Start-up der Freien Universität Berlin. Für sechs Jahre übernahm er als Vorstand die geschäftsführende Verantwortung des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte übernommen hat. Seit 2019 verantwortet er die technische und redaktionelle Leitung von Dr. Web und arbeitet für Agenturkunden von Dr. Web Digital.

Neue Agenturen auf Dr. Web

Binary Garden

Hannover

Interstruct Communications AG

Berlin

Die Texterin

Köln

JUNIQUE Design

Bonn

Vogelsang Werbe- und Projektbüro

Hannover

New Era Marketing

Kämpfelbach

Agentur eintragen

9 Antworten

  1. Martin sagt:
    25. Juni 2020 um 11:01 Uhr

    Hallo Herr Seyfferth,
    vielen Dank für die Zusammenfassung. Der Artikel ist sachlich und informativ, wenn auch Profis nicht wirklich Neues erfahren. Aber vielleicht sind diese auch nicht die Zielgruppe. Was mich allerdings irritiert hat: Ihr Artikel bemüht sich um eine neutrale und informative Sprache. Alles ist übersichtlich und ohne individuelle Wertungen beschrieben. Und dann kommt plötzlich der Hardcore-Wordpress-Werbeblock. War hier Captain Obvious am Werk? War der ganze Artikel doch nur eine Werbeshow?
    Wenn nicht, dann hat der Abschnitt in diesem Artikel nichts zu suchen, denn natürlich kann man auch anders gute Seiten bauen. Es handelt sich um eine subjektive Vorliebe, die ich z.B. nicht teile.

    Dennoch danke und viele Grüße
    Martin

    Antworten
    1. Rudi Dick sagt:
      25. Juni 2020 um 14:22 Uhr

      Sie sprechen(schreiben) mir aus der Seele. Schade!
      LG Rudi Dick

      Antworten
    2. klawischnigg sagt:
      28. Juni 2020 um 0:18 Uhr

      Ich kann mich Ihrem Kommentar nur anschliessen. Diese Seite heisst “drweb” und nicht “drwordpress”. ..

      Antworten
  2. Henning Doose sagt:
    8. Juli 2020 um 15:22 Uhr

    Abgesehen von dem guten Informationsgehalt des Artikels kann ich mich, was den Werbeblock für WordPress angeht, meinen Vorrednern nur anschließen. Es gibt auch andere gute CMS, über die DrWeb ebenso gelegentlich berichten könnte.

    Antworten
  3. Webdesign Berlin sagt:
    10. September 2020 um 16:46 Uhr

    Aus meiner Erfahrung ist es auch ganz wichtig, eine klare Positionierung zu beziehen. Das erleichtert das Webdesign sehr, weil nicht alles für jeden verkauft werden muss.

    Antworten
  4. DerMo sagt:
    30. September 2020 um 16:15 Uhr

    Für Beginners sicherlich recht hilfreicher Artikel bzw. hilfreiche Übersicht. Aber mal was anderes… ich war schon lange nicht mehr auf Dr.Web. Seit wann habt Ihr keine Navigation mehr?

    Antworten
    1. Markus Seyfferth sagt:
      1. Oktober 2020 um 4:53 Uhr

      Werden wir bald wieder zurückbringen! 😉

      Antworten
  5. Selina sagt:
    30. September 2020 um 21:47 Uhr

    Wieder etwas dazugelernt. Und ich persönlich finde es schön wenn jemand seine Vorlieben für ein Programm sagt. Natürlich gibt es noch andere Optionen, das muss jeder für sich selbst entscheiden. Ich freue mich aber immer von Profis zu hören, was diese am liebsten Nutzen

    Antworten
  6. Webdesign Düsseldorf sagt:
    22. Dezember 2020 um 22:00 Uhr

    WordPress sit nicht das einzige CMS, es gehört aber zu den beliebtesten. Und mit WordPress können Profis, aber auch Anfänger viel machen. Daher sehe ich den Abschnitt nicht als Werbeblock zu dem sehr guten Artikel.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Passende Beiträge

Sonnenaufgang auf dem Berg, über den Wolken
HTML

Website-Vorlagen: Die 101 besten, kostenlosen HTML-Templates (2021-Update)

Websiten so ganz ohne ein CMS zusammenzubauen ist eine schnelle und bequeme Art, die eigene Webseite live zu bringen. Das macht vor allem dann Sinn, wenn sich die Inhalte eh nur selten ändern. Im folgenden Artikel stellen wir also eine Sammlung an kostenlosen HTML-Templates zusammen. Viel Spaß damit!

Weiterlesen »
Der Schreibtisch eines Webdesigners, mit Laptop, iMac, einem Design-Buch und einem Smartphone-Papier-Mockup.
Webdesign

Mit den Mitteln der Moderne: Warum Sie Webdesigner und SEO-Experten engagieren sollten

Sie möchten mit Ihrem Unternehmen, Ihren Dienstleistungen oder Ihrem Hobby mehr Reichweite erfahren? Die Bindung zu den Kunden soll nicht nur aufgebaut oder ausgebaut, sondern dauerhaft gefestigt werden? Dann bietet sich das Erstellen einer eigenen Webseite an.

Weiterlesen »
Lizenzfreie, kostenlose Bilder und Illustrationen für alle! - Eine Nahaufnahme von einer Blume - Illustration
Fotografie

Lizenzfreie, kostenlose Bilder und Illustrationen für alle!

Kostenlose Fotos kann man immer gebrauchen. Sie zu finden, ist nicht ganz so einfach, denn häufig musst du doch zahlen, oder teils abstruse Lizenzen einhalten. Tust du das nicht, kann es schnell zur Abmahnung kommen.

Weiterlesen »
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN
Das große Dr. Web Icon-Set:
970+ Icons, im SVG-Format
Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)