Webdesign

Seiten für Twitter gestalten

25. Mai 2009
von

Allzu viel erlaubt der Microblogging-Dienst Twitter dem Designwilligen nicht. Es gibt 12 Themes und man kann ein eigenes Hintergrundbild hochladen (Settings –> Design –> Change Background Image). Zudem ist es möglich, die Farben für Links, Sidebar und so weiter anzupassen. Nicht verändert werden kann das Layout. Es können auch keine weiteren Bilder, Links oder Elemente eingefügt werden. Damit lässt sich durchaus einiges anfangen.

Ach übrigens, auch Dr. Web twittert. Follow us

Aber wozu eigentlich? Twitter funktioniert doch auch so. Und viele lesen gar nicht bei Twitter selbst, sondern nutzen Tools oder Mashups. Doch hier gelten dieselben Bedingungen wie sonst auch. Man will für sich oder einen Kunden ein Branding. Es macht Sinn, die Twitterseiten dem eigenen Webauftritt oder Blog anzupassen. Farben, Logo und Gestaltung sollen wiedererkannt werden. Das Design kann etwas über die Persönlichkeit des Twitterers aussagen oder Spaß machen, Emotionen wecken oder einfach zum Thema oder der Stimmung passen.

Screenshot
Farbenfroh mit der Betonung oben links

Da man nur mit einem Hintergrundbild arbeiten kann, ergeben sich eingeschränkte Möglichkeiten. Ein nahtloser Hintergrund (Seamless Pattern), das so genannte Kacheln (Tiled Background) oder die Einzelgrafik in der linken oberen Ecke, die recht groß ausfallen kann. Die Breite des Bildes sollte mindestens für einen Monitor mit 1920 Pixeln reichen. Also, lieber etwas größer oder trickreich das Bild in die Hintergrundfarbe auslaufen lassen, dann kommt man mit wesentlich weniger aus. Auf Wunsch passt Twitter () auch kleinere Images an und nutzt den gesamten Platz.

Screenshot
Hier wird gekachelt

Bei der Gestaltung ist die linke Seite Trumpf, hier spielen die meisten Entwürfe auf. Der rechte Rand tritt weniger in Erscheinung. Das liegt daran, dass ihm oft nicht mehr genug Platz bleibt. Man sollte ihn deshalb nicht für Wichtiges nutzen. Erlaubt sind die Formate PNG, GIF und JPG und zwar bis zu einem Gewicht, das unter 800 Kilobyte liegen muss. Eine Grenze, die man tunlichst nicht ausnutzen sollte.

Screenshot
Komplett durchgestaltet: Brian Paulowicz

Wer will, kann ein Template verwenden. Hier ist das eigentliche Twitter-Fenster mit den späteren Tweets ausgespart, so kann man besser abschätzen, wie das Ganze hinterher aussieht. Solche Templates lassen sich innerhalb dieser Artikel herunterladen:

Chris Spooners Template (.PSD Format) sieht verkleinert so aus:

Screenshot

Berücksichtigen beim Gestalten muss man die Breite des Browser-Fensters. Achtung: nicht jeder ist ein Vollbild-Surfer. Auch wenn die Monitore heutzutage groß sind, der Browser füllt sie keineswegs immer aus. So kommt es, dass einige Twitterpages im Vollbild ihre Wirkung verlieren, während andere erst richtig glänzen können.

Screenshot
Textbotschaften lassen sich über den Umweg einer Grafik ebenfalls nutzen

Eine beliebte Technik besteht darin, ein eigenes Foto in der Ecke links oben zu verwenden. Mit etwas Text und einer Minibio angereicht, wird so aus der simplen Twitter-Seite ein Portfolio.

Screenshot
Selbstportrait in der Ecke. Problogger Darren Rowse aus Australien

Screenshot
Twitterseite mit Portfolioansatz

Für einen eigenen Entwurf eignen sich Vektor Elemente, die sich einfach verändern und variieren lassen. Texturen funktionieren ebenso wie Muster aus dem Generator. Auch Icons werden gern benutzt. ™

Twitter Design Tutorials

Downloads

Galerien mit gelungenen Beispielen

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber diverser Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Vorstand und Mitgründer der Smashing Media AG.

Ein Kommentar zu „Seiten für Twitter gestalten
  1. Martin am 16. November 2009 um 10:27

    Was sagt Dr Web eigentlich zu meiner Twitter-Seite?

    http://www.twitter.com/ritman77

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!