20 Top-UX-Tools und -Ressourcen

So wie sich die Welt des Webdesigns ständig verändert und weiterentwickelt, sind es auch die Tools, mit denen wir Online-Erlebnisse schaffen können. Angesichts der ständig wachsenden Innovationen, die unsere Online-Interaktion verändern, kann es eine Herausforderung sein, mit den Besten Schritt zu halten Web-Design Tools, mit denen Sie intelligenter arbeiten können.

Wenn es jedoch darum geht, ein erfolgreiches UX- und UI-Design zu erstellen, sind Sie hier genau richtig. Dies sind die neuesten Tools und Ressourcen, mit denen Sie eine benutzerfreundliche Website erstellen können. Wenn Sie eine Website von Grund auf neu erstellen, werden Sie überrascht sein, was der neueste Website-Builder leisten kann und wie nahtlos das Richtige ist Cloud-Speicher wird Ihren Prozess machen.

01. Cursomizer

Cursomizer-Landingpage

[Bild: Cursomizer]

Dieses Site-Projekt von KIRKDESIGN wurde als Hommage an den Pionier der Benutzeroberfläche, Douglas Englebart, erstellt und lädt UX-Designer ein, benutzerdefinierte Mauscursor zu erstellen. Durch die Optimierung verschiedener grafischer Eigenschaften in Bezug auf Form, Farbe und visuelle Effekte können Besucher verschiedene Optionen prototypisieren, ihre Auswahl testen und sogar mit Kollegen teilen, indem sie einen Link kopieren.

02. Axure RP

Axure RP-Landingpage

[Bild: Axure RP]

Axure RP ist eine kommerzielle Rapid-Prototyping-Anwendung für Mac und PC und ermöglicht Designern das Skizzieren, Drahtmodellieren und Prototypen von UX-Projekten mithilfe der intuitiven Drag-and-Drop-Bearbeitung. Weitere Funktionen bieten Unterstützung für Flussdiagramme und Animationen sowie Tools für die Teamzusammenarbeit, einschließlich einer Cloud-basierten Axure Share-Funktion zum Teilen veröffentlichter Prototypen zwischen Geräten.

03. Mockflow

Mockflow-Landingpage

[Bild: Mockflow]

Diese Online-Anwendung beschreibt sich selbst als UI- und UX-Planungssuite und erfordert keinen Download. Sie ermöglicht Designern, ihre Ideen für Benutzeroberflächen schnell zu überdenken. Ein kostenloses Basispaket kann auf Unternehmensebene skaliert werden und bietet Zugriff auf verschiedene Funktionsmodule für Wireframing, Site-Mapping, Crafting-Design-Spezifikationen, gemeinsame Überprüfung, Screenshot-Annotation und sogar Site-Hosting (Optionen für das Hosting finden Sie in unserem Leitfaden zu Web-Hosting ).

04. StoriesOnBoard

StoriesOnBoard-Landingpage

[Bild: StoriesOnBoard]

StoriesOnBoard ist als SaaS-Abonnementprodukt erhältlich und in erster Linie eine User Journey- oder Story-Mapping-Lösung, mit der UX-Designer aufgefordert werden, Softwareprojektpfade zu zeichnen. Narrative Abläufe, Ziele und Schritte können mithilfe von Karten, ähnlich wie Haftnotizen, gemeinsam visualisiert werden, um Story Maps schnell anzuordnen und neu anzuordnen und dabei unbegrenzte Details und Kommentare hinzuzufügen.

05. Tafel

Board Landing Page

[Bild: Boords]

Dieser kollaborative Online-Storyboard-Ersteller ist neben Plus-, Team- und Enterprise-Paketen als kostenlose Testversion verfügbar. Der integrierte Frame-Editor sorgt für das Zeichnen der gemeinsam nutzbaren Storyboards, während ein integriertes „Animatic Tool“ für Dynamik sorgt und der Inline-Skript-Editor das bequeme Hinzufügen von narrativem Text ermöglicht. Weitere bemerkenswerte Funktionen sind das Sammeln von Kundenfeedback, Voice-Over und mehrere Exportoptionen.

06. Helium

Helio Landing Page

[Bild: Helium]

Helio, früher bekannt als Solidify von ZURB, ist eine webbasierte App, die nicht nur klickbare Prototypen aus hochgeladenen Schnittstellenmodellen generiert, sondern auch entscheidend Feedback-Daten liefert. Designer können die Meinungen und Perspektiven der Benutzer von 100.000 Diskussionsteilnehmern nutzen, um wertvolle „Design Insights“ zu bestimmten Zielgruppendemografien und ihren Verhaltensmustern zu erhalten.

07. UX App

UX App Landing Page

[Bild: UX App]

Mit UX App, einem weiteren Cloud-basierten Tool, können Designer vollständig interaktive Prototypen für Desktop-Anwendungen, mobile Apps und Websites verkabeln, ohne dass Codierung erforderlich ist. Der Designer für visuelle Aktionen bietet eine Toolbox mit echten HTML- und JavaScript-basierten Komponenten, mit der benutzerdefinierte Ereignisse, Übergänge und Aktionen definiert oder Designs alternativ nur als PNG-Dateien exportiert werden können.

08. Design Spiegel

Design Mirror Landing Page

[Bild: Designspiegel]

Zu diesem cleveren Vorschau-Plugin für Photoshop, Adobe XD und Sketch kommen Begleit-Apps für Android- und iOS-Geräte hinzu. Nach der Installation können Designer ihre Schnittstellendesigns auf den beliebtesten Smartphones über Wi-Fi, USB und Browser-Link anzeigen. Zu den Funktionen gehören plattformübergreifende Unterstützung für Windows und Mac, Pinch-Zoom, Swipe-Navigation und durch Screenshots ausgelöstes Speichern.

09. UX-Kits

UX Kits Landing Page

[Bild: UX Kits]

Bei diesen „Kits“, den Produkten von Eric Miller Design, handelt es sich im Wesentlichen um grafische Vorlagen und Schnittstellenkartenstapel für UX-Brainstorming-Zwecke. Wireflows, Website-Flussdiagramme und Sitemaps können unabhängig voneinander für Illustrator, OmniGraffle und Sketch oder in drei Formatpaketen erworben werden. Wireframe- und Website-Kartendecks bieten dann eine greifbarere Möglichkeit, Seiten oder Schnittstellen auf jeder ebenen Fläche zusammenzusetzen.

10. Wipebook

Wiprebook-Landingpage

[Bild: Wipebook]

Welcher UX-Designer hat sich nie gewünscht, seine Skizzenblöcke von schlechten Ideen zu befreien? Mit Wipebook können Sie genau das tun und mit einer Reihe von sofort löschbaren Flipcharts und Notebooks auch umweltfreundlich sein. Es stehen zahlreiche Größen und korrigierbare Markierungen zur Verfügung. Mit Wipebook Scan können diese temporären Kritzeleien in der Cloud gespeichert werden, bevor sie verschwinden.

elf. Smartlook

Smartlook-Landingpage

[Bild: Smartlook]

Smartlook ist eine Plattform für qualitative Verhaltensanalysen für Websites und mobile Apps. Zu den Hauptfunktionen gehören die Aufzeichnung und Wiedergabe von echten Videoaufzeichnungen, die die Interaktion der Benutzer verfolgen, sowie Heatmaps, um genau hervorzuheben, wo sie am meisten klicken. Die automatische Ereignisverfolgung zeigt einen Überblick über die Verwendung beliebter Funktionen, während Trichter detaillierte Statistiken zu Conversion-Pfaden liefern.

12. Adobe XD

Adobe XD-Landingpage

[Bild: Adobe XD]

Adobe XD ist Teil seiner Creative Cloud-Anwendungssuite und ein kostenloses Produkt zur Umwandlung von Schnittstellen-Comps in interaktive Prototypen. Zu den intelligenten visuellen Bearbeitungswerkzeugen gehören das Ziehen von Drähten zum Verknüpfen von Zeichenflächen, der einfache Import anderer CC-Elemente sowie die Unterstützung von Animation und Sprache. Darüber hinaus ermöglicht eine mobile Begleit-App native Vorschauen auf iOS- und Android-Geräten.

13. Keynotopie

Keynotopia-Landingpage

[Bild: Keynotopia]

Keynotopia bietet eine beeindruckende Sammlung von über 5.000 lizenzgebührenfreien, vektorbasierten Vorlagen und Komponenten für Benutzeroberflächen sowie über 200 Symbolen. Sie wurden alle in Apple Keynote und Microsoft PowerPoint erstellt und ermöglichen es Designern, jedes Beispiel zu bearbeiten und anzupassen, ohne dass andere Tools erforderlich sind. Einzel- und Bundle-Pakete sind ab 39 US-Dollar erhältlich.

14. UI-Schablonen

Zielseite für UI-Schablonen

[Bild: UI-Schablonen]

Geeks lieben Gadgets und UI / UX-Designer sind keine Ausnahme. Dieser trendige eShop bietet eine Reihe von Zubehörteilen, darunter Skizzenblöcke und Stifte, vor allem aber eine Reihe wirklich cooler Interface-Schablonen und „Framer“ -Lineale. Die Schablonen aus strapazierfähigem Edelstahl oder dickem durchscheinendem Kunststoff unterstützen das Zeichnen von iPhone, Android, iPad und Websites sowie allgemeine Blasensymbole zur Darstellung des Benutzerflusses.

15. Ideapaint

Ideapaint Landing Page

[Bild: Ideapaint]

Stellen Sie sich die Szene vor - Ihre Brainstorming-Sitzung hat eine hervorragende UX-Designidee hervorgebracht, aber das Whiteboard ist AWOL und das Papier ist knapp. Nun, mit Ihrem Sitzungssaal, der mit IdeaPaint in trockener Löschung dekoriert ist, können Sie einfach direkt an die Wände kritzeln! Mit der magnetischen Grundierung können abwischbare Wandverkleidungen stattdessen aufgeklebt werden. Eine Reihe von Radiergummis und Reinigungsprodukten sind auch für stolze Startups im Büro erhältlich.

16. Userbrain

Userbrain Landing Page

[Bild: Userbrain]

Diese Cloud-basierte Benutzertestlösung verspricht, den Prozess zu vereinfachen, indem Website-Designer Videos von echten Besucherinteraktionen ansehen können. Userbrain bietet grundsätzlich Zugriff auf ein weltweites Netzwerk neuer Benutzer, die bereit sind, Feedback durch kontinuierliche Erfassung von Erfahrungswerten auszutauschen. Die Ergebnisse können schnell zwischen Teams und Stakeholdern ausgetauscht werden, wobei alles zum Testen offen ist, wenn es eine gültige URL hat.

17. UX - Ein Timer zum Testen der Benutzererfahrung

UX-Landingpage

[Bild: UX - Ein Timer zum Testen der Benutzererfahrung]

Diese kostenlose App von Alexander Cox ist für iOS-Geräte verfügbar und bietet im Wesentlichen einen Timer für Timing-Usability-Tests. Es können mehrere Tests eingerichtet werden, die eine Reihe anpassbarer Aufgaben enthalten, die für die Testperson ausgeführt werden müssen, wobei jeweils die Abschlusszeit protokolliert wird. Die Ergebnisse können dann als Screenshots erfasst und in der iOS-Kamerarolle zugänglich gemacht werden.

18. UX Companion

UX Companion-Landingpage

[Bild: UX Companion]

UX Companion von Cyber-Duck Ltd ist eine Skill-App für Android, iOS und Amazon Alexa, die Benutzern ein nützliches UX-Glossar bietet. Neben der bloßen Definition von Begriffen und Fachjargon werden Beschreibungen und Ressourcen zu UX-Theorien, -Tools und Leitprinzipien aufgeführt, um allen einen besseren Einblick in die Praxis zu ermöglichen. Die App kann kostenlos heruntergeladen werden und bietet mehr als 80 Themen und regelmäßige Updates.

19. Framer X.

Framer X Landing Page

[Bild: Framer X]

Framer ist ein webbasiertes Rapid-Prototyping-Tool, bei dem Wert darauf gelegt wird, nicht nur reaktionsschnell, sondern auch realistisch zu sein. Drag-and-Drop-Komponenten machen das Bildschirmdesign und das Zeichnen des Navigationsflusses sehr intuitiv, während das Hinzufügen von 3D-Effekten den Wow-Faktor hinzufügt. Der Zugriff auf den Framer X Store bietet außerdem Tausende zusätzlicher Ressourcen und UI-Kits, sodass Designer nicht bei Null anfangen müssen.

zwanzig. POP

POP-Landingpage

[Bild: POP]

Marvels POP steht für 'Prototyping on Paper' und bietet kostenlose Apps für iOS- und Android-Smartphones. Hier können Designer Fotos ihrer Schnittstellenskizzen aufnehmen oder mit den Zeichenwerkzeugen und Bestandsobjekten von POP von Grund auf neu entwerfen, bevor sie Bildschirme mithilfe interaktiver Hotspots miteinander verbinden. Das Teilen von Optionen über E-Mail, SMS und soziale Medien fördert dann die Zusammenarbeit.

Dieser Artikel wurde ursprünglich in Ausgabe 285 des Creative Web Design Magazins veröffentlicht Webdesigner . Ausgabe 285 hier kaufen oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: