10 unverzichtbare Prototyping-Tools für Webdesigner

Für die meisten modernen Webdesigner ist das Prototyping zu einem integralen Bestandteil des kreativen Prozesses geworden. Früher musste man Drahtgitterskizzen erstellen, sie dann codieren und erst dann einen Prototypen testen. Das ist eine Menge Arbeit und führt zu einem großen Produktivitätsverlust. Glücklicherweise können Sie heutzutage eine App oder Website prototypisieren, ohne den technischen Code dafür schreiben zu müssen.

Können Sie sich vorstellen, in Ihrer kommenden mobilen App Funktionen für jede Schaltfläche und jeden Übergang zu schreiben? Die Zeit, die es dauern würde, Prototypen zu Ihren Kunden zu bringen, wäre exponentiell. So wurde eine neue Grenze für Design-Tools geschaffen, und die meisten kennen sie als „Prototyping-Tools“.

Im Wesentlichen kann ein Prototyping-Tool verwendet werden, um eine funktionierende „Demo“ Ihrer App oder Website zu erstellen, ohne den Kerncode schreiben zu müssen. Stattdessen können Sie zuerst Ihre App entwerfen und dann Prototyping-Prinzipien anwenden, damit diese App funktionsfähig erscheint.

Es ist eine großartige Möglichkeit, Ihren Kunden Konzepte vorzustellen, sie aber auch regelmäßig auf dem Laufenden zu halten. In den meisten Fällen werden Kunden besser verstehen, wie ihre App funktionieren und aussehen wird, wenn ihnen durchgehend ein gültiger Prototyp präsentiert wird. Und für diesen Beitrag konzentrieren wir uns speziell auf solche Tools.

Denken Sie daran, dass Produktivität mit Kosten verbunden ist, sodass einige der Tools in diesem Beitrag möglicherweise eine nominale Investition für ein Abonnement erfordern. Es sind jedoch auch kostenlose Optionen verfügbar, und wir haben so viele wie möglich abgedeckt.

InVision

InVision ist wohl der König der Webdesign-Tools und immer auf dem neuesten Stand der Branchentrends. Ihre Tools und Designinhalte sind in der Community anerkannt. Und das Wichtigste: InVision baut Design-Tools als Designer selbst für Designer. Sie erhalten also nicht nur erstklassige Funktionalität, sondern auch eine raffinierte Benutzererfahrung.

Studio ist das Produkt, auf das wir Ihre Aufmerksamkeit lenken möchten, da Studio die größte Flexibilität in der Prototyping-Abteilung bietet. Es ist vollständig in Designtools wie Sketch integriert, sodass Sie Ihre Designdateien direkt zwischen beiden Tools importieren/exportieren können.

Studio wurde aus Erkenntnissen geboren, die durch die enge Zusammenarbeit mit einigen der weltbesten Designteams gewonnen wurden und sich von der Art und Weise inspirieren ließen, wie sie die beliebtesten Produkte der Welt kreieren.

InVision-App

Das Hauptmerkmal von Studio ist seine detaillierte Animations-Engine. Animationen machen einen Großteil der UI-Elemente im modernen App-Design aus, daher ist es wirklich revolutionär, solche unterschiedlichen Zustände in einem Prototyp widerspiegeln zu können.

Darüber hinaus ist InVisions Studio so konzipiert, dass es universell reaktionsfreundlich ist. Es ist nicht erforderlich, denselben Prototyp für verschiedene Geräte neu zu erstellen. Stattdessen passt sich ein Design natürlich an die Bedürfnisse verschiedener Geräte an, einschließlich Desktop-Computer.

ProtoPie

Es gibt viele Gründe, Prototypen zu bauen, sie fördern nicht nur kreatives Denken, sondern helfen Ihnen auch dabei, ein besseres Produkt zu bauen. Für ein relativ neues Tool wie ProtoPie lässt sich ihre Reise in einem einzigen Wort zusammenfassen: leistungsstark . Die App wird wiederholt als eines der fortschrittlichsten und dennoch einfachsten Prototyping-Tools auf dem Markt anerkannt.

Und wenn das nicht überzeugend genug ist, hier sind die Gründe, warum so viele Designer ProtoPie lieben:

• Sehr effiziente Lernkurve, melden Sie sich an und beginnen Sie sofort mit dem Aufbau.
• Verwenden Sie erweiterte Funktionen, um tiefe Interaktionselemente hinzuzufügen, einschließlich der bekanntesten Gestenanimationen.
• Nutzen Sie Variablen und Formeln, um benutzerdefinierte Designebenen zu implementieren. Hilft, authentischere Interaktionen hinzuzufügen.
• Verwandeln Sie Ihre Entwürfe aus Sketch, Adobe XD oder Figma in hochinteraktive Prototypen in ProtoPie und optimieren Sie Ihren gesamten Workflow.
  
• Verfügbar für iOS und Android, damit Sie Ihre Prototypen sofort auf jedem Gerät testen können.

Es überrascht nicht, dass Unternehmen wie Google, Reddit und Microsoft dies als eines ihrer wichtigsten Design-Tools ausgewählt haben. Workflow und Produktivität haben für jedes Designteam da draußen immer höchste Priorität, und ProtoPie bietet beides auf effektive Weise.

ProtoIO

ProtoIO ist eines dieser Tools, das nicht nur auf dem Papier gut aussieht, sondern auch in einem echten Anwendungsfall gut ist. Während sich das Tool auf Prototypen konzentriert, steht einer Nutzung auch für umfassende Webdesign-Anforderungen nichts im Wege. Mit integrierten Vektorfunktionen ist es einfach, Animationen mit viel Liebe zum Detail zu erstellen.

Das Beste daran ist, dass Sie sich nicht zu sehr auf sich selbst verlassen müssen. Das bedeutet, dass ProtoIO mit vielen bereits vorhandenen Vorlagen und Stilen vorinstalliert ist, sodass Sie sie schnell auf Ihre gesamte Designstruktur anwenden können. Auf diese Weise erleben Sie echtes „Rapid Prototyping“ und sparen jede Menge Zeit.

Wenn Sie an großen Projekten arbeiten, haben Sie natürlich die Wahl, tief in Ihre Designs einzudringen. Wenn Ihr Hauptziel darin besteht, eine möglichst realistische App (in Form eines Prototyps) zu erstellen, hilft Ihnen diese App dabei, dies schnell und einfach zu tun. Erwähnenswert ist, dass sich ProtoIO auf ein webbasiertes Bearbeitungserlebnis konzentriert, jedoch eine Offline-App leicht verfügbar ist.

Hier sind ein paar andere Funktionen, die Sie gerne verwenden werden:

• Sofortige Farbverläufe, damit Sie keine externen Websites besuchen müssen.
• Assets-Verzeichnis, mit dem Sie Ihre Projektdateien einfach verwalten und organisieren können.
• Erstellen Sie Gruppen und Ebenen und bearbeiten Sie sie alle gleichzeitig für ein wirklich fortschrittliches Workflow-Erlebnis.
• Synchronisieren Sie alle Ihre Projekte mit Dropbox, um jederzeit Zugriff auf wichtige Dateien zu haben.

Wie bei jedem Tool wird es ein wenig dauern, bis man sich mit den Details vertraut gemacht hat. Auf Anhieb ist es möglich, Projekte aus Apps wie Sketch, Photoshop und XD zu importieren. Sie können sogar mit Dateien arbeiten, die für Virtual-Reality-Apps bestimmt sind. Das ist also ein klares Plus.

Entwurf

Wie wäre es mit einem Design-Tool, das Ihnen alle Bausteine ​​für Prototypen sofort zur Verfügung stellt? Das ist die Prämisse für Draftium. Eine herausragende App, die sich auf die Echtzeit-Zusammenarbeit zwischen Ihrem Designteam konzentriert. Eine der besseren Funktionen von Draftium ist die Bibliothek mit über 300 Vorlagen.

Sie können buchstäblich eine bereits vorhandene Vorlage auswählen und sofort mit dem Erstellen beginnen. Die Vorlagen sind in Kategorien unterteilt, die so ziemlich alle bekannten Branchen im Web abdecken. Sobald Sie Ihre Vorlage ausgewählt haben, wird jedes Element innerhalb der Vorlage als Block getrennt.

Die Blöcke können einzeln geändert werden, einschließlich des Entfernens oder Hinzufügens von Elementen, indem nur ein Einstellungsfeld verwendet wird. Und das gilt auch für das Hinzufügen von Animationen, Formen und anderen Designelementen. Ein Großteil des Workflows ist echtes Drag & Drop, was Ihre Produktivität vom ersten Tag an um das Zehnfache steigern wird.

Freelancer, Agenturen und Designer auf der ganzen Welt nutzen dieses Product Hunt 2018 Design Tool of the Year , um bildschöne Prototypen zu erstellen.

Ich denke, die idealen Benutzer müssten neue Designerteams und Agenturen sein, die ihren Designprozess rationalisieren möchten. So viel Flexibilität in Apps zu haben, ist selten. Und die Tatsache, dass Sie globale Vorlagen verwenden können, ist ein enormer Zeitvorteil für die Gestaltung von Apps und Websites für Ihre Kunden.

Justinmind

Justinmind ist ein weiteres leistungsstarkes Prototyping-Tool für mobile und Desktop-Projekte. Es bildet reale Situationen nach und deckt Bereiche wie interaktives und dynamisches Design ab. Wenn es darum geht, codelose Prototypen zu erstellen, hat Justinmind viel zu bieten.

Alle neuen Projekte beginnen mit der Auswahl ihres Typs (Wireframe & Prototype), und dann können Sie den Typ einer Vorlage auswählen, mit der Sie arbeiten möchten. Justinmind deckt Schnittstellen wie Web, iOS und Android ab. Und ja, der Import Ihrer vorhandenen Designdateien andere Tools sind ebenfalls möglich.

Wir haben nicht nur eine Leidenschaft für unser Produkt, sondern für alles andere, was dazu gehört, unseren Benutzern das bestmögliche Erlebnis zu bieten. Wir arbeiten hart daran, allen Justinmind-Kunden weltweit einen außergewöhnlichen Support-Service zu bieten.

Justinmind-Mitarbeiter

Als nächstes möchte ich Sie auf ein weiteres fantastisches und integriertes Feature aufmerksam machen. Diese heißt „UI-Bibliothek“. Im Wesentlichen enthält diese Bibliothek Tausende von Widgets, die Sie in Echtzeit auf Ihre Designs anwenden können. Die Widgets bestehen aus Elementen wie Nachrichten, Menüs, Medien und mehr. Mit anderen Worten, vergessen Sie, ein Hamburger-Menü entwerfen zu müssen, da Sie einfach aus bereits vorhandenen UI-Elementen auswählen können.

Zusammenfassend steht für mich außer Frage (kein Wortspiel beabsichtigt!), dass Justinmind zu den Königen der Prototyping-Lösungen gehört. Neben der vielseitigen Funktionspalette werden Sie auch Teil einer lebendigen Community von Designern. Und das ist immer gut so.

Axur

Bisher haben wir einige erstklassige Werkzeuge untersucht, aber es gibt noch mehr zu tun. Und Axure ist unser nächstes Tool auf der Liste. Diese renommierte Plattform hat sich als führendes Wireframing-Kit etabliert. Aber auch in der Prototyping-Abteilung macht es Fortschritte. Und vielleicht auf technischere Weise als jede andere in diesem Artikel erwähnte Software.

Dies wird natürlich mit Kosten verbunden sein. Wenn Sie das volle Potenzial von Axure ausschöpfen möchten, müssen Sie ein wenig Code lernen. Aber andererseits, wenn Ihr Team konsequent an großen Projekten arbeitet, haben Sie wahrscheinlich bereits Front-End-Designer zur Verfügung.

Sobald Sie dies herausgefunden haben, können Sie Funktionen wie dynamische Interaktionen und Flow-Management voll nutzen. Wenn Ihr Projekt viel „User Journey“ erfordert, ist dieses Tool im Wesentlichen eines der besten, um Ihnen dabei zu helfen, anspruchsvolle Journey Maps für Ihre Projekte zu erstellen.

Hier sind einige andere bemerkenswerte Merkmale:

• Unabhängig davon, ob Sie Diagramme, Customer Journeys oder Wireframes erstellen, Axure RP hilft Ihnen, die Probleme zu dokumentieren und alle auf dieselbe Seite zu bringen.
• Erhalten Sie Benachrichtigungen über die neuesten Änderungen und Diskussionen per E-Mail, Slack oder Microsoft Teams.
• Arbeiten Sie mit High-Fidelity- und Low-Fidelity-Projekten.
• Erstellen Sie spontan komplexe Interaktionen wie Benutzeranmeldung und Medienvorschau.

Momentan ist Axure für Windows- und macOS-Systeme verfügbar. Darüber hinaus sind Ihre ersten 30 Tage auf Kosten des Hauses (Probezeit). Das sollte mehr als genug Zeit sein, um an mehreren Projekten zu arbeiten und herauszufinden, wo Axure für Ihre Bedürfnisse geeignet ist.

Framer

Es ist irgendwie verrückt, sich die Landschaft des modernen Webdesigns anzusehen. Allein in den letzten 3 Jahren haben sich die meisten Websites von jeglichem „statischen“ Gefühl entfernt. Und dazu gehören Themen für Plattformen wie WordPress. Es scheint also, dass jeder ein bisschen JavaScript gelernt hat. Und damit haben sich die Gestaltungsmöglichkeiten wie bei einer Büchse der Pandora geöffnet.

Aber wer beschwert sich? Je mehr, desto besser. Der Zugriff auf verschiedene Tools und Software ist für den Erfolg unerlässlich. Einige machen Dinge besser als andere, während einige Marken über die Norm hinaus innovativ sind. Eine dieser Marken ist Framer, die ohne Zweifel für viel Geschwätz in der Designer-Community gesorgt hat.

Wir haben Framer vor vier Jahren ins Leben gerufen, um Menschen eine einfache Möglichkeit zu bieten, ihre statischen Designs mit Code zum Leben zu erwecken. Jetzt ist Framer ein vollwertiges Tool für interaktives Design, Prototyping und Zusammenarbeit, dem Teams bei Dropbox, Pinterest, Twitter und anderen vertrauen. Und wir fangen gerade erst an.

Framer, Inc.

Wenn Sie jemals Sketch verwendet haben, wird sich Framer sehr ähnlich anfühlen. Natürlich auf eine gute Art und Weise. Die sauber perfektionierte Benutzeroberfläche von Framer ist kaum zu übersehen. Das Erstellen neuer Layouts, das Hinzufügen neuer Elemente und das Implementieren von Animationen fühlt sich einfach flüssig an. Ein Zeichen für eine großartige Benutzererfahrung.

Framer bietet zwar ein integriertes Interaktionsmanagement, funktioniert aber auch hervorragend mit React zusammen. Eine bekannte JavaScript-Bibliothek zum Bootstrapping von Benutzeroberflächen. Es bringt Sie so viel näher, um Ihnen das Gefühl zu geben, die Kontrolle über die Dinge zu haben.

Origami-Studio

Facebook hat vielleicht nicht den besten Ruf in der Sicherheitsabteilung, aber es weiß auf jeden Fall, wie man robuste Software entwickelt. Und Origami Studio ist ein weiteres Beispiel dafür. Origami wurde ursprünglich für den internen Gebrauch entwickelt und ist jetzt für alle kostenlos verfügbar. Sobald Sie es zum Laufen gebracht haben, ist es eine absolute Freude, damit zu arbeiten.

Facebook hat viel investiert, um Origami so leicht verständlich wie möglich zu machen. Denken Sie an Videos, Dokumentationen und Inspiration aus der Community. Sie sollten in der Lage sein, Ihren ersten animierten Prototyp innerhalb weniger Minuten nach der Verwendung der App fertig zu haben.

Origami Studio-Projekte können auch in separate Präsentationen umgewandelt werden. Wenn Sie also an einem Freitagnachmittag einen Designbericht einreichen müssen, rationalisiert dieses Tool den gesamten Prozess. Ich denke, es ist auch eines dieser seltenen Tools auf unserer Liste, die sich ausschließlich auf den Aspekt des Prototyping konzentrieren. Vielleicht ist das auch gut so?

Alva

Alva ist ein aufstrebendes visuelles Designtool, das auf Codekomponenten basiert. Es wird als Open-Source-Tool entwickelt, sodass Sie sowohl den Projektcode überprüfen als auch Pull-Requests oder Issues einreichen können.

Der Hauptunterschied zu anderen Tools wird also die Funktion der Codekomponenten sein. Solche Komponenten müssen von Ihrem Entwicklerteam bereitgestellt werden. Was für größere Agenturen kein Problem sein sollte.

Beginnen Sie mit einem minimalen Satz von Komponenten, um Konzepte zu skizzieren, und iterieren Sie Ihr Team schnell, um Komponenten zu erstellen und zu erweitern, Design und Implementierung zu verfeinern und einen funktionierenden, lebendigen Prototyp zu erstellen.

Es besteht auch die Möglichkeit, Designdateien aus Tools wie Figma und Photoshop zu implementieren. In Zukunft wird weitere Unterstützung hinzugefügt. Wenn ich es in wenigen Worten zusammenfassen müsste, versucht Alva, den Prozess der Verwendung und Wiederverwendung vorhandener Komponenten für das Rapid Prototyping zu rationalisieren.

Als Marke befolgen Sie möglicherweise einen ähnlichen Design-Styleguide. Indem Sie Ihre Codekomponenten speichern und wiederverwenden können, verbessern Sie die Produktivität Ihres Teams erheblich.

Phase

Phase ist wahrscheinlich das frischeste Produkt in dieser Zusammenfassung. Tatsächlich ist die App nur als „Early Access“ verfügbar, wird aber irgendwann im Jahr 2019 veröffentlicht. Die erste Ankündigung kam bereits 2018, als das Team erklärte, was ihre Vision ist und wie die Roadmap aussieht. Um ehrlich zu sein, sieht dies nach einem verdammt guten Webdesign-Tool aus, das Sie Ihrem Repertoire hinzufügen können.

Das Ziel ist es, Phase zu einem universellen Kit für gründliches Produktdesign zu machen. Es gibt nur sehr wenige Tools auf dem Markt mit einer solchen Abdeckung, daher wird es eine schöne Ergänzung für den Workflow eines jeden Designers sein.

Phase kommentiert die Funktionalität wie folgt: „Wir glauben, dass wir uns nach Jahren des vermeintlichen Fortschritts immer noch im Wesentlichen mit Druckdesign-Tools befassen. Sicher, wir haben ein oder zwei Dinge auf sie geklebt, aber ihre Fundamente sind im Wesentlichen immer noch die gleichen. Wir verdienen Besseres. Es ist an der Zeit, dass sich unsere Produkte endlich wirklich weiterentwickeln. „ .

In den letzten paar Absätzen der Ankündigung hat das Team von Phase das Thema Code angesprochen. Wie in Code, der als Mittel zum Entwerfen verwendet wird. Im Allgemeinen ist es umgekehrt. Sie verwenden Tools, um ein Layout zu entwerfen, und lassen es dann von einem Entwickler codieren. Nun, mit Phase wird viel mehr Wert darauf gelegt, Code zu schreiben, um ein Design zu verwirklichen.

Dies sorgt für viel mehr Flexibilität und sicherlich für die Anpassungsfähigkeit an verschiedene Geräte. Wenn Sie etwas auf der Grundlage eines „Bildschirms“ statt einer „Seite“ erstellen, wird es viel einfacher, Ihr Design auf viele verschiedene Medien zu übertragen, einschließlich Geräte des Internets der Dinge.

Fazit

Die Auswahl an exzellenten Webdesign-Prototyping-Apps ist eindeutig reichlich vorhanden. Und ich denke, es war wichtig, auch einige weniger bekannte, aufstrebende Entscheidungen zu diskutieren. Wie Sie wissen, entwickelt sich das Webdesign derzeit sehr schnell.

Die Möglichkeiten der modernen Technologie sind extrem umfangreich, was bedeutet, dass das Erstellen einzigartiger und interessanter Designs nicht mehr auf einige wenige Personen beschränkt ist. Daher spiegeln die für diesen Beitrag aufgeführten Tools und Apps solche schnellen Veränderungen wider und sollten Ihnen reichlich Ressourcen bieten, um die Anforderungen Ihres nächsten Projekts mit äußerster Präzision anzugehen.

Wenn Sie Fragen haben oder Hilfe benötigen, teilen Sie uns dies über die Kommentare mit und wir werden unser Bestes tun, um Ihnen entgegenzukommen.