# Prototyping ## Definition > Prototyping ist eine Methode, die schnell zu ersten Ergebnissen führt und frühzeitiges Feedback bezüglich der Eignung eines Lösungsansatzes ermöglicht. > > Durch Prototyping entsteht eine zum Teil funktionsfähige Vorabversion einer Benutzeroberfläche. Mit ihr kann früh getestet werden, ob die Anwendung die Anforderungen erfüllt.

➕	➖
Ermöglicht produktspezifisches Testing von Fragen, die nicht durch allgemeine Forschungsergebnisse oder Richtlinien beantwortet werden können	Begrenzungen und Randbedingungen, auf die das reale Produkt trifft, werden oft während des Prototyping zu stark vernachlässigt
Liefert relativ schnell bedeutungsvolle Rückmeldungen vom Benutzern	Erzeugung unrealistischer Erwartungen für die Fähigkeiten des Endproduktes
Reduziert die totalen Entwicklungskosten für ein Produkt	Gefahr der Überfrachtung des Prototyps
Kann früh im Entwicklungsprozess eingesetzt werden	Der Prototypingprozess kann schwierig zu managen und zu kontrollieren sein
	Prototyp ist nur eine begrenzte Simulation des schlussendlichen Produktes (flach/tief)

## Einsatzgebiet * Diskutieren von Design-Lösungen im Projekt * Testen von Design-Lösungen mit Benutzern * Vergleich von verschiedenen Varianten * Präsentation für Überzeugungsarbeit * Prototyp als Basis für Styleguide * Prototyp als Spezifikation ## Arten von Prototypen Bei Prototypen wird oft von der "fidelity" (deutsch: Wiedergabetreue) gesprochen. Dabei unterscheidet man zwischen einem Lo-Fi resp. Hi-Fi Prototypen. Lo-Fi ist eher eine Skizze, wobei Hi-Fi ein sehr durchgedachter, designter Prototyp ist.

### Pen & Paper Ein Stift und Papier findest du noch in jedem Büro. Viele UX-Designer haben oft einen kleinen Block und einen Stift (z.B. Moleskine) dabei. Deine geniale App-Idee kannst du auch unterwegs mit einem Pen & Paper Prototyp festhalten, die Website [UIStencils](http://www.uistencils.com/) bietet dir eine Vielzahl von möglichen Tools fürs Prototyping.
Mögliche Vorlagen gibt es z.B. hier:\ ### Wireframing Anders als ein „Mock-up“ ‒ ein visueller Prototyp ‒ wird der Begriff Wireframe (Drahtmodell) dazu benutzt, einen sehr frühen konzeptionellen Entwurf einer Website oder eines Software-Frontends darzustellen. Dabei spielt die Gestaltung und Funktion noch keine Rolle. Das Augenmerk liegt auf der Anordnung von Elementen und der Benutzerführung (UX, Benutzererfahrung). Es gibt zwei Arten eines Wireframes: * Zum einen statische Wireframes: Dies ist eine schematische Darstellung einer einzelnen Seitenvorlage. Hier werden die grundlegenden Elemente der Seite festgehalten. Ein konzeptionelles Layout sollte erkennbar sein. Ein vollendetes Design ist nicht notwendig. * Des Weiteren gibt es auch dynamische Wireframes. Diese bestehen aus mehreren Seiten, die als funktioneller Prototyp interaktiv miteinander verknüpft sind. So ist eine Navigation von einer zur anderen Seite möglich. Dynamische Wireframes werden häufig durch einen beiliegenden Navigationsbaum oder ein Flussdiagramm ergänzt, welche beide die Struktur abstrahieren und leichter verständlich machen. #### Tools für das Wireframing 1. Balsamiq: 2. Figma: 3. Adobe XD: 4. Miro: --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://m335.ict-bz.ch/prototyping.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.