--- description: Wireframes sind im Designprozess für Software, Apps und Websites unverzichtbar. Mit diesen Apps kannst du kostenlos Wireframes erstellen. image: https://gdm-localsites-assets-gfprod.imgix.net/images/capterra/og_logo-e5a8c001ed0bd1bb922639230fcea71a.png?auto=format%2Cenhance%2Ccompress title: Wireframes erstellen: Die 8 besten Gratistools --- # Wireframes erstellen: Die 8 besten Gratistools Canonical: https://www.capterra.com.de/blog/2590/wireframes-erstellen Veröffentlicht am 14.3.2022 | Geschrieben von Ines Bahr. ![Wireframes erstellen: Die 8 besten Gratistools](https://images.ctfassets.net/63bmaubptoky/D6kZcsKd05XzVVipDkh2MgIZwsTDpmXnF6MmmGdq0nM/74b800023850a4d2d9796564db9accab/Wireframes-erstellen-Capterra-DE-Header.png) > In diesem Artikel stellen wir dir die acht besten Tools vor, mit denen du Wireframes erstellen kannst, und das kostenlos.  ----- ## Artikelinhalt In diesem Artikel stellen wir dir die acht besten Tools vor, mit denen du Wireframes erstellen kannst, und das kostenlos. In diesem Artikel1. Cacoo: Änderungen per Versionskontrolle nachverfolgen2. Creately: Vielfältige Designvorlagen3. InVision App: Design und Entwicklung in einer Plattform4. Lucidchart: Designs im Offline-Modus erstellen und bearbeiten5. Marvel: Einblicke in Nutzerinteraktionen gewinnen6. Miro: Zusammenarbeit in Echtzeit und asynchron7. Storyboard That: Vorlagen für das digitale Storytelling8. Whimsical: Benutzerdefinierte Farbthemen für Boards erstellenWireframes erstellen: So findest du die richtige kostenlose Wireframe-Software für dein UnternehmenJede Seite einer Website hat einen Zweck und hilft Nutzenden, ihre Ziele zu erreichen. Wenn deine Website über keine sinnvollen Navigationsmöglichkeiten verfügt, verlässt deine Kundschaft sie wieder, bevor sie das Ziel erreicht hat.Designer, die Software und Websites entwickeln, müssen ein Framework für die User Journey und Seiten für jeden einzelnen Schritt erstellen. Wireframe-Software hilft dir, dein Framework zum Leben zu erwecken. Ähnlich wie ein Bauplan für ein Gebäude hilft ein Wireframe, Pläne für Websites, Apps und Software zu erstellen. Mit Wireframe-Software kannst du die Seitenstruktur, Funktionen und das Inhaltslayout darstellen, von einer Low-Fidelity-Skizze bis zu einem High-Fidelity-Prototypen.Willst du Wireframes erstellen? Wir haben die top Wireframe-Tools in alphabetischer Reihenfolge aufgeführt.1. Cacoo: Änderungen per Versionskontrolle nachverfolgenGesamtbewertung: 4,7Anzahl an Bewertungen: 137In Cacoo kannst du Diagramme in Echtzeit gemeinsam bearbeiten und mit anderen teilen. Dabei kannst du Änderungen nachverfolgen und so die Version deines Designs auswählen, die dir am besten gefällt. Die Zusammenarbeit mit anderen Teammitgliedern ist über Kommentare, den app-internen Chat und per Videochat möglich.Cacoo bietet Wireframe-Vorlagen für Websites, Android und iOS. Mit diesen Vorlagen kannst du dein Design an die Gerätegröße anpassen. Boxen, Formen und Bilder helfen dir, das Layout besser zu visualisieren. Jedes Team hat seine eigenen dedizierten Funktionen, sodass es wie gewünscht zum Projekt beitragen kann. Das Entwicklungsteam kann beispielsweise die Unified Modeling Language (UML) und Netzwerkdiagramme nutzen, dem Marketingteam stehen Marketingtrichter und SWOT-Analysen zur Verfügung und das Projektmanagement-Team kann Gantt- und PERT-Diagramme erstellen.In der kostenlosen Version bekommst du eine unbegrenzte Anzahl an Nutzern, 6 Sheets, alle Integrationen und Kollaborations-Funktionen wie In-App Chat and Video-Chat, kommentieren \& chatten. Die kostenlose Version erlaubt jedoch keinen Gästezugang.Hauptfunktionen:BrainstormingTools für die ZusammenarbeitKommentare/NotizenDatenimport und -exportDatenverknüpfungMobile OberflächeVorstellung von Cacoo Mehr erfahren 2. Creately: Vielfältige DesignvorlagenGesamtbewertung: 4,4Anzahl an Bewertungen: 148 Creately  ist ein Online-Diagramm- und Design-Tool mit Vorlagen für verschiedene Teams wie Marketing, Personalwesen, Produktteam oder Engineering. Mit Drag-and-Drop-Funktionen kannst du Vorlagen, Formen, Bilder, Symbole  aus der Google-Suche hinzufügen.Du kannst die E-Mail-Adressen von Stakeholdern hinzufügen, um deine Designentwürfe mit ihnen zu teilen, oder bei Videoanrufen Designs in Echtzeit präsentieren und mit Teammitgliedern zusammenarbeiten. Außerdem kannst du deine Entwürfe als PDF, PNG, JPG oder SVG herunterladen.Du kannst Kommentare an präzisen Stellen im Design hinzufügen, damit deine Teammitglieder wissen, was sie ändern sollen. Das kostenlose Wireframe-Tool ermöglicht außerdem Diskussionsthreads, sodass alle den Überblick über ein Gespräch behalten.In der kostenlosen Version bekommst du einen Ordner, 3 Workspaces, 50 Diagramm-Typen und Kollaborations-Funktionen wie Link-Sharing, Zusammenarbeit in Echtzeit und Kommentierfunktion. Eine Gästeansicht ist in der kostenlosen Version nicht möglich.Hauptfunktionen:DesktopanwendungDiagrammerstellungDokumentenmanagementDrag and DropFeedback-ManagementMindmapsVorstellung von Creately Mehr erfahren 3. InVision App: Design und Entwicklung in einer PlattformGesamtbewertung: 4,6Anzahl an Bewertungen: 662InVision App verwandelt Designentwürfe in detaillierte Spezifikationen für eine vereinfachte Entwicklung und ermöglicht es den Entwicklungsteams, jedes Element direkt in den Entwürfen zu messen. Die Softwarelösung zeigt den Teams die Designelemente an, für die bereits Code vorliegt, damit sie sich auf die Elemente konzentrieren können, die von Grund auf neu entwickelt werden müssen.InVision App ist auch ein Mockup-Tool, das statische Prototypen in realistische Designs verwandeln können. Nutzende können den Bildschirm in verschiedene Richtungen bewegen, von einem Bildschirm zum anderen wechseln und Overlays erstellen. Teammitglieder und Stakeholder können den Prototypen direkt kommentieren und so Feedback geben. Außerdem ist das Wireframe-Designtool in mehrere Tools für die Zusammenarbeit und Aufgabenverwaltung integrierbar, sodass du deine Design- und Entwicklungsprozesse nahtloser gestalten kannst.In der kostenlosen Version erhältst du bis zu 10 Nutzer, 3 Dokumente und Integrationen mit u.a. Figma, Adobe XD, Sketch, Jira. Eine Gästeansicht ist in der kostenlosen Version möglich und du kannst kommentieren und öffentliche Links teilen.Hauptfunktionen:DesktopanwendungDigitale LeinwandFeedback-ManagementIdeenmanagementInteraktives ManagementMobile OberflächeVorstellung von InVision AppMehr erfahren4. Lucidchart: Designs im Offline-Modus erstellen und bearbeitenGesamtbewertung: 4,5Anzahl an Bewertungen: 1355Mit Lucidchart  können Designteams auch komplexe Designideen vermitteln. Du kannst jeder Datei einen Status zuweisen und so die Zusammenarbeit erleichtern, etwa „Entwurf“, „Fertig“, „Prüfung ausstehend“, „Genehmigt“ oder „Abgelehnt“.In Lucidchart kannst du Personen zur Zusammenarbeit einladen und es ihnen ermöglichen, deine Entwürfe zu öffnen, bearbeiten, teilen und kommentieren. Außerdem kannst du Designentwürfe in deinem Intranet oder auf deiner Website einbinden.Über die Cloud-Infrastruktur des Tools kannst du visualisieren, wie dein neuer Plan sich auf deine aktuelle Infrastruktur auswirken wird. Du kannst die Option für die bedingte Formatierung auswählen, um anhand von regelbasierten Kriterien Formen, Symbole und Designs zu ändern.In der kostenlosen Version bekommst du eine unbegrenzte Anzahl an Nutzern, 3 Doumente (bis zu 60 Objekte), Zugang zu Integrationen wie u.a. Slack, Google Drive und Teams sowie Kollaborations-Funktionen wie teilbare Links, via E-Mail einladen und einem Kollaborateur folgen. Einen Gästezugang bekommst du in der kostenlosen Version nicht.Hauptfunktionen:Feedback-ManagementFlowchartGrafischer Workflow-EditorInteraktive ElementeZugriffskontrollen/-berechtigungenDiagrammerstellungVorstellung von Lucidchart Mehr erfahren 5. Marvel: Einblicke in Nutzerinteraktionen gewinnenGesamtbewertung: 4,5Anzahl an Bewertungen: 80 Marvel  ist ein No-Code-Prototyping-Tool zum Designen, Testen und Entwickeln in einer zentralen Plattform. Es bietet alle nötigen Funktionen zum Erstellen digitaler Produkte. Neben Stockfotos und Symbolen bietet Marvel eine Reihe von vorgefertigten Wireframing-Elementen wie Navigationsleisten, Widgets und Schaltflächen.Mit dem Design-Handoff-Tool von Marvel enthalten Entwicklungsteam Zugriff auf die Spezifikationen jedes Elements, das zu einem Designentwurf hinzugefügt wurde. Das Tool generiert CSS-, Android XML- und Swift-Code für Elemente, die du kopieren und so den Entwicklungsprozess beschleunigen kannst.Marvel macht es möglich, aufzuzeichnen, wie Nutzende mit deinem Prototyp interagieren. Analysen bieten dir Einblicke in die Interaktionen und helfen dir, den Prototyp und das Nutzungserlebnis zu verbessern.In der kostenlosen Version bekommst du einen Nutzer, ein Projekt und einen aktiven User-Test.Hauptfunktionen:Tools für die ZusammenarbeitAnpassbare VorlagenPrototyp-ErstellungUsability-TestsSoftware-PrototypingOfflinezugriffVorstellung von Marvel Mehr erfahren 6. Miro: Zusammenarbeit in Echtzeit und asynchronGesamtbewertung: 4,7Anzahl an Bewertungen: 589 Miro Bietet ein gemeinsam nutzbares Online-Whiteboard für Brainstorming, Design Thinking, Mapping, Skizzen, Teammeetings und mehr. Mit der Software kannst du einen Roadmap von der ersten Persona deiner Zielgruppe bis hin zur Gestaltung von Webseiten aufbauen. Miro ermöglicht das Szenario-Mapping, mit dem du die Ziele durchdenken kannst, die du mit den einzelnen Seiten erreichen willst. Du kannst einen User Flow erstellen und so festlegen, wie Personen mit einer Seite interagieren sollen, um das festgelegte Ziel zu erreichen. In jeder Phase der Gestaltung können deine Teammitglieder in Echtzeit „Start/Stop/Continue“-Vorschläge machen: Womit solltest du beginnen, womit aufhören und womit weitermachen?Die Softwarelösung bietet Vorlagen für jede Phase des Gestaltungs- und Designprozesses, etwa Mindmaps, Serviceseiten, Registrierungsseiten, Customer Journey Maps und mehr. Auch für die Aufgabenverwaltung ist Miro geeignet: Du kannst nachverfolgen, welches Teammitglied welche Aufgabe im Designprozess bearbeitet.In der kostenlosen Version bekommst du eine unbegrenzte Anzahl an Nutzern, 3 Whiteboards, Kollaborations-Funktionen wie Chat, Screensharing und Reaktionen und enthaltene Integrationen sind u.a. Slack, Trello, Gmail, Drive. Weiterhin ist die Gästeansicht möglich.Hauptfunktionen:Agile MethodenAsset-BibliothekBacklog-ManagementKalenderverwaltungÄnderungsmanagementAktionsmanagementVorstellung von Miro Mehr erfahren 7. Storyboard That: Vorlagen für das digitale StorytellingGesamtbewertung: 4,4Anzahl an Bewertungen: 26 Storyboard That bietet eine spezialisierte Version für Lehrkräfte, in denen sie Geschichten, Handlungsstränge, Vorlagen, Infografiken und Poster erstellen können. Über das Tool können sie den Lernenden Storytelling-Aufgaben geben. Neben der Gratisversion gibt es eine Version für Unternehmen und eine für Einzelpersonen.Mit dem Drag-and-Drop-Whiteboard kannst du Symbole, Wireframes für verschiedene Geräte, Handgesten und Emoticons hinzufügen. Das Tool bietet Vorlagen für verschiedene Seiten wie Einstellungen, Login, Funktionen, Anmeldung, Produktseiten und mehr.Du kannst mit dem Design beginnen, ohne ein Konto zu erstellen. In der Business-Variante bietet die Software eine Dateiverschlüsselung der Unternehmensklasse. Außerdem kannst du Konten für mehrere Nutzende erstellen und Designs gemeinsam bearbeiten.In der kostenlosen Version erhältst du 2 Storyboard pro Woche.Hauptfunktionen:Mockup-ErstellungMobile OberflächeRevisionsverlaufBildschirmaufnahmenWireframe-ErstellungDatenverknüpfungVorstellung von Storyboard That Mehr erfahren 8. Whimsical: Benutzerdefinierte Farbthemen für Boards erstellenGesamtbewertung: 4,6Anzahl an Bewertungen: 40 Whimsical bietet fünf Formate: Flowcharts, Wireframes, Mindmaps, Notizzettel und Dokumente. Du kannst Community-Vorlagen nutzen, um Designs zu erstellen, und hast die Option, Farbthemen zu nutzen, die zu deiner Marke passen.Whimsical bietet ein vorgefertigtes Designsystem zum Erstellen von Wireframes. Es hindert dich daran, Symbole zu erstellen, die du auch unkompliziert in der Vorlage finden würdest. Außerdem kannst du Shortcuts für häufig genutzte Optionen verwenden.Mit dem Tool kannst du dich auf den Inhalt und das Seitenlayout konzentrieren, ohne dir Gedanken über das High-Fidelity-Design zu machen. Daher sind die meisten Symbole schwarzweiß. Nur Elemente wie Schaltflächen und Links, für die Aktionen möglich sind, werden farbig angezeigt, um die Navigation zu verdeutlichen.In der kostenlosen Version bekommst du eine unbegrenzte Anzahl an Nutzern, 1000 Objekte (z.B. Boards, Kommentare, Bilder) in 2 Workspaces und bis zu 10 Gäste je Datei oder Ordner. Enthaltene Integrationen sind u.a. Nuclino, Asana, Desktop.com und eine Kollaboration ist in Echtzeit möglich.Hauptfunktionen:BrainstormingProjektmanagementEchtzeit-BearbeitungWireframe-ErstellungDrag-and-Drop-EditorVorstellung von Whimsical Mehr erfahren Wireframes erstellen: So findest du die richtige kostenlose Wireframe-Software für dein UnternehmenEs gibt einige Tools, mit denen du kostenlos Wireframes erstellen kannst, und die Auswahl ist nicht leicht. Behalte deine Geschäftsziele im Blick und überlege, welche Funktionen du benötigst. Die folgenden Überlegungen können dir bei der Entscheidung helfen:Wähle ein Tool mit einer Low-Fidelity-Option: Low-Fidelity-Wireframe-Tools sind in den frühen Phasen des Designprozesses von Vorteil. So können Designteams ihre Ideen mit Seitenlayouts und Navigationsstrukturen unkompliziert visualisieren. So können sie wählen, welches Design am besten den gewünschten Zweck erfüllt und als High-Fidelity-Prototyp des digitalen Produkts erstellt werden soll.Wähle ein Tool, das in Anwendungen für die Zusammenarbeit integriert werden kann: Das Design ist ein kollaborativer Prozess und Input von Stakeholdern ist unverzichtbar. Wenn dein Wireframing-Tool nur schlecht in deine Kommunikationstools integriert werden kann, haben deine Teammitglieder es schwer, wenn sie zu einem Projekt beitragen soll. Integrierte Software ermöglicht die synchrone und asynchrone Zusammenarbeit und verbessert die Produktentwicklung.Wähle ein Tool, das auf Skalierbarkeit ausgerichtet ist: Das Wireframing ist kein isolierter Prozess. Du wirst voraussichtlich immer mehr Layouts erstellen und musst mit der Navigationsstruktur Schritt halten können. Dein Onlineprodukt wird wachsen und sich weiterentwickeln, und dein Wireframing-Tool sollte abbilden können, wie neue Layouts in die bestehende Struktur passen.Wireframes erstellen: Wichtige Fragen an Anbieter von kostenloser Wireframe-SoftwareUm die richtige Softwarelösung zu finden, ist es wichtig, die richtigen Fragen zu stellen. Stelle Anbietern die folgenden Fragen zu ihren Wireframing-Tools, bevor du dich entscheidest:Welche Einschränkungen hat die kostenlose Software?In kostenlosen Lösungen ist häufig der Funktionsumfang beschränkt, was dich daran hindern könnte, deine Ziele zu erreichen. Einige Gratistools beschränken die Anzahl der Layouts, Nutzenden und Freigabeoptionen. Bevor du dich für ein Tool entscheidest, stell sicher, dass es alle für dein Unternehmen wichtigen Funktionen bietet.Bietet die Software eine Option zur Änderungsverfolgung?Beim Produktdesign werden in jeder Phase zahlreiche Änderungen vorgenommen. Manchmal gerätst du dabei in eine Sackgasse und möchtest ein paar Schritte zurückgehen. Teils sind auch unterschiedliche Personen beteiligt, die Änderungen vornehmen. Mit Funktionen zur Änderungsverfolgung kannst du vorherige Versionen deiner Entwürfe wiederherstellen.Bietet die Software anpassbare Vorlagen?Deine Designs sollten mit dem Stil und Farbschema deines Unternehmens übereinstimmen. Wenn eine Software keine benutzerdefinierten Vorlagen bietet, umfassen deine Entwürfe keine Details deines Brandings und es wird schwierig, das Layout zu visualisieren.Wie geht es weiter? Wirf einen Blick auf unser Wireframe-Software Verzeichnis, um das passende Tool zu finden.Wie wir diese Produkte ausgewählt haben? Das haben wir nicht. Das habt ihr.Um die ideale Software zu finden, brauchst du Informationen, denen du vertrauen kannst. So sparst du Zeit, bleibst im Rahmen deines Budgets und kannst mehr Energie darauf verwenden, dein Unternehmen wachsen zu lassen. Deshalb prüfen und verifizieren wir all unsere Nutzerbewertungen und empfehlen nur die Tools, die von Menschen wie dir für gut befunden wurden.In anderen Worten: Unsere Produktempfehlungen werden niemals gekauft oder verkauft und sie beruhen nie auf der Meinung von Einzelpersonen. Sie entstehen durch Empfehlungen von Personen, die im gleichen Bereich arbeiten wie du, und spiegeln die Ansichten und Erfahrungen unserer unabhängigen Software-Reviewer wider.Um für diese Liste infrage zu kommen, mussten die Produkte folgende Kriterien erfüllen:Sie haben innerhalb der letzten zwei Jahre mindestens 20 individuelle Produktbewertungen auf Capterra erhalten, mit einer Durchschnittsbewertung von 3,0 oder höher. Wir haben die 8 Produkte mit der höchsten Bewertung für diesen Artikel ausgewählt.Eine kostenlose eigenständige Version der Software ist verfügbar. Dabei handelt es sich nicht um eine Testversion der Software, die nach einem begrenzten Zeitraum einen Produktkauf erforderlich macht.Sie entsprechen unserer Definition von Wireframe-Software: „Eine Wireframe-Software ermöglicht es, ein Grundgerüst von Designkonzepten mit spezifischen Inhalten, Funktionen und Verbindungen zwischen statischen Seiten zu erstellen. Nutzende können Wireframe-Designs mit einem Drag-and-Drop-Editor erstellen, anderen Teammitgliedern präsentieren, zusammen daran arbeiten und mehr.“Hinweis: Inhalte dieses Artikels, die in Nutzerbewertungen veröffentlichte Ansichten wiedergeben, stellen nicht die Meinung von Capterra dar.Das Tool mit dem „besten Funktionsumfang“ wurde danach ausgewählt, welches Tool auf Grundlage der öffentlich zugänglichen Bewertungen die höchste Nutzerbewertung im Bereich Funktionen erhalten hat.Das „kostengünstigste“ Tool wurde danach ausgewählt, welches Produkt laut Anbieterangaben auf der Website die niedrigsten Upgrade-Kosten hat (Stand 13. September 2021). ## Über den Autor oder die Autorin ### Ines Bahr Ines Bahr ist Senior Content-Analystin mit fast zehn Jahren Erfahrung im Bereich Content-Marketing und Technologietrends auf dem deutschen Markt. ​​Ihre Forschung zeigt Markttrends auf, die es Unternehmen ermöglichen, innovativ zu sein und mit ihrer Konkurrenz Schritt zu halten. Sie ist Expertin darin, kleinen und mittleren Unternehmen dabei zu helfen, die richtige Software für ihre Bedürfnisse zu finden. Auf dem YouTube-Kanal von Capterra stellt sie Tool-Listen vor, die für deutsche Unternehmen wichtig sind. Ihre Schwerpunkte sind Personalwesen, Cybersicherheit und Digitalisierungsstrategien. Ihre Digitalisierungstipps basieren auf mehr als 30 Studien, die sie für den deutschen und andere Märkte auf der ganzen Welt durchgeführt hat. Ihre Softwareempfehlungen basieren auf der Analyse von Nutzerbewertungen auf Capterra (insgesamt mehr als 2 Millionen) und folgen einer präzisen Auswahlmethodik. Ines Forschungsarbeiten wurden in mehreren renommierten Publikationen veröffentlicht, darunter Spiegel, Heise, t3n, FAZ, Business Insider, Tagesspiegel, Focus, und Handelsblatt. Darüber hinaus hat sie als Speakerin an Veranstaltungen teilgenommen, Podcasts produziert und mehrere Interviews gegeben, beispielsweise für die Digital Bash-Veranstaltung und den Zielgruppengerecht-Podcast. ## Zugehörige Software - [Cacoo](https://www.capterra.com.de/software/145718/cacoo) — 4.7/5 (178 reviews) - [Creately](https://www.capterra.com.de/software/127628/creately) — 4.4/5 (216 reviews) - [Lucidchart](https://www.capterra.com.de/software/146136/lucidchart) — 4.5/5 (2247 reviews) - [Marvel](https://www.capterra.com.de/software/171098/marvel) — 4.5/5 (87 reviews) - [Miro](https://www.capterra.com.de/software/128955/miro) — 4.7/5 (1680 reviews) - [Storyboard That](https://www.capterra.com.de/software/185152/storyboard-that) — 4.3/5 (29 reviews) - [Whimsical](https://www.capterra.com.de/software/172789/whimsical) — 4.7/5 (58 reviews) ## Ähnliche Kategorien - [Brand Management Software](https://www.capterra.com.de/directory/30531/brand-management/software) - [Creative Management Software](https://www.capterra.com.de/directory/31340/creative-management/software) - [Grafiksoftware & Bildbearbeitungsprogramme](https://www.capterra.com.de/directory/31010/graphic-design/software) - [Vektorgrafik Programme](https://www.capterra.com.de/directory/31518/vector-graphics/software) - [Videobearbeitungsprogramme](https://www.capterra.com.de/directory/20022/video-editing/software) ## Ähnliche Artikel - [Die 5 besten Bildbearbeitungsprogramme](https://www.capterra.com.de/blog/3332/die-besten-bildbearbeitungsprogramme) ## Links - [Auf Capterra anzeigen](https://www.capterra.com.de/blog/2590/wireframes-erstellen) - [Blog](https://www.capterra.com.de/blog) - [Startseite](https://www.capterra.com.de/) ----- ## Strukturierte Daten