Dein eigenes Browsergame Teil 3: Das Design

In den ersten beiden Teilen ging es ja um das Konzept und die Programmierung eures eigenen Browsergames. Wenn ihr also hier eingestiegen seid, empfehle ich euch kurz bis nach unten zu scrollen und erst einmal die anderen beiden Teile zu lesen, denn im Grunde genommen baut dieses Browsergame Tutorial auf allen anderen Teilen auf.

Das wichtigste am Design eures Browsergames ist natürlich nicht, dass es möglichst bunt oder toll aussieht, sondern dass es funktional ist und dabei auch noch ziemlich gut aussieht. Ich schätze mindestens 50 % der Nutzer eines Browsergames entscheiden sich auf den ersten Blick für oder gegen ein Browserpiel. Und auf den ersten Blick sieht man den Inhalt und die Story eines Browsergames natürlich nicht. Deshalb muss das Design eures Browsergames einfach stimmen – vom Logo (was natürlich auch extrem wichtig ist), über die Struktur des Navigationsmenüs, den Seitenaufbau bis hin zu der Integration der Werbung. Das Gesamtbild muss rund und logisch sein und natürlich auch zu eurem Thema passen.

Im einzelnen gilt es zu beachten:

• Menüs klar unterteilen und beschriften
• Seitenaufbau einheitlich und logisch gestalten
• Seiten mit Überschriften, Absätzen und Trennern gliedern
• Das Navigationskonzept vorher abbilden

Wenn diese Punkte alle beachtet sind, sollte es mit dem grundsätzlichen Design eures eigenen Browsergames keine Probleme geben. Doch damit ist nur die Halbe Miete gewonnen.

Platz für Werbung!

Auch wenn sich ein Browsergame nicht von Werbung alleine finanzieren kann, ist es wichtig dass ihr bereits vorher Platzhalter für Werbung einbaut. Vor allem solltet ihr beachten, dass das Standardmaß von 468×60 Pixeln für Banner nicht mehr zeitgemäß ist. Da Monitore immer größer, die Auflösungen immer höher wurden ist mittlerweile auch viel mehr Platz für Banner vorhanden. Somit sind die aktuellen Maße für Banner: 728×90 Pixel (Leaderboard), 160×600 (Wide Skyscraper), 336×280 Pixel bzw. 300×250 Pixel (Large Rectangle bzw. Rectangle). Natürlich sollt ihr euer Browserspiel nicht mit Werbung fluten, allerdings sind ein bis zwei Banner pro Seite notwendig um genügend Abdeckung zu haben. Diese sollten auch möglichst prominent, d.h. inmitten der Seite positioniert werden um auch genügend Aufmerksamkeit zu erhalten. Mehr dazu kommt dann im vierten Teil dieser Beitragsserie.

Text statt Bilder!

Immer wieder sehe ich den selben Fehler – auch ich habe ihn gemacht: Navigationsmenüs aus Bildern erstellen. Das ist leider nicht mehr zeitgemäß und hat auch viele entscheidende Nachteile: zum einen sind Bilder keinesfalles barrierefrei (d.h. behinderten-/ blindengerecht), zum anderen sind Bilder und Links in Bildern von Suchmaschinen nicht so beliebt wie Links mit Text. Das ist auch klar, denn was im Bild steht können Suchmaschinen (noch) nicht auswerten. Die Suchmaschinenoptimierung für Browsergames wird auch in einem der nächsten Teile angesprochen.

Aber bloß nicht zu viel Text!

Auch einen Fehler den man in vielen kleinen Browsergames wieder beobachten kann: Die Entwickler des Browsergames überfordern ihre Spieler mit viel zu viel Text. Dabei wollen die Spieler doch gerade ein Spiel spielen und eben nicht an Arbeit erinnert werden. Doch genau das tut viel Text, der vermutlich noch aussieht wie eine Geschäfts-EMail. Mit viel Text wird auch dem letzten Spieler die Lust vergehen.
Wenn es sich einmal nicht vermeiden lässt: nutze lieber Stichpunkte in Form einer Aufzählungsliste oder versuche den Text mit Grafiken, Animationen oder ähnlichem interessanter zu gestalten.

Die Landingpage

Die Landingpage ist die Seite, die ein Nutzer sieht wenn er das erste mal auf euer Browsergame trifft. Von dieser Seite hängt es letztlich ab ob sich der Spieler weiter auf eurer Seite aufhält oder nicht. Die Landingpage muss einen User sofort umhauen und ihm auf den ersten Blick sagen, warum er sich gerade für euer Browsergame entscheiden soll. Hierbei ist es enorm wichtig eure Zielgruppe zu kennen: Wie alt ist sie, was ist momentan „cool“ oder „angesagt“. Außerdem kann man Spieler immer mit Rabatten locken. Schenke ihnen doch zur Registrierung ein paar Einheiten der Premiumwährung. Natürlich „nur für kurze Zeit“ – dann registriert sich der neue Spieler fast automatisch und ohne das er es eigentlich wollte.

Ein paar Tipps zu einer erfolgreichen Landingpage:

• Die Übersicht wahren: Alle Infos auf einen Blick
• Auf alle Kosten und auch keine Kosten hinweisen!
• Das Loginfenster nur klein, Registrierungsformular bzw. Button ziemlich groß

Abschließend bleibt zu sagen: Das Design eures Browsergames wird sich immer wieder ändern müssen. Mit der Zeit wird es Aktualisierungen und vielleicht sogar ein komplettes Redesign geben müssen um den Geschmack der aktuellen Generation immer zu treffen. Insbesondere die Landingpage sollte je nach Jahreszeit (z.Bsp. Weihnachten, Ostern) entsprechend angepasst werden. Dadurch wirkt euer Spiel sehr aktuell. Generell ist es zu empfehlen, dass wenn man vom Design nicht viel Ahnung hat, dies eventuell von einem externen Mitarbeiter oder Freund, Kollegen anfertigen zu lassen. Und natürlich kannst du auch eine Webdesign Agentur wie zum Beispiel CDS Webdesign Berlin mit der Erstellung beauftragen. Slicen kann man das dann in der Regel selber, somit spart man nicht nur viel Arbeit sondern auch viel Geld.

Viel Spaß!

Weitere Teile der Serie: dein eigenes Browsergame

Dein eigenes Browsergam: Teil 1
Dein eigenes Browsergame – Teil 2: Konzept und Programmierung

Dein eigenes Browsergame Teil 3: Das Design, 10.0 out of 10 based on 3 ratings