Ja, wir haben endlich einen Punkt erreicht, an dem Design ein so großer Teil der Entwicklung und Wartung eines Produkts ist, dass eine ganze Reihe von Software-Utensilien definitiv ein wesentlicher Bestandteil Ihrer Projekte sein wird. Jedes Programm erfüllt unterschiedliche Anforderungen und ermöglicht die beste und effizienteste Arbeitsausführung, sei es in Bezug auf Struktur, visuelles Design, Illustrationen, Interaktionen oder Animationen.
Es gibt keine einzige Software, die all diese Anforderungen erfüllt, daher kann es etwas einschüchternd sein, sich für eine der vielen derzeit auf dem Markt verfügbaren Software zu entscheiden. Die Tools, die wir vorstellen werden, werden sich verschiedenen Aspekten des Designprozesses digitaler Produkte widmen. Diese Schritte werden Folgendes beinhalten:
Wir sind genau hier, um Ihnen bei diesen schwierigen Entscheidungen zu helfen, basierend auf unseren aktuellen und früheren Erfahrungen.
Ich setze dieses an die erste Stelle, weil es wirklich das beste Programm ist, für das man verwenden kann Produktdesign. Figma ist im Kern ein vektorbasiertes Design-Tool, aber der eigentliche Schwerpunkt liegt auf Interfaces. Die Möglichkeit, Dinge wie das Öffnen vieler Zeichenflächen auf Ihrem Arbeitsbildschirm, die Auswahl aus vielen verschiedenen voreingestellten Gerätegrößen, das Anpassen von Rastern und Spalten sowie das einfache Erstellen und Ändern von Stilen, machen Figma zum besten Programm für digitales Interface-Design.
Es ist nicht nur super einfach zu erlernen und zu bedienen, es ist auch voll von Tools, mit denen Sie teile deine Designs mit einem Kunden oder Team. Sie können es über jeden Browser auf verschiedenen Geräten in der Vorschau anzeigen, und andere Personen können Zugriff auf Ihr Projekt haben, ohne eine Lizenz bezahlen zu müssen. Das Erstellen von Prototypen in Figma ist ebenfalls unglaublich einfach und erfordert für einfache Interaktionen keine anderen Prototyping-Tools.
Designer können Figma sowohl in einer Desktop-App als auch über den Internetbrowser verwenden. Abgesehen von Verknüpfungen, die auf dem Desktop offensichtlich besser funktionieren, ist der Browser einwandfrei.
Eine Sache sollte auch erwähnt werden, nämlich die Tatsache, dass Figma mit einem Abonnementsystem bezahlt wird, das wahrscheinlich nur kompensiert Teams - wer kann jetzt ohne Chaos gleichzeitig im selben Dokument arbeiten. Für Solo-Designer ist Sketch möglicherweise eine bessere Option, wenn es um das Budget geht. Und .sketch-Dokumente können auch auf Figma geöffnet und bearbeitet werden, sodass Sie sich keine Gedanken über das Teilen von Dokumenten oder das Ändern der Software machen müssen.
Das bedeutet, dass alle UI-Kits, die speziell für Sketch veröffentlicht wurden, auch auf Figma verwendet werden können, unabhängig davon, ob Figma auch eigene hat. Apple, Facebook, Google und viele andere Unternehmen haben UI-Kits veröffentlicht, sodass die Integration Ihrer Designs in andere Designsysteme schnell und einfach sein sollte.
Entwickler können auch ganz einfach ein Design von beiden auswählen Figma und Sketch um es zu implementieren, entweder mit dem eigentlichen Programm oder mit einer der zahlreichen Übergabeprogramme, die damit kompatibel sind.
Dieses Tool hilft Ihnen bei:
Dies ist ein alter, aber er bleibt einer unserer Favoriten. Und der Grund, warum wir ein anderes vektorbasiertes Tool wie Illustrator beleuchtet haben, ist, dass es wirklich das präziseste und leistungsstärkste ist. Angenommen, Sie möchten benutzerdefinierte Icons, Vektorillustrationen oder SVGs für Animationen erstellen: Sketch wird es nicht schneiden, da es immer noch an den Funktionen fehlt, die Sie benötigen, um übersichtlichere und komplexere Illustrationen oder detaillierte grafische Elemente erstellen zu können.
Illustrator nimmt immer noch den Pokal, wenn es darum geht vektorgrafiken weil es nicht versucht, seine Funktionen auf die alleinigen Bedürfnisse des UI/UX-Designs zu reduzieren. Andererseits hat es, wie jedes Adobe-Produkt, seine typische steile Lernkurve, aber die gute Nachricht ist, dass es dank seiner Etablierung in der Branche zahlreiche Ressourcen gibt, die Ihnen bei allem helfen, was Sie erreichen möchten.
Eine Kombination aus Sketch und Illustrator klingt vielleicht überflüssig, aber sie ergänzen sich perfekt, vor allem, wenn Sie Dinge zwischen den beiden kopieren/einfügen und die komplexen Elemente, die Sie erstellt haben, in Ihre UI/UX-orientierten Zeichenflächen integrieren können.
Dieses Tool hilft Ihnen bei:
Wir würden niemals jemanden zwingen wollen, den Umgang mit Photoshop zu lernen, aber die Wahrheit ist, dass wir uns immer noch dieser lächerlich komplexen Oberfläche ergeben müssen, denn es ist der einzige Raster-Grafikeditor auf dem Markt mit diesen vielen Möglichkeiten, Funktionen, Integrationen und Tools.
Müssen Sie Fotos bearbeiten, nachbessern, verbessern oder Illustrationen erstellen? Photoshop gehört dir und jeder ist für dich da. Wenn Sie auch kurze Animationen für Ihre Produkte erstellen möchten, können Sie diese in Photoshop prototypisieren und als GIF exportieren. Darüber hinaus verfügen Sie als bekanntestes Bildbearbeitungsprogramm aller Zeiten über eine überwältigende Menge an Tutorials, Support und Ressourcen, sodass Sie sich nicht zu sehr verirren.
Dieses Tool hilft Ihnen bei:
Noun Project hat das Spiel für uns verändert. Da einige Designer sehr hohe Anforderungen an Icons stellen und sie am Ende immer bearbeiten mussten, um sie besser an einen Stil oder zuvor festgelegte Proportionen anzupassen, war diese kleine App ein Zeitretter. Sie haben Zugriff auf die vielfältigste Zusammenstellung von Icons, die wir je verwendet haben, in allen Stilen, Formen und Größen. Sie zahlen ein Abonnement und verwenden dann einfach die gewünschten Symbole.
Geben Sie ein, wonach Sie suchen, und eine Liste der entsprechenden Symbole wird angezeigt, die Sie dann als SVG, PNG oder PDF exportieren können. Wenn Sie es als SVG exportieren, können Sie, wenn Sie so wählerisch sind wie wir, die Symbole immer noch an Ihre Bedürfnisse anpassen. Sie können das Symbol beispielsweise einfach per Drag & Drop auf Ihre Zeichenfläche in Sketch ziehen. Aber wir können definitiv sagen, dass wir seit der Nutzung dieses Dienstes viel weniger Vektoren bearbeitet haben; es hat uns so viel Zeit gespart und neue Ideen und Stile für unsere Designs eröffnet (nein, wir werden nicht von Noun Project gesponsert, aber wir schwören definitiv darauf).
Dieses Tool hilft Ihnen bei:
Hören Sie uns zu, denn das wird definitiv übersehen. Es ist absolut notwendig, Ihre Ideen festzuhalten, bevor Sie sie visuell organisieren, um Strukturen und Navigationskarten einzurichten. Danach wird es dir definitiv helfen, die Seiten auf einer wirklich hohen Ebene zu definieren, wenn es darum geht, Wireframes zu erstellen.
Zu diesem Zeitpunkt machen viele Leute gerne Wireframes mit dem guten alten Millimeterpapier und Lineal, aber normalerweise machen wir das auf Sketch, sodass wir später die Formen verwenden können, um die endgültigen Designs zu erstellen oder Prototypen mit niedriger Wiedergabetreue mit einigen seiner Plugins zu erstellen.
Dieses Tool hilft Ihnen bei:
Hier wird es schwierig: In den letzten Jahren haben wir eine verrückte Menge gesehen Prototyping-Software auf dem Markt auftauchen und die Wahrheit ist, dass wir Ihnen nicht wirklich sagen können, welches Sie verwenden sollen, da es wirklich von Ihren Bedürfnissen abhängt.
Benötigen Sie Übergangsanimationen? Müssen Sie nur die Architektur verstehen? Müssen Sie in einer Stunde etwas erledigen? Du kannst nehmen diese Typen Kurz gesagt, sie haben eine großartige Möglichkeit gefunden, Ihnen bei der Auswahl des zu verwendenden Programms oder Dienstes zu helfen.
Wie komplex möchtest du werden? Wenn Sie nur ein paar grundlegende Animationen benötigen, um Ihre Interaktionen und Übergänge zu bereichern, gibt es einige Online-Orte, an denen Sie verschiedene Ideen im Universum der Standard-UI/UX-Animationen ausprobieren und das Ergebnis dann in CSS exportieren können. Orte wie bouncejs.com oder animista.net. Sie sind praktisch und schnell, außerdem kann der Entwickler den generierten Code einfach abholen.
Fluss ist das Animationswerkzeug, das am besten mit Sketch funktioniert. Jede Zeichenfläche hat einen anderen Status. Sie können Ebenen verschieben, in einer Timeline-Ansicht arbeiten, als Film oder, noch besser, als Code exportieren.
Am schwierigen Ende des Spektrums liegt After Effects, das nicht nur das beste Animationstool im Allgemeinen ist, sondern jetzt auch von Bibliotheken wie Lottie von Airbnb unterstützt wird, das After Effects-Animationen nativ auf Web, Android, iOS und Reagieren Sie nativ.
Facebook hat auch eine, für Android und iOS, und es gibt auch Marcus Eckerts Squall — sie zeigt, dass in dieser robusten Software der alten Schule wie After Effects eine Menge gegenwärtiges und zukünftiges Potenzial für Animationen steckt, die sich leicht in Code übersetzen lassen. Alles, was Sie tun müssen, ist zu lernen, wie man es benutzt, was sich, wie jedes andere Adobe-Programm, als nicht einfach erweisen wird. Aber auch hier wird After Effects über eine Menge Online-Ressourcen und Tutorials verfügen, die Ihnen helfen, die Ergebnisse zu erzielen, die Sie vorgeben.
Wie bereits in Punkt 5 erwähnt, haben Bleistift, Papier, Lineal und Post-its es immer noch und werden häufig verwendet, insbesondere in Phase der Ideenfindung. Es kann jedoch schwieriger sein, diese traditionellen Tools mit anderen zu teilen, wenn aus der Ferne arbeiten. In diesem Sinne zeichnen sich zwei Tools als hervorragende Lösung für Teams aus der Ferne aus, was, wie wir wissen, zunehmend zur gängigen Praxis wird.
Dieses Tool ermöglicht kollaboratives Brainstorming und bietet auch virtuelle Whiteboard-Tools. Virtuelle Whiteboards ermöglichen es dem Designer, seine Ideen, Zeichnungen, Gerüste oder sogar Listen visuell und organisiert mit dem Rest des Teams zu teilen. Darüber hinaus ist Mural eine großartige Plattform für jeden Schritt Produktdesign-Prozess. Es ermöglicht eine hervorragende Kommunikation während des gesamten Projekts und verwendet agile Methoden und Design-Thinking-Methoden.
Dieses Tool hilft Ihnen bei:
Miro bietet auch Zusammenarbeit in Echtzeit wo jeder Notizen hinterlassen, eine Videokonferenz abhalten und eine Brainstorming-Sitzung abhalten kann. Darüber hinaus bietet es mehrere vorgefertigte Vorlagen, die viel Zeit sparen können. Eine der überraschendsten Funktionen dieses Tools ist Digitalisieren handschriftlicher Notizen. Der Designer kann immer noch die traditionellen Methoden verwenden und dann einfach ein Foto oder einen Schnappschuss machen, und es wird in ein digitales Whiteboard umgewandelt. Es ist die perfekte Kombination!
Dieses Tool hilft Ihnen bei:
Wir wissen jetzt, dass Sie sich diese Liste vielleicht ansehen und denken „Nein, zu viel“, aber bevor Sie fortfahren, sollten Sie wissen, dass all diese Programme nur Tools sind. Sie müssen sie nicht eingehend studieren, Sie müssen die Grundlagen erlernen und dann das Internet nutzen, um Ihre Ideen zu verwirklichen. Sie müssen also nicht alle Funktionen dieser Tools kennen, Sie müssen nur wissen, welches Tool Sie wofür verwenden müssen und das „Wie“ folgt.
Wenn Sie Hilfe benötigen, um herauszufinden, welche Tools für Ihr Projekt am besten geeignet sind, hilft Ihnen unser UI/UX-Designteam gerne weiter. Schreiben Sie uns eine Nachricht hier!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Ich bin UI- und Produktdesigner, Illustrationskünstler und Maler. Bekannt für meine Liebe zu trashigen Strandtüchern, Musikproduktion, Typografie und allen Arten von Pizza.
Marketing-Praktikant mit besonderem Interesse an Technologie und Forschung. In meiner Freizeit spiele ich Volleyball und verwöhne meinen Hund so gut es geht.
People who read this post, also found these interesting:
