Beispiele für einfache Webseiten

Mit dem Cheetah Sitebuilder erstellte Beispielseiten

Wer glaubt, das Webseiten, die auf ausgefeiltes Design mit einer Vielzahl von außergewöhnlichen Showeffekten, automatischer Beschallung und raffinierter (nicht intuitiver) Benutzerführung setzen, besonders viele Besucher anlocken und fesseln, der irrt in den meisten Fällen. Viele Webdesigner haben den Ehrgeiz, in eine Webseite ihr ganzes Können zu beweisen und verbringen sehr viel Zeit am "Außeren" und verzetteln sich in Gestaltungsproblemen anstatt das Augenmerk auf den Inhalt und den Zweck der Webseite zu richten. Wenn man aber mit seiner Webseite wirklich etwas erreichen möchte - beispielsweise Leads generieren oder Produkte verkaufen - dann darf man sich nicht nur mit dem optischen Aussehen seiner Webseite befassen. Wichtiger ist Inhalt und Benutzerfreundlichkeit - zusammengefasst im Begriff des "Nutzererlebens". Minimalistisch lässt er sich in Bezug auf das Webdesign auf folgende Punkte herunterbrechen: 

Mach es einfach...

Besucher, die Ihre Webseite besuchen, besuchen sie in den seltensten Fällen aus dem Grund, dass sie irgebdwie besonders "genial" designt ist. Oder kurz, den meisten Besuchern ist es schnurz egal, wie Ihre Webseite aussieht. Wichtig für ihn ist im Wesentlichen der Nutzen, den er aus dem Besuch Ihrer Webseite ziehen kann. Das bedeutet natürlich nicht, dass man sich in Bezug auf Design keine Gedanken zu machen braucht. Genau das Gegenteil ist der Fall. Nur der Bezugspunkt sollte der Spruch "Keep it simple" sein. Denn wenn sie auffällige, aber funktionell unnötige Designelemente in ihre Webseite einbauen, dann lenken sie vom eigentlichen Zweck Ihrer Webseite ab - und das ist i. d. R. kontraproduktiv. 

Wesentliche Punkte eines einfachen, aber ansprechenden Webdesigns  sind:

Es folgen Beispielwebseiten:

Farbgestaltung

Verwenden Sie auf allen Seiten Ihrer Webseite einheitlich nicht zu viele untereinander abgestimmte Farben. Webdesigner empfehlen 5 plus/minus 2 verschiedene Farben, die man am besten einer Flat UI Color Palette entnimmt. Solche Paletten findet man beispielsweise auf der Webseite flatuicolors.com. Eine große Erleichterung - gerade für Nutzer des Cheetah Sitebuilders - ist die Chrome-Erweiterung Flat UI Colors Palette Extension, auf die hier explizit hingewiesen werden soll.

Schriftarten

Auch hier gilt genauso wie bei den Farben, dass man nicht zu viele verschiedene Schriftarten auf einer Website verwenden sollte. Die verwendeten Fonts sollten in allen Größen gut lesbar sein und in ihrer Ausprägung zum Thema der Webseite passen. Im Cheetah Sitebuilder kann man bereits im Vorfeld unter "Seite" - "Schriftart" die Überschriften- und Abschnittsschriftarten sowohl für die Desktop- als auch für die Smartphobevariante in Bezug auf Font und Schriftgröße festlegen (was man übrigens immer tun sollte), Üblicherweise sollte man nicht mehr als drei verschiedene Schriftarten in drei verschiedenen Gößen  pro Ausgabegerätekategorie verwenden.

Bilder und Grafiken

Hier gilt: Verwenden Sie nur Bilder, die zum Kontext der Webseite passen (auch in Bezug auf das grafische Design - z. B. als Eyecatcher) und Grafiken, wenn sie dem Webseitenbesucher einen Mehrwert bieten (Stichwort: Informationsgehalt) bzw. spezielle Funktionen implizieren.

Nutze visuelle Hierarchien

Die Idee der "Visuellen Hierarchien" beschreibt die Art und Weise der Anordnung sowie der Organisation der einzelnen Funktionselemente auf einer Webseite mit dem Ziel einer idealen Benutzerführung. Sie soll den Webseitenbesucher auf eine natürliche und logische Weise dazu animieren, eine bestimmte gewünschte Aktivität auszuführen. Das kann ein Seitenwechsel sein, ein Klick auf einen Link, um zusätzliche Informationen zu erhalten oder auch ein Klick auf eine Schaltfläche (Button), um beispielsweise einen Bestellvorgang auszulösen. Durch eine entsprechende Gestaltung der Webseite und ihrer einzelnen Elemente in Bezug auf Farbe, Größe und Position bieten Sie dem Besucher quasi unbewusst einen "Roten Faden", der ihn genau dorthin führt, wo Sie ihn haben wollen...

Möglichst einfache und logisch strukturierte Navigation

Sobald man über das Niveau einer Landingpage hinausgeht, muss man sich zwangsläufig Gedanken um eine sinnvolle Verlinkung der einzelnen Webseiten sowie um die Navigation zwischen den einzelnen Seiten der Website machen. Wichtig ist dabei, dass der Seitenbesucher nicht lange suchen oder überlegen muss, wie er zu den ihm interessierenden Informationen gelangt. Auch gilt hier selbstverständlich "Keep it simple". Die einfachste Methode ist in der Desktopversion einer Website die Verwendung einer Hauptnavigationsleiste im Header jeder damit verlinkten Seite, wobei zur weiteren Untergliederung höchstens eine Submenüebene verwendet werden sollte. Auf dem Smartphone ist dagegen ein entsprechendes Burger-Menü zu verwenden. Auch ist es sinnvoll - besonders wenn die Website aus längeren Seiten besteht, auch auf dem Footer (u. U. etwas eingeschränkt) eine Navigationsfunktion anzubieten. Diese einfache Maßnahme erhöht erwiesenermaßen die Verweildauer eines Besuchers auf der Webseite, da er ohne zurückzublättern zum nächsten ihn interessierenden Thema wechseln kann. 

Weitere Möglichkeiten, die Navigation auf einer komplexen Website zu verbessern, ist die Verwendung von sogenannten "breadcrumbs", mit deren Hilfe dem Besucher angezeigt wird, in welcher Verzweigung er sich innerhalb der Website gerade befindet. 
Weiterhin ist es überlegenswert, ob man dem Webseitennutzer im Header nicht explizit eine Suchfunktion anbietet, mit denen eine gezielte Suche nach Begriffen auf der Website möglich wird. Und natürlich - bauen Sie Links in den Text Ihrer Webseite ein. Eine gute interne Verlinkung (für die es auch Regeln gibt) macht Ihre Website auch zugleich SEO-freundlich. Google und Co. werden es Ihnen mit einem besseren Ranking danken. 

Einheitliches Erscheinungsbild

Achten Sie darauf, dass das gesamte Erscheinungsbild Ihrer Website stimmig ist. Das betrifft das grafische Design der Seiten (funktionell ähnliche Seiten sollten auch immer strukturell und hinsichtlich dem Design, d. h. in dem gewählten Hintergrund, Farbschema und Typographie, gleich aussehen) sowie die Benutzerführung (Hauptnavigation). Selbstverständlich können Sie pro Website durchaus verschiedene Layouts einsetzen, um einzelne Seitentypen separat hervorzuheben. Auf diese Weise können nämlich Ihre Besucher leicht feststellen, welche Art von Informationen die entsprechenden Seiten enthalten. Und genau das ist ein "Plus" in punkto Nutzererlebnis.  

Zugänglichkeit auf allen Endgeräten

Wenn Sie mit dem Cheetah Sitebuilder sorgfältig Ihre Webseiten bauen, können Sie adhoc sicher sein, dass sie auf allen Endgeräten (Desktop, Tablett, iPhone und Smartphone) passabel aussehen ...

Halte dich an Konventionen

Im Laufe der Zeit haben sich auf dem Gebiet des Webdesigns Konventionen herausgebildet, die sich bewährt haben. Solche Konventionen sind z. B.

Jede im Hauptmenü direkt verlinkte Seite besitzt selbst ein gleich aussehendes Hauptmenü im Seitenheader

Ein Randmenü ist immer am linken Seitenrand angeordnet

Jede Seite enthält ein anklickbares Logo, welches den Besucher sofort wieder auf die Startseite bringt

Im Footer gibt es eine Schaltfläche, die den Besucher sofort wieder an den Seitenanfang bringt.

Es werden allgemein verständliche Icons zur Kennzeichnung von Funktionselementen verwendet (z. B. "Einkaufswagen", "Paypal", Soziale Medien etc.pp.)

Wenn Sie sich an allgemein gültige Design-Konventionen halten, vereinfacht das auch aufgrund des Wiedererkennungswertes die Nutzerführung. "Originell sein" ist nicht immer eine gute Wahl wenn es darum geht, eine bestimmte Besucherreaktion zu erreichen.

Glaubwürdigkeit

Passen Sie das Design ihrer Webseite ihrem Zweck an und bleiben Sie dabei seriös. Beschreiben Sie ihr Produkt und ihre Dienstleistung informativ und ehrlich und sparen Sie an Superlativen. Geben Sie Preise an, wenn Sie etwas verkaufen möchten und machen Sie nicht den Fehler, Preisinformationen erst nach Kontaktaufnahme (z. B. über ein Kontaktformular) preiszugeben. Das lässt Ihr Angebot nämlich unseriös erscheinen. Und erfinden Sie keine Fake-Bewertungen. Wenn Sie Bewertungen (z. B. aus sozialen Netzwerken) übernehmen, dann müssen sie auch echt und nachvollziehbar sein.
Banner, welche optisch ansprechend Preise oder Bewertungen als Template vorgeben, finden Sie im Cheetah-Editor unter "Neu" + "Banner" in den Kategorien "Checkout Banners", "Pricing Table" und "Testimonials".

Immer den Nutzer im Fadenkreuz

Denken Sie immer daran - die Webseite muss nicht unbedingt Ihnen, sie muss dem Besucher gefallen. Deshalb steht beim Webseitendesign immer der Nutzer im Mittelpunkt. Die Evaluierung der Nutzerfreundlichkeit ist deshalb ein besonders wichtiger Aspekt, der wähend der Entwicklungsphase der Webseite immer im Auge behalten werden soll: Ist die Webseite auf allen Ausgabegeräte in punkto Farbe, Schriftart und Bedienung optimal? - Stichpunkt "Barrierefreiheit": denken Sie daran, es gibt auch Besucher, die nicht mehr sehr gut sehen können oder farbenblind sind...  Überprüfen Sie vor Veröffentlichung alle (!) Links und stellen Sie sicher, dass sie auch wirklich dorthin führen, wohin sie führen sollen bzw. der Besucher erwartet, dass sie dorthin führen... denn "tote Links" machen keinen guten Eindruck und führen oft dazu, dass der Besucher die Webseite vorzeitig verlässt.

Zittauer Räucherkäse

Einfache Landingpage für ein außergewöhnliches Produkt

Diese Webseite, die lokal über Facebook beworben wird, soll potentielle Gourmets auf ein veredeltes Milchprodukt aufmerksam machen und sie animieren, über das Kontaktformular mit dessen Produzenten Kontakt aufzunehmen...  

Erstellt von Rüdiger Knoche mit dem Builderall Cheetah Sitebuilder

Typ: Einfache Landingpage mit lineare Nutzerführung hin zu einem einfachen Kontaktformular