• Haupt / Andere

52 Webdesign-Tools, mit denen Sie 2021 intelligenter arbeiten können

Seite 1 von 2: Seite 1

• Seite 1
• Seite 2

SPRINGEN ZU:

• Komplette Design-Tools
• Modelle und Prototypen
• Design Frameworks und Bibliotheken

Es gibt heutzutage so viele großartige Webdesign-Tools. Unabhängig davon, welches Problem Sie in Ihrem Webdesign-Workflow lösen möchten, hat wahrscheinlich jemand ein Tool dafür erstellt, unabhängig davon, ob es sich um ein eigenständiges Dienstprogramm oder eine Funktion in einer größeren App handelt. Und obwohl sich die Webdesign-Community seit den Anfängen stark verändert hat, besteht immer noch der Geist, Ihre Arbeit zu teilen, so dass viele dieser großartigen Tools kostenlos sind.

Die Verbreitung von Werkzeugen ist ein großer Segen, aber es kann auch dazu führen, dass Sie die Qual der Wahl haben, da es so viele Möglichkeiten gibt, dasselbe zu tun. In diesem Artikel haben wir zusammengefasst, was unserer Meinung nach derzeit die besten Tools sind. Natürlich ist es keine vollständige Liste, aber hoffentlich erleichtern wir es Ihnen, das richtige Toolkit für Ihren Workflow zusammenzustellen, indem wir es eingrenzen und einige der besten hervorheben.

Da dies eine ziemlich lange Liste ist, haben wir die Werkzeuge in Abschnitte unterteilt, um die Navigation im Artikel zu vereinfachen. Auf dieser Seite finden Sie eine vollständige Webdesign-Software, gefolgt von grundlegenderen dedizierten Wireframing-Tools sowie Webdesign-Frameworks und -Bibliotheken. Auf Seite zwei finden Sie eine Reihe kleinerer, spezialisierterer Tools für alles, von der Arbeit mit Bildern bis hin zum Ausprobieren in AR und VR.

Während Sie hier sind, möchten Sie vielleicht Zusammenfassungen der beste Webhosting-Dienste und das beste Website-Builder für 2020

Komplette Design-Tools

01. InVision Studio

InVision Studio zielt darauf ab, alle Grundlagen abzudecken und das einzige UI-Tool zu sein, das Sie benötigen. Es enthält eine Vielzahl von Funktionen, mit denen Sie schöne interaktive Schnittstellen erstellen können, darunter Tools für Rapid Prototyping, reaktionsschnelles und kollaboratives Design und die Arbeit mit Designsystemen.

Wenn Sie InVision bereits mit Tools wie Sketch verwenden, gibt es einige Überschneidungen bei den Funktionen. Die Stärke von Studio liegt jedoch in der Prototyping-Abteilung, insbesondere wenn Ihr Design Animationen umfasst. Mit Rapid Prototyping können Sie komplexe und einfallsreiche Übergänge erstellen und so das gewünschte Animationsniveau erreichen. Stellen Sie einfach fest, wie Ihre Benutzeroberfläche den Beginn des Übergangs anzeigen soll, und entwerfen Sie dann das Endergebnis. InVision Studio erledigt den Rest für Sie.

Darüber hinaus können Sie diese benutzerdefinierten Animationen und Übergänge aus einer Reihe von Gesten und Interaktionen wie Wischen, Klicken und Schweben erstellen.

Wenn Sie fertig sind, exportieren Sie Ihre Prototypen über InVision und laden Sie Mitarbeiter zur Zusammenarbeit ein. Sie können Ihr Projekt auf der vorgesehenen Plattform anzeigen - eine großartige Möglichkeit, Ihr Design zu erkunden und zu testen. Kunden können dann direkt zum Design Stellung nehmen.

Darüber hinaus können Sie aufhören, zahlreiche Zeichenflächen für mehrere Geräte zu erstellen. Die Layout-Engine von Studio passt Ihr Design automatisch an jeden Bildschirm an. Diese Zeitersparnis gibt Ihnen Raum, um viel mehr über Ihr Design nachzudenken.

02. Skizze

Böhmische Codierung Skizzieren ist eine der am weitesten verbreiteten Webdesign-Plattformen; Es ist ein leistungsstarkes vektorbasiertes Tool zum kollaborativen Erstellen von Schnittstellen und Prototypen. Sketch wurde speziell für die Erstellung von Websites und Apps entwickelt, damit Ihre Benutzeroberfläche nicht durch unnötige Funktionen überladen wird. Es ist schneller und effizienter als Software mit einem breiteren Anwendungsbereich.

Rory Berry, Kreativdirektor bei Superrb , wechselte 2017 zu Sketch und kann es nur empfehlen. „Im Vergleich zu Photoshop ist es viel einfacher, alle Dokumente zu sortieren und Sketch zu überarbeiten“, beginnt er. „Sketch enthält kleine Dokumente, Photoshop große. Da es sich um eine vektorbasierte App handelt, sind die Dateigrößen im Vergleich zu Photoshop erheblich kleiner. “

Und das ist nicht alles. „Das in Sketch integrierte Rastersystem ist großartig und erleichtert das Interface-Design erheblich. Ich denke, die allgemeine Benutzeroberfläche und das minimale Gefühl machen es viel sauberer und benutzerfreundlicher. Photoshop scheint im Vergleich sehr kompliziert zu sein. “

Die Community bietet Hunderte von Skizzen-Plugins um Ihren Design-Workflow einfacher und reibungsloser zu gestalten.

Der Nachteil von Sketch ist, dass es nur auf Mac verfügbar ist und keine Pläne zur Unterstützung anderer Betriebssysteme bestehen. Dies war ein Problem, da Designer häufig .sketch-Dateien für Entwickler unter Windows freigeben möchten. Glücklicherweise gibt es jetzt eine 'Sketch for Windows' -Anwendung namens Wahnsinn Dadurch werden .sketch-Dateien geöffnet und bearbeitet, und der größte Teil dieses Schmerzes wird beseitigt Exportieren und Konvertieren Abschnitt dieses Artikels.

Verpassen Sie nicht unsere Top-Tipps zur Verwendung von Sketch .

03. Adobe XD

Adobe XD bietet die beste Umgebung für digitale Projekte unter der Adobe Creative Cloud Suite. Wenn Sie ein begeisterter Adobe-Benutzer sind und XD noch nicht kennen, ist die Benutzeroberfläche möglicherweise zunächst nicht sehr 'Adobe' -ähnlich. Es kann sich jedoch mit den anderen führenden Tools messen. Es ist ein Sprung, wenn Sie auch schon eine Weile in Photoshop entworfen haben, aber es lohnt sich sehr für das UI-Design.

Dieses Vektordesign- und Wireframing-Tool wird immer besser, mit Ergänzungen wie Unterstützung für Voice Prototyping Sicherstellen, dass das Tool mit den neuesten Trends in UX Schritt hält. XD enthält Zeichenwerkzeuge, Werkzeuge, mit denen Sie nicht statische Interaktionen definieren können, Vorschau für Mobilgeräte und Desktops sowie Freigabewerkzeuge, um Feedback zu Designs zu geben. Sie können eine gerätespezifische Zeichenflächengröße zum Starten eines Projekts auswählen und sogar ein beliebtes UI-Kit importieren, z. B. das Material Design von Google.

Entscheidend ist, dass Adobe XD in den Rest der Creative Cloud integriert wird. Dies bedeutet, dass Sie Assets aus Photoshop oder Illustrator problemlos importieren und damit arbeiten können. Wenn Sie bereits andere Adobe-Apps verwenden, fühlt sich die Benutzeroberfläche gut und vertraut an und sollte keine allzu große Lernkurve darstellen.

Andrei Robu , Design Director bei Robu Studio in Barcelona, ​​gehört zu seinen Fans. 'Für schnelle Modelle ist es großartig', sagt er. 'Es ist eine sehr leichte Oberfläche mit vielen geladenen Fotos und ideal für Moodboards. Das Prototyping ist sehr nützlich, um Kunden zu zeigen, wie Dinge funktionieren, insbesondere weil Sie den Inhalt sofort online stellen können. '

Ellis Rogers, Grafikdesigner bei Receptional Ltd. empfiehlt es auch. 'Wenn das Design / der Prototyp oder das Drahtmodell fertig ist, können Sie mit Adobe XD sehr schnell Elemente auswählen und Seitenübergänge für einen funktionierenden Prototyp erstellen, die über einen Link freigegeben werden können', erklärt er. 'Über den Link können Sie auch Feedback pro Seite sammeln und alles organisieren. Der Link kann in Adobe XD aktualisiert werden, sodass der Client immer die neueste Version sehen kann, ohne sich um falsche Versionen sorgen zu müssen. Es ist eine absolute Freude, mit ihm zu arbeiten. '

04. Wunder

Marvel ist ein weiteres Webdesign-Tool, mit dem Sie schnell Ideen erstellen, eine Benutzeroberfläche so verfeinern können, wie sie aussehen soll, und Prototypen erstellen können. Wunder bietet eine wirklich übersichtliche Möglichkeit, Seiten zu erstellen, sodass Sie Ihr Design anhand eines Prototyps simulieren können. Es gibt einige wunderbare Integrationen zum Einfügen Ihrer Entwürfe in Ihren Projektworkflow. Interessanterweise gibt es eine integrierte Funktion zum Testen von Benutzern, die in der Webdesign-Toolscape noch recht ungewöhnlich ist. Es ist auch alles online, sodass Sie nichts herunterladen müssen.

05. Figma

Figma ist ein Tool für das Interface-Design, mit dem mehrere Designer in Echtzeit zusammenarbeiten können. Dies ist sehr effektiv, wenn Sie mehrere Stakeholder im Projekt haben, die an der Gestaltung des Ergebnisses beteiligt sind. Es ist im Browser oder unter Windows, Mac oder Linux verfügbar. Je nachdem, wofür Sie es verwenden, gibt es sowohl kostenlose als auch kostenpflichtige Versionen.

Hier sind einige seiner herausragenden Eigenschaften:

„Figma hat einen ähnlichen USP wie Sketch, mit der Ausnahme, dass es plattformübergreifend ist“, erklärt Frontend-Designer Benjamin Read . „Als ich damit ein paar Symbole erstellt habe, fand ich den Workflow unglaublich reibungslos. Ich brauchte keine Zeit zum Lernen und hatte den zusätzlichen Vorteil der Zusammenarbeit: Sie können Grafiken innerhalb der App mit anderen teilen. '

'Ich habe versucht, für meine Arbeit auf Linux umzusteigen, und manchmal verwenden wir Windows. Daher ist Figma aus praktischer Sicht für mich sinnvoll', fügt er hinzu.

Freiberuflicher Autor und Artist von Inhalten David Eastwood hat auch gute Dinge über Figma zu sagen. 'Es war auch ein sehr nützliches Werkzeug, wenn wir MVTs schnell verspotten mussten. manchmal kleine Ergänzungen zu einem vorhandenen Layout. Wir lieben es, dass Sie schnell Designs für Desktop, Tablet und Mobile erstellen können. '

06. Affinity Designer

'Serifen Affinity Designer wurde von einigen als 'Photoshop-Killer' bezeichnet, und es ist leicht zu verstehen, warum ', sagt der Produktdesigner Und Edwards . „Es gab einige Funktionen, die mir sehr gut gefallen haben, darunter einstellbare, zerstörungsfreie Schichten. Dies bedeutet im Wesentlichen, dass Sie Bilder oder Vektoren anpassen können, ohne sie zu beschädigen.

'Der Zoom von 1.000.000 Prozent war nur Glückseligkeit; Dies ist besonders nützlich, wenn Sie mit Vektorgrafiken arbeiten, da Sie wirklich nah dran sein können. Die Funktionen zum Rückgängigmachen und Verlauf sind ebenfalls sehr praktisch: Mit Affinity können Sie über 8.000 Schritte zurückgehen! '

'Wenn es um das Entwerfen geht, fühlt sich die Benutzeroberfläche vertraut an. Beim Wechsel von Photoshop scheint jeder von vorne anfangen zu wollen, was eine echte Herausforderung darstellen kann. Was Affinity getan hat, ist, das Layout vertraut zu halten, alles zu straffen und Ablenkungen zu verbergen. Ich war leicht in der Lage, direkt einzuspringen und mit dem Entwerfen zu beginnen. '

Affinity Designer ist ebenfalls verfügbar für das iPad . Beachten Sie auch, dass dies nicht die verkleinerte Version der mobilen App ist, die Sie vielleicht erwarten: Es ist dieselbe Vollversion, die Sie auf dem Desktop erhalten.

Verpassen Sie nicht unsere Anleitungen zur Verwendung der Pixel Person , das Person exportieren und das Stiftwerkzeug in Affinity Designer. Beachten Sie auch, dass Serif auch eine Photoshop-Alternative darstellt. Affinitätsfoto und eine InDesign-Alternative, Affinity Publisher ;; alle spielen gut zusammen.

Modelle und Prototypen

07. UXPin

Das nächste Webdesign-Tool in unserer Liste ist UXPin. Diese spezielle Prototyping-App ist für Mac, Windows oder im Browser verfügbar. Mit den meisten anderen Designtools können Sie Interaktionen nur nachahmen, indem Sie verschiedene Elemente auf Ihrer Zeichenfläche verknüpfen. UXPin kommt dem Code näher und ermöglicht es Ihnen, mit interaktiven Zuständen, Logik und Codekomponenten zu arbeiten.

Es gibt integrierte Elementbibliotheken für iOS, Material Design und Bootstrap sowie Hunderte von kostenlose Icon-Sets , um Ihnen auf Ihrem Weg zu helfen. UXPin hat kürzlich auch Eingabehilfen eingeführt, um sicherzustellen, dass Ihre Designs den WCAG-Standards entsprechen, die wir begrüßen.

API Request ist die neueste Erweiterung der Interaktionsfunktionen von UXPin. Mit dieser Funktion können Sie Prototypen von Apps erstellen, die direkt in Ihrem Designtool mit Ihren Produkten kommunizieren - ohne dass Code erforderlich ist. Sie können damit HTTP-Anforderungen an eine externe API senden.

Sie können Ihren ersten Prototyp in erstellen UXPin kostenlos und wenn es Ihnen passt, wechseln Sie zu einem bezahlten monatlichen Abonnement (Teammitgliedschaften sind verfügbar). UXPin hat kürzlich die Integration in Sketch verbessert, sodass es möglicherweise in Ihren Workflow aufgenommen werden kann, wenn Sie ein Sketch-Fan sind, dessen Prototyping-Funktionen eingeschränkt sind.

08. Proto.io

Proto.io ist eine Top-Anwendung, mit der lebensechte Prototypen entstehen können, die mit groben Ideen beginnen und mit vollwertigen Designs enden. Das Tool bietet Ihnen auch eine Reihe von Möglichkeiten für Ihre Projekte, einschließlich detaillierter und benutzerdefinierter Vektoranimationen.

Sie können zunächst erste Ideen mit einem handgezeichneten Stil entwickeln, sie zu Drahtgittern verarbeiten und mit einem High-Fidelity-Prototyp abschließen. Die Sketch- und Photoshop-Plugins helfen, wenn Sie mit anderen Tools entwerfen möchten, aber Proto.io erledigt den End-to-End-Entwurfsprozess gut. Andere Funktionen - beispielsweise Benutzertests - helfen bei der Validierung Ihrer Entwürfe. Dies ist eine All-in-One-Lösung, die bereits von einer Vielzahl vertrauenswürdiger Marken verwendet wird.

Es gibt eine Reihe großartiger Demos, mit denen Sie anfangen können, und Sie können wirklich sehen, wie einfach diese End-to-End-Lösung eine Reihe von derzeit vorhandenen Tools ersetzen kann. Vor relativ kurzer Zeit hat Proto.io eine Reihe neuer Funktionen hinzugefügt - darunter Asset Manager, Entwicklerhandbücher und die Möglichkeit, Ihren Prototyp aufzuzeichnen -, um dieses Tool mit vielen der besseren Prototyping-Tools in Einklang zu bringen.

09. Balsamiq

Wenn Sie schnelles, effizientes Wireframing suchen Balsamiq ist ein starker Vorschlag. Sie können schnell und einfach eine Struktur und Layouts für Ihre Projekte entwickeln. Drag-and-Drop-Elemente erleichtern das Leben und Sie können Schaltflächen mit anderen Seiten verknüpfen. Durch Wireframing können Sie schnell mit der Planung Ihrer Schnittstellen beginnen und diese mit Ihrem Team oder Ihren Kunden teilen. Balsamiq ist seit 2008 im Einsatz und ist stolz auf seinen schnellen, fokussierten No-Nonsense-Ansatz mit niedriger Wiedergabetreue.

10. ProtoPie

Webdesign-Tool Protopic ermöglicht es Ihnen, komplexe Interaktionen zu erstellen und sich der idealen Endfunktion Ihres Designs zu nähern. Möglicherweise ist die herausragende Funktion die Möglichkeit, die Sensoren intelligenter Geräte in Ihrem Prototyp zu steuern, z. B. Neigungs-, Ton-, Kompass- und 3D-Touch-Sensoren. Abhängig von Ihrem Projekt ist dies ein großartiges Tool für diejenigen, die native App-Funktionen umfassen möchten. Es ist kinderleicht und es ist kein Code erforderlich.

Die kürzlich veröffentlichte Version 4.2 enthält zwei neue, stark nachgefragte Funktionen: Jetzt können Sie Ihren Szenen bearbeitbare SVGs hinzufügen und den Abstand zwischen zwei Ebenen bei Auswahl sofort ermitteln.

11. MockFlow

MockFlow ist eine Reihe von Anwendungen für Wireframing- und Planungswebsites. WireframePro hilft Ihnen dabei, Ihre ursprüngliche Idee darzulegen und dann zu iterieren, bis sie genau richtig ist. Es gibt einen UI-Revisions-Tracker, der Ihnen dabei hilft. Es enthält Tausende vorgefertigter Komponenten und Layouts, die Sie an Ihre Anforderungen anpassen können, und es gibt einen Vorschaumodus, in dem Sie Ihre Arbeit Kollegen und Kunden präsentieren können.

Sobald Sie Ihre Wireframes erstellt haben, kann Ihnen der Rest der Suite bei anderen Aspekten der Planung Ihrer Website helfen, einschließlich der Informationsarchitektur, der Erstellung eines Styleguides (dieser kann automatisch generiert werden) und der Durchführung eines Abmeldevorgangs.

Wenn Sie weitere Optionen sehen möchten, sehen Sie sich unsere Zusammenfassung an Drahtgitterwerkzeuge .

12. Adobe Comp

Adobe Comp ist ein fantastisches Webdesign-Tool für das iPad, das bei der Erstellung von Drahtgittern, Prototypen und Layoutkonzepten für Webseiten hilft. Wenn Sie möchten, ein Creative Cloud-basiertes intelligentes Skizzenblock. Es verfügt über grundlegende Vorlagen für eine Reihe von Layouts für Mobilgeräte und das Internet und druckt sogar, wenn Sie dies möchten. Sie können schnelle Platzhalter erstellen, indem Sie intuitive Formen zeichnen, um Bilder, Text und mehr darzustellen. Comp konvertiert grobe Umrisse in gerade Linien, Kreise und Rechtecke.

Verwirrenderweise hat Adobe es nicht für angebracht gehalten, den direkten Export nach XD einzuschließen - verrückt! - Trotz eine langjährige Anfrage das wurde für immer überprüft. Der Export nach Photoshop ist jedoch integriert (zusammen mit Illustrator und InDesign). Sobald im allgegenwärtigen Bildeditor Änderungen an Ihrem Modell vorgenommen wurden, können Sie von dort nach XD exportieren. Trotz dieses unerwünschten zusätzlichen Schritts auf dem Weg des Adobe Devotee Wireframers verdient Comp die Aufnahme in diese Liste mit seinen Funktionen für unterwegs, seiner Benutzerfreundlichkeit und seiner beeindruckenden Benutzeroberfläche.

13. Flinto

Flinto ist ein Design-Tool, mit dem Sie einzigartige Interaktionen innerhalb Ihrer Designs erstellen können. Sie können eine Reihe von Gesten verwenden und einfache Übergänge vornehmen, indem Sie die Vorher- und Nachher-Zustände entwerfen. Flinto Erarbeitet einfach die Unterschiede und animiert für Sie - super hilfreich.

Denken Sie daran, dass dies nur iOS ist, aber es wird Ihnen bekannt vorkommen, wenn Sie es verwenden. Es gibt eine Online-Dokumentation, die Ihnen auf Ihrem Weg hilft, und das Importieren aus Sketch und Figma ist ebenfalls unkompliziert.

14. Axure

Axure war schon immer eines der besten Wireframing-Tools auf dem Markt, ideal für komplexe Projekte, die dynamische Daten erfordern. Mit Axure können Sie sich wirklich darauf konzentrieren, Projekte zu modellieren, die sowohl technisch sind als auch Struktur und Daten besondere Aufmerksamkeit erfordern.

Der Übergabeprozess von Axure umfasst die Erstellung gründlicher Spezifikationen, mit denen Entwickler ein Endprodukt erstellen können, das Ihren Designs entspricht.

15. Justinmind

Justinmind Hilft beim Prototyping und lässt sich in andere Tools wie Sketch und Photoshop integrieren. Sie können Ihre Interaktionen und Gesten auswählen, um Ihren Prototyp zusammenzustellen. Es enthält auch UI-Kits, sodass Sie schnell Bildschirme zusammenstellen können, und es reagiert auch.

16. Flüssigkeit

Flüssigkeit ist ein einfaches und intuitives Werkzeug zum Erstellen schneller Prototypen und zum Ausarbeiten von Designs. Es enthält einige nützliche, sofort einsatzbereite Ressourcen, mit denen Sie schnelle Prototypen erstellen können. Sobald Sie ein Upgrade durchgeführt haben, können Sie ganz einfach Ihre eigenen Symbole mit Ihren bevorzugten UI-Assets zusammenstellen. Dieses Tool bietet ein sehr schnelles UI-Design mit Assets, die sowohl für High- als auch für Low-Fidelity-Prototypen verfügbar sind.

17. Zusammenspiel

Zusammenspiel ist ein Prototyping-System, das die Kommunikation und Zusammenarbeit in Ihrem Team verbessert, insbesondere zwischen Designern und Entwicklern. Es wurde unter Berücksichtigung von Designsystemen erstellt und in Ihren Code integriert, um eine Dokumentation zu generieren, die einfach zu befolgen ist und automatisch aktualisiert wird. Es ist eine Kernfunktion, alle auf der gleichen Seite und auf dem neuesten Stand zu halten. Wenn Ihr Code aktualisiert wird, wird auch Ihr Design aktualisiert. Interplay befindet sich noch in der Beta-Phase, funktioniert jedoch bereits mit einer Reihe der großen Design- und Entwicklungstools.

Design Frameworks und Bibliotheken

18. Bootstrap

Bootstrap ist sicherlich kein neues Tool, aber es hat die Entwicklung revolutioniert und prägt weiterhin, wie wir Dinge im Web erstellen.

Zum Zeitpunkt des Schreibens wurden in der neuesten Version (4.4.1, veröffentlicht im November 2019) neue reaktionsfähige Container eingeführt, die bis zu einem bestimmten Haltepunkt flüssig sind, sowie neue reaktionsfähige .row-cols-Klassen, mit denen die Anzahl der Spalten über Haltepunkte hinweg effizient angegeben werden kann.

Bootstrap hat kürzlich eine eigene Open-Source-Symbolbibliothek gestartet. Bootstrap-Symbole , das für die Arbeit mit Bootstrap-Komponenten ausgelegt ist.

Finden Sie die Die besten kostenlosen Bootstrap-Themen in unserem Handbuch .

19. Start 3

Wenn Sie Bootstrap mögen, aber nicht in das Rohe eintauchen möchten, ist Startup 3 der einfache Weg. Es handelt sich um eine Online-App mit integrierten Vorlagen und Themen zum Erstellen von Websites auf der Basis von Bootstrap 4 mit einem 12-Spalten-Raster. Sie können Ihre Site erstellen, ohne Code über die Drag-and-Drop-Oberfläche schreiben zu müssen. Sie benötigen jedoch einige HTML- und CSS-Kenntnisse, um die Dinge fertigzustellen.

20. Vue.js.

Vue.js ist ein Framework zum Erstellen von Benutzeroberflächen und verwendet ein virtuelles DOM. Wie der Name schon sagt, konzentriert sich die Kernbibliothek von Vue auf die Ansichtsebene.

Schauen Sie sich ein Codebeispiel aus Vues Dokumenten an, das Benutzereingaben verwendet und die Eleganz der Bibliothek demonstriert. Wir beginnen mit dem HTML:

{{ message }}

Reverse Message

Beachten Sie den benutzerdefinierten V-On-Handler, der das aufruft reverseMessage Methode. Hier ist das JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

In diesem Beispiel wurde der Absatz mit Daten gefüllt und die definiert reverseMessage Methode. Vue ist ideal für diejenigen, die weniger Erfahrung mit komplexen Bibliotheken haben, verfügt jedoch auch über eine Reihe von Plugins, die bei der Entwicklung komplexer einseitiger Webanwendungen helfen.

21. Musterlabor

Pattern Lab ist ein wunderschönes mustergesteuertes Design-Tool, das von Dave OIsen und Brad Frost entwickelt wurde. Es basiert auf dem Konzept von Atomic Design Dies besagt, dass Sie Ihr Design in seine kleinsten Teile - Atome - zerlegen und diese zu größeren, wiederverwendbaren Komponenten - Molekülen und Organismen - kombinieren sollten, die dann in verwendbare Vorlagen umgewandelt werden können.

Obwohl es sich im Kern um einen statischen Site-Generator handelt, der UI-Komponenten zusammenfügt, gibt es noch viel mehr zu tun Musterlabor als die. Es ist sprach- und werkzeugunabhängig; Sie können UI-Muster ineinander verschachteln und mit dynamischen Daten entwerfen. Es verfügt über geräteunabhängige Tools zur Größenänderung von Ansichtsfenstern, mit denen Sie sicherstellen können, dass Ihr Design-System vollständig reagiert. und es ist vollständig erweiterbar, sodass Sie sicher sein können, dass es erweitert wird, um Ihre Anforderungen zu erfüllen.

22. Materialdesign

Material Design ist eine visuelle Sprache von Google, die darauf abzielt, die klassischen Prinzipien guten Designs mit Innovationen in Technologie und Wissenschaft zu kombinieren, um eine zusammenhängende und flexible Grundlage für Ihre Website zu schaffen.

Websites und Apps, die mit dem Material Design-Framework erstellt wurden, sehen modern aus und sind dem Benutzer vertraut, sodass die Benutzer Ihr Produkt sofort verwenden können. Es stehen viele Tools zur Verfügung, die bei diesem Entwurfssystem helfen. Klicken Sie in der Navigationsleiste auf Ressourcen, um sie zu finden.

Besuchen Sie uns im April 2020 mit unserer Reihe von JavaScript-Superstars bei GenerateJS - der Konferenz, die Ihnen hilft, besseres JavaScript zu erstellen. Buchen Sie jetzt bei generateconf.com

Nächste Seite: Spezielle Webdesign-Tools zur Behebung von Problemen

• 1
• zwei

Aktuelle Seite: Seite 1

Nächste Seite Seite 2