let’s dev GmbH & Co. KG - Die Marke für wegweisende Individualsoftware

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021
by Ellen
15. Juli 2021

Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021

Die Ansprüche an moderne UI Tools sind hoch. Am besten vereinen sie Screen Design, Prototyping, Entwickler Hand-off und Kollaboration Features nahtlos in einer App - und sind dabei auch noch besser als ihre unzähligen Konkurrenten. Aber welches Tool macht das am besten? Dazu werfen wir einen Blick auf die beliebtesten UI und Prototyping Tools 2021:

Adobe XD

Adobe XD wurde von von Adobe Inc entwickelt und am 18. Oktober 2018 veröffentlicht. Das Tool ist für Mac sowie Windows erhältlich und ist in seiner Basisversion sogar kostenlos nutzbar. Wer alle Funktionalitäten braucht, kann die Vollversion ab 11,89€/Monat erstehen. Geboten wird ein benutzerfreundliches, minimalistisches User Interface für Wireframing und Screen Design in dem außerdem auch einfach interaktive Klickprototypen erstellt werden können. Adobe XD hat alle Funktionalitäten die man braucht und besticht mit einigen Funktionalitäten, die in anderen Tools nicht zu finden sind - so zum Beispiel Voice UI Tools. Zudem bietet Adobe XD die Möglichkeit einfache Animationen zu erstellen.

Ein weiterer Pluspunkt ist die nahtlose Integration in den Workflow mit anderen Adobe Tools - die Nähe zu den Adobe Tools erleichtert erfahrenen Adobe Nutzern definitiv auch den Einstieg in das Programm. Trotzdem ist die Benutzung an manchen Stellen noch etwas holprig - das Formtool ist beispielsweise sehr simpel und die Organisation der Symbols ist bei anderen Tools definitiv besser gelöst.

Sketch

Die dänische Firma Bohemian Coding, entwickelt und veröffentlichte am 7. September 2010 das Programm Sketch. Seitdem ist Sketch der Vorreiter in Sachen UI Design Tools. Und das hat auch seine Gründe: Sketch war eine Revolution für das UI Design und setzte mit intuitiven Tools wie Artboards, Symbols und Export-Presets neue Standards für UI Design. Sketch ist erfolgreich und ein echter Experte, wenn es darum geht Wireframes sowie anspruchsvolle Visuals effektiv und effizient zu gestalten. Wer sich einmal an das intuitive Arbeiten und Sketchs benutzerfreundliches UI gewöhnt hat, möchte es nicht mehr missen.

Seine Position als Spitzenreiter ist aber nicht unangefochten - aufstrebende Konkurrenten bauen auf den von Sketch gesetzten Standards auf und haben inzwischen innovative Funktionalitäten wie Prototyping und Live-Kollaboration die man bei Sketch vermisst. Wer in Sketch den ganzen UI-Design Prozess erledigen möchte, muss deshalb mit Plugins arbeiten. Für das kollaborative Arbeiten gibt es inzwischen immerhin Sketch for Teams, die wirklichen Innovationen im UI Design kommen inzwischen doch meist von anderen Anbietern. Preislich liegt Sketch bei 99 Euro pro Jahr und Lizenz. Ein Manko ist, dass dass Sketch bislang nur für Mac erhältlich ist.

Figma

Figma tauchte 2016 als erstes und bisher einziges komplett browserbasiertes UI Design Tool auf dem Markt auf. Mit sich bringt es flüssige Echtzeitkollaboration, die komplizierte Versionsverwaltung überflüssig macht. Aber nicht nur die einfachere Teamarbeit überzeugt. Figmas schlüssiges User Interface und die Palette an praktischen Tools machte es schnell zu einem vielversprechenden Konkurrent unter den UI Tools. Figma bietet eine ganzheitliche Lösung vom Wireframing bis zum Developer Handoff und macht dabei einiges besser als der Vorreiter Sketch - praktischere Symbols, einfaches Teilen von Dateien und Support beim Developer Handoff. Ein Nachteil des Tool kann jedoch sein, dass ausschließlich online gearbeitet werden kann, zumal lokale Caches die Arbeit im Team behindern können. Für Einzelpersonen mit bis zu 3 Projekten ist das Tool dafür kostenlos, das Upgrade zu unbegrenzten Projekten und Teams gibt es ab 12 Euro Monat.

InVision Studio

Erst 2019 veröffentlicht, ist InVision Studio ein relativ neues UI Design Tool. Für kleinere Teams ist es dauerhaft kostenlos, für größere Teams kostet es 8 Euro monatlich pro Teammitglied. Auch wenn es als Mac Tool gestartet ist, ist es inzwischen auch für Windows erhältlich. Besonders wertvoll wird InVision dadurch, dass in dem Programm Prototypen mit komplexeren Animationen und Mikrointeraktionen erstellt werden können. Diese sind so vielfältig wie bei keinem anderen Tool. Aber auch sonst kann sich InVision definitiv sehen lassen: ein cleanes User Interface mit allen Funktionen, die wir schon aus anderen Tools kennen und nicht vermissen wollen. Die Symbols sind vergleichbar gut wie die in Figma, der Aufbau ist ähnlich clean und intuitiv wie der von Sketch. Zusätzlich bietet es InVision Specs - eine Plattform die den Nahtlosen Übergang von Design zu Entwicklung garantiert.

Mit diesem Komplettpaket hat inVision rasend schnell an Popularität gewonnen. Es gibt allerdings auch schon einige Kritikpunkte: die verschiedenen Funktionalitäten sind nicht ganz ausgreift und greifen nicht gut ineinander. Trotz vielem Feedback wird das Tool nicht verbessert wie gehofft, manche Funktionen erst nach Jahren ergänzt. Trotzdem bleibt es das einzige Tool, das Design, Prototyping und Animationen vereint - und hat dadurch definitiv Vorteile.

Aber welches UI Design und Prototyping Tool ist nun das Beste?

Ein klare Antwort gibt es darauf nicht. Vielmehr kommt es darauf an was das jeweilige Projekt verlangt und welche Vorlieben, Bedürfnisse und Limitationen die Designer:innen mitbringen.

So würde ich für komplexe Designprojekte, für die ein aufwändiges Screendesign erstellt wird, Sketch bevorzugen, für ein Team das im regen Austausch arbeiten möchte und erste Prototypen braucht Figma. Für kleinere Teams oder Solo-Designer die schnell loslegen wollen, könnte Adobe XD die beste Wahl sein. Und wenn ein beeindruckender, moderner Prototyp animiert werden soll, InVision Studio.

Wenn man allerdings alle Aspekte in Betracht zieht - und ein Tool möchte, das möglichst Nahe an ein „rund-um-glücklich“ Paket kommt - macht Figma einen sehr guten Eindruck.

Weitere Artikel aus unserem Blog

let’s dev Blog | Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

Technical

Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

by Julian

2021-10-14

Weiterlesen
let’s dev Blog | Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

Corporate

Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

by Julian

2021-09-30

Weiterlesen
let’s dev Blog | Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

Corporate

Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

by Karl

2021-06-24

Weiterlesen
let’s dev Blog | Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

Corporate

Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

by Julian

2021-06-10

Weiterlesen
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Weiterlesen
let’s dev Blog | Dasoman - Daten-Souveränitäts-Manager

Corporate

Dasoman - Daten-Souveränitäts-Manager

by Karl

2021-01-11

Weiterlesen
let’s dev Blog | Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

Corporate

Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

by Julian

2020-12-17

Weiterlesen
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Weiterlesen
let’s dev Blog | Adobe Max - Zum ersten Mal online

Corporate

Adobe Max - Zum ersten Mal online

by Julia

2020-10-29

Weiterlesen
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Weiterlesen
let’s dev Blog | Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

Corporate

Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

by UX Team

2020-09-18

Weiterlesen
let’s dev Blog | Neumorphism – Eine neue Ära des User Interface Design?

Technical

Neumorphism – Eine neue Ära des User Interface Design?

by Julian

2020-08-13

Weiterlesen
let’s dev Blog | UX Research Teil 3 – UX Methoden

Technical

UX Research Teil 3 – UX Methoden

by Elena

2020-05-28

Weiterlesen
let’s dev Blog | UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

Technical

UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

by Elena

2020-04-23

Weiterlesen
let’s dev Blog | go-digital fördert Einrichtung von Home Office Arbeitsplätzen

Corporate

go-digital fördert Einrichtung von Home Office Arbeitsplätzen

by Karl

2020-03-19

Weiterlesen
let’s dev Blog | Google Passes - Karten­verwaltung auf  Android-Geräten

Technical

Google Passes - Karten­verwaltung auf Android-Geräten

by Michelle

2020-03-12

Weiterlesen
let’s dev Blog | 100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

Technical

100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

by Raphael

2020-03-06

Weiterlesen
let’s dev Blog | Swift UI - Einfache und schnelle Umsetzung von User Interfaces

Technical

Swift UI - Einfache und schnelle Umsetzung von User Interfaces

by Tobias

2020-03-02

Weiterlesen
let’s dev Blog | Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

Corporate

Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

by Julian

2020-02-27

Weiterlesen
let’s dev Blog | Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

Technical

Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

by Manuel

2020-02-26

Weiterlesen
let’s dev Blog | Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

Corporate

Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

by Karl

2020-01-27

Weiterlesen
let’s dev Blog | UX Research Teil 1 – Warum User Research so wichtig ist

Technical

UX Research Teil 1 – Warum User Research so wichtig ist

by Elena

2020-01-23

Weiterlesen
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Weiterlesen
let’s dev Blog | Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

Corporate

Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

by Julian

2019-12-20

Weiterlesen
let’s dev Blog | Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

Corporate

Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

by Karl

2019-12-17

Weiterlesen
let’s dev Blog | DaSoMan auf der Internet+ Expo in Foshan (China)

Corporate

DaSoMan auf der Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Weiterlesen
let’s dev Blog | Google Play Console: Pre-Launch Berichte

Technical

Google Play Console: Pre-Launch Berichte

by Fabian

2019-12-11

Weiterlesen
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Weiterlesen
let’s dev Blog | Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

Corporate

Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

by Karl

2019-11-21

Weiterlesen
let’s dev Blog | World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

Corporate

World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

by Aileen

2019-11-11

Weiterlesen
let’s dev Blog | Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

Corporate

Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Weiterlesen
let’s dev Blog | Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

Corporate

Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

by Elena

2019-09-17

Weiterlesen
let’s dev Blog | Business und Enterprise App Verteilung unter iOS

Technical

Business und Enterprise App Verteilung unter iOS

by Aileen

2019-08-05

Weiterlesen
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

Corporate

let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

by Karl

2019-07-05

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

Technical

Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

by Arne

2019-06-13

Weiterlesen
let’s dev Blog | Apple WWDC 2019: Das sind die Highlights der Keynote

Technical

Apple WWDC 2019: Das sind die Highlights der Keynote

by Nicolas

2019-06-05

Weiterlesen
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Weiterlesen
let’s dev Blog | Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

Corporate

Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

by Helena

2019-04-15

Weiterlesen
let’s dev Blog | Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

Corporate

Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

by Helena

2019-04-14

Weiterlesen
let’s dev Blog | Es ist soweit: Wir ziehen um!

Corporate

Es ist soweit: Wir ziehen um!

by Helena

2019-03-26

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

Technical

Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

by Arne

2019-02-20

Weiterlesen
let’s dev Blog | Die App im Google Play Store

Technical

Die App im Google Play Store

by Elisa

2019-01-24

Weiterlesen
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

Corporate

let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

by Helena

2018-12-04

Weiterlesen
let’s dev Blog | KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

Corporate

KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

by Helena

2018-11-12

Weiterlesen
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Weiterlesen
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Weiterlesen
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Weiterlesen
let’s dev Blog | let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

Corporate

let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

by Helena

2018-09-01

Weiterlesen
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Weiterlesen
let’s dev Blog | iOS 12: Die Top-Neuerungen im Überblick

Technical

iOS 12: Die Top-Neuerungen im Überblick

by Nicolas

2018-07-17

Weiterlesen
let’s dev Blog | let’s dev auf der CEBIT

Corporate

let’s dev auf der CEBIT

by Karl

2018-06-11

Weiterlesen
let’s dev Blog | Einführung in User Interface (UI) Tests mit Espresso

Technical

Einführung in User Interface (UI) Tests mit Espresso

by Raphael

2018-06-07

Weiterlesen
let’s dev Blog | Die App im Apple App Store: welche Informationen werden benötigt?

Technical

Die App im Apple App Store: welche Informationen werden benötigt?

by Aileen

2018-04-27

Weiterlesen
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Weiterlesen
let’s dev Blog | User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

Technical

User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

by Helena

2018-02-07

Weiterlesen
let’s dev Blog | WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

Technical

WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

by Judith

2018-01-10

Weiterlesen
let’s dev Blog | Open Data Hackathon der Deutschen Bahn

Corporate

Open Data Hackathon der Deutschen Bahn

by Karl

2015-03-31

Weiterlesen
let’s dev Blog | Blur-Effekte unter iOS 7

Technical

Blur-Effekte unter iOS 7

by Katja

2014-04-24

Weiterlesen
let’s dev Blog | Beyond App Store – Distribution von iOS-Anwendungen

Technical

Beyond App Store – Distribution von iOS-Anwendungen

by Karl

2012-08-27

Weiterlesen
let’s dev Blog | Frontend-Architektur – Model View Presenter und Message Bus

Technical

Frontend-Architektur – Model View Presenter und Message Bus

by Karl

2011-03-08

Weiterlesen