--- title: Die Erfolgsmethode Prototyping url: "https://b13.com/de/wissen/die-erfolgsmethode-prototyping" description: Prototypen sind der beste Weg, um Deinen Kunden einen Einblick in die User Journey zu geben. Hier sind die besten Praktiken von b13 für die Vermittlung von Abläufen durch interaktive Prototypen. image: "https://b13.com/fileadmin/_processed_/d/6/csm_prototyping_191-1_4c57983ffb.png" date: 2022-07-14 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Die Erfolgsmethode Prototyping [ UX/UI-Design ](https://b13.com/de/wissen/uxui-design) Die Erfolgsmethode Prototyping ================================ ![](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_9492752ded.jpg)Stefanie Kreuzer 12. Juli 2022 [ RSS Feed ](https://b13.com/de/rss.xml) ![Drei Wireframe-Designs für mobile Anwendungen werden angezeigt, die unterschiedliche Layouts und Inhaltsstrukturen präsentieren. Linien verbinden die Bildschirme und zeigen einen Fluss oder eine Beziehung zwischen ihnen an. Der Hintergrund zeigt abstrakte orange und gelbe Formen.](https://b13.com/fileadmin/_processed_/c/1/csm_prototyping_8cfac488ce.webp) Prototypen veranschaulichen die Benutzerinteraktionen und Funktionsmuster hinter einem digitalen Projekt. So funktionieren sie aus unserer Sicht. Prototypen sind ein Hilfsmittel, um einen zukünftigen Entwicklungsstatus in einem Designprojekt zu kommunizieren, z. B. bei einem Relaunch einer Website oder einem Redesign eines Newsletters. Sie zeigen, wie der Webinhalt aufgebaut sein wird und wie die Benutzer von Seite zu Seite navigieren können. Wir erstellen Prototypen erst dann, wenn wir die Ziele unserer Kunden, die anzuzeigenden Informationen und die Art des User Flows festgelegt haben. Und da wir Prototypen für eine Vielzahl unterschiedlicher Projekte erstellt haben, haben wir bei b13 eine Reihe von „Best Practices“ für das Prototyping entwickelt! Setze Dich mit uns in Verbindung, um mehr über unsere Designdienstleistungen zu erfahren ------------------------------------------------------------------------------------------ [ Let’s connect ](https://b13.com/de/kontakt) Was ist der Unterschied zwischen einem Wireframe und einem interaktiven Prototyp? ----------------------------------------------------------------------------------- Es gibt viele Überschneidungen zwischen Wireframing und Prototyping — man kann sich das Wireframing als eine Art Low-Fidelity-Prototyp vorstellen. Ein einfaches Wireframe ist wie eine Blaupause. Es besteht aus statischen Bildschirmen und enthält Informationen über die Funktion, die Struktur und den Ablauf der Website, aber keinen tatsächlichen Inhalt oder Styling. Weitere Informationen zum Wireframing findest Du in unserem jüngsten Blogbeitrag [Die Erfolgsmethode Wireframing](https://b13.com/de/wissen/die-erfolgsmethode-wireframing). Interaktive high-fidelity Prototypen hingegen sind klickbar und sehr nahe an dem Endprodukt. Sie helfen unseren Kunden, jeden kritischen Schritt eines Nutzerinteraktion zu visualisieren, z. B. die An- und Abmeldung während eines Authentifizierungsprozesses. In der Regel erstellen wir interaktive Prototypen, um die Benutzerfreundlichkeit komplexer Projekte zu veranschaulichen — Aktualisierungen auf einer einzigen Seite erfordern in der Regel keine interaktiven Prototypen. ![Wireframe für das TYPO3 Demo Projekt](https://b13.com/fileadmin/_processed_/d/1/csm_Wireframe_demoproject_630e215b80.webp) Wireframe für das TYPO3 Demo Projekt ![Prototyp für das TYPO3 Demo Projekt](https://b13.com/fileadmin/_processed_/e/e/csm_Prototyp_demoproject_89a1199fc9.webp) Prototyp für das TYPO3 Demo Projekt Kategorisiere Prototypen für bestimmte User Journeys ------------------------------------------------------ Prototypen helfen Kunden, den Userflow und die Funktionalität hinter bestimmten Inhaltstypen wie Formularen oder Schaltflächen zu veranschaulichen. Sie ermöglichen es, die Navigation in der gesamten Sitemap zu testen und die Informationsarchitektur zu visualisieren. Wir unterteilen Prototypen oft in einzelne Prozessabläufe, wie beispielsweise: - einen Einkaufswagen-Kassenprozess - Newsletter-Anmeldung - ein neuer Besucher, der auf einer spezifischen Landingpage landet (Um nur ein paar Beispiele zu nennen!) In einem High-Fidelity-Prototyp führen wir unsere Kunden durch alle Schritte, sodass sie alle verschiedenen Abläufe und die jeweils besuchten Seiten sehen können, ohne auf halbem Wege im Prozess abzuspringen. Prototypen sollten auch aufzeigen, was passiert, wenn sich der Ablauf als unvollständig erweist — zum Beispiel, was passiert, wenn ein Benutzer seine Meinung über den Kauf ändert oder ein falsches Passwort eingibt. Kommunizieren, was fehlt -------------------------- Prototypen sind nicht dasselbe wie eine fertige Website. Sie dienen der Kommunikation und der Iteration — sie müssen sich also nicht exakt genau so verhalten oder aussehen wie das endgültige Projekt! Aber manchmal sind Kunden verunsichert, wenn sie Platzhalterbilder oder das fehlende Farbschema des Unternehmens sehen, oder „Links“, die alle zum gleichen Layout einer Blogpost-Inhaltsseite führen. Indem wir unsere Kunden genau darüber informieren, was Prototypen leisten sollen — und was nicht -, legen wir die Erwartungen für einen produktives Dialog fest. Das visuelle Design sollte immer am Ende stehen ------------------------------------------------- Ob eine Schaltfläche runde oder spitze Ecken hat, ob sie orange oder rosa ist, hat keinen Einfluss darauf, ob sich jemand in Ihre Mailingliste eintragen kann. Alles sollte zuerst logisch funktionieren, bevor die Webseite optisch ansprechend aussieht. Mach also auf jeden Fall das visuelle Design zu Deinem letzten Schritt beim Prototyping. Sobald ein Prototyp für visuelle Anpassungen bereit ist, kann das Designschema auf den gesamten Prototyp angewendet werden — so kann ein Design für eine „kleine Schaltfläche“ mit Größe, Farbe und Form auf alle Komponenten mit der Bezeichnung „kleine Schaltfläche“ angewendet werden. Teste das responsive Design ----------------------------- Mit interaktiven Design- und Prototyping-Tools kann eine Vorschau dafür erstellt werden, wie eine Seite, ein Menü oder ein Newsletter auf verschiedenen Endgeräten wie Mobilgeräten, Tablets und Desktops aussieht. Sie können auch Animationen und Zustände von Inhaltselementen anzeigen (z. B. wie eine Schaltfläche im „hover“ oder „aktiv“ aussieht). Teste die verschiedenen Zustände und Breakpoints aus, um zu sehen, wie die Website für einen Benutzer auf jedem Gerät aussieht. Wir können nicht vorhersagen, wie der Benutzer auf die Website zugreifen werden, daher möchten wir sicherstellen, dass die Erfahrung für alle Arten von Kanälen, Bildschirmgrößen und Betriebssystemen positiv ist. Benötigt Dein Projekt einen Prototyp? --------------------------------------- Sobald ein Prototyp freigegeben wurde und die technische Entwicklung im Gange ist, verpacken wir das Design in ein visuelles Designsystem. Die Entwickler erhalten die richtigen CSS-Attribute, und die Kunden erhalten ein Corporate-Design-Schema, das für das Web übersetzt wurde. An diesem Punkt ist die aufwändigste Arbeit des Prototyping geschafft! Wir können Dir vor der Entwicklung helfen, Deine User Journeys zu visualisieren --------------------------------------------------------------------------------- [ Let’s connect ](https://b13.com/de/kontakt) ### Geschrieben von: ![Junge Frau mit langen, welligen Haaren, die einen leichten Pullover trägt und sanft lächelnd vor einem verschwommenen Innenhintergrund steht.](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_5a7d55f637.webp) Die UX- und Interface-Designerin Stefanie hat eine besondere Eigenschaft, die wir "die Arbeit sehen" nennen. Sie versteht sofort, was für ein bestimmtes Projekt getan werden muss, und macht sich an die Arbeit. Ihr unverzichtbares Werkzeug: Maultaschen Stefanie Kreuzer Design [ mehr von Stefanie Kreuzer ](https://b13.com/de/team/stefanie-kreuzer) Ähnliche Artikel ------------------ - ![Eine robotische Hand hält einen Pinsel und erzeugt einen lila Wirbel vor einem hellblauen Hintergrund mit kreisförmigen Mustern.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings 17. Juli 2026 | Laura Heine Laura Heine teilt, was sie beim Design Leadership Meetup über Verantwortung, Dokumentation und einen fairen Umgang mit KI im Team gelernt hat. [ weiterlesen: Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings ](https://b13.com/de/wissen/verantwortungsvoll-gestalten-im-ki-zeitalter-unsere-learnings) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Benutzeroberflächendesign mit einer dunklen Seitenleiste, die Navigationsoptionen bietet, und einem zentralen Inhaltsbereich mit Platzhaltertext.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage 12. Januar 2026 | Laura Heine b13 gestaltet das Backend von TYPO3 für Version 14 neu, damit es moderner wirkt, schneller läuft, den Benutzerkontext beibehält und eine erweiterbare Grundlage schafft, die sich… [ weiterlesen: Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage ](https://b13.com/de/wissen/gestaltung-des-backends-von-typo3-v14-unsere-vision-fuer-eine-moderne-erweiterbare-grundlage) - ![Benutzerschnittstellenelemente wie Textfelder, Kontrollkästchen und Schaltflächen, verbunden durch Pfeile auf einem lila Hintergrund.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Wie man Webformulare richtig macht 18. August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ weiterlesen: Wie man Webformulare richtig macht ](https://b13.com/de/wissen/wie-man-webformulare-richtig-macht) - ![Eine lila Mappe ist zentral platziert und von roten und blauen rechteckigen Elementen umgeben, die durch Linien auf einem Gitterhintergrund verbunden sind.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Effektive Informationsarchitekturen entwerfen: Best Practices 30. Juli 2025 | David Steeb Tauche ein in unseren neuesten Artikel über die Welt der Informationsarchitektur und ihren entscheidenden Einfluss auf die User Experience. Erfahre zentrale Strategien und Best… [ weiterlesen: Effektive Informationsarchitekturen entwerfen: Best Practices ](https://b13.com/de/wissen/designing-an-effective-information-architecture-best-practices) - ![Zwei Roboterarme sind um eine Lupe positioniert und konzentrieren sich auf den Buchstaben "g" in einer stilisierten Schriftart. Der Hintergrund zeigt ein Gittermuster mit wiederholten "Ag"-Symbolen.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien 03. Juni 2025 | David Steeb Entdecke die Bedeutung von Richtlinien zur Schriftgröße im UI-Design, um zugängliche und visuell ansprechende Benutzeroberflächen zu schaffen. Erfahre die Best Practices für… [ weiterlesen: Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien ](https://b13.com/de/wissen/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![Ein Abschlusskappe ist zentral zwischen verschiedenen Elementen eines Flussdiagramms platziert, darunter Rechtecke und Kreise, vor einem Farbverlauf-Hintergrund. Das Design vermittelt Themen von Bildung und Entscheidungsprozessen.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21. Mai 2024 | Stefanie Kreuzer Ein optimaler Benutzerfluss ist entscheidend für erfolgreiche Websites. Erfahre, wie du mit Flowcharts schon früh im UX-Designprozess für Klarheit sorgen kannst. [ weiterlesen: Mastering Website Flowcharts ](https://b13.com/de/wissen/mastering-website-flowcharts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken 31. August 2023 | Stefanie Kreuzer Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur… [ weiterlesen: Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken ](https://b13.com/de/wissen/die-erfolgsmethode-wireframing) - ![Ein Weg führt durch stilisierte Wolken, flankiert von einer Lupe und Zahnrädern, mit Symbolen, die Texte und Dokumente im Hintergrund darstellen und Themen von Erkundung und Technologie andeuten.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design 12. April 2024 | Franzi Töpler Menschen mit Beeinträchtigungen stellen eine der größten Gruppen von Online-Nutzern dar, aber sie werden in der digitalen Welt oft übersehen. Die Verbesserung der Barrierefreiheit… [ weiterlesen: Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design ](https://b13.com/de/wissen/ein-leitfaden-fuer-die-beruecksichtigung-von-barrierefreiheit-im-ux-design) - ![Eine Hand platziert eine rote Form in ein Flussdiagramm, das aus verschiedenen geometrischen Figuren besteht, darunter Rechtecke und Kreise, mit Richtungspfeilen, die die Verbindungen zwischen ihnen anzeigen. Der Hintergrund zeigt ein Gittermuster.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Hervorragendes User Flow Design 03. April 2024 | Stefanie Kreuzer Die Gestaltung des Benutzerflusses visualisiert den Weg, den der Benutzer zurücklegt, um ein bestimmtes Ziel zu erreichen. In digitaler Hinsicht ist der Pfad das, was der Benutzer… [ weiterlesen: Hervorragendes User Flow Design ](https://b13.com/de/wissen/hervorragendes-user-flow-design)