Die 10 besten Product Design-Tools – MVST Favoriten

Die 10 besten Product Design-Tools – MVST Favoriten
Um ein guter Product Designer zu sein, muss man über eine breite Palette von Hard- und Soft Skills verfügen. Dazu gehört ein erstklassiges Toolkit, mit dem Du deinen Arbeitsablauf hervorragend strukturieren kannst.

Deshalb haben wir mit unseren Produktdesignern bei MVST gesprochen, um herauszufinden, welches die hilfreichsten Product Design-Tools sind. Hier stellen wir dir unsere absoluten Favoriten vor.

Die 10 besten Tools für Product Designing

Es gibt jede Menge Product Design-Tools. Aber nur wenige sind wirklich unverzichtbar und helfen auch erheblich dabei, einen effizienten Workflow zu schaffen. Unsere Product Designer bei MVST haben über die Jahre herausgefunden, welche Tools am sinnvollsten sind und wie man sich ein breites Wissen über die Vielfalt der Tools angeeignet.

Also zeigen uns Sabrina, Florian und Josh in diesem Post ihre Lieblings-Design-Tools, die sie in Sachen Effizienz und Funktionalität überzeugt haben.

Vorab eine kleine Übersicht:

  • Design-Tools
  • Tools für Bildbearbeitung
  • 3D-/Video-Werkzeuge
  • Inspirations-Tools
  • Schriftarten-Tools
  • Icon-Tools
  • Farben
  • Plug-ins

Design & Prototyping Tools

Figma: Interface Design Tool

Figma ist ein leistungsstarkes System für UX- und UI-Design, mit dem Du fast alles erstellen kannst. Außerdem bietet Figma eine Lernplattform, die beim Verständnis der Software unterstützt. Unser Designer Josh nutzt Figma gerne für das Prototyping von Design-Mockups, da es einfach zu bedienen ist und sich nahtlos in andere Programme integrieren lässt. Die meisten unserer Designprozesse beginnen in Figma mit Wireframes für Websites und mobile Apps.

Warum unsere Product Designerin Sabrina es liebt:

  • Bietet eine kostenlose Version und eine Premium-Option
  • Meistgenutzte Tool in der Branche
  • Sehr einfach zu bedienen
  • Plugin-Optionen sind grenzenlos
  • Einsteigerfreundlich bis fortgeschritten

Warum es für unseren Product Designer Josh unverzichtbar ist:

  • Einfach zu bedienen für Prototyping (z.B. durch Drag-and-Drop)
  • Nahtlose Integration mit anderen Programmen und Plug-ins
  • Riesiger Funktionsumfang

Framer: Web Design Plattform

Wenn Du eine gute Design-Software für die Gestaltung von Websites, die Erstellung von Prototypen mit vorgefertigten Vorlagen und interaktiven Komponenten suchst, ist Framer genau das richtige Tool. Obwohl es etwas mehr Wissen für die Prototypenerstellung erfordert als Figma, überzeugt es deutlich in seinen Möglichkeiten und Fähigkeiten.

Unsere Designer würden sagen, dass es eher für fortgeschrittene Designer geeignet ist, aber eine große Community innerhalb von Framer zur Unterstützung bereitsteht. Dort kann man Entwürfe und Prototypen mit Entwicklern teilen, aber auch von anderen Designern lernen und unendlich viele Inspirationen sammeln.

Warum Sabrina gerne damit arbeitet:

  • Fortgeschrittenes Prototyping-Tool
  • Gut für Wireframe-Prototyping
  • Kenntnisse für Prototyping erforderlich
  • Kostenlose Option, allerdings kosten Premium-Funktionen extra
  • Für alle Betriebssysteme geeignet (z.B. Apple, Windows, Linux)

InVison: Whiteboard und Productivity Plattform

InVision ist eine leistungsstarke Plattform für Prototyping, Zusammenarbeit und Design-Workflows. Hier kannst Du effizient und einfach interaktive Mockups für Wireframes und Designs erstellen. Von der Idee bis zur Umsetzung kannst Du mit InVision alle Arbeiten und Workflows deines Teams in einer einzigen, übersichtlichen Plattform zusammenführen. Sogar die beliebtesten Tools sind bereits integriert: Google Docs, Mode Dashboards, Jira Issues, Kanban Boards, Figma Wireframes, usw.

Warum unser Product Designer Florian es täglich gerne nutzt:

  • Gut für die Zusammenarbeit und das Brainstorming mit einem Team
  • Aussagekräftige Beispiele für Vorlagen
  • Journey Mapping für Meetings und Feedback, um es später in die Designs zu integrieren
  • Tool-Integrationen funktionieren nahtlos

3D Design und Video Tools

Manche Projekte verlangen ein 3D-Modell oder ein Video. Immer mehr Kunden legen großen Wert auf Abwechslung und Eyecatcher-Designs, sodass ein nützliches Tool dafür sehr hilfreich sein kann. Die 3D-Technologie wird außerdem häufig verwendet, um ein Produkt zu testen und zu entwickeln. Videos helfen dabei, Projekte zu animieren, sie besser zu verstehen oder einfach nur, um die User Experience zu verbessern. Wir haben die Tools aufgelistet, die unsere Product Designer bei MVST am häufigsten verwenden.

Blender: 3D Modeling Software

Blender ist eine kostenlose Open-Source-Software für 3D Modeling und sehr beginnerfreundlich. Damit kann man Animationen und einzigartige visuelle Effekte erstellen. Aber es unterstützt auch viele andere Aspekte des 3D Modeling, wie Rendering, Simulation, Skripterstellung, Schnittstellen und Videobearbeitung. Es ist definitiv ein Allround-Tool, das bei fast jedem Aspekt von 3D-Mockups oder Videokreationen hilft.

Warum unser Designer Josh es liebt:

  • Einsteigerfreundlich
  • 3D-Bewegungen sind in Echtzeit
  • Große Community, um sich inspirieren zu lassen oder um Hilfe zu bitten
  • Jede Menge Lernressourcen
  • Kostenlose Software

Adobe AE und Adobe Premiere Pro: Video Editing Software

Adobe AE ist ein Anwendungsprogramm für digitale visuelle Effekte. Es gehört zu den Standard-Tools für Animation, Visuelles und Compositing von Filmen. Einer der Hauptvorteile von AE ist die Integration von externen Asset-Dateien.

Adobe Premiere Pro ist Timeline-basiert und nicht-linear und hat sich nicht ohne Grund als die führende Videobearbeitungssoftware etabliert. Dank der kreativen Werkzeuge und der Integration mit anderen Anwendungen von AE kannst Du deine Assets in raffinierte Videos verwandeln.

Was Sabrina daran besonders schätzt:

  • Leicht zu erlernen, für Anfänger und Fortgeschrittene
  • Jede Menge Ressourcen und Tutorials zum Lernen (Support-Bibliothek)
  • Weltweit am häufigsten verwendete Software
  • Sehr weit entwickelte Technik ermöglicht es, fast alles zu gestalten

Inspiration: Brainstorming Tools

Mal ehrlich: Jedem Designer fehlt es von Zeit zu Zeit an Vision und Kreativität. Um neue Ideen zu bekommen, sind Inspirations-Tools sehr nützlich. Der Blick auf andere Designs kann hilfreich sein, um nach einem Projekt, bei dem man sich längere Zeit mit einem Design beschäftigt hat, einen Neuanfang zu wagen.

Hier sind unsere Lieblings-Tools, die uns beim Brainstorming helfen.

Dribbble: Design Portfolio Platform

Dribbble ist wahrscheinlich eine der bekanntesten Designplattformen, wenn es darum geht, sich von anderen digitalen Designern und Kreativen und deren Benutzeroberfläche und UX Designs inspirieren zu lassen. Sie verfügen über eine riesige Datenbank und gebrauchsfertige Vorlagen, in denen Portfolios und Fallstudien zu fast jedem Thema zu finden sind. Du kannst auch deine eigene Arbeit teilen und andere inspirieren, bestenfalls sogar dein Netzwerk und deine Bekanntheit ausbauen. Du bist auf der Suche nach einem Designer-Job? Dribbble ist auch ein guter Ort, um Aufträge zu erhalten. Viele Agenturen schauen sich die Portfolios an, um Designer zu finden, die zu ihnen passen.

Gründe, warum Florian gerne mit Dribbble arbeitet:

  • Guter Ort, um Ideen und Inspiration für UI / UX Design zu sammeln
  • Man kann seine Arbeiten mit anderen Designern aus der Branche teilen und erhält Feedback von der Community
  • Kostenlose Nutzung (One-Frame), Premium-Optionen (beinhaltet das Teilen weiterer Bilder)
  • Nützlich für Bewerbungen

Mobbin: UI/UX Research

Mobbin ist eine Plattform, auf der Du effizient Inspiration und Referenzen für iOS- oder Android-Apps finden kannst. Hier kannst Du dich umsehen, wenn du nicht weißt, wie oder welche Elemente Du für deine UX- oder UI-Designs verwenden solltest. Sie bietet eine von Experten kuratierte Bibliothek von Oberflächen der besten digitalen Produkte, die Product Designern dabei hilft, relevante Grafikdesign-Vorgaben zu finden.

Warum es zu Joshs Favoriten gehört:

  • Gute Plattform, um gemeinsame UX-Muster in bestehenden mobilen Apps zu erkennen
  • Hilft bei der UX-Optimierung
  • Kostenlose Nutzung (begrenzter Zugang), kostenpflichtige Option (vollständiger Zugang)
  • Flow-Benchmarking

Usability Research: UI / UX Verbesserung

Jeder Product Designer muss seine Produkte testen, bevor sie zum Einsatz kommen. Deshalb braucht es eine Plattform, auf der Du Kundenforschung analysieren, zusammenfassen, speichern und teilen kannst. Forschungsplattformen sind unabdingbar, damit Entwürfe in der Ausführung einwandfrei funktionieren. Das ist ein Schritt, den Du niemals in deinem Designprozess auslassen solltest. Hier sind die Tools, die unsere Designer zum Testen der Funktionalität ihrer Entwürfe verwenden.

Dovetail: Usability Testing

Dovetail ist eine kollaborative und durchsuchbare Plattform. Sie bietet eine Software zur qualitativen Datenanalyse namens Markup, die die Analyse und Verwaltung von Nutzerdaten erleichtert. Mit Playback (in Dovetail enthalten) kannst Du deine Erkenntnisse an einem einzigen Ort zusammenfassen und eine Reihe von fragmentierten Berichten, Präsentationen, Dokumenten und Aufzeichnungen in ein durchsuchbares Repository verwandeln. Außerdem bietet es ein Participant Management System namens Backstage, um eine Verbindung zwischen Menschen, Daten und Erkenntnissen herzustellen.

Florian benutzt Dovetail am liebsten, weil:

  • Einfach zu bedienen
  • Testzeit für die Rekrutierung von Usern
  • Möglichkeit, an den Tests teilzunehmen
  • Zusammenfassung der Testresultate

Maze: Product Research Plattform

Maze ist auch eine Website für Wireframe- und Usability-Tests. So kannst Du Entwürfe in großem Umfang validieren und entworfene Produkte verbessern. Maze arbeitet auch reibungslos mit Figma zusammen. Maze lässt sich außerdem in branchenübliche Designplattformen integrieren und kann Test-Workflows rationalisieren. Mit den Tools von Maze entgeht dir nichts mehr, wenn es um UX-Tests geht. Praktisch: Du kannst Maze erst einmal kostenlos testen, wenn Du herausfinden willst, wie es funktioniert.

Warum unserer Designer Josh es liebt:

  • User direkt über die Plattform anheuern
  • Großartige Einblicke (Pfade sind nachvollziehbar)
  • Testen von Prototypen
  • Echtzeit-Testprogramm

Schriftarten, Farben, Icons and Plug-Ins

Die grundlegenden Bestandteile für einen grafischen Entwurf sind passende Schriftarten, eine bunte Farbpalette, nützliche Symbole und intelligente Plug-ins. All diese Funktionen sollten in jedem Product Designer-Toolkit enthalten sein. Wir haben einige der Ressourcen aufgelistet, ohne die unsere Designer nicht leben können.

Font Tools:

Google Fonts DaFonts
• Das Standardtool für viele gängige Schriftarten • Gut für kreative und detaillierte Schriftarten
• Kostenloser Download • Kostenloser Download
• Weit verbreitet in der Industrie • Lizenzierung bei kommerzieller Nutzung

Color Tools:

Coloors Contrast
• Kostenlose Nutzung • Mac-Anwendung für Color Accessibility
• Kann Farbthemen erstellen und generieren • Korrigiert den Kontrast in visuellen Designs
• Erkundung bereits vorhandener Color Themes • Bewertung von Web Content und Accessibility Guidelines
• Filterung nach Aussehen und Handhabung möglich

Icon Tools:

Streamline FlatIcons
• Kostenlose Nutzung • Kostenlose Icons and Stickers
• Große Bibliothek (einige Icons sind nur über Premium zugänglich) • Interface Icons für Web, iOS und Android Anwendungen
• Download in exakter Pixelgröße für spezielle Bedürfnisse • Leichte Organisation und Gruppierung von Iconsets
• Drag & Drop von Icons als SVG • PNG, SVG, EPS, PSD und CSS Formate

Plug-Ins: Vereinfachung von Design-Workflows

Jedes Design-Tool ist nur so gut wie seine Plug-ins. Ein Plug-in ist eine Software, die neue Funktionen hinzufügt oder bestehende Anwendungen erweitert.

Wir haben die nützlichsten Plug-ins zusammengefasst:

  • Rechtschreibprüfung: Hilft Grammatik- und Rechtschreibfehler zu finden und zu korrigieren
  • Unsplash: Füge Bilder direkt in deine Designs ein
  • Adee: Umfassende Accessibility Testings für Figma, Adobe XD und Sketch
  • Batch Styler: Ändere mehrere Text- und Farbstile auf einmal
  • Copydoc TextKit: Export, Import, Lokalisierung, Rechtschreibprüfung und Aktualisierung von Text für Figma
  • Icons Background Remover: Löschen von Icon-Hintergründen und Erstellen eines transparenten Hintergrunds mit AI

Fazit

Die vorgestellten Design-Tools werden von unseren Designern für fast jedes Projekt verwendet. Wenn Du sehen möchtest, wie das am Ende aussieht und wie wir unsere Ressourcen genuttz haben, dann schau dich hier um.

Vielleicht ist nicht jedes Tool für dich geeignet – schließlich hat jeder einen anderen Arbeitsstil. Aber es gibt definitiv einige "All-Time-Faves", die für jedes erfolgreiche Design-Team unverzichtbar sind.