Accentsconagua
Share
Schauen wir uns einige Prototyping-Tools an, die für Webdesigner heute verfügbar sind, und zwar in keiner bestimmten Reihenfolge:
Ideen an Stakeholder und Kunden auszugeben, erscheint zunächst mühelos. Wenn es jedoch schwierig wird, brauchen wir Werkzeuge, um den Feedback-Prozess zu beschleunigen. Das Internet wird für Frontend-Designer mit immer mehr interaktiven Anfragen immer komplizierter. Aktionen wie Wischen und Ziehen sind nur die Spitze des Eisbergs, und herauszufinden, wie das ganze Puzzle zusammenpasst, liegt die wahre Kunst des Prototypens.
Per Definition ist ein "Prototyp" eine frühe Probe, die zum Testen spezifischer Konzepte erstellt wurde. Ein Prototyp wird verwendet, um ein System auszuwerten und zu verbessern, um einen besseren Einblick in das Projekt als Ganzes zu erhalten. Wir arbeiten alle täglich an Projekten und einige sind viel komplizierter als andere, aber wann ist es an der Zeit, ein Instrument zur Unterstützung der Feedback-Nahrungskette zu fordern?
Einige würden argumentieren, Code sei am Anfang viel schneller, aber es gibt Momente, in denen die Zeit besser mit einem Prototyp verbracht wird, anstatt Zeit mit dem Entwickeln von etwas zu verbringen, das schnell auf der Strecke bleibt. Prototyping liefert Feedback zu Interaktion und Platzierung. Es handelt sich um ein interaktives Drahtgitter, das den Kunden ein besseres Verständnis darüber vermittelt, wie das Projekt für ihre Benutzer zusammenpasst.
In anderen Fällen kann das Prototyping vor der Codierung dem Projekt zugute kommen, indem mögliche Randfälle identifiziert werden, die möglicherweise übersehen wurden.
Wenn wir uns fragen, wo dies in die heutige Landschaft passt, können wir die ständig steigende Nachfrage nach Bewegungsarbeit definitiv zuordnen. Schnittstellen werden zu lebenden Organismen mit interaktiven Inhalten. Einfache Interaktionen können zur Erklärung verbal erklärt werden. In anderen Zusammenhängen hilft es jedoch, eine Perspektive zu erhalten, wie eine Interaktion ausgelöst werden kann. Außerdem fordern immer mehr Kunden den Nachweis von Konzepten, bevor sie sich anmelden. Es ist jetzt mehr denn je wichtig, eine Idee zu haben, wohin sich der Prototyp entwickeln muss.
Mit so vielen Tools auf dem Markt, welche sollten Sie verwenden? Lass uns einen Blick darauf werfen.
FramerFramer bietet die vertraute visuelle Bearbeitung mit der Flexibilität des Codes und sorgt für einen nahtlosen Arbeitsablauf, der durch Gerätevorschau, Versionskontrolle und vereinfachte Freigabe ergänzt wird. Eine App, mit der neue Interaktionsmuster entwickelt werden können, um bahnbrechende Apps zu erstellen. Holen Sie Daten von Ihrer bevorzugten API ein, erfassen Sie echte Benutzereingaben, um zu testen, und arbeiten Sie mit tatsächlichen Benutzern und Feedback. Importieren Sie Grafiken direkt aus Sketch, Photoshop oder Figma.
Obwohl Framer so aussieht, als würde es strikt für mobile Apps verwendet, kann es auch für Nicht-App-Projekte genutzt oder als eigenständige Bibliothek verwendet werden. Wenn Sie die Framer JS-Bibliothek allein verwenden, vermeiden Sie die IDE vollständig. Im Wesentlichen handelt es sich dabei um ein Open Source JavaScript-Framework für Rapid Prototyping. Definieren Sie Animationen und Interaktionen mit Filtern, Federphysik, 3D-Effekten und mehr. Obwohl CoffeeScript nicht erforderlich ist, verwenden die Dokumente neben der IDE auch CoffeeScript.
Es sollte bekannt sein, dass Framer nicht für die Erstellung von fertigungsbereiten Animationen verwendet werden soll.
@UXDesignDad @framer Hey Andre! Framer ist ein Prototyping-Tool für den Mac. Also keine Produktions-Apps
- Krijn Rijshouwer (@krijnrijshouwer) 2. Februar 2017
Da Framer über ein eigenes Konzept von Ebenen verfügt und recht strenge Codeweise ist, können Sie es nicht in einfachem (vorhandenem) DOM-Material wie in GreenSock verwenden. In der Tat wird eine eigene Leinwand in das DOM eingefügt, und alle Animationen werden in dieser Leinwand ausgeführt.
Adobe XDZeichnen, wiederverwenden und remixen Sie Vektor- und Raster-Artworks, um Wireframes, Bildschirmlayouts, interaktive Prototypen und produktionsfertige Assets aus einer App zu erstellen. Arbeiten Sie mit leistungsstarken Tools wie Repeat Grid, die speziell für XD erstellt wurden, sowie mit Layern, Symbolen und Stiftwerkzeugen für das UX-Design. Fügen Sie mithilfe verschiedener Animationen Interaktionen hinzu, um Übergänge zwischen Art Boards zu erstellen, um den Fluss Ihrer App / Website zu simulieren.
Kunden können direkt Kommentare zu Ihren Prototypen abgeben, wenn Sie sie direkt freigeben, und Entwürfe in Echtzeit auf tatsächlichen Geräten anzeigen. Designs können plattformübergreifend angepasst und automatisch aktualisiert werden. Wechseln Sie mühelos von Wireframing, visuellem Design, Interaktionsdesign, Prototyping, Vorschau und Weitergabe in einem leistungsstarken Werkzeug.
Während XD immer noch ein Beta-Produkt ist, bleibt abzuwarten, ob es auf absehbare Zeit bestehen bleibt. Sie können mehr über die hier veröffentlichten Funktionen lesen, um über anstehende Änderungen und Verbesserungen informiert zu werden. Wir haben sogar eine 15-teilige Serie veröffentlicht, die alle wichtigen Werkzeuge enthält, die Sie für das Design und Prototyping mit Adobe XD benötigen:
Adobe After EffectsAfter Effects ist nicht speziell ein Prototyping-Tool für Websites und Anwendungen (obwohl Sie immer noch damit umgehen können), aber es hilft Prototyp-Bewegungen für diejenigen, die nach einem Weg suchen, Animationen für Comp / Mock-Ups für Kunden zu erstellen. Erstellen Sie Bewegungsgrafiken für Videos oder Animationseffekte für das Web. Hier ist ein großartiger Artikel zu Tuts + von Charles Yeager:
Schauen Sie sich auch diese zehnteilige Serie auf Tuts + an, die als Willkommen bei After Effects bezeichnet wird.
Adobe Animate CCAdobe Animate ist eine Weiterentwicklung von Flash Professional. Dieses Tool umfasst Funktionen wie Zeitleisten, Keyframes, umfangreiche Exportoptionen, Unterstützung für JavaScript-Bibliotheken von Drittanbietern, Anpassungen der Kameraposition und vieles mehr. Während es mehr auf Animatoren abzielt, darf man nicht glauben, dass man es nicht für andere Bedürfnisse verwenden kann. Denken Sie daran, dass Werkzeuge so viel tun, wie Sie möchten, und sind nur durch Ihre Vorstellungskraft eingeschränkt. Verwenden Sie es für Website-Wireframes, für das Testen von Animationen für Apps und mehr. In diesem Artikel können Sie wirklich über Ihre Arbeitsweise von Adobe Animate lesen:
Craft-PrototypErstellen Sie HiFi-Prototypen mit Ihren echten Designdateien. Handwerk ist Teil der Invision-Familie. Ein Unternehmen, das heutzutage viele Tools (wie Macaw und Easee) von externen Unternehmen bezieht.
Craft Prototype ist ein leistungsfähiges Werkzeugset, mit dem Sie mit echten Daten entwerfen können, indem Sie Stilvorlagen mit einem Klick erstellen. Mit dem Prototyp können Sie die Arbeit direkt von Sketch aus erledigen. alles in einem Raum. Mit der Echtzeit-Spiegelung für Ihr Telefon können Sie sofort Design-Prototypen testen. Wenn Sie bereit sind zu teilen, können Sie Ihre Arbeit direkt bei Invision veröffentlichen, um sofort Feedback von Kunden und Stakeholdern zu erhalten. Sie können sogar Prototypen mit einer höheren Wiedergabetreue für Bewegung erstellen, sodass Sie eine Zeitleiste für die visuelle Anpassung mit Keyframes erhalten. Generieren Sie HTML und CSS, nativen Quellcode und Dokumentation für Ihren Entwickler. In diesem kurzen Video wird die Craft 2.0 Preview - Prototype in Sketch auf Vimeo erläutert.
PrinzipDas Prinzip macht es einfach, animierte und interaktive Benutzeroberflächen zu entwerfen. Egal, ob Sie den Fluss einer Multi-Screen-App oder neue Interaktionen und Animationen gestalten, Sie können mit Principle Designs erstellen, die sich sehen lassen und toll aussehen. Die App ähnelt sehr der Benutzeroberfläche für Sketch, einschließlich anderer vertrauter Aspekte für Ausrichtung, Art Board-Erstellung und Bildschirmverbindungen sowie Echtzeitvoransichten. Klicken Sie auf Animationsebenen, um tiefer in Keyframes einzutauchen und benutzerdefinierte Beschleunigungskurven wie in anderen Animationswerkzeugen anzupassen. Das Prinzip gibt Ihnen die Freiheit, zu experimentieren, ohne Sie auf vordefinierte Übergänge zu beschränken. Außerdem können Sie Zeichenflächen aus Sketch importieren.
Mit der Principle Mirror-App für iOS können andere Benutzer Ihre Designs auf ihrem Gerät anzeigen. Während des Entwurfs können Sie sofort interagieren, indem Sie Ihr Gerät an den Computer anschließen oder eine eigenständige Mac-App für andere Benutzer exportieren.
AtomicAtomic ist eine webbasierte App, die in Sketch integriert ist und es Ihnen ermöglicht, Designs von dort oder von jedem beliebigen Ort aus zu importieren. Das Einbringen von Designs in Atomic ist einfach. Verwenden Sie das leistungsstarke Sketch-Plugin oder fügen Sie Elemente aus Ihrem bevorzugten Designtool ein.
Atomic verfügt über integrierte Zeichnungs- und Layout-Tools zum Entwerfen von Grund auf oder zum Erstellen importierter Designs. Verknüpfen Sie Ihre Designs schnell mit einer Reihe von Gesten und Übergängen für mobil oder auf dem Desktop. Verwenden Sie benutzerdefiniertes CSS, um zusätzliche Stile anzuwenden und Ihr CSS zu exportieren, um es mit anderen Entwicklern zu teilen. Lesen Sie mehr über die Funktionen von Atomic auf ihrer Website.
ProtoErstellen Sie anspruchsvolle Animationen für jedes Interaktionsdesignmuster mit der einfach zu verwendenden Zeitleiste mit Proto. Die App wird mit einem vollständigen Satz von UI-Bibliotheken wie iOS9, Material Design, Windows 10 und mehr geliefert. Entwürfe können mit der Skizze oder dem Photoshop-Plugin importiert werden. Importiere sie in Ebenen und synchronisiere sie mit Dropbox. Exportieren Sie UI-Assets direkt. Zeigen Sie Prototypen in Browsern oder Geräten mit der Proto-App für IOS oder Android an. Teilen Sie es mit Kunden oder Teammitgliedern, um zusammenzuarbeiten und Feedback zu generieren. Proto kann in führende Testtools für Benutzer integriert werden, um ein umfassendes Feedback und Einblick zu erhalten.
Erfahren Sie mehr über seine Funktionen auf der Proto-Website.
JustinMindJustinMind ist ein App-basiertes Produkt, mit dem einfache Modelle in interaktive Prototypen für iOS und Android umgewandelt und Web- und mobile Wireframes erstellt werden können. Nutzen Sie die vorgefertigten UI-Bibliotheken, binden Sie HTML und Dokumente in alles ein, was Ihr Herz begehrt. Bezahlte Konten ermöglichen es mehreren Benutzern, gleichzeitig mit demselben Prototyp zu interagieren, wodurch Feedback einfach gewonnen werden kann. Es verfügt sogar über eine umfangreiche Bibliothek mit bereits vorhandenen Widgets, die auf die für Ihr Projekt ausgewählte Gerätevorlage zugeschnitten sind. Elemente wie interaktive Schaltflächen, Kontrollkästchen, Listen und sogar Parallax-Layouts stehen Ihnen zur Verfügung.
Wenn Sie mit diesem Tool noch nicht vertraut sind, finden Sie hier zahlreiche Tutorials und geführte Videos für Anfänger bis Fortgeschrittene. Während es einen kostenlosen Plan für die Browserfreigabe bietet, müssen Sie für die Zusammenarbeit zwischen Ihren Teammitgliedern ein kostenpflichtiges Konto erwerben. Mit JustinMind Prototyper können Sie Bilder aus einem beliebigen Designtool oder direkt aus Ihrem Webbrowser importieren und mit dem „Image Hotspot“ -Tool in aufregende und ansprechende Webprototypen verwandeln. Exportieren Sie Ihren Prototyp in ein voll funktionsfähiges HTML-Dokument, und machen Sie es in jedem Webbrowser verfügbar.
Origami wurde von Designern bei Facebook entwickelt und verwendet und wurde zum Erstellen von Apps wie Instagram, Messenger und Paper verwendet. Kopieren Sie alles aus Sketch und fügen Sie native Ebenen in Origami Studio ein. Passen Sie schnell an, fügen Sie Verhalten hinzu und animieren Sie beliebige Ebeneneigenschaften, ohne zurückgehen zu müssen. Das Tool bietet Designern eine Reihe von Gesten und Übergangsanimationen, die in UI-Mustern üblich sind.
Origami bietet nützliche Funktionen für interaktives Prototyping sowie Plugins für Sketch und Photoshop sowie eine Dokumentationsbibliothek mit Foren.
Es gibt eine Funktion zum Exportieren in Code, mit der Sie Ihr visuelles Design in schriftliche Codebeispiele für iOS, Android oder das Web konvertieren können. Prototypen können nicht direkt mit Personen geteilt werden, die auf anderen Geräten als Ihrem eigenen Gerät arbeiten. Sie können jedoch Prototypen mit Origami Live (Android und iOS) in der Vorschau anzeigen. In den Tutorials erfahren Sie mehr über die Origami-Website.
FlintoFlinto für Mac ist ein App-basiertes Tool, mit dem Sie von einfachen Tap-Through-Prototypen bis hin zu umfassenden Prototypen mit Interaktionen alles erstellen können. Es gibt keine Programmierung oder Zeitpläne. Es ist ein Prototyping-Tool für Designer im Kern. Platzieren Sie Objekte und Komponenten dort, wo Sie es wünschen. Übergänge können einfach oder komplex sein und Übergänge sind wiederverwendbar. Sie haben eine genaue Kontrolle über jede Ebene, einschließlich der Beschleunigung von Federn oder Cubic-Bezier.
Verwenden Sie den "Verhaltens-Designer", um auf einem Bildschirm vorhandene Mikrointeraktionen zu erstellen. Dies ist ideal für Effekte wie Schaltflächeneffekte, Toggle-Schalter, Loop-Animationen und Scroll-basierte Animationen.
Das Hinzufügen von Bildlaufbereichen zu Ihren Bildschirmen ist ebenfalls einfach. Wählen Sie die Ebenen aus und klicken Sie auf die Schaltfläche "Gruppe blättern". Sie können eine Vielzahl von Optionen anpassen, Paging-Scroll-Gruppen erstellen, Scroll-Gruppen verschachteln und sogar Scroll-basierte Animationen erstellen.
Alle Änderungen, die Sie in Flinto für Mac vornehmen, können direkt im Vorschaufenster oder auf Ihrem mit WLAN verbundenen iPhone oder iPad mit der kostenlosen iOS-Viewer-App getestet werden.
Die iOS-Viewer-App von Flinto kann von jedermann kostenlos im App Store heruntergeladen werden, sodass Sie Ihre Flinto-Dateien an alle Personen senden können, mit denen Sie teilen möchten.
WebflowWebflow ist eine weitere webbasierte App, die direkt in den neuesten Versionen von Chrome und Safari ausgeführt wird. Dies bedeutet, dass es derzeit in diesen Browsern optimiert ist, der erzeugte Code jedoch Cross-Browser-unterstützt ist.
„Erstellen Sie dynamische, responsive Websites, ohne Code schreiben zu müssen. Starten Sie mit einem Klick und genießen Sie das schnellste und zuverlässigste Hosting im Web. Exportieren Sie sauberen, semantischen Code, um ihn an Entwickler weiterzugeben. “
Webflow ist stark auf Webanimationen, Interaktionen und responsives Webdesign ausgerichtet. Interactions 2.0 ist in Kürze verfügbar und bietet mehr Kontrolle über Animationen und Interaktionen über Haltepunkte hinweg (häufig von Schmerzpunkten ausgedrückt), und natürlich die Leichtigkeit des visuellen Bauens gegenüber einem Proxy-Code.
Um Ihnen einen Eindruck von den Möglichkeiten von Webflow zu geben, checkout diese Live-Demo, die auch in Webflow angezeigt werden kann, oder checken Sie den Code, der in dieser CodePen-Demo erzeugt wurde. Es ist auch von Vorteil, einen Eindruck der Benutzeroberfläche in diesem Video zu erhalten.
Die erzeugte Codequalität ist semantisch, leserlich und einfach zu verarbeiten, wenn Sie sie extern exportieren und verwenden oder an einen Entwickler weitergeben. Hier sind ein paar Demos, die den produzierten Code zeigen.
Derzeit ist Interactions V1 verfügbar, und Interactions 2.0 enthält mehr Anpassungen mit Animationen vom Parallax-Typ und visuell eingebaute Interaktivität. Animationen basierend auf der Cursor- / Live-Scroll-Position. Webflow hofft, die Betaversion bald zu starten. Interactions 2.0 wird daher ein großer Teil der Benutzeroberfläche sein und ein großer Grund für viele Designer und Entwickler, Webflow zu verwenden.
Danke an Waldo Broodryk von Webflow, der sich die Zeit nahm, um viele meiner Fragen zu beantworten und seine Demos und sein Wissen zu teilen.
Mit dem Browser-basierten Marvel-Editor können Sie alle Ihre Designs miteinander verknüpfen, Gesten und Übergänge hinzufügen, damit Ihr Prototyp sich wie eine echte App oder Website anfühlt. Erstellen Sie Prototypen für iPhone, iPad, Desktop, Apple TV, Apple Watch und Android.
Marvel bietet Funktionen wie Zusammenarbeit, Kommentieren und das Gestalten in Ihrem Browser mit „Canvas“. Außerdem können Sie Bilder mit Photoshop, Sketch oder mit Stift und Papier hinzufügen. Benutzer können klicken und ziehen, um interaktive Hotspots zu Designs zu erstellen, die auf das Klicken oder Berühren reagieren. Marvel verfügt über weitere coole Funktionen wie ein Sketch-Plugin und sogar ein iOS-Tool. Die iOS-App enthält jetzt Canvas (bereits erwähnt), das Schnellentwurfstool von Marvel, mit dem Sie App-Modelle von Grund auf erstellen können. Diese App enthält auch Iconfinder und Unsplash, die Ihnen eine epische Datenbank mit über einer Million Archivfotos und Symbolen bieten, die Sie in Ihre Entwürfe integrieren können.
Marvel bietet außerdem Funktionen wie Benutzerrollen, Projektorganisation mithilfe von Ordnern, Synchronisieren von Designs von Google Drive, Optionen zum Einbetten von Video und Audio von YouTube, Spotify, Vimeo und SoundCloud.
Placeit: ModellgeneratorPlaceit ist ein Modellgenerator; ein Online-Tool, mit dem Sie Ihre eigenen Entwürfe (UI-Designs, Logos, andere Branding-Elemente) in Präsentationsumgebungen einbetten können. Beispielsweise können Sie ein App-Design haben, das Sie innerhalb eines iPhone auf einem Couchtisch platzieren möchten, oder Ihr Logo auf das Hemd eines Modells setzen.
Vielleicht möchten Sie sogar, dass Ihre Designs wie folgt in Videos eingebettet sind:
UI-Design, eingebettet in Placeit-VideomaterialMit fast 3.000 Vorlagen und Zählung hat Placeit mit Sicherheit das, wonach Sie suchen.
Egal für welches Werkzeug Sie sich entscheiden, wählen Sie das für Sie passende und dasjenige, mit dem Sie sich am wohlsten fühlen. Hinterlassen Sie einen Kommentar, wenn Sie Erfahrung mit einem der genannten Tools hatten, um anderen zu helfen, zu entscheiden, welches Tool Sie verwenden möchten. Ich hoffe, dass dieser Artikel Ihnen hilft, mehr Einsicht zu gewinnen und eine fundierte Entscheidung zu treffen, wenn die Zeit kommt, zu entscheiden.
Besonderen Dank an diese Leute für ihren Input, Wissensaustausch und Meinungen während meiner Recherche:
