In der Serie Website erfolgreich aufbauen beschreibe ich den Aufbau einer eigenen Website und berücksichtige dabei alle wichtigen Schritte. Im 4. Teil der Serie erkläre ich, was anspruchsvolles Design bei einer Website ausmacht und gebe dazu auch einige Beispiele.
Im Artikel Welche Seiten sollte ein Blog oder eine Website haben? habe ich bereits beschrieben, welche Seiten in einem Blog oder einer Website nicht fehlen dürfen. In diesem Teil möchte ich beschreiben, welche Elemente ein gutes Website Design ausmachen und auf was man achten muss.
Inhalt der Serie Blog erfolgreich aufbauen
- Teil 1: Vorbereitende Maßnahmen
- Teil 2: Zielgruppe definieren
- Teil 3: Auswahl der Plattform
- Teil 4: Anspruchsvolles Design
- Teil 5: Inhalt strukturieren
- Teil 6: Ziele setzen
- Teil 7: Artikel schreiben
- Teil 8: Artikel und Website Promotion
- Teil 9: Traffic Tipps
- Teil 10: Suchmaschinenoptimierung
- Teil 11: Mehrwert für die Besucher im Auge behalten
- Teil 12: Statistiken auswerten
- Teil 13: Social Media
- Teil 14: Nachhaltigkeit anstreben
- Teil 15: Website Wachstum ist das A und O
Teil 4: Anspruchsvolles Design
- Den Inhalt im Fokus
Eine Website oder ein Blog ist nichts ohne Inhalt. Ein gutes Design regt den Besucher an, sich auf die Inhalte zu konzentrieren. Die Leser zu sehr mit vielen Bildern oder anderen Elementen zu stören, kann sich negativ auswirken. Aus diesem Grund sind die meisten Blog Designs sehr einfach gehalten. Die Einfachheit ist wichtig, wenn man den Inhalt zur Geltung bringen möchte. - Leichte Navigation
Die meisten Besucher kommen über Suchmaschinen, Links von anderen Seiten, RSS Feeds oder Social Media Seiten auf die Website. Nur ein kleiner Prozentsatz der Besucher besucht die Website durch Direkteingabe der URL. Das macht die Navigation zu einem sehr wichtigen Instrument. Die Sidebar (in Websites meistens links und in Blogs oft auch rechts) enthält typischerweise die meisten Möglichkeiten zur Navigation. Dazu zählen Links zu den Kategorien, letzte oder populäre Artikel und oft auch eine Tag Cloud (Stichwort Wolke). Im Footer (Abschnitt unten in der Website) sind oft auch Links zur Navigation enthalten. Ganz klassisch und sehr wichtig für die Navigation ist die Menüleiste, hier im Weblog-ABC wie auch in den meisten anderen Websites oben zu finden. - Schnelle Ladezeiten
Bei den meisten Besuchern ist die Spanne der Aufmerksamkeit sehr gering. Laden die Seiten zu lange, verlassen diese Besucher die Website schnell wieder anstatt zu warten. Um das Verlassen der Website zu verhindern, muss die Website schnell angezeigt werden. In vielen Blogs sind unzählige Widgets installiert, welche das Laden der Seite extrem verlangsamen. Eine Website sollte einfach gehalten sein. Alle zusätzlichen Tools sollten gut überlegt werden. Kosten (Ladezeit…) und Nutzen sollten in einem gesunden Verhältnis zueinander stehen. Plugins zur Beschleunigung einer Website bringen nach meinen Erfahrungen eher nichts. Ich kann hier nur für die WordPress Plugins sprechen. Da muss man viel technisches Wissen mitbringen, um mit den Plugins wirklich die Ladezeiten zu verbessern.
- Content nach oben
Der Besucher sollte möglichst nicht scrollen müssen, bevor der eigentliche Inhalt sichtbar wird. Viele bevorzugen sogar Websites, die zumindest auf der Startseite ganz ohne scrollen auskommen. In einem Blog ist das schwer zu erreichen, zumal die zeitliche Anordnung der letzten Artikel ein wichtiges Kriterium für Blogs ist. Aber dennoch, die Seitenzugriffe werden steigen, wenn man es schafft, auf der Startseite ohne scrollen auszukommen. Davon bin ich überzeugt. - Einprägsam für die Besucher
Die meisten Leser besuchen eine gewisse Anzahl an Websites jeden Tag. Design Grundlage sind oft ähnliche Themes. Macht es euren Lesern leicht, den Blog in Erinnerung zu behalten. Ein individuelles Design kann dabei helfen. Ein wenig technisches Verständnis vorausgesetzt, lassen sich die Themes sehr leicht anpassen und erweitern. Das führt zu Einzigartigkeit und lässt die Website in guter Erinnerung bei den Lesern. Hier im Weblog-ABC habe ich einige gute WordPress Themes aufgelistet. - Farbenwahl
Am effektivsten ist es, mit Farben das Blog Design zu verbessern. Es gibt viele gute Artikel im Netz, die sich mit diesem Thema beschäftigen. Ein meines Erachtens herausragendes Beispiel für die Macht der Farben ist die Seite wordpress.org. Viele navigieren zu WordPress, um die neueste Version zu downloaden. Auch WordPress hat grosses Interesse daran, dass möglichst viele User die Software runterladen und einen Blog veröffentlichen. Der „Download Button“ rechts oben fällt sofort ins Auge. Perfekt gemacht!
- Nicht zu viel Werbung
Es ist in Ordnung, wenn man mit seiner Website Geld durch Werbung verdienen möchte. Wichtig für das Design einer Seite ist, dass mit Werbefläche nicht zu großzügig umgegangen wird. Der Leser ist König und sollte sich stets im Mittelpunkt fühlen. Dezent angebrachte Werbung stört nicht weiter und die Besucher kommen wieder. - Kompatibilität mit verschiedenen Browsern
Die Besucher nutzen unterschiedliche Browser. Hier im Weblog-ABC nutzen die meisten Safari Firefox und an zweiter Stelle steht der Internet Explorer von Microsoft. Es kommen aber täglich Besucher mit den unterschiedlichsten (und sehr seltenen) Browsern. Es ist wichtig, dass die Seite auch mit verschiedenen Browsern gut aussieht. In meinen Artikel Website Analyse Tools habe ich mit dem Total Validator einen Dienst vorgestellt, der eine Website mit verschiedenen Browsern testet und Screenshots zur Verfügung stellt. Das sollte reichen. - Leicht zu lesen
Hier geht’s mehr darum, den Inhalt eines Blogs zu formatieren. Weniger um das Design. In den Posts Blog Artikel richtig schreiben und 10 Tipps für das Schreiben eines Blog Artikels habe ich bereits beschrieben, wie gute Artikel aussehen sollten. Das Scannen von Artikel Inhalten ist sehr wichtig. Überschriften, Listen, Fettschrift etc. sind wichtig und machen es den Lesern einfacher.
- Wichtige Elemente in die besten Positionen
Effektives Design lenkte die Aufmerksamkeit der Besucher auf die wichtigen Stellen eines Artikels oder einer Website. Die wichtigsten Links, Bilder usw. sollten grundsätzlich auf der ersten Seite angebracht werden. Unnötige Elemente sollten entfernt werden, so dass die Aufmerksamkeit der Besucher auf die wirklich wichtigen Elemente gelenkt wird. - Content is King
Der Inhalt ist entscheidend für den Erfolg einer Website. Das ist uns allen klar. Das Design sollte daher auch dafür sorgen, dass sich die Besucher tatsächlich auf den Inhalt konzentrieren können. Ich sehe immer wieder Websites, die z.B. farblich so schlecht gestaltet sind, dass man den Inhalt kaum vom drumherum unterscheiden kann. - Bilder für das Internet optimieren
Eine schnelle Ladezeit ist wichtig. Das habe ich weiter oben schon geschrieben. Gerade bei grossen Bildern dauert es oft zu lange, bis die Bilder angezeigt werden. Die Besucher sind ungeduldig und verlassen daher oft die Seite schnell wieder. - Freien Platz lassen
Eine Website wirkt viel aufgeräumter und professioneller, wenn man freien Platz läßt und nicht jede freie Ecke mit Informationen vollstopft. Wer auf seiner Seite freien Platz läßt, kann farblich abgestimmt auch gut auf bestimmte Informationen hinweisen.
Beispiele für gutes Webdesign
Ein gutes Beispiel für Webdesign ist meines Erachtens die WordPress Website. Alles wirkt sehr aufgeräumt, das Menü ist sofort ersichtlich und der wichtigste Inhalt „Download WordPress“ sticht sofort jedem ins Auge. Zudem hat es WordPress geschafft, tatsächlich ohne scrollen auszukommen. Hut ab!
Ein weiteres gutes Beispiel für Webdesign ist auch der Internetauftritt von Smashingmagazine. Alles wirkt etwas voller als bei WordPress, aber immer noch mit ausreichend Freiräumen. Die Navigation ist oben und auch in der Sidebar rechts zu finden. Smashingmagazine ist für mich der klassische Blog. Alle wichtigen Blog Elemente sind enthalten. Ob Menüleiste, Sidebar Navigation, Anmeldung zum RSS Feed, Newsletter oder einfach nur eine Blog Suche. Alle wichtigen Elemente sind vorhanden und gut übersichtlich angebracht. Wirklich nicht schlecht!
Noch ein gutes Beispiel für Webdesign ist der Internetauftritt von CMS-Testlabor. Alles wirkt sehr gut strukturiert und man erkennt klar, wohin die Aufmerksamkeit der Besucher gelenkt werden soll. Auf den orangenen Button „Finden Sie das richtige Tool“ in der Mitte. Über diesen Link werden die Besucher zum Kern der Website geführt, den Testberichten der Homepage Baukästen. Weiter unten gibt’s auf der Startseite noch die Möglichkeit, sich für den Newsletter anzumelden. Das ist auch geschickt gemacht. Wer nach unten scrollt bleibt automatisch mit den Augen am Newsletter hängen und meldet sich vielleicht auch an. Alles sehr durchdacht und gut gemacht.
Bücher und sonstige Tipps
WordPress – Das umfassende Training*
WordPress – Das Praxisbuch*
Webseiten professionell erstellen: Programmierung, Design und Administration von Webseiten*
Core Design Studio Berlin
Kennt ihr weitere Beispiele für gutes Webdesign? Dann schreibt doch einen Kommentar!
Hallo Andreas,
steh ich da etwa mit dem Smashing Magazine in der gleichen Liste!? Vielen Dank für das Lob, hat mich sehr gefreut!
Grüße,
Robert
Hallo Robert,
was die Besuchszahlen und Bekanntheitsgrad angeht, stehst Du (leider) nicht in der gleichen Liste wie das Smashingmagazine. Aber Deine Seite ist super gemacht und zeigt, dass Du viel von Webdesign verstehst. Gerade auch für Simplicity und auch Navigation dient das CMS-Testlabor als sehr gutes Beispiel. Dann können sich einige eine Scheibe abschneiden.
Gruß Andreas
„was die Besuchszahlen und Bekanntheitsgrad angeht, stehst Du (leider) nicht in der gleichen Liste wie das Smashingmagazine.“
Ich arbeite daran ;-)
Hallo Andreas,
Ein guter Artikel, der die wesentlichen Punkte, auf die man beim Designen seiner Website achten sollte, beeinhaltet.
Aber ich finde das du den Titel nicht optimal gewählt hast, denn ein anspruchsvolles Design ist nicht unbedingt ein gutes, simple Designs, die dem Benutzer das zurechtkommen auf der Website erleichern (siehe Google) sind auch sehr gute Lösungen. Wenn ich den Artikel umbennen könnte würde er „durchdachtes Design“ heißen, aber das ist nur meine Meinung ;).
Hallo Marius,
um ehrlich zu sein habe ich mir um den Begriff „Anspruchsvoll“ kaum Gedanken gemacht. Ich weiß, gerade der Titel sollte passen. Schande über mein Haupt. ;-) „Durchdacht“ wäre vermutlich wirklich besser gewesen. Anspruchsvoll schließt einfach und durchdacht aber auch nicht aus und ich möchte den Titel aus verschiedenen Gründen nicht mehr ändern (Verlinkung – intern und extern, SEO…).
Danke für den tollen Kommentar & viele Grüße,
Andreas
Endlich bringt es mal einer auf den Punk. Auf einer Webseite muss es nicht immer zischen, funkeln oder explodieren. Einfaches und sauberes Webdesign hat sich bis jetzt immer durchgesetzt.