Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Design per Storytelling: Wer schreibt, der bleibt

Design per Storytelling: Wer schreibt, der bleibt

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dieter Petereit
  • 24. August 2018

Inhaltsverzeichnis

Im Idealfall kommt erst die Story, dann das Design. Du kannst es auch anders herum machen, aber dann ist es halt Kacke.

Vor einiger Zeit erschien hier bei Dr. Web der vielbeachtete und engagiert diskutierte Beitrag „Storytelling killt Design: Kein Bild sagt mehr als tausend Worte”. Meine Empfehlung zum Abschluss lautete, sich bereits zum jetzigen Zeitpunkt auf das Dahinscheiden des visuellen Designs vorzubereiten.

Unbestritten bleibt natürlich, dass es auch in der Zukunft weiterhin Websites geben wird, die zur Interaktion auf visuelle Methoden setzen. Immerhin ergibt es keinen Sinn, eine Image-Website oder ein Portfolio oder gar ein Blog auf der Basis eines Conversational Interface zu bauen.

Das bedeutet nicht, dass nicht auch die Blogs der Zukunft teilweise mit Sprache genutzt werden können werden. Ich gehe davon aus, dass Sprache für jede Art von Web-Präsenz wichtig werden wird. Die Frage ist halt dann, in welchem Umfang. Bei einigen Typen von Website ergibt es auf den ersten Blick schon kaum einen Sinn, voll und einzig auf Sprache zu setzen. Bei diesen Sites werden wir eine mehrgleisige Verwendung sehen. Ohnehin gehe ich davon aus, dass neben Tastatur, Maus und Touch künftig auch Sprache zu den Standard-Interaktionsmethoden gehören wird.

Zurück zu meiner Empfehlung, sich bereits zum jetzigen Zeitpunkt auf die anstehenden Veränderungen vorzubereiten. Wie kannst du das tun? Immerhin sind wir noch nicht im Zeitalter der Conversational Interfaces angekommen.

Beginnen könntest du damit, deinen Designprozess ein Stück weit umzustellen.

Erst die Story, dann der Designvorschlag

Du hast also mit dem Kunden ausführlich gesprochen. Er konnte dir seine Anforderungen hinreichend deutlich machen und war auch in der Lage, dich mit Datenmaterial zur Zielgruppe zu versorgen und wusste sogar, ein konkretes Ziel seiner geplanten Website zu formulieren.

Nicht schlecht. Nachdem du nun noch ein bisschen eigene Recherche betrieben hast, glaubst du, ein recht genaues Bild davon zu haben, was der Kunde will und wie du das umsetzen kannst. Jetzt würdest du eventuell einen ersten Entwurf, zumindest ein Wireframe zusammen stöpseln.

Tu es nicht. Stattdessen versetzt du dich in die Lage eines Filmemachers. Der schreibt zuerst seine Story. Und selbst, wenn er damit fertig ist, dreht er nicht direkt. Ist doch alles viel zu teuer.

adult 1868015 1280 Design per Storytelling: Wer schreibt, der bleibt

Du versetzt dich also in die Situation eines Filmemachers. Die Idee ist im Kopf schon recht konkret. Jetzt willst du konkreter beschreiben, was innerhalb der gegebenen Filmlänge alles passieren soll. Du schreibst quasi einen Trailer, respektive eine große Zusammenfassung.

Bezogen auf unsere Website, schreibst du auf, was die Website erreichen soll. Du schilderst praktisch einem Dritten, dem unbekannten Leser, was die Ziele und Methoden der von dir zu ersinnenden Website sind und weshalb der unbekannte Leser diese Seite gerne benutzen wird.

Diese Form der rein verbalen Kommunikation zwingt dich dazu, klar Farbe zu bekennen. Immerhin hast du bei dieser Methode nicht die Möglichkeit, mit ein bisschen Eye Candy um dich zu werfen und dein Publikum zu verblenden.

Bei der Schilderung legst du es darauf an, überflüssige Längen zu vermeiden. In der Kürze liegt die Würze. Je kürzer die Story, desto sicherer hast du wirklich die Essenz getroffen. Stimme deine Story dann am besten mit dem Kunden ab. Eventuell wird er sich wundern, dass er einen Text und kein Layout bekommt. Aber das wirst du ihm ja nun erklären können.

Wenn die Story abgestimmt ist, gehst du dazu über, zu überlegen, wie du eben diese Story nun in Design umsetzt. Dabei wird dir auffallen, dass es mehr und weniger gute grafische Ansätze gibt, die Story gestalterisch in Szene zu setzen. Darüber hättest du dir früher gar keine Gedanken gemacht. Jetzt überlegst, welche Designansätze die Botschaft deiner Story am ehesten verstärken können. Diese setzt du nun ein.

Schau dir die verfügbaren Sprachassistenten an

Amazons Alexa kannst du bereits zum jetzigen Zeitpunkt mit sogenannten Skills versehen. Skills, zu deutsch: Fähigkeiten, erlauben es der Sprachassistentin bestimmte Aufgaben zu erledigen, die sie ohne diese Programmlogik nicht würde leisten können. So betrachtet, ist das Design eines Skills sehr vergleichbar mit dem Design einer Web-App.

Es geht schlussendlich darum, die User-Journey zu steuern und zu gestalten. Es gilt, Fehler abzufangen und hilfreiches Feedback zu geben. Der User will mindestens eine genauso gute User Experience bei der Sprachsteuerung wie bei der konventionellen Steuerung per Hand-Auge-Koordination.

Das Team des Radiosenders CBC aus Kanada hat sich den zu gewinnenden Erkenntnissen bereits ausgesetzt. UX-Designerin Natasha Rajakariar schildert in diesem Medium-Beitrag, was sie und ihr Team dabei gelernt haben.

71TtQbuOTgL. SL1000 Design per Storytelling: Wer schreibt, der bleibt

Am Ende kommt Natasha zu dem Ergebnis, dass der Prozess des Designs für das Conversational Interface sich gar nicht so sehr von dem der Erstellung eines visuellen Designs unterscheidet. Das ist doch schon mal eine beruhigende Aussage für die ängstlicheren Kolleginnen und Kollegen unter den Designern.

Wo Natasha zunächst gedacht hatte, dass sich der ohnehin produzierte Radio-Content ganz natürlich für das Medium Alexa eignen würde, stellte sie fest, dass mit den neuen Möglichkeit der Konversations-Interfaces sich auch die Produktion der Inhalte würde ändern müssen, wenn man das Medium wirklich würde ausschöpfen wollen.

Wenn dir Alexa nicht zusagt, schau dir Apples SiriKit oder Microsofts Cortana an. Im Moment bewegen sich nur die üblichen Verdächtigen in diese Märkte. Ich denke, es kann nicht schaden, wenn Otto Normaldesigner sich ebenfalls, wenn auch ganz am Rande, als Side-Project zum Side-Project, frühzeitig mit Conversational Interfaces beschäftigt.

Quellen zum Weiterlesen:

  • Storyframes before wireframes | uxdesign.cc
  • Sehr sehenswerte Sammlung der besten digitalen Stories | Storytelling.Design
  • The Power of Storytelling | Design.org
  • Adventures in conversational interface: designing for the Amazon Echo | CBC

(Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Timo Specht Profilbild SEo-Agentur München.

Timo Specht – SEO Freelancer München & Online Marketing Experte

München

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

Webdesign Doerrer Frankfurt.

Webdesign DOERRER

Frankfurt am Main

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑