10 beste Tools für UI- und UX-Designer

Jeder  Designer möchte produktiver arbeiten und sucht daher nach effektiven Tools, die seinen Alltag vereinfachen könnten. In unserem Beitrag findet Ihr eine hilfreiche Liste mit Online-Werkzeugen, die Euch diesem Ziel näher bringen.

Verschiedene Online-Tools sind der einzige Weg für UI- und UX-Designer, um eine hochwertige Website mit wenig Zeitaufwand zu erstellen. Deshalb, wer über keine nützlichen Werkzeuge verfügt, dem wird die Entwicklung eine Menge Kopfschmerzen und Mühe bereiten. Wenn Ihr noch nach Tools im Web recherchiert, die Eure Arbeit erleichtern könnten, soll Eure Suche jetzt ein Ende haben. Die 10 Tools, die wir weiter vorstellen möchten, sind Eurer Aufmerksamkeit wert, denn sie unterstützen Euch bei jeder Etappe der Webentwicklung.  

Type Scale

Type Scale ist ein Tool zur Vorschau der Typografie für UI-Designer, das Fonts und Schriftarten einer Website webgerecht skalieren lässt. Mit der Live-Vorschau überprüft Ihr, wie verwendete Google Fonts auf einem Bildschirm aussehen würden und abhängig davon könnt Ihr das Schriftgewicht und die Schriftfamilie ändern, um auf das 3:4-Verhältnis (perfect-fourth), 6:5-Verhältnis (minor third) oder auf den Goldenen Schnitt zu skalieren. Type Scale ist ein ausgezeichnetes UI-Tool, mit dem Ihr herausfinden könnt, welche Schriftart für Eure Website am besten geeignet ist.

Material Design Resizer

Material Design Resizer ist ein großartiges Tool zum Testen von Designs auf Desktops, Smartphones und Tablets. Sein Einsatz ist ganz einfach: Man soll nur die URL einer Website eingeben und dann wird genau angezeigt, wie sie auf allen Geräten aussieht. Das ist sehr bequem denn alle drei Screens sind auf einem Bildschirm zu sehen. So braucht Ihr nicht, zwischen mehreren Bildschirmen umzuschalten oder auf einem konkreten Bildschirm zu arbeiten. Dieses UX-Tool trägt zur Benutzerfreundlichkeit der zukünftigen Website bei, denn Ihr könnt auch durch alle Seiten auf jedem Gerät navigieren. Eine weitere Funktion lässt zwischen dem Smartphone-Modus und dem Tablet-Modus wechseln. Im Tablet-Modus kann man zwischen dem Porträtformat 720 und dem Landschaftsformat 1024 wählen.

UX Project Checklist

UX Project Checklist ist eines der umfassendsten Online-UX-Tools für UX-Designer. Die Checkliste ist in 27 Schlüsselbereiche unterteilt:

• Recherchieren
• Planen
• Erforschen
• Kommunizieren
• Erstellen
• Feedback geben
• Abschließen
• Zufriedenstellen
• Analysieren

Es werden einige Stufen der Buyer's-Journey in den Entwicklungsprozess einbezogen. Auf der Phase “Planung” werdet Ihr gefragt, ob Ihr Eure  Buyer Personas und Benutzerflüsse erstellt habt. Als Designer solltet Ihr wissen, für wen Ihr entwerft, bevor die eigentliche Entwicklung beginnt.

Die Webentwicklung kann monatelang dauern und mit dieser Checkliste werden alle wesentlichen Fragen abgedeckt, die das Projekt erfolgreich abschließen lassen. Ihr könnt alle Geräte mit einem Google-Konto synchronisieren.  

Pttrns

Pttrns ist hilfreich zum Brainstorming beim Design für Mobilgeräte. Das Tool orientiert sich auf diese mobilen Plattformen: Android, iPhone, iPads, und Apple Watch. Der Abschnitt Kategorien bietet viele Patterns, die Ihr in Euer mobile Design implementieren könnt. Für Airbnb wird beispielsweisedie die Login-Seite auf dem iPhone angezeigt. Dadurch bekommt Ihr Ideen für die Gestaltung von Kommentaren, Nachrichtenübermittlung, Benachrichtigungen, Fotos, Seitenleisten und anderes mehr.

UserTesting

Benutzertests gehören zu den wichtigsten Entwicklungsphasen. UserTesting gibt einen Überblick über Stärken und über das Verbesserungspotenzial Eurer Website. Eure Website oder App werden qualifizierte Nutzer testen. Mit einem individuellen Plan könnt Ihr auf die Meinung eines Testers hören und dieses Feedback nehmen, um Komponenten zu verbessern.  Im Enterprise-Konto werden weitere Funktionen zur Verbesserung der Benutzererfahrung bereitgestellt. Euer persönlicher Projektmanager wird Euch mit der Analyse helfen. Somit erspart Ihr viel Zeit beim Recherchieren und Testen.

GoodUI

GoodUI sorgt für eine gute Benutzererfahrung. Die Projekt-Betreiber setzen A/B Tests von Designs um. Einer der Tipps, die GoodUI gibt, ist es, sich für ein einspaltiges Layout statt eines mehrspaltigen Layouts zu entscheiden. Denn das vermindert die Ablenkung der Benutzer von wichtigen Inhalten. Ihr bekommt neueste UI-Tests geteilt und zugesendet, wenn Ihr Euch anmeldet und Updates abonniert. Man wird Euch auch zeigen, wie Ihr Testergebnisse für Eure Ziele benutzen könnt.

Mocksplus

Mocksplus verspricht, dass Ihr mit dem Design per Drag-und-Drop keine Codierung braucht. Dank einfacher Lernkurve und codefreiem Design geht die Gestaltung viel schneller. Wenn Ihr Zeit sparen und dabei ein großartig aussehendes Design kreieren möchtet, ist Mocksplus eines der besten Tools dafür. Es ist unwichtig, ob Ihr an einer App oder einer Website arbeitet. 

Marvel

Marvel sollte man zu einfachsten Tools für Prototypen zählen. Es lässt Features für Seitenübergänge einfach verwenden oder durch Eure App bzw. Website navigieren. 

Eine der besten Funktionen von Marvel ist die Kooperation. Ihr könnt Prototypen in Echtzeit kommentieren, Projekte teilen und ein Feedback auf Eure Designs holen.

Einige Funktionen ermöglichen die Synchronisierung mit Google Drive und Dropbox, den Import von Designs aus Photoshop oder Sketch sowie die Vorschau von Beispiel-Prototypen. Mit Marvel werden alle Aspekte der Webentwicklung  einfach umgesetzt.

Adobe Illustrator

Adobe Illustrator ist ein Tool, das UI-Designer zur Erstellung von Formen, Logos und Icons verwenden. Diese Plattform für Vektorgrafik ist die beste Möglichkeit, um Grafiken für Ihre Website zu erstellen und Objekte zu Fotos hinzuzufügen.

Es lässt sich einfach mit Photoshop und Stock einbinden, um Grafiken zu Bildern oder zu Templates hinzufügen. Illustrator ist das beste Werkzeug für die Erstellung von Vektorgrafiken. Die Lernkurve ist einfach und sogar erweiterte Funktionen sollten Euch keine Zeit in Anspruch nehmen.

Sketch – nur auf Mac verfügbar

Sketch ist eine Top-Plattform für digitales Design, die von vielen Designern genutzt wird. Die Features umfassen Präzision, Inspector, Werkzeuge, Exportieren, Nativ und Mirror. Inspector ist eine Sketch-Palette fürs Weichzeichnen, Dimensionieren und Positionieren usw. Die Mirror-Funktion bietet eine Live-Vorschau auf allen Geräten. Wenn Ihr das Design auf Eurem Desktop-PC erstellt, könnt Ihr euch dasselbe Design auf Eurem mobilen Gerät ansehen. Das spart Zeit und steigert Eure Tagesproduktivität.

Schlusswort

Das Webdesign entwickelt sich ständig weiter. Mit jedem Tag erscheinen neue Online-Tools für Designer... Mag sein, dass diese Liste nicht vollständig ist. Welche Werkzeuge verwendet Ihr? Welche nützliche Tools dürfen in dieser Liste nicht fehlen?

Diese Tool-Übersicht hat Monica Brown vorbereitet. Den Originalartikel in Englisch lest Ihr hier.