Heutzutage gibt es eine Fülle exzellenter Webdesign-Tools, die Sie bei Mockups, Frameworks, Tests und anderen Aufgaben unterstützen. Sie werden auch eine Fülle von Ressourcen zu den zahlreichen Faktoren entdecken, die erfolgreiches Webdesign ausmachen, wie z. B. virtuelle Realität, Animation, Farbe und Typografie.
Jemand hat wahrscheinlich ein Tool für jedes Problem entwickelt, das Sie in Ihrem Webdesignprozess angehen möchten, egal ob es sich um ein eigenständiges Dienstprogramm oder eine Funktion innerhalb eines größeren Programms handelt. Die noch bessere Nachricht ist, dass so viele dieser fantastischen Tools kostenlos verfügbar sind, aber dies macht die Auswahl erheblich schwieriger.
Um Webdesignern zu helfen, haben wir eine Liste der besten derzeit verfügbaren Tools zusammengestellt (eine genauere Liste finden Sie in dieser Zusammenfassung der UI-Design-Tools). Da dies eine so lange Liste ist, haben wir sie in Teile unterteilt, um sie einfacher zu erkunden. Komplette Webdesign-Software wie Sketch und Adobe XD sind zuerst enthalten, gefolgt von grundlegenderen, spezialisierten Wireframing-Tools, dann Webdesign Frameworks und -Bibliotheken. Auf der zweiten Seite finden Sie eine Vielzahl kleinerer, spezialisierterer Tools für alles, vom Umgang mit Fotos bis hin zur Sicherstellung, dass Ihre Arbeit integrativ ist.
Werkzeuge für Webdesign
1. InVision-Studio
InVision Studio strebt danach, das einzige Benutzeroberflächen-Tool zu sein, das Sie jemals brauchen werden. Es enthält unter anderem Tools für schnelles Prototyping, reaktionsschnelles und kollaboratives Design und die Arbeit mit Designsystemen, um Sie bei der Entwicklung attraktiver interaktiver Schnittstellen zu unterstützen.
Wenn Sie InVision derzeit mit Tools wie Sketch verwenden, gibt es viele Überschneidungen bei den Funktionen. Die Stärke von Studio liegt jedoch im Prototyping, was besonders wichtig ist, wenn Ihr Design Animationen enthält. Rapid Prototyping ermöglicht es Ihnen, komplizierte und innovative Übergänge zu entwickeln, mit denen Sie die gewünschte Menge an Animation erreichen können. Entscheiden Sie einfach, wie Ihre Benutzeroberfläche zu Beginn des Übergangs aussehen soll, und erstellen Sie dann das Endprodukt. Den Rest übernimmt InVision Studio.
Sie können diese eigenen Animationen und Übergänge auch mit einer Vielzahl von Bewegungen und Interaktionen wie Wischen, Klicken und Bewegen der Maus erstellen.
Wenn Sie fertig sind, verwenden Sie InVision, um Ihre Prototypen zu exportieren und andere zur Teilnahme einzuladen. Sie können Ihr Projekt auf der Plattform sehen, für die es entwickelt wurde, was eine hervorragende Möglichkeit ist, Ihre Idee zu erkunden und zu testen. Kunden können das Design direkt kommentieren.
Um das Ganze abzurunden, müssen Sie sich keine Gedanken über das Entwerfen mehrerer Zeichenflächen für verschiedene Geräte machen, da die Layout-Engine von Studio Ihr Design automatisch an jede Bildschirmgröße anpasst. Diese Zeitersparnis ermöglicht es Ihnen, gründlicher über Ihr Design nachzudenken.
2. Skizzieren
Sketch von Bohemian Coding ist eine der am häufigsten verwendeten Online-Designplattformen; Es ist ein sehr leistungsfähiges vektorbasiertes Tool zum gemeinsamen Erstellen von Schnittstellen und Prototypen. Sketch wurde speziell für die Erstellung von Websites und Anwendungen entwickelt, hat also weniger irrelevante Funktionen und ist schneller und effizienter als Tools mit größerem Umfang.
Rory Berry, der Creative Director von Superrb, wechselte vor einigen Jahren zu Sketch und sagt, es sei ein großartiges Tool. „Das Sortieren all Ihrer Papiere und das Vornehmen von Änderungen in Sketch ist viel einfacher als in Photoshop“, sagt er. „Sketch funktioniert mit kleinen Dokumenten, während Photoshop mit großen arbeitet. Die Dateigrößen sind viel geringer als bei Photoshop, da es sich um eine vektorbasierte Software handelt.“
Nicht nur das, aber es gibt noch mehr. „Die integrierte Rasterstruktur von Sketch ist fantastisch und macht das Interface-Design zum Kinderspiel.“ Die allgemeine Benutzeroberfläche und die Grundstimmung machen es meiner Meinung nach einfacher zu erstellen und benutzerfreundlicher. Im Gegensatz dazu scheint Photoshop wirklich schwierig zu sein.“
Hunderte von Sketch-Plugins sind in der Community verfügbar, um Ihren Designprozess einfacher und flüssiger zu gestalten.
Der Nachteil von Sketch ist, dass es nur für Mac zugänglich ist, ohne die Absicht, andere Betriebssysteme zu unterstützen. Dies war ein Problem, da Designer oft skizzierte Dateien mit Windows-Entwicklern teilen möchten. Glücklicherweise gibt es jetzt ein „Sketch für Windows“-Tool namens Lunacy, das.sketch-Dateien öffnet und bearbeitet und den größten Teil der Qual beseitigt – siehe Abschnitt Exportieren und Konvertieren auf dieser Seite für weitere Informationen.
3. Adobe XD
Im Rahmen des Adobe Creative Cloud-Pakets bietet Adobe XD die beste Umgebung für digitale Projekte. Wenn Sie ein langjähriger Adobe-Benutzer sind, der neu bei XD ist, scheint die Benutzeroberfläche zunächst nicht besonders „Adobe“ zu sein. Es lässt sich jedoch gut mit anderen bekannten Tools vergleichen. Es ist ein großer Sprung, wenn Sie Photoshop schon lange verwenden, aber es lohnt sich für das UI-Design.
Dieses Vektordesign- und Wireframing-Tool wird ständig verbessert, mit Funktionen wie der Unterstützung von Autoanimationen, die garantieren, dass es mit den neuesten UX-Trends Schritt halten kann. Zeichenwerkzeuge, Werkzeuge zum Definieren nicht statischer Interaktionen, Vorschauen für Mobilgeräte und Desktops sowie Freigabefunktionen zum Anbieten von Feedback zu Designs sind alle in XD enthalten. Sie können damit ein Projekt mit einer gerätespezifischen Zeichenflächengröße starten und sogar berühmte UI-Kits wie Material Design von Google importieren.
Wichtig ist, dass Adobe XD vollständig in den Rest der Creative Cloud integriert ist, sodass Sie Dateien aus Photoshop oder Illustrator einfach importieren und damit arbeiten können. Wenn Sie frühere Adobe-Programme verwendet haben, wird die Benutzeroberfläche komfortabel und vertraut erscheinen, sodass es keine große Lernkurve gibt.
Andrei Robu, Design Director von Barcelonas Robu Studio, ist ein Fan. „Das ist wunderbar für schnelle Prototypen“, erklärt er. „Es ist eine einfache Benutzeroberfläche mit vielen Fotos und ideal für Moodboards.“ Prototyping ist sehr nützlich, um Kunden zu zeigen, wie die Dinge funktionieren, zumal Sie die Informationen sofort online veröffentlichen können.“
Es wird auch von Ellis Rogers, einem Grafikdesigner bei Receptional Ltd., empfohlen. „Wenn das Design/der Prototyp oder das Drahtgitter fertig ist, können Sie mit Adobe XD schnell Teile auswählen und Seitenübergänge für einen funktionierenden Prototyp erstellen, den Sie über einen Link teilen können.“ er fährt fort. „Sie können den Link auch verwenden, um Kommentare pro Seite zu sammeln und so alles organisiert zu halten.“ Der Link kann innerhalb von Adobe XD geändert werden, sodass der Kunde immer die neueste Version sieht, ohne sich Gedanken über veraltete Versionen machen zu müssen. Es ist eine wahre Freude, mit Ihnen zu verhandeln.“
4. Staunen
Marvel ist ein weiteres Webdesign-Tool, das sich hervorragend zum schnellen Skizzieren von Konzepten, zum Feinabstimmen einer Benutzeroberfläche nach Ihren Wünschen und zum Erstellen von Prototypen eignet. Marvel hat einen ziemlich coolen Ansatz zum Erstellen von Seiten, mit dem Sie Ihr Design mit einem Prototyp nachahmen können. Um Ihre Ideen in Ihren Projektprozess einfließen zu lassen, stehen mehrere fantastische Integrationen zur Verfügung. Es ist erwähnenswert, dass es eine integrierte Benutzertestoption gibt, die derzeit in der Landschaft der Webdesign-Tools ungewöhnlich ist. Sie müssen nichts herunterladen, da alles online erledigt wird.
5. Figur
Figma ist ein Interface-Design-Tool, das die Echtzeit-Zusammenarbeit zwischen zahlreichen Designern ermöglicht. Wenn es mehrere Stakeholder in einem Projekt gibt, die das Ergebnis gestalten wollen, ist dies ein guter Weg. Es ist im Browser sowie unter Windows, Mac und Linux zugänglich, und je nach Bedarf sind kostenlose und Premium-Versionen verfügbar.
Hier sind einige der bemerkenswertesten Merkmale:
Frontend-Designer Benjamin Read fügt hinzu: „Figma hat einen ähnlichen USP wie Sketch, mit dem Unterschied, dass es plattformübergreifend ist.“ „Ich fand den Prozess wirklich reibungslos, als ich damit ein paar Symbole erstellte.“ Es war einfach zu erlernen und hat den zusätzlichen Vorteil, dass es kollaborativ ist: Sie können Grafiken mit anderen innerhalb des Programms austauschen.“
„Ich habe versucht, für die Arbeit auf Linux umzusteigen, und wir verwenden manchmal Windows“, sagt er, „also macht Figma für mich aus praktischer Sicht Sinn.“
David Eastwood, ein freiberuflicher Inhaltsautor und Grafiker, hat Figma ebenfalls gelobt. „Es ist auch praktisch, wenn wir schnell Prototypen von MVTs erstellen mussten, manchmal als geringfügige Änderungen an einem bestehenden Layout.“ Uns gefällt, wie schnell Sie Designs für Desktop-, Tablet- und Mobilgeräte erstellen können.“
6. Affinitätsdesigner
„Einige haben den Affinity Designer von Serif den ‚Photoshop-Killer‘ genannt, und es ist leicht zu verstehen, warum“, erklärt Produktdesigner Dan Edwards. „Anpassbare, zerstörungsfreie Ebenen gehörten zu den Dingen, die mir sehr gut gefallen haben. Das bedeutet einfach, dass Sie Änderungen an Fotos oder Vektoren vornehmen können, ohne dass sie beschädigt werden.
„Der Zoom von 1.000.000 % war eine wahre Freude; er ist besonders vorteilhaft, wenn es um Vektorgrafiken geht, da man so unglaublich nah dran ist.“ Auch die Rückgängig- und Verlaufsfunktionen sind sehr nützlich: Mit Affinity können Sie über 8.000 Schritte zurückgehen!“
„Wenn es um Design geht, ist die Benutzeroberfläche komfortabel. Beim Wechsel von Photoshop zu InDesign scheint jeder von vorne anfangen zu wollen, was schwierig sein könnte. Affinity hat gute Arbeit geleistet, das Layout erkennbar zu halten, es zu straffen und Ablenkungen zu entfernen . Ich konnte mühelos direkt einsteigen und mit der Entwicklung beginnen.“
Die iPad-Version von Affinity Designer ist ebenfalls verfügbar. Und entgegen der landläufigen Meinung ist dies keine abgespeckte mobile App-Version, sondern die auf dem PC verfügbare Vollversion.
Prototypen und Modelle
7. UXPin
UXPin ist das nächste Webdesign-Tool auf unserer Liste. Dieses webbasierte Prototyping-Tool ist für Mac, Windows und das Internet verfügbar. UXPin kommt dem Code näher und ermöglicht Ihnen, mit interaktiven Zuständen, Logik und Codekomponenten zu arbeiten, während die meisten anderen Designtools es Ihnen nur ermöglichen, Interaktionen zu imitieren, indem Sie verschiedene Elemente auf Ihrer Zeichenfläche verbinden.
Um Sie zu unterstützen, gibt es integrierte Elementbibliotheken für iOS, Material Design und Bootstrap sowie Hunderte von kostenlosen Icon-Sets. UXPin bietet auch Zugänglichkeitsfunktionen, die Ihnen helfen, Ihre Designs mit den WCAG-Standards konform zu halten, was wir zu schätzen wissen.
Sie können Ihren ersten Prototyp kostenlos auf UXPin erstellen und dann auf ein monatliches Premium-Abonnement upgraden, wenn es Ihnen gefällt (Teammitgliedschaften sind verfügbar). UXPin bietet auch eine gute Sketch-Verbindung, daher lohnt es sich, Ihren Workflow zu erweitern, wenn Sie Sketch mögen, aber dessen Prototyping-Funktionen eingeschränkt sind.
8. Proto.io
Proto.io ist ein fantastisches Tool zum Erstellen realistischer Prototypen, die mit rudimentären Konzepten beginnen und mit vollständig realisierten Designs enden. Darüber hinaus bietet das Tool eine Vielzahl von Optionen für Ihre Projekte, einschließlich detaillierter und maßgeschneiderter Vektoranimationen.
Sie können damit beginnen, erste Konzepte in handgezeichneter Form zu skizzieren und dann mit Drahtmodellen und einem High-Fidelity-Prototypen fortzufahren. Wenn Sie mit anderen Tools erstellen möchten, können die Sketch- und Photoshop-Plugins hilfreich sein, aber Proto.io handhabt den gesamten Designprozess effektiv. Andere Funktionen, wie z. B. Benutzertests, helfen bei der Validierung Ihrer Ideen. Dabei handelt es sich um eine All-in-one-Lösung, die bereits von einer Vielzahl namhafter Unternehmen eingesetzt wird.
Es gibt viele hervorragende Demonstrationen zum Ausprobieren, und Sie können schnell erkennen, wie eine End-to-End-Lösung problemlos eine Reihe bestehender Technologien ersetzen könnte. Proto.io umfasst auch Asset Manager, Entwicklungsrichtlinien und die Option, Ihren Prototyp aufzuzeichnen, was es zu einer der umfassendsten verfügbaren Prototyping-Plattformen macht.
9. Balsamico
Balsamiq ist eine solide Empfehlung, wenn Sie nach schnellem und effizientem Wireframing suchen. Mit Einfachheit können Sie einen Rahmen und Plan für Ihre Projekte erstellen. Es ist einfacher, Drag-and-Drop-Komponenten zu verwenden, und Sie können Schaltflächen mit anderen Sites verbinden. Sie können sofort mit der Planung Ihrer Schnittstellen beginnen und diese per Wireframing mit Ihrem Team oder Ihren Kunden teilen. Balsamiq gibt es seit 2008 und ist bekannt für seinen Low-Fidelity-, schnellen und sachlichen Ansatz.
10. Prototyp
ProtoPie, ein Webdesign-Tool, ermöglicht es Ihnen, komplexe Interaktionen zu konstruieren und der gewünschten Endfunktion Ihres Designs nahe zu kommen. Die Fähigkeit, die Sensoren intelligenter Geräte in Ihrem Prototyp zu verwalten, wie z. B. Neigungs-, Ton-, Kompass- und 3D-Touch-Sensoren, ist vielleicht das bemerkenswerteste Merkmal.
Dies ist ein hervorragendes Tool für Personen, die je nach Projekt native App-Funktionen in ihr Projekt integrieren möchten. Es ist kinderleicht und es sind keine Programmierkenntnisse erforderlich.
11. MockFlow
MockFlow ist eine Sammlung von Online-Wireframing- und Planungstools. WireframePro unterstützt Sie beim Entwerfen Ihres ersten Konzepts und beim Iterieren, bis es perfekt ist – es gibt sogar einen UI-Revisions-Tracker, der Sie unterstützt. Es enthält Hunderte von vorgefertigten Komponenten und Layouts, die Sie an Ihre Bedürfnisse anpassen können, sowie einen Vorschaumodus, um Ihre Arbeit Kollegen und Kunden zu zeigen.
Nachdem Sie Ihre Wireframes fertiggestellt haben, kann der Rest der Suite Sie bei anderen Teilen der Website-Planung unterstützen, wie z. B. der Informationsarchitektur, dem Erstellen eines Styleguides (der automatisch erstellt werden kann) und dem Abschließen eines Freigabeverfahrens.
Wenn Sie nach mehr Auswahlmöglichkeiten suchen, werfen Sie einen Blick auf unsere Liste der besten Wireframe-Tools.
12. Adobe-Comp
Adobe Comp ist eine ausgezeichnete iPad-Webdesign-App, mit der Sie Wireframes, Prototypen und Layout-Designs für Ihre Websites erstellen können. Wenn Sie es so nennen möchten, ist es ein Creative Cloud-basierter intelligenter Skizzenblock. Es enthält grundlegende Vorlagen für eine Vielzahl von Mobil- und Weblayouts sowie für den Druck, wenn das Ihr Ding ist, und Sie können schnell Platzhalter erstellen, indem Sie intuitive Formen skizzieren, um Fotos, Text und mehr darzustellen. Comp verwandelt gekritzelte Linien, Kreise und Rechtecke in gerade Linien, Kreise und Rechtecke.
Trotz einer langjährigen Anfrage, die scheinbar eine Ewigkeit lang geprüft wurde, hat Adobe es nicht für angebracht gehalten, den direkten Export nach XD zu integrieren – Wahnsinn! – trotz einer langjährigen Anfrage, die seit einer gefühlten Ewigkeit geprüft wird. Der Export nach Photoshop (zusammen mit Illustrator und InDesign) ist jedoch integriert, und nachdem Sie Ihr Mockup im allgegenwärtigen Bildeditor optimiert haben, können Sie von dort nach XD exportieren. Comp verdient seine Position in unserer Liste aufgrund seiner universellen Funktionen, Benutzerfreundlichkeit und hervorragenden Benutzeroberfläche, trotz dieses lästigen zusätzlichen Schritts im Benutzerpfad des Adobe-Anhängers Wireframer.
13. Flint
Flinto ist ein Designtool, mit dem Sie einzigartige Interaktionen in Ihren Projekten erstellen können. Indem Sie die Vorher- und Nachher-Zustände definieren, können Sie eine Vielzahl von Bewegungen verwenden und einfache Übergänge erzeugen. Flinto berechnet einfach die Unterschiede und animiert sie für Sie, was sehr nützlich ist.
Denken Sie daran, dass diese App nur für iOS ist, aber sobald Sie anfangen, sie zu verwenden, wird sie Ihnen ziemlich vertraut vorkommen. Es gibt eine online verfügbare Dokumentation, die Ihnen hilft, und das Importieren aus Sketch und Figma ist sehr einfach.
14. Axt 14
Axure ist traditionell eines der besten verfügbaren Wireframing-Tools, insbesondere für große Projekte mit dynamischen Daten. Sie können sich darauf konzentrieren, mit Axure Projekte zu simulieren, die sowohl technisch sind als auch eine sorgfältige Beachtung von Struktur und Daten erfordern.
Der Übergabeprozess bei Axure umfasst die Erstellung detaillierter Spezifikationen, die Entwickler verwenden können, um ein Endprodukt zu konstruieren, das Ihrer Vision entspricht.
15. Justinmind
Justinmind unterstützt das Prototyping und verbindet sich mit anderen Programmen wie Sketch und Photoshop. Um beim Zusammenbau Ihres Prototyps zu helfen, können Sie Ihre Interaktionen und Gesten auswählen. Es wird auch mit UI-Kits geliefert, sodass Sie schnell Bildschirme aufbauen können, und es reagiert.
16. Flüssigkeit
Fluid ist ein einfaches und unkompliziertes Werkzeug für schnelles Prototyping und Designentwicklung. Es wird sofort mit mehreren nützlichen Komponenten geliefert, die Ihnen den Einstieg in das schnelle Prototyping erleichtern. Es ist einfach, nach der Aktualisierung Ihre eigenen Symbole mit Ihren bevorzugten UI-Komponenten zu erstellen. Dieses Tool ermöglicht eine schnelle UI-Erstellung, wobei Elemente für Prototypen sowohl hoher als auch niedriger Qualität zugänglich sind.
17. Einrahmer
Framer ist ein Prototyp-Tool, das Ihrem Team hilft, effektiver zu kommunizieren und zusammenzuarbeiten, insbesondere zwischen Designern und Ingenieuren. Es wurde mit Blick auf Designsysteme entwickelt und verbindet sich mit Ihrem Code, um eine leicht verständliche Dokumentation bereitzustellen, die automatisch aktualisiert wird. Eine Hauptfunktion besteht darin, alle auf der gleichen Seite und auf dem neuesten Stand zu halten, sodass sich Ihr Design ändert, wenn sich Ihr Code ändert.
Bibliotheken und Design-Frameworks
18. Bootstrap
Obwohl Bootstrap keine neue Technologie ist, hat es die Programmierung revolutioniert und beeinflusst weiterhin, wie wir Websites erstellen. Responsive Container, die bis zu einem bestimmten Breakpoint fließend sind, und responsive.row-cols-Klassen zum effektiven Definieren der Anzahl von Spalten über Breakpoints hinweg sind zwei Features, auf die Sie achten sollten.
Bootstrap Icons ist eine Open-Source-Icon-Sammlung, die mit Bootstrap-Komponenten interagieren soll.
19. Inbetriebnahme 4
Startup 4 ist eine Online-App mit integrierten Vorlagen und Themen zum Erstellen von Websites auf der Grundlage von Bootstrap 4 mit einem 12-Spalten-Raster, wenn Sie Bootstrap mögen, aber nicht in das Rohe eintauchen möchten; Es ist eine Online-App mit integrierten Vorlagen und Themen zum Erstellen von Websites basierend auf Bootstrap 4 mit einem 12-Spalten-Raster, wenn Sie Bootstrap mögen, aber nicht in das Rohe eintauchen möchten. Sie können die Drag-and-Drop-Oberfläche verwenden, um Ihre Website zu erstellen, ohne Code schreiben zu müssen, aber Sie benötigen grundlegende HTML- und CSS-Kenntnisse, um sie fertigzustellen.
20. Vue.js
Vue.js ist ein Benutzeroberflächen-Framework, das ein virtuelles DOM verwendet. Die Hauptbibliothek von Vue konzentriert sich, wie der Name schon sagt, auf die Ansichtsebene.
21. Musterlabor
Dave OIsen und Brad Frost entwerfen Pattern Lab, ein wunderschönes mustergesteuertes Designtool. Es basiert auf dem Atomic Design-Prinzip, das besagt, dass Sie Ihr Design in seine kleinsten Komponenten – Atome – zerlegen und diese zu größeren, wiederverwendbaren Komponenten – Molekülen und Kreaturen – kombinieren sollten, die dann in Vorlagen umgewandelt werden können.
Pattern Lab ist ein statischer Site-Generator, der UI-Komponenten in seinem Herzen zusammenführt, aber es ist viel mehr als das. Es ist sprach- und werkzeugneutral; Sie können UI-Muster ineinander schichten und mit dynamischen Daten entwerfen; Es verfügt über geräteunabhängige Funktionen zur Größenänderung des Ansichtsfensters, um sicherzustellen, dass Ihr Designsystem vollständig reaktionsschnell ist. und es ist vollständig erweiterbar, sodass Sie sicher sein können, dass es mit Ihren Anforderungen mitwächst.
22. Materialdesign
Material Design ist eine von Google entwickelte visuelle Sprache, die versucht, traditionelle Designkonzepte mit technologischen und wissenschaftlichen Fortschritten zu verbinden, um eine einheitliche und anpassungsfähige Grundlage für Ihre Website zu schaffen.
Auf Material Design basierende Websites und Anwendungen erscheinen den Benutzern aktuell und vertraut, sodass sie sofort mit der Verwendung Ihres Produkts beginnen können. Es stehen mehrere Tools zur Verfügung, um dieses Designsystem zu unterstützen. Um darauf zuzugreifen, gehen Sie in der Navigationsleiste zu Ressourcen.
