t3n News Design

Geh raus und schaffe Unglaubliches! 12 Regeln für mitreißendes Website-Design

Geh raus und schaffe Unglaubliches! 12 Regeln für mitreißendes Website-Design

Man muss eine Menge Dinge beachten, wenn man tolle, mitreißende digitale Erlebnisse erschaffen will.

Geh raus und schaffe Unglaubliches! 12 Regeln für mitreißendes Website-Design

Mitreißendes Design. (Grafik: Legwork)

Als Jury-Mitglied der FWA (Favourite Website Awards) bekomme ich massenweise tolle, mitreißende Website-Erlebnisse von den besten digitalen Talenten der Branche zu sehen. Obwohl es keinen geheimen Trick gibt, wie man einen Website-Award gewinnt, existieren meiner Meinung nach ein paar Faustregeln, die es zu beachten gilt, wenn man eine klare, hochwertige Site schaffen will, mit einer tollen User-Experience und mitreißendem Content, die deine Site einprägsam machen und einen „Hey, die Site muss ich mir mal anschauen“-Effekt bringen.

„Design ist ein subjektives Medium, die Grenzen zwischen richtig und falsch sind fließend.“

In diesem Artikel habe ich ein paar Gedanken dazu gesammelt, was meiner Meinung nach eine tolle digitale Erfahrung ausmacht und was mich motiviert, einer Site eine Ja-Stimme für einen FWA-Award zu geben. Obwohl ich weiß, dass es Wichtigeres gibt als Design-Awards, finde ich es trotzdem gut, dass Organisationen wie die FWA, D&AD, Webby und Awwwards Projekte erkennen, bei denen die Teams dahinter sich mehr ins Zeug gelegt haben, um ihr digitales Produkt und letztlich unser Handwerk auf ein höheres Level zu heben. Auf eine Art ist das eine Gamifizierung unserer Arbeit, die Verwandlung in einen sympathischen Wettbewerb. Spaß!

Mitreißendes Website-Design: 12 wertvolle Regeln

Hier kommt die Liste meiner persönlichen Gedanken zu dem, was man tun und lassen sollte, um ein tolles, mitreißendes Erlebnis zu schaffen. Das alles ist völlig subjektiv. Einige Punkte überschneiden sich vielleicht, mit einigen bist du vielleicht nicht einverstanden und einige widersprechen sich vielleicht ein wenig. Das zeigt nur umso mehr, dass ein subjektives Medium ist, mit sehr fließenden Grenzen bezüglich dessen, was korrekt ist und was nicht. Dieser Artikel ist lediglich meine Interpretation der Dinge, auf die ich schaue, wenn ich eine Website bewerte. Ich werde die folgenden Richtlinien kontinuierlich durch weitere Punkte updaten. Los geht’s!

1. Klares Werteversprechen

Es geht vielleicht auch, ohne es explizit zu sagen, aber es ist sehr wichtig, dass deine Site ein klares Werteversprechen besitzt. Warum gibt es sie? Was ist der Zweck? Das sollte klar kommuniziert werden, entweder direkt oder indirekt. Jede Designentscheidung sollte um diesen Zweck kreisen. Sei konsistent, lass alles weg, was von der Vision ablenken könnte, die du schaffst. Wenn Nutzer auf deiner Site landen, sollte es sofort klar werden, was deine Site macht und ihnen zu bieten hat. Das kann zum Beispiel eine deutliche Beschreibung des Zwecks sein wie im Beispiel unten. Was auch immer dein Werteversprechen ist, es sollte klar und für deinen Nutzer sinnvoll sein.

award01
Creative Cruise von Superhero Cheesecake bezieht seine Geschäftsidee - Bootstouren durch Amsterdams Kanäle - konsequent ins Layout der Site ein.

Creative Cruise hat ein klares Werteversprechen, das sofort klar wird: ein Amsterdam-basiertes Event zu bewerben. Obwohl das Layout fast Flyer-artig aussieht, bietet es wirklich lustige scroll-basierte Erlebnisse und bezieht das Konzept eines Agentur-Hoppings auf den Kanälen von Amsterdam mit ein.

2. Einfache Navigation

Ich kann gar nicht genug betonen, wie wichtig eine klare Navigation ist. Eine klare Navigationshierarchie bietet ein entscheidendes Gerüst für deine Site. Tobe dich ruhig in anderen Bereichen aus, aber halte deine Navigation einigermaßen konservativ, indem du ein klassisches Navigationsmuster verwendest. Gute Navigation fühlt sich fast unsichtbar an und lässt deine Inhalte dafür hervortreten, und das ist es, was du erreichen willst. Du möchtest nicht, dass Leute Zeit damit verschwenden, herauszufinden, wo du dein Menü versteckt hast; du möchtest, dass sie ihre Zeit damit verbringen, mit deiner unglaublichen WebGL herumzuspielen. Natürlich gibt es viele Ausnahmen, bei denen es Sinn macht, das Menü oder andere UI-Muster neu zu erfinden. Stell einfach sicher, dass sie innerhalb von ein paar Sekunden deutlich und verständlich ist, andernfalls riskierst du, einige deiner Nutzer zu verlieren.

award02
Google Ideas von Hello Monday für Google setzt auf klassische Navigation, um den Fokus auf die WebGL-Spielereien zu setzen.

Für Google Ideas setzte Hello Monday auf eine simple, klare Navigation, die sich vertraut anfühlt. Dies erlaubt dem Nutzer, schnell seinen Weg durch unterschiedliche Bereiche von Google Ideas zu finden und mehr Zeit damit zu verbringen, mit dem coolen WebGL-Globus herumzuspielen.

3. Es geht nicht nur um Hover-Effekte

Ich mag Hover-Effekte, sie machen Spaß. Aber deine Site braucht mehr als nur coole Effekte, um mitreißend und einprägsam zu sein und einen Preis zu gewinnen. Füge Effekte und Transitions so ein, dass sie dein Website-Erlebnis unterstützen, und nicht nur, weil sie gut aussehen. Styling sollte nie einer tollen UX im Weg stehen.

4. Mach mindestens in einem Bereich etwas Neues

Denk darüber nach, was deine Website einzigartig macht. Versuch, mit mindestens einer Sache, groß oder klein, etwas anders zu machen als andere Sites. Was ist sozusagen der X-Faktor deiner Site? Welche kleine Sache werden Leute von deiner Site in Erinnerung behalten? Ein wirklich cooler Übergang, Hover-Effekt oder eine große ausgeklügelte Interaktion? Es könnten auch einfach wirklich gut geschriebene Texte sein oder ein besonderer Tonfall. So wie in einem Popsong, bei dem dir dieser eine Hook im Ohr bleibt, solltest du eine Sache haben, die deine Site einprägsam macht.

award03
The Happy Forecast von Clubhouse Studios unterhält seine Besucher mit einem Konsolenspiel-artigen Interface.

The Happy Forecast hat ein lustiges, Konsolenspiel-artiges Interface, das fast selbst  ein kleines Universum ist. Lustig und einprägsam!

5. Hab ein Auge auf die Ladezeiten

In der Ära von Smartphones und ständig aufpoppenden Benachrichtigungen haben wir alle die Aufmerksamkeitsspanne eines Goldfisches übernommen. Ladezeiten sind ein großes Ärgernis und sollten auf ein Minimum reduziert werden. Wenn kein Weg an langen Ladezeiten vorbeiführt, dann denk darüber nach, wie du Teile der Site so laden kannst, dass es sich so anfühlt, als ob das Erlebnis schon begonnen hätte.

6. Mach's responsiv!

Es macht nicht viel Spaß, unzählige Stunden in ein Projekt zu stecken, wenn die Hälfte deiner Besucher – diejenigen auf dem Handy oder Tablet – deine Site nicht richtig nutzen können (wenn überhaupt). Denk an mobile und Tablet-Surfer und entwickle ein Erlebnis, das auf jedem Device funktioniert. Natürlich gibt es Ausnahmen, aber idealerweise sollte dein Projekt auf so vielen Devices wie möglich gleich gut laufen.

award04
Die Website B&O Play von Spring/Summer läuft gleich gut auf mobilen und Desktop-Geräten.

7. Vermeide aufwendige Transitions

Transitions sind toll, können Spaß machen und aufregend sein, aber ähnlich wie Hover-Effekte sollten sie einem Zweck dienen. Und es gibt nichts Schlimmeres, als auf das Ende einer Überblendung zu warten, um weiter zu surfen. Mach es kurz, subtil und wende es nur an, wo es relevant ist.

8. Behalte deine Zielgruppe im Hinterkopf, wenn du designst

Ein tolles digitales Erlebnis ist maßgeschneidert auf seine Zielgruppe. Behalte sie im Hinterkopf, wenn du deine Designelemente auswählst, Farben, Schriftarten, Bilder et cetera. Eine Website für junge Mütter sieht zwangsläufig anders aus als eine für Business-Führungskräfte.

9. Schaff sofort eine Bindung

Deine Site konkurriert mit YouTube, Facebook, E-Mails, Telefonanrufen, Medium-Artikeln und mehr. Im Grunde mit dem ganzen Internet. Schaff eine Bindung zu deinen Nutzern, sobald sie deine Site aufrufen. Das kann mit einem interaktiven Bodybuilder geschehen, wie beim Old Spice Muscle Surprise hier unten, kann aber auch einfach ein fesselndes Bild, ein interessantes Statement oder wunderschöne Typografie sein.

award05
Old Spice Muscle Surprise von Wieden+Kennedy & MediaMonks für Old Spice – der Bodybuilder schafft eine persönliche Ansprache an  den Besucher.

10. Bedien dich der neuesten Technologien

Nichts ist aufregender als Sites, die neueste Technologien für tolle Effekte einsetzen. Die bei dir die Frage aufwerfen „Wie zur Hölle haben die das gemacht?“. Wenn sie für dein Projekt geeignet sind, dann denk darüber nach, ob du ein paar neue Technologien ausprobieren könntest oder eine aktuelle in etwas Neues verbessern kannst.

award06
Neymar Jr. CRAZY SKILLS von Bascule Inc. für Panasonic - hier ist ein komplettes FIFA-Game im Browser entstanden.

Bei CRAZY SKILLS hat Panasonic ein unglaubliches FIFA-ähnliches Erlebnis komplett im Browser geschaffen. Wie haben sie das gemacht? (Vielleicht mit WebGL.)

11. Vergiss nicht den Humor

Wer lacht nicht gern? Wenn es zur Marke und dem Erlebnis, das du schaffst, passt, dann überleg dir, wie du deine Besucher mit Humor unterhalten und aufheitern kannst. Wenn man Leute zum Lachen bringt, zahlt sich das am Ende immer aus!

award07
Legwork verwendet lustige, schrullige Illustrationen, um die Verspieltheit sowohl ihrer Agentur als auch deiner Laune hervorzuheben.

12. Trau dich, neue Wege zu gehen, auch wenn sie sich nicht vertraut anfühlen

Probiere neue Ideen aus. Hab keine Angst, etwas Neues zu versuchen, nur weil du dir nicht sicher bist, wie es ankommt. Nutz die Gelegenheit. Manchmal wirst du scheitern, oft aber nicht – und es zahlt es sich aus. Egal was passiert, du wirst auf jeden Fall unglaublich viel dazulernen, wenn du ein neues Gebiet betrittst. Katapultier dich aus deiner Komfortzone heraus. Das Beispiel von Way of the Desperados hier unten bietet ein schräges, merkwürdiges Erlebnis, aber es funktioniert irgendwie.

award08
Schräge Nutzererlebnisse wie Way of the Desperados von Resn & Wieden+Kennedy Amsterdam für Desperados bleiben auf jeden Fall im Gedächtnis.

Geh raus und schaffe Unglaubliches!

Es läuft alles darauf hinaus, sich zu trauen, neue Sachen auszuprobieren und deinem Bauchgefühl zu vertrauen. Setz dir hohe Ziele! Zeig uns etwas, was wir noch nie gesehen haben. Komm raus aus deiner Komfortzone, und du wirst staunen, was du erreichen kannst!

Danke, dass du dir die Zeit genommen hast, um meinen Artikel zu lesen. Folge mir direkt hier auf Medium, oder bleib über Twitter oder LinkedIn mir in Verbindung. Und wenn du diesen Artikel mochtest, dann empfehle ihn gern deinen Freunden weiter.

Dieser Beitrag ist zuerst auf Medium.com erschienen. Übersetzung: Anja Braun.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Philipp Blum am 29.09.2015 (17:41 Uhr)

    Ich schaue mir die Awards gerne mal an, um Inspirationen zu gewinnen. Mein Ziel wäre es allerdings nicht ein Award zu selbst zu gewinnen. Die meisten Seiten übertreiben es sehr. Viele Spielereien, die vollkommen unnötig sind. Die wenigsten der Award-Gewinner sind wirklich erfolgreich. Nichts desto trotz muss es diese Awards geben, um das Webdesign weiter zu treiben.

    Antworten Teilen
  2. von Benny am 29.09.2015 (23:52 Uhr)

    Sorry aber ich finde diese ganzen webawards Seiten pure Geldmacherei da man für das einsenden meistens zahlen muss, das heißt ihr habt nie die besten Seiten aus dem Web. Weil diese haben einen Award nicht nötig da sie sich so oder so verbreiten (vor allem Twitter)..... Zu dem erzählt mir hier jemand etwas von Responsive und Usability und klaren Menüs, der Jury einer Seite ist, die das Gegenteil ist (siehe http://www.thefwa.com/), sry aber mir wäre es peinlich.

    Antworten Teilen
  3. von Vincent am 30.09.2015 (11:54 Uhr)

    Ich finde es super, dass der Autor, in seinem Artikel, sehr wichtige Kriterien thematisiert um einen Anreiz für Kunden zu schaffen damit sie auf deiner Webpage bleiben, sich mit ihr aus einander zusetzen und letzten Endes zu dir Kontakt aufnehmen.

    Ebenso ist es in unserer modernen "Smartphonegesellschafft" wirklich wichtig das gesammte Potential unserer Seiten für jedes Endgerät voll nutzungsfähig zu machen. Ob IOS, Android oder PC, jeden zu ereichen und zu begeistern ist für ein Unternehmen oberste Devise bei Planung und Gestalltung der Inernetseite.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Design
Ist responsives Design besser für SEO?
Ist responsives Design besser für SEO?

Es gibt Aussagen, die verselbstständigen sich so schnell, dass sie bald nicht mehr hinterfragt werden. „Responsives Design ist besser für SEO“ ist eine davon. Wir schauen genauer hin. » weiterlesen

Responsiveres Design mit Element Queries
Responsiveres Design mit Element Queries

Sicherlich lassen sich mit CSS Media Queries Designelemente an die Breite oder Höhe des Viewports, also des Browserfensters oder der Bildschirmdimensionen mobiler Geräte, anpassen. » weiterlesen

Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll
Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll

Mit Canva soll das Gestalten verschiedenster Grafiken kein Problem mehr sein. In nur 23 Sekunden soll jeder zum Designer werden. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?