Melden Sie sich hier an, um auf Kommentare und die Whitepaper-Datenbank zugreifen zu können.

Kein Log-In? Dann jetzt kostenlos registrieren.

Falls Sie Ihr Passwort vergessen haben, können Sie es hier per E-Mail anfordern.

Der Zugang zur Reseller Only!-Community ist registrierten Fachhändlern, Systemhäusern und Dienstleistern vorbehalten.

Registrieren Sie sich hier, um Zugang zu diesem Bereich zu beantragen. Die Freigabe Ihres Zugangs erfolgt nach Prüfung Ihrer Anmeldung durch die Redaktion.

B2B- und B2C-Sites

Goldene Regeln für modernes Webdesign

Stefan von Gagern ist diplomierter Medientechniker (FH) und war als Redakteur und Ressortleiter bei den Fachtiteln "Screen Busines Online" und "Page" tätig. Später lehrte er als Dozent für Medienkonzeption im Master-Studiengang "Multimedia Production" an der Fachhochschule Kiel. Heute schreibt er als freier Fachjournalist und Autor über Themen wie Publishing, Internet, Social Media und Digital Lifestyle. Parallel berät er Unternehmen bei der Konzeption und Umsetzung von Social-Media-Auftritten.

Inhalt, Inhalt, Inhalt

Heute wird viel über "Mobile first" diskutiert. Bei dieser Webdesign-Philosophie geht es darum, dass die mobile Website das Wichtigste und damit der Ausgangspunkt des Webauftritts sein sollte. Kein schlechter Ansatz in diesen Zeiten - dennoch etwas kurz gegriffen, weil es wieder fast ausschließlich um die technische Umsetzung geht. Gerne wird vergessen, was der Nutzer möchte: Inhalte! Der Ansatz sollte also eher "Content first" lauten. Der User will und sucht Inhalte auf Ihrer Website. Heißt: Der Inhalt sollte bei allen Überlegungen an erster Stelle stehen und entsprechend im Layout die oberste Priorität haben. Beispiel: Statt sich zu fragen, wo noch eine weitere Seitenleiste hin soll, ist es besser zu fragen, ob man überhaupt eine Seitenleiste braucht, die vom Inhalt ablenkt.

So wird es in der Praxis oft (falsch) gemacht: Bevor Kunde und Webdesigner wissen, welcher Inhalt auf der Seite landet, werden schon Navigation, Menüs und vieles mehr gestaltet.
So wird es in der Praxis oft (falsch) gemacht: Bevor Kunde und Webdesigner wissen, welcher Inhalt auf der Seite landet, werden schon Navigation, Menüs und vieles mehr gestaltet.
Foto: www.elezea.com

"Wenn wir das Layout gestalten, bevor wir Inhalte haben, gestalten wir die Verpackung, bevor wir wissen was drin sein wird. Wenn die Inhalte dann nicht in die Verpackung passen, gibt es nur zwei Möglichkeiten: Neu anfangen, oder den Inhalt in die Verpackung quetschen. Beides wollen wir nicht", schreibt Webdesigner Rian van der Merwe in einem Blogeintrag zu "Content First Webdesign" und betont dabei, dass es oft auch wichtig ist, den Kunden zu erklären, dass sie erst über Inhalte, dann über Grafiken nachdenken müssen.

Der Inhalt passt oft gar nicht in die Wireframes, die für die Seite entworfen wurden.
Der Inhalt passt oft gar nicht in die Wireframes, die für die Seite entworfen wurden.
Foto: www.elezea.com

Aufgeräumt bleiben

Viele Websites sehen immer noch aus wie vor zehn Jahren: Eine einzige Seite wird zugepflastert bis unters Dach. Schon auf der Homepage findet der Besucher eine mehrstufige Navigation, viele Links, ein Suchfeld, Promotionplätze, Bilder, Texte und, und, und… Konsequenz: Vor lauter Kleinteilen findet er oft den Einstieg nicht. Vergleich gefällig? Stellen Sie sich vor, Sie kommen in ein Geschäft, in dem neben der eigentlichen Ware auch noch Kartons, Paletten und anderes herum liegen. Das macht einen Eindruck wie beim Discounter. Stellen Sie sich dagegen einen Apple Store vor: Aufgeräumt wie eine Designer-Wohnung, die Produkte klar im Mittelpunkt, freundlich und hell.

Moderne Websites sehen möglichst aufgeräumt aus. Ein extremes, aber gutes Beispiel ist der Webauftritt von "Ifthisthenthat", einem Dienst, der soziale Medien miteinander vernetzt. Nur ein Satz und ein riesiger Button - das was der Erstbesucher braucht - stehen auf der Startseite. Erst nach dem Einloggen oder Anmelden bekommt er in seinem "Dashboard" das serviert, was er braucht.

Die Website If this then that zeigt gut wie ein minimalistisches, modernes Design aussehen kann: Auf der Homepage...
Die Website If this then that zeigt gut wie ein minimalistisches, modernes Design aussehen kann: Auf der Homepage...
Foto: ifttt.com / Screenshot: Stefan von Gagern
... und nach dem User-Login.
... und nach dem User-Login.
Foto: ifttt.com / Screenshot: Stefan von Gagern

So radikal funktioniert das natürlich nicht auf jeder Website - aber aussortiert oder etwas entschlackt werden kann immer. Auch beim Planen von Funktionen gilt: Weniger ist mehr! Fragen Sie also: Was brauchen wir wirklich? Was wird tatsächlich von den Kunden genutzt?

Der Spaßfaktor

Heute denken Teams ausführlich über Usability, Performance, Mobile, Zugänglichkeit und andere wichtige Themen nach und das ist auch gut und richtig so. Oft werden dafür große Budgets "verbraten". Was jedoch vor lauter Tests und Optimierungen am Ende untergeht, ist der Unterhaltungsfaktor.

Mit nur ein paar kleinen Details können Sie Ihre Website von denen der Konkurrenz abheben. Dröge Seiten gibt es genug da draußen. Denken Sie an solch simple, nette Dinge wie die persönliche Begrüßung in verschiedenen Sprachen, die es bei Flickr gibt. Oder an die beliebten "Google Doodles" zu besonderen Tagen. Oder den Wal, der zeigt, dass wegen Server-Überlastung bei Twitter einmal mehr nichts geht. Es kann auch eine Illustration oder ein Logo sein, eine schöne Schrift oder eine humorvolle 404-Seite.

Auf diese Weise lassen sich peinliche Fehler wie kaputte Links sympathisch verpacken - so dass sie sogar positiv im Gedächtnis hängen bleiben. Manches, wie der Twitter-Wal, wird zum Kult, den jeder kennt und liebt. Humor passt aber natürlich nicht immer: Wer medizinische Geräte verkauft, sollte so etwas bleiben lassen. In vielen Fällen lohnt es sich aber, über den Unterhaltungswert der Seite nachzudenken.

Ein simples Detail wie originelle 404-Seiten können den Unterschied zur Konkurrenz ausmachen: Hier das Beispiel 9gag.com...
Ein simples Detail wie originelle 404-Seiten können den Unterschied zur Konkurrenz ausmachen: Hier das Beispiel 9gag.com...
Foto: 9gag.com / Screenshot: Stefan von Gagern
... und hier lousypennies.com
... und hier lousypennies.com
Foto: lousypennies.com / Screenshot: Stefan von Gagern