VividVisions • information design

All posts filed under “Design”

Designing The Vienna Project

The game

If you live in Austria and are a fellow citizen of the Social Web, then you probably have already heard of The Vienna Project, a LARP spy game which will take place in Vienna on 22nd of August. Until then, interested parties have to solve a series of riddles in order to be recruited as one of 16 “agents”, who will then participate in the game with the mission to unravel the mystery of a vanished colleague.

The game is mostly organised and promoted via social networks like Twitter and Facebook by its creator Roman Mittermayr and his team, all in their free time. Although I’ve never played a single LARP game, this one kept my interest and I was looking forward to the unveiling of the official website:

Old screenshot of theviennaproject.com

I must say, while I really liked the image of the hatted agent, the website just wasn’t what I had expected. But a few minutes later, Roman twittered:

“And pls don’t destroy me on usability, design or the small font-size :) Do a new awesome design for free and I’ll make you god for a day.”

Having had a few hours on my hands, I didn’t need to be told twice.

The inspiration

To get myself into the right mood, I compiled a playlist of a few suitable film scores and started to scribble.

Album covers of music I used as an inspiration for the design

Being a huge fan of spy movies (especially those with Bond, James Bond), I wrote down a few attributes I like about them in particular: Secrecy, puzzles, suspense, action, deception, … Now I had to decide which ones I could incorporate into the design within the limited time at my disposal.

The design

I wanted to give the viewers the feeling of already being part of the game, so I created a scene, where they slip into the role of an agent who’s browsing through confidental documents in darkness, using a flashlight. To add atmosphere, the light can be moved with the mouse on the start page.

The Austrian passport was added as tribute to another characteristic I love about spy movies: The numerous locations shown. Bond, for example, travels halfway across the world in the course of a single mission.

New design of theviennaproject.com

New design of theviennaproject.com 2

The resources

Providing a layout for free is one thing, having to pay for the necessary graphical material out of your own pocket is another. ;-) Luckily, SXC proved to be a valuable resource for royalty-free photos for this project. A big thank you to:

For the moving flashlight on the start page, I used a PNG image, a few lines of JavaScript (on top of jQuery) and CSS. No Flash.

The reactions

Roman's tweet: WOW! Walter from @VividVisions (follow!!!) did an outstanding job on re-designing the #tvp09 website, more soon. This is seriously perfect!

I received a lot of positive feedback on the redesign like the one above. Thank you!!


The new Firefox logo: Small changes, big impact

The upcoming 3.5 version of Firefox will feature a revised logo, which I just love. It was created by Anthony Piraino, icon artist at The Iconfactory, and is based on conceptual artwork by Stephen Horlander and sketches by Jon Hicks, who created the original logo in 2004.

Firefox logos

Don’t you just love the smoother fox and the 3D effect on its tail? I could look at it all day! ;-)

For more information about the design process and the creative brief (worth seeing!), read the blog of Alex Faaborg, principal designer at Mozilla. You can download the new logo in various formats at the Mozilla Wiki.


Website Check: oevp.at

Vor kurzem wurde mit großem Tamtam die neue „Homepage”, sie meinten eigentlich „Website” (Warum?), der Österreichischen Volkspartei vorgestellt. Nachdem die Politik in Österreich dem Thema Web etwas hinterher hinkt, war ich sehr gespannt auf das Ergebnis des Neustarts. Zeit für ein bisschen gratis Consulting in Form eines Website Checks.

Generelles Design

Dass die neue Optik der Website ziemlich obamaesk anmutet, ist nicht nur mir aufgefallen, auch in das Design Tagebuch hat sie es deswegen geschafft. Gut, sich die überaus erfolgreiche Online-Kampagne von Herrn Obama als Vorbild zu nehmen ist jetzt sicherlich nicht verkehrt, nicht zuletzt, weil ja Nachahmung laut Oscar Wilde die höchste Form der Anerkennung sein soll. Der Nachteil solcher großen Fußstapfen ist halt nur, dass man dann auch dem Vergleich standhalten muss, was aber meiner Meinung nach hier nicht der Fall ist.

Vergleich oevp.at und barackobama.com

Das Design wirkt auf mich generell unruhig und unstimmig. Im Gegensatz zum „Original” präsentiert es sich nicht aufgeräumt, die einzelnen Elemente sind teilweise zu dicht gedrängt. Ein optisches Ungleichgewicht entsteht auch durch die zentrale Ausrichtung mit den rechtslastigen (internen) Werbebannern.

Web-Standards

Die Umsetzung eines Designs mittels standardkonformer (X)HTML und CSS ist das Fundament einer professionellen und zeitgemäßen Website. Eine Prüfung mit verschiedenen Validierungs-Tools zeigt hier leider einige Fehler, sogar der RSS-Feed entspricht nicht den Vorgaben.

Ob dies nun ein Indiz dafür ist, wie gut sich diese Partei an Regeln halten kann, sei dahingestellt ;-) , die handvoll Fehler im XHTML-Quellcode könnten jedenfalls leicht ausgebessert werden. Die Herausforderung liegt hier auch darin, die Standardkonformität auch über längere Zeit aufrecht zu erhalten. Laut Jürgen Koller von Kollermedia.at waren es auch schon mal viel mehr Fehler, es wird also fleissig daran gefeilt.

Aber auch in den Style Sheets gibt es noch hauptsächlich Flüchtigkeitsfehler. Nur ein paar Anweisungen, die nur der Internet Explorer versteht, sollten verschwinden oder, wenn es denn wirklich sein muss, zumindest über Conditional Comments vor anderen Browsern (und anderen Betrachtungssystemen) versteckt werden.

Übrigens, nur um der Gerechtigkeit genüge zu tun: Barack Obamas Website ist auch größtenteils nicht standardkonform.

Accessibility

oevp.at Menü

Auch in Bezug auf die Barrierefreiheit ist die Website oevp.at noch nicht da, wo sie eigentlich sein sollte. Eine Prüfung nach den WAI-Richtlinen ergibt wieder einige Fehler. Eine der Faustregeln für Barrierearmut lautet außerdem, dass die Website auch ohne Einsatz von Style Sheets und JavaScript logisch erfassbar und verwendbar sein sollte. Deaktiviere ich beides, erhalte ich leider nur recht unstrukturierte Inhalte und unnötige Elemente, wie zum Beispiel einige leere Buttons auf der Startseite.

Auch störend ist die relativ kleine Schriftart im Hauptmenü und das halbtransparente Untermenü, wo sogar ich mit meiner 3/4 Dioptrie Probleme habe, die einzelnen Punkte sofort zu erfassen. Der Farbkontrast könnte an manchen Stellen auch ruhig stärker sein.

Zwar gibt es auf der Website eine Funktion zur Vergrößerung der Schrift, nur nutzt diese wenig, wenn zum Beispiel das Hauptmenü oder der Fußteil davon gänzlich unbeindruckt bleiben oder das Layout so starr gebaut wurde, dass ich dann lauter Scrollbalken habe, weil die Inhalte sprichwörtlich ihren Rahmen sprengen. Mittlerweile bieten alle gängigen Browser (und auch Betriebssysteme) Benutzungshilfen, wie zum Beispiel Vergrößerungen, an, die wesentlich effektiver arbeiten, als die Funktion auf der Website.

oevp.at bei großer Schriftgröße

Usability

Hier gäbe es jede Menge Verbesserungspotenzial. Hier nur einige Punkte:

Links

Es wird sehr schnell deutlich, dass es kein durchgängiges Konzept für Links gibt. Bei den Teasern ist unintuitiver Weise der Inhalt der Link zum ganzen Artikel, dann gibt es anderswo wieder blaue Links, dann sind sie wieder grau… Alles in allem nicht durchdacht und verwirrend. Die Grundregel aus Sicht des Besuchers „Don’t make me think!” wurde hier leider nicht beachtet.

Links auf oevp.at

Navigation

Ein weiteres Manko ist, dass ich weder durch eine optisches Kennzeichnung im Menü, noch über den (nicht vorhandenen!) Seitentitel, noch über eine sprechende URL erfahre, wo in der Struktur ich mich gerade befinde. Der einzige zarte Hinweis ist der große Balken, wo die Überschrift des Hauptmenüpunktes steht, die aber teilweise auch inkonsequent ist („Politik” im Hauptmenü heißt „Themen” im Balken). Wozu überhaupt dieser Balken? Ein Menü mit Hervorhebungen löst den Balken ab und ich spare jede Menge Platz für Inhalte.

oevp.at Header

Mag auch sein, dass Herr Pröll wichtiger ist als andere Teammitglieder, ihm aber einen eigenen Hauptmenüpunkt zu widmen, obwohl seine Seite sowieso unter dem Menüpunkt „Team” zu finden ist, zerstört die Logik der Navigation. Shortcuts sollte man anders gestalten und ein Menü stets die Seitenstruktur abbilden.

Top Stories mit Passwort

Ein Highlight ist auch, dass ich vom Firefox jedesmal gefragt werde, ob ich mein Passwort speichen möchte, wenn ich mich auf der Startseite durch die „Top Stories” klicken möchte. Offenbar wird hier gleich jedes Mal das davon eigentlich unabhängige Login-Formular mitgeschickt.

RSS Feed

Wenn ich schon einen RSS Feed anbiete, dann sollte dieser auch über entsprechende Meta-Tags eingebunden werden, damit auch Browser und andere Tools wissen, dass dieser existiert und ein Abonnement kinderleicht wird, weil man nicht auf der Seite nach etwaigen Icons suchen muss.

Sprechende URLs

Sprechende URLs, also zum Beispiel oevp.at/links/teilorganisationen statt oevp.at/links/index.aspx?pageid=38038, machen die Website sowohl für Menschen als auch Maschinen weitaus nutzbarer.

Suchmaschinenoptimierung

Die ÖVP möchte offenbar auch nicht gut gefunden werden. Meta-Tags für Stichworte und Kurzbeschreibung fehlen komplett, viel schlimmer ist aber, dass der Titel ausnahmslos „Die Österreichische Volkspartei” lautet, egal auf welcher Seite ich mich befinde. So etwas gefällt Google und Co. überhaupt nicht, den menschlichen Betrachtern übrigens noch viel weniger.

Der tatsächliche Beitrag von sprechenden URLs zur Suchmaschinenoptimierung ist zwar umstritten, unterschätzen würde ich ihn aber auf keinen Fall.

Web 2.0

Die selbst proklamierte Web 2.0-Tauglichkeit beschränkt sich auf Links zu einer handvoll ÖVP-Blogs und etablierten Plattformen, wie zum Beispiel YouTube, Flickr oder Facebook. Die Möglichkeit Beiträge auf der Website zu kommentieren gibt es derzeit noch nicht, laut Fritz Kaltenegger, Generalsekretär der ÖVP, wird das aber zeitgleich mit der Veröffentlichung des neuen Parteiprogramms möglich sein (Quelle: derStandard.at).

Auf die einzelnen Blogs möchte ich hier gar nicht näher eingehen, das hat schon Max Kossatz auf Wissenbelastet.com ausführlich erledigt.

Ein kurzer Blick auf YouTube und Flickr verrät: Viel mehr als Videos von Pressekonferenzen oder Fotos von pressewirksam händeschüttelnden Grinsekatzen gibt es dort nicht. Spektakuläre Betrachungszahlen offenbar deswegen auch nicht.

Die Facebook Fanpage wird hauptsächlich als Aggregator verwendet, woran es jetzt prinzipiell nichts auszusetzen gibt. Wie aktiv die ÖVP dort um einen Dialog mit den knapp 800 Fans bemüht ist, kann ich schwer beurteilen. Offizielle Reaktionen auf die ohnehin spärlichen Kommentare von Besuchern scheint es jedenfalls nicht zu geben.

Fazit

Hier wurde eine große Chance vertan. Abgesehen von den technischen Mängeln: Im Web 2.0 geht es um Authentizität und Dialog. Der neuen Website fehlt es an beidem. Einen großartigen Mehrwert im Vergleich zur alten Version erschließt sich für mich eigentlich nicht.

Dass die Website eine „100%ige Eigenproduktion der ÖVP” ist, halte ich prinzipiell für eine gute Sache, bei so einem Projekt kann man viel lernen. Dass das Ergebnis der Mühen und sicherlich unzähligen Stunden der freiwilligen „Bastler” offenbar mangels professioneller Beratung nicht optimal ist, finde ich äußerst schade.

Auf mich wirkt die Website jedenfalls unprofessionell. Und gepaart mit dem Tamtam rund um die Veröffentlichung macht es für mich den Eindruck, als hätte die ÖVP das Medium Web und dessen Potenzial noch nicht ganz verstanden.

Ich bin jedenfalls gespannt, wie sehr die Partei ihre „Homepage” in nächster Zeit noch verbessern wird.


The Flying Spaghetti Monster as custom shape for Photoshop

Flying Spaghetti Monster as Photoshop custom shapes

Have you ever wanted to include the likeness of the Flying Spaghetti Monster in your artwork? Just download the custom shapes I created and  go in peace to love and serve the FSM. RAmen! ;-)


RSS icons as custom shapes for Photoshop

RSS icons as custom shapes for Photoshop

Over at feedicons.com, you can download the well-established icon for RSS feeds in different sizes, colours and formats. Unfortunately, their PSD files are just rendered images, so I created a custom shape set for you to play with. You can download it here.

Also, I recreated the orange version of the icon just by using these shapes and a few layer styles. Download the PSD file here.

RSS Feed icon 128 x 128 pixels

Twitter

Loading my tweets...