Webdesign Kleine DesignÀnderungen, die deine Besucher lieben werden

Kleine DesignÀnderungen, die deine Besucher lieben werden

17. Juni 2016 | Webdesign | 7 Kommentare

Das Design ist maßgeblich fĂŒr den Erfolg einer Webseite mitverantwortlich. Oft sind es aber nur die kleinen Dinge, die das gewisse Etwas ausmachen. Einige der  wichtigen „Kleinigkeiten“ beschreibe ich in diesem Beitrag.

Wie schon oben erwĂ€hnt, spielt das Design eine wichtige Rolle auf einer Internetseite. Denn ein professionelles Aussehen, steigert bei deinem Besucher die GlaubwĂŒrdigkeit deiner Inhalte. Das lĂ€uft unterbewusst ab. Darum spendiert auch Apple seinen Produkten eine edle Verpackung. Aber was ist hier wichtig?

In erster Linie muss das Design zum Thema der Webseite passen. Ansonsten wirst du nicht ernst genommen. Schau dir dazu erfolgreiche Webseiten einmal an. Du wirst keine Seite mit medizinischen Themen finden, die so bunt und knallig aussieht wie die Webseite der Entertainment-Show „TV Total“. Und genau aus diesem Grund solltest du dir auch ein vernĂŒnftiges Design zulegen.

Aber es sind oft die kleinen Änderungen, die das Nutzungserlebnis auf einer Webseite verbessern. So etwas nennt man dann Nutzerfreundlichkeit oder auch Usability. Und genau das wird sehr oft vergessen. Ich erlebe immer wieder Webseiten, auf denen der Besucher mit Designobjekten  zugebombt wird. Dabei wird sehr oft vergessen, das es um die Information auf der Webseite geht.

Baukasten Anbieter nutzen

FĂŒr Denjenigen der auch gerne eine eigne Webseite haben möchten, aber sich mit der Technik nicht auskennt, habe ich den Homepage-Baukasten von Wix.com ausprobiert. Auch hier sind diese Tipps anwendbar.

Wenn du keine Ahnung hast, wie du eine professionelle Seite umsetzen sollst, ist das nicht so schlimm. Mittlerweile gibt es Anbieter, die dir ĂŒber ein Baukastenprinzip ermöglichen schnell, einfach und ohne Programmierkenntnisse eine eigene Internetseite zu erstellen. Hier brauchst du nur ein passendes Design auswĂ€hlen und dann kannst du dir im Browser deine Webseite zusammen klicken. Damit lassen sich nicht nur Blogs im Handumdrehen erstellen, sondern auch professionelle Firmenwebseiten und Fanpages. Ein solcher Anbieter ist Wix.

Was ist ein Homepage-Baukasten

Als Homepage-Baukasten bezeichnet man Webseiten, bei denen du dir alle Elemente einfach und schnell zusammen klicken kannst. Hierbei sind keinerlei HTML oder Design-Kentnisse erforderlich. Alles geschieht mit der Maus in deinem Browser.

Ich habe mir das Angebot von Wix.com genauer angesehen, ein wenig rumprobiert und getestet. Du kannst schon mit einem kostenlosen Paket einsteigen und dir eine schicke Seite zusammenstellen. Damit kannst du so ziemlich alles zusammenklicken, was du auf deiner Homepage benötigst. Ob Slider, Google Maps Karte, Bildergalerien oder Spezial Effekte, es ist alles mit an Bord. Auf jeden Fall kannst du das alles erst einmal kostenlos nutzen.

Wenn du mehr willst, wie z.B. eine eigene Domain, so kannst du zu einem kostenpflichtigen Pro Account wechseln. Die Kosten liegen knapp ĂŒber 8,- EUR/Monat. Damit erhĂ€ltst du einen werbefreien Pro Account mit eigener echter Domain. Die Preise bei Wix sind in etwa da, wo ein normales Hosting auch liegt. Allerdings musst du nicht erst ein CMS oder ein Template installieren. Du kannst direkt loslegen und brauchst dich nicht erst mit der Technik auseinandersetzen.

Tipp 1 – Navigation intuitiv gestallten

Eine Navigation hat so ziemlich jede Seite. Aber findet sich hier der Besucher auch zurecht? Du solltest peinlichst genau darauf achten, das alle MenĂŒpunkte und UntermenĂŒpunkte auch in einem logischen Zusammenhang stehen. Es ist problemlos möglich Inhalte mehrmals ĂŒber das MenĂŒ zu verlinken.

MenĂŒstruktur mit Popup-MenĂŒs

MenĂŒstruktur mit Popup-MenĂŒs

Vor allem; mache keine Experimente mit der Navigation. Der Besucher muss möglichst schnell an die gewĂŒnschten Informationen kommen. Es hat sich mittlerweile als Standard etabliert, das die Position des MenĂŒs entweder oben im Kopf der Seite querliegend, oder in der Seitenleiste zu finden ist. Dabei kann das MenĂŒ auch Unterpunkte enthalten, die erst beim drĂŒberfahren mit der Maus aufpoppen.

MenĂŒstruktur anlegen

MenĂŒstruktur anlegen

Tipp 2 – Weniger ist mehr

Es spielt aber auch eine sehr wichtige Rolle, ob du einen eigenen Blog betreibst oder eine Webseite, wo du Produkte oder Dienstleistungen prÀsentieren möchtest.

Der eigene Blog

Beim Design eines Blogs solltest du nicht unbedingt auf viele Effekte setzen. Denn hier gilt, weniger ist mehr. Google macht es uns vor. Das heißt jetzt nicht, das deine Seite so spartanisch aussieht wie die Google Such Seite. Effekte mĂŒssen gezielt eingesetzt werden. Ein Slider auf der Startseite ist ein Eye-Catcher mit dem du z.B. den Blick deines Besuchers auf die neuesten BeitrĂ€ge lenkst.

Dropdownboxen nur als unterstĂŒtzende Maßnahmen einbauen. Viele Nutzer verstehen nicht, das man hier erst klicken muss, um die Information zu sehen.

Beispiel einer Blog-Webseite

Beispiel einer Blog-Webseite

Die Webseite fĂŒr eine Firma oder ein Produkt

Eine Produkt- oder Firmenwebseite sollte natĂŒrlich einladend sein, und das Produkt oder die Leistungen einer Firma in das rechte Licht rĂŒcken. Hier bieten sich großflĂ€chige Hintergrundfotos an. Auch hier kann ein so genannter Paralax-Effekt dein Design unterstĂŒtzen.

Aktuell werden alle wichtigen Informationen auf der Startseite deiner Firmen oder Produkt Homepage in kleinen Boxen angerissen und dann zu einer Detailseite verlinkt.

Beispiel einer Firmenwebseite mit vielen Design Elementen

Beispiel einer Firmenwebseite mit vielen Design Elementen

Tipp 3 – Text und Bilder verwenden

Das Sprichwort „Bilder sagen mehr als tausend Worte“ kennt so ziemlich jeder. Das trifft auch auf eine Webseite zu. Nur hier ausschließlich Bilder zu verwenden, wĂŒrde dann auch nicht gehen. Aber passende Grafiken oder Fotos einzusetzen, um deinen Inhalt zu unterstĂŒtzen, lockern deinen Text auf. Nichts ist schlechter als eine TextwĂŒste.

Vermeide deine Texte mit unterschiedlichen Farben, Fett und Kursiv auszustatten. Nicht, weil es der Editor hergibt, musst du alle SchriftgrĂ¶ĂŸen und Stiele einsetzen. Hier lieber Fließtext nutzen und Fett geschriebenen Text nur gezielt einsetzen.

Tipp 4 – Infoblöcke

Sehr gut kommen beim Leser die Infoblöcke an. Also Texte, die in einem farbigen Blog-Element platziert sind und damit den Text optisch unterbrechen. In diesen Blöcken kannst du dann nĂ€here ErlĂ€uterungen zu bestimmten Fachbegriffen aus dem vorhergehenden Abschnitt zur VerfĂŒgung stellen.

Infoblöcke einsetzen

Infoblöcke einsetzen

Das ist eine sehr gute Sache, um den Besucher einige Zusatzinfos zu geben. Durch die Platzierung in einem separaten Block, können Leser, die die Bedeutung kennen, diesen Block beim lesen ĂŒberspringen.

Tipp 5 – Produkte und Angebote

Wenn du mit deiner Seite dein Produkt oder Angebot vorstellen oder gar verkaufen möchtest, dann können dir hier verschiedene Designelemente helfen. Es sind nĂ€mlich alle Sachen erlaubt, die den Focus des Besuchers auf dein Produkt oder Dienstleistung lenken. Ebenso muss sich dein Besucher in einer angenehmen Umgebung wohlfĂŒhlen. Das sind schöne und vor allem zum Thema passende VollbildhintergrĂŒnde angesagt.

Allerdings musst du hier aufpassen, das die Ladezeiten nicht zu groß werden, weil die sich sonst negativ auf dein Google Ranking auswirkt.

Vollbildhintergrund mit Paralax-Effekt

Vollbildhintergrund mit Paralax-Effekt

Tipp 6 – SchriftgrĂ¶ĂŸen

Die SchriftgrĂ¶ĂŸen auf einer Webseite spielen auch eine sehr wichtige Rolle. Derzeit wird lieber auf große SchriftgrĂ¶ĂŸen wert gelegt. Diese lassen sich wesentlich besser am Bildschirm erkennen und lesen. Gerade jetzt, wo unsere Bildschirme immer grĂ¶ĂŸer werden und im Gegenzug auch höhere Auflösungen bekommen, werden Texte kleiner dargestellt.

SchriftgrĂ¶ĂŸen einstellen

SchriftgrĂ¶ĂŸen einstellen

So sieht eine 12 Punkt Schrift auf einem 22″ 16:9 Bildschirm mit einer Auflösung von 1680 x 1050 Pixeln noch angenehm aus, allerdings auf einem 27″ Bildschirm mit 4K Auflösung von 3840 x 2160 ist diese schon wieder viel zu klein.

Fazit

Mit diesen kleinen Tipps kannst du deine Webseite fĂŒr den Leser besser machen. Das Ergebnis sind lĂ€ngere Verweildauer und ein angenehmes LesegefĂŒhl fĂŒr deine Besucher. Zugleich kannst du auch ohne große technische Vorkenntnisse selbst eine Webseite gestalten. Dank der Baukastensystem wie z.B. beim Anbieter Wix, ist das wirklich ein Kinderspiel. Ich hoffe der Beitrag hat allen Einsteigern ein wenig weiter geholfen.

Wie hat dir dieser Beitrag gefallen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Hier schreibt: Thomas

Hier schreibt: Thomas

Ich heiße Thomas und bin Inhaber einer Agentur fĂŒr eCommerce und Online Marketing. ZusĂ€tzlich interessiere ich mich fĂŒr CMS Systeme, Wordpress, Drupal, Grafik und Multimedia. Ihr findet mich auf Twitter und Facebook. Über einen Kommentar zu diesem Beitrag wĂŒrde ich mich freuen.

7 Kommentare

  1. Peter Obernosterer

    Sehr geehrte Damen und Herrn,
    werte GeschÀftsleitung,

    bin ein Neuling in diesem Segment und möchte mich fĂŒr Ihre Ă€ußerst hilfreichen Informationen bedanken.

    Ich wĂŒnsche Ihnen noch ein schönes Wochenende!
    Mit einem freundlichen Gruß
    Peter Obernosterer

    Antworten
  2. Thomas

    „Wix“ hat zwar einen gewöhnungsbedĂŒrftigen Namen, aber fĂŒr viele Lösungen reicht das absolut aus. Einige Branchen brauchen keine individuellen Lösungen, sondern hauptsĂ€chlich eine einfach zu pflegende Webseite. In diesem Punkt ist wix sehr gut. Ich wĂŒrde den Baukasten zwar nicht fĂŒr jede Art von Webseite empfehlen aber als Basis ist das ne gute Sache

    Antworten
    • Thomas Oelsner

      Ja, so sehe ich das auch. Vor allem, wenn der Inhaber seine Seite selber gestalten möchte und keine Ahnung von Webseiten-Entwicklung und CMS Systemen hat.

  3. Atilgan

    Vielen Dank fĂŒr die Tipps und Informationen. Alles sehr gut erzĂ€hlt, sodass es auch ein AnfĂ€nger versteht.

    Antworten
  4. Volkan

    FĂŒr Selbstgestalter sind diese Tipps Gold wert. Vielen Dank!

    Antworten
  5. Dieter

    Ich bin damit auch sehr zufrieden. Wir hatten den Fall, dass wir einfach nur eine kleine Webseite fĂŒr unseren Fanclub benötigten und da reicht das System komplett aus. WordPress ginge auch noch, doch mit den Vorlagen ist Wix deutlich einfacher zu konfigurieren. WordPress ist wahrscheinlich insgesamt deutlich besser, aber fĂŒr unseren Anspruch brauchten wir einen solchen Umfang nicht

    Antworten
  6. Cemal

    Schöne Zusammenfassung und gute Tipps. Vielen Dank.

    Antworten

Einen Kommentar abschicken

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

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen ĂŒber neue BeitrĂ€ge via E-Mail zu erhalten.

Schließe dich 2.830 anderen Abonnenten an

In eigener Sache

Mit einem Stern (*) markierten Links sind Affiliate-Links. Wenn du einen Kauf ĂŒber diese Links tĂ€tigst, bekomme ich eine Provision und du unterstĂŒtzt aktiv diesen Blog. FĂŒr dich Ă€ndert sich der Preis nicht.

Wichtig: Ich empfehle nur Produkte, die ich selbst verwende und/oder von denen ich ĂŒberzeugt bin. Vielen Dank fĂŒr deine UnterstĂŒtzung!