Die eigene Webseite: Sieben Beispiele, wie sich Journalisten präsentieren

Eine Website ist das Aushängeschild eines Freiberuflers: Doch wie sollte es aussehen? Was wirkt modern? Wie gehe ich mit Fotos um, und welche Schriftart sieht gut aus? Gefühlte zigtausende Designvorlagen lassen fast jeden Homepage-Frischling verzweifeln: Wenn Du eine eigene Seite hast und beim Webdesign so wie ich eher Laie bist, weißt Du, wovon ich rede. Mal ganz davon abgesehen, was denn nun alles drauf sollte. Zeige ich in der Hauptsache Arbeitsproben, oder stelle ich mich als Persönlichkeit in den Mittelpunkt?

Mann malt mit Farben, Creative Commons CC0 stocksnap.io

Dieser Artikel soll mit ein paar Best-Practise-Beispielen Euch bei solchen Entscheidungen helfen.  Per Google und Zufallsprinzip habe ich sieben Webseiten von Journalisten herausgesucht und dem Leipziger Webdesigner Martin Hahn gezeigt. Er beschäftigt sich seit 15 Jahren mit Webdesign und ist Autor des Buches Webdesign – das Handbuch zur Webgestaltung.

Er hat die Seiten beurteilt nach 1. dem generellen optischen Eindruck, der Gestaltung mit Fotos und Grafiken, 2. der Farbkombination, Schriftart und Lesbarkeit sowie 3. der Menüführung und Navigation. Kurz vornweg: Alle Websites haben von ihm ein positives Feedback erhalten. Aber es ist wie bei jedem Artikel oder Fernsehbeitrag: Nix ist so perfekt, dass sich nicht noch etwas verbessern ließe :-).

Ansicht der Webseite von Louisa NoackLouisa Noack

Auf den ersten Blick eine sehr moderne Seite, mit einer Designvorlage von WordPress erstellt. Viele Porträtfotos machen die Präsenz sehr persönlich, und die Persönlichkeit kommt gut rüber.

Die Rot-Grau-Töne der Seite wirken sehr markant und selbstbewusst. Positiv: Das Grau nimmt sich gegenüber den Fotos etwas zurück, so dass die Bilder stärker wirken. Der Fließtext ist allerdings mit 13 Pixel zu klein – besser wären 16 Pixel.

Die Navigation könnte etwas klarer sein. Was verbirgt sich hinter Menüpunkten wie „Let’s talk about sex“? Andererseits sind diese Menü-Überschriften originell und passen zum Charakter der Seite, die etwas verspielt und leicht anders wirkt.

 

Ansicht der Webseite von Silke Burmester

Silke Burmester

Erster Eindruck: Die Seite geht in Richtung Blog oder Newssite. Die Gestaltung ist schlicht und übersichtlich. Nicht sofort klar wird aber, wo man ist und um wen es geht. Das Porträtfoto ist gut, passt zur Seite und nimmt den Blauton des Design wieder auf.

Die Farbkombi von hellgrau und dunkelblau wirkt angenehm einfach und zurückhaltend, doch nicht langweilig. Die Textzeilen könnten kürzer sein, sie bestehen aus teilweise bis zu 18 oder 20 Wörtern. Als ganz allgemeine Faustregel kann man sagen, das Zeilenlängen mit etwa acht bis zwölf Wörtern gut lesbar sind.

Die Navigation ist selbsterklärend, auch wenn der Punkt „Podium“ sich nicht gleich erschließt.

 

Ansicht der Webseite von Tina SrowigTina Srowig

Die Seite wirkt modern und persönlich. Sehr gelungen: die Kombi aus Überschriften und Fotos wie etwa bei „Starke Bilder“ oder „Starke Geschichten“. Die visuelle Aussage der Bilder und die kurzen Headlines greifen perfekt ineinander – das ist stark und sowas gibt’s auf nur wenigen Webseiten. Die Seite hat nur wenige Fotos, hier lässt man eher die Referenzen für sich sprechen. Einzig die Icons wie „Hörfunk“ und „On Air“ wirken etwas zu groß und dominant.

Die schlichte Schriftart ist gut lesbar. Der Schwarz-Weiß-Kontrast mit dem Untergrund ist sehr stark und fast etwas zu extrem. Dunkelgraue Schriftfarbtöne passen auf rein weiße Hintergründe generell besser und würden auch hier vorteilhafter wirken. Die Textzeilen sind wie im Beispiel 2 etwas zu lang.

Die Navigation ist in Ordnung, die Menüpunkte klingen etwas allgemein. Hier erkennt man den Portfolio-Charakter der Seite.

 

Ansicht der Webseite von Martin PieckMartin Pieck

Das schöne Foto lässt zuerst fast eher eine Modelseite vermuten – es ist kein typisches Journalistenmotiv. Die Seite ist modern, kompakt und im Vergleich etwa zu Beispiel 3 schneller scrollbar. Ein sogenannter „One-Pager“, der den Vorteil hat, dass man auf einer Seite bleibt und nicht umherklicken muss – obwohl der Inhalt umfangreich ist.

Die Lesbarkeit der Open Source-Schrift  „Open Sans““ – die übrigens viele Templateseiten verwenden – ist okay. Doch der Text könnte etwas dunkler sein – diese Art von mittlerem Grau hat etwas zu wenig Kontrast.

Die Navigation ist gut nachvollziehbar. Der Lebenslauf, der als Timeline angelegt ist, kommt jedoch etwas lang daher. Beim Lesen muss man von links nach rechts springen – das macht es dem Betrachter etwas schwierig.

 

Ansicht der Webseite von Marco MaurerMarco Maurer

Eine Webseite fast nur mit Text gestaltet: Typographisch sehr interessant! Damit hebt sich diese Seite ab von vielen anderen Webseiten. Die Schriftart wirkt edel und fein ausgestaltet. Hier hat sich jemand Mühe gegeben und man spürt typografische Liebe zum Detail. Dennoch: Gar kein Foto lässt alles schnell etwas trocken wirken.

Auf den hellbeige angelegten Hintergrund passt die schwarze Schrift. Man hat den Eindruck, eine Zeitung zu lesen.

Die Navigation wirkt fast etwas klein mit ihrer 14 Pixel großen Serifenschrift. Es ist zudem ziemlich viel an Info drin verpackt: Vier Kategorien (Schwerpunkte, Medien, Über mich, Kontakt), und bei „Schwerpunkte“ sieben Unterpunkte. Als Faustregel für eine Navigation gilt: Insgesamt nicht mehr als sieben +/- zwei Hauptpunkte einsetzen. Mehr ist schwer überschaubar für den Besucher. Und die Unterpunkte besser als Drop-Down-Menü lösen, wie es bei vielen Webseiten auch umgesetzt wird.

 

Ansicht der Webseite von Gregor LandwehrGregor Landwehr

Auf den ersten Blick: Sehr individuell! Ein originelles Foto mit Überraschungseffekt, das wunderbar wirkt durch das alte Gemälde im Hinter- und den Apple-Mac im Vordergrund. Dazu ein kurzes „Hallo!“ zur Begrüßung – das mutet fast selbstironisch an, auch weil der Blick in die Kamera vermieden wird. „Das iss’n Typ“, ist so der erste Eindruck. Auch wenn ich als Betrachter erstmal keine Info habe, wo ich bin. Eine kurze und knackige Seite mit einem sehr edlen Hauptbild, doch beim Runterscrollen fühlt man einen leichten Stilbruch: Die anderen Fotos, etwa bei „Über mich“, passen nicht mehr zum Hauptbild.

Die Typo im Logo ist eine markante Serifenschrift, klassisch-edel. Wirkt wie alter Adel. Im Fließtext wird dann eine schlichte Standardschrift („Source Sans Pro“) verwendet, die schon fast wieder etwas langweilig wirkt.

Das Navigationssymbol oben rechts aus drei Linien – in der Fachsprache „Hamburger Icon“ – ist sehr klein. Etwas irritierend: Man erwartet da ein umfangreicheres Menü, doch es befinden sich „nur“ das „Impressum“ und der „Kontakt“ dahinter. Die Seite ist ebenfalls ein sogenannter „One Pager“, das heißt man muss als Betrachter nicht umherklicken, sondern hat alles kompakt zusammen.

 

Ansicht der Webseite von Philipp SteuerPhilipp Steuer

Sehr persönliche Seite. Und er bringt in der Headline seinen „Elevator Pitch“  gleich unter, so dass man sofort erfasst, was er zu bieten hat. Das ist klasse, und dafür ist auch ein eher flapsiges „Hi, ich bin Philipp“ in Ordnung. Das Foto ist markant, denn es zeigt einen markanten Typen. Und die Gestaltung mit Icons bei „Leistungen“ wirkt modern. Prima Webpräsenz!

Die rot-schwarz-weiße Farbgebung ist markant und wirkt jung, hipp und selbstbewusst. Die Schrift ist mit 20 Pixel wunderbar groß, auch das wirkt strahlt Selbstbewusstsein aus. Die Zeilen sind teilweise etwas zu lang.

Die Navigation ist kurz und klar. Das Impressum könnte mit ans Seitenende in den Footer, dann wären in der Navigation oben nur vier Punkte.

Martin Hahn, Foto: privatUnd, wie gefallen Dir unsere ausgewählten Journalisten-Websites? Martin Hahn hat für alle, die sich gerade über eine eigene Seite Gedanken machen, bereits eine zusammenbauen oder ihre schon vorhandene Webpräsenz mal überprüfen wollen, noch sechs Designtipps.

Auf die Lesbarkeit achten.

Content is King und gute Typografie macht diesen lesbar: Ausreichende Schriftgröße (ca. 16 Pixel, ist natürlich immer auch von der gewählten Schriftart abhängig), gut lesbare Schriftarten, die im Idealfall auch noch die Thematik des Textes unterstützen. Dazu Zeilenabstände, die diese Bedeutung auch verdienen (ca. 150 Prozent der Schriftgröße, eher noch mehr) und nicht zu lange Zeilenlängen – ca. acht bis zwölf Wörter.

Übersichtlich gestalten.

Der Besucher sollte sich schnell orientieren können: Wo bin ich hier und was kann ich hier machen. Dazu möchte er schnell die Inhalte abscannen. Die Inhalte sollten also klar erkennbar und gut abgegrenzt sein. Dies lässt sich durch ausreichend Weiß- oder Leerraum oder Farbflächen umsetzen, wie auch durch eine klare Gliederung mit Überschriften, Listen, Absätzen usw. Dazu sollte die Seite nicht zu überladen an grafischen Elementen sein, die zu sehr ablenken würden.

Farben sorgfältig auswählen.

Farben sind emotional wirkend und erzeugen unmittelbar einen Eindruck, schon bevor der erste Text gelesen wurde. Sie sollten einerseits zur Thematik passen und die gewünschte Aussage unterstreichen. Dazu sollte der Hell-Dunkel-Kontrast zwischen Textfarbe und Hintergrundfarbe groß genug sein. Ein Text in einem mittleren Grau auf einem weißen Hintergrund ist dies eher nicht. Ein reines Schwarz auf Weiß wird in Printmedien gern genommen, ist im Web aber auch schon wieder ein zu harter Kontrast. So hat sich für Fließtexte ein dunkles Grau auf Weiß als ausgewogen etabliert.

Die Verständlichkeit nicht vergessen.

Menüpunkte, Überschriften, aber auch Fließtexte sollten nicht Ausdruck der eigenen überbordenden Kreativität sein, sondern vor allem: verständlich, leicht nachvollziehbar. Der Besucher möchte nicht raten, welche Inhalte sich hinter einem unverständlichen Menüpunkt verbergen.

Auf die Flexibilität achten.

Die Nutzungssituation der Webseitenbesucher kann sehr unterschiedlich sein. Ein Webdesign passt sich dem Anwender, seiner Benutzungssitutation und seinem Ausgabegerät an. Es ist responsiv, also nicht festgelegt auf eine bestimmte Situation, auf ein bestimmtes Gerät und vor allem nicht auf eine bestimmte Bildschirmgröße. Umgangssprachlich meint dies vor allem die Anpassung der Webseite für mobile Endgeräte.

Und: Ladezeit im Blick haben.

Weniger ist mehr – das trifft vor allem auf die Datenmenge und Ladezeit zu. Jedes Bild, jeder „Effekt“, bedeutet meistens automatisch mehr Ladezeit. In Zeiten von schnellen Verbindungen auch oft kein Problem, aber diese sind nun mal nicht überall jederzeit erreichbar. Wer mit seinem Smartphone unterwegs ist, will zu Recht nicht auf die Darstellung der Texte lange warten, weil zuerst mehrere großformatige Bilder geladen werden müssen.

Auf Martin Hahns Blog findest Du übrigens viele weitere Hinweise zum guten Look einer Webseite, inklusive einer Webdesign-Checkliste. Und natürlich ist er auch bei Twitter sowie bei Instagram zu finden.

Hast Du eine eigene Webseite? Woran hast Du Dich beim Gestalten orientiert? Lass uns wissen, welche Homepages Dir gefallen – per Kommentar hier oder als Tweet an @Heiko_LE!

 

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s