16 der besten Entwicklungs- und Designtools von Google im Jahr 2020

Wenn Sie im Web arbeiten, bedeutet dies normalerweise, dass Sie in irgendeiner Form mit Google arbeiten. Da Google Chrome der Konkurrenz weit voraus ist, müssen Designer und Entwickler darüber nachdenken, wie ihr Projekt mit dem Browser funktioniert. Wie wird es aussehen? Welche Technologien werden unterstützt, wie sicher ist es und wie wird es funktionieren?

Glücklicherweise bietet Chrome Tools, mit denen sichergestellt wird, dass jede Website oder App optimal ist. Mit DevTools erhalten Designer und Entwickler Einblick in eine Webseite: Sie können das DOM bearbeiten, CSS überprüfen, mit Live-Bearbeitung an Designs experimentieren, JavaScript debuggen und die Leistung überprüfen. (Weitere Informationen zur Verwendung dieser Funktionen Google Web-Tools Hier und wenn Sie von vorne anfangen, sehen Sie sich unsere Liste der Top an Web Builder , auch).



Google bietet jedoch mehr als nur den Browser. Es verfügt über Tools und Ressourcen, die nahezu jeden Aspekt Ihres Design- und Entwicklungslebens unterstützen. Möchten Sie wissen, wie Sie die Leistung verbessern können? Lighthouse ist hier um zu helfen. Möchten Sie leistungsstärkere mobile Websites erstellen? Dann grüßen Sie AMP. Möchten Sie schöne PWAs bauen? Dann können Flutter, Material Design und Workbox einspringen.



Das Schöne an der Verwendung von Google-Tools, -Ressourcen, -Bibliotheken und -Frameworks ist, dass Sie wissen, dass sie mit dem Chrome-Browser - dem beliebtesten Browser der Welt - gut funktionieren. Weitere Tools finden Sie in unserem Webdesign-Tools zusammenfassen.

So sehen Sie Fotos, die Ihnen auf Instagram gefallen haben, auf dem Computer

01. Leuchtturm

Leistung ist ein Schlüsselfaktor für den Erfolg einer Website und Leuchtturm ist Googles Tool zur Verbesserung der Qualität von Webseiten (rechts) Web-Hosting Service wird auch helfen). Wie benutzt man Lighthouse und was kann es? In der einfachsten Form können Sie Lighthouse auf der Registerkarte Audits ausführen und aus einer Auswahl von Optionen auswählen, einschließlich Desktop oder Mobile. Zusätzlich zu den Kontrollkästchen für Leistung, Barrierefreiheit und SEO können Sie einen Abschlussbericht mit Verbesserungsvorschlägen erstellen.



02. Polymer

Polymer ist bekannt für seine Arbeit mit Webkomponenten, aber das Projekt hat sein Repertoire jetzt um eine Sammlung von Bibliotheken, Tools und Standards erweitert. Was ist inbegriffen? LitElement ist ein Editor, mit dem Webkomponenten einfach definiert werden können, während lit-html eine HTML-Vorlagenbibliothek ist, mit der Benutzer HTML-Vorlagen der nächsten Generation in JS schreiben können. Außerdem finden Sie ein PWA Starter Kit, die Original-Polymerbibliothek und Sätze von Webkomponenten.

03. APIs Explorer

Google verfügt über eine umfangreiche Bibliothek von APIs, die Entwicklern zur Verfügung stehen. Es ist jedoch keine leichte Aufgabe, das zu finden, was Sie benötigen. Das ist wo Google APIs Explorer tritt ein, um eine helfende Hand anzubieten. Es gibt eine lange Liste, durch die gescrollt werden kann, aber für einen schnelleren Zugriff gibt es ein Suchfeld zum Filtern der API-Liste. Jeder Eintrag verweist auf eine Referenzseite mit weiteren Details zur Verwendung der API.

04. Flattern

Google Tools Flattern



Erstellen Sie schöne Apps mit Flutter(Bildnachweis: Flattern)

Wenn Sie gut aussehende Anwendungen für Mobilgeräte, Web und Desktop aus einer einzigen Codebasis erstellen möchten, dann Flattern könnte für dich sein. Die Site ist eine vollständige Referenz zum Arbeiten mit und Bauen mit Flutter. Sie haben keine Ahnung, was Sie tun sollen? Die Dokumente führen einen Benutzer von der Installation bis zur Erstellung, unterstützt von zahlreichen Beispielen und Tutorials.

05. Google GitHub

Wie die meisten wissen, ist GitHub die Hosting-Plattform / das Hosting-Repository zum Speichern und Freigeben von Code und Dateien. Und glücklich Google hat einen eigenen Platz auf der Plattform mit über 260 Repositories zum Durchsuchen. Verwenden Sie den Filter, um Ihre Suchzeit zu verkürzen und sich dem Repository zu nähern, mit dem Sie spielen oder zu dem Sie beitragen möchten.

06. Puppenspieler

Erbaut in Node, Puppenspieler bietet eine High-Level-API, mit der Sie auf kopfloses Chrome zugreifen können - effektiv auf Chrome ohne die Benutzeroberfläche, die Entwickler dann über die Befehlszeile steuern können. Was können Sie mit Puppenspieler tun? Es stehen einige Optionen zum Generieren von Screenshots und PDFs von Seiten, zum Automatisieren der Formularübermittlung und zum Erstellen einer automatisierten Testumgebung zur Verfügung.

07. Arbeitsbox

Wenn Sie eine PWA erstellen möchten, ist dies ein guter Ausgangspunkt. Workbox bietet eine Sammlung von JavaScript-Bibliotheken zum Hinzufügen von Offline-Unterstützung zu Webanwendungen. Eine Auswahl ausführlicher Anleitungen zeigt, wie Sie eine Service Worker-Datei erstellen und registrieren, Anforderungen weiterleiten, Plugins verwenden und Bundler mit Workbox verwenden. Außerdem gibt es eine Reihe von Beispiel-Caching-Strategien zum Auschecken.

08. Codelabs

Benötigen Sie praktische Anleitungen für ein Google-Produkt? Codelabs bietet „eine geführte, praktische Anleitung zum Codieren“. Die Website ist übersichtlich in Kategorien und Ereignisse unterteilt, sodass Sie schnell und einfach finden, was Sie möchten. Es umfasst Analytics, Android, Assistent, Augmented Reality, Flutter, G Suite, Suche, TensorFlow und Virtual Reality. Wählen Sie eine Option aus und erhalten Sie den Code und die Anweisungen, die Sie zum Erstellen kleiner Anwendungen benötigen.

09. Farbwerkzeug

Google Chrome-Tools

Wählen Sie eine Palette, eine beliebige Palette(Bildnachweis: Color Tool)

Farbwerkzeug ist ein einfaches Tool, mit dem Sie zusätzlich zur Überprüfung der Barrierefreiheit eine Palette erstellen, freigeben und anwenden können. Benutzer können eine vordefinierte Palette aus der Materialpalette auswählen. Wählen Sie einfach eine Farbe aus und wenden Sie sie dann auf das primäre Farbschema an. Wechseln Sie zur sekundären Option und wählen Sie sie erneut aus. Wählen Sie schließlich Textfarben für beide Schemata aus. Alternativ können Sie zu Benutzerdefiniert wechseln, um Ihre Farben auszuwählen. Wechseln Sie dann zu Eingabehilfen, um zu überprüfen, ob alles in Ordnung ist, bevor Sie schließlich die Palette exportieren.

10. Sprints entwerfen

Das Design Sprint Kit ist für diejenigen, die lernen, wie man an Design-Sprints teilnimmt oder diese durchführt. Es soll alle Wissensdatenbanken abdecken, vom Anfänger bis zum erfahrenen Sprint-Moderator. Erfahren Sie mehr über die Methodik oder springen Sie direkt in die Planungsphase, einschließlich des Schreibens von Briefs, des Sammelns von Daten und Recherchen sowie der Maßnahmen nach dem Sprint. Enthält auch eine Vielzahl von Ressourcen wie Tools, Vorlagen, Rezepte und die Option, Ihre eigene Methode einzureichen. Außerdem benötigen Sie wahrscheinlich einen Ort zum Speichern und Freigeben von Ressourcen Cloud-Speicher Wahl ist auf den Punkt.

11. People + AI Guidebook

Diese Anleitung ist die Arbeit der People + AI-Forschungsinitiative bei Google und möchte denjenigen helfen, die menschenzentrierte KI-Produkte entwickeln möchten. Der umfassende Leitfaden ist in sechs Kapitel unterteilt, die die Bedürfnisse der Benutzer, die Datenerfassung und -auswertung, mentale Modelle, Vertrauen, Feedback und ein ordnungsgemäßes Versagen abdecken. Jedes Kapitel wird von Übungen, Arbeitsblättern und den Tools und Ressourcen begleitet, die erforderlich sind, um dies zu erreichen.

Wie mache ich eine Ebene zu einem intelligenten Objekt in Photoshop?

12. Google Assistant

Google Chrome-Tools

Der Google-Assistent bietet zahlreiche Hilfestellungen(Bildnachweis: Chrome)

Dies ist das Entwicklerplattform von Google Assistant Hier finden Sie eine Anleitung zur Integration Ihrer Inhalte und Dienste in den Google-Assistenten. Es zeigt Ihnen, wie Sie Ihre mobile App erweitern, Inhalte für Search and Assistant auf vielfältige Weise präsentieren, Lichter, Kaffeemaschinen und andere Geräte im ganzen Haus steuern und Sprach- und visuelle Erlebnisse für intelligente Lautsprecher, Displays und Telefone erstellen können.

13. PageSpeed ​​Insights

PageSpeed ​​Insights analysiert Webinhalte und bietet dann Vorschläge, wie diese schneller geladen werden können. Fügen Sie einfach eine URL hinzu, klicken Sie auf die Schaltfläche Analysieren und warten Sie, bis die Magie einsetzt. Überprüfen Sie die Dokumente, um einen besseren Einblick in die Funktionsweise der PageSpeed-API und deren Verwendung zu erhalten.

14. AMP bei Google

AMPERE ist Googles Tool zum Erstellen schnell ladender mobiler Seiten, die (hoffentlich) an die Spitze der Suchrankings gelangen. Erfahren Sie, wie Sie schnelle Websites erstellen, AMP in Google-Produkte integrieren, den Google AMP-Cache verwenden, um AMP-Seiten schneller zu machen und AMP-Seiten mit anderen Google-Produkten zu monetarisieren.

15. Google DevTools

Google Chrome-Tools

Mit DevTools können Sie viel tun(Bildnachweis: Chrome)

Jeder Designer und Entwickler weiß (oder sollte zumindest wissen), dass Chrome über eine Reihe von Tools verfügt, die direkt in den Browser integriert sind. DevTools von Chrome sind ideal, um die Elemente einer Seite zu überprüfen, CSS zu überprüfen, Seiten im laufenden Betrieb zu bearbeiten und vieles mehr.

Die Registerkarte Elemente ist die Einführung in DevTools. Es zeigt den HTML-Code an, aus dem die ausgewählte Seite besteht. Erhalten Sie auf der ausgewählten Seite einen Einblick in die Eigenschaften der einzelnen Divs oder Tags und starten Sie die Live-Bearbeitung. Dies ist perfekt zum Experimentieren mit Designs. Überprüfen Sie das Layout - unabhängig davon, ob Sie Flexbox oder Grid verwenden - und sehen Sie sich verwandte Schriftarten mit Beispielen an und untersuchen Sie Animationen.

An anderer Stelle können Sie CSS anzeigen und ändern. Auf der Registerkarte Stile im Bedienfeld Elemente werden die CSS-Regeln aufgelistet, die auf das aktuell ausgewählte Element in der DOM-Struktur angewendet werden. Schalten Sie die Eigenschaften ein und aus (oder fügen Sie neue Werte hinzu), um mit Designs zu experimentieren. Dies ist das perfekte Tool, um sicherzustellen, dass alles wie erwartet funktioniert, bevor Änderungen am Live-Design vorgenommen werden.

Sie können auch JavaScript debuggen, die Geschwindigkeit der Website optimieren und die Netzwerkgeschwindigkeit überprüfen. Hier ist ein kurzer Tipp, mit dem Sie Ihren Workflow sofort beschleunigen können. Gehen Sie zur Registerkarte Quellen, klicken Sie auf Neues Snippet und fügen Sie häufig verwendeten Code hinzu. Benennen Sie das Code-Snippet und speichern Sie es. Bei Bedarf wiederholen. Jetzt können Sie dieses Code-Snippet greifen, anstatt es erneut zu schreiben.

Wie jeder gute Browser entwickelt sich Chrome ständig weiter und jede neue Version bringt neue Funktionen. Finden Sie heraus, was auf dem passiert Chrome-Statusplattform

16. Materialdesign

Google Chrome-Tools

Material ist ein wichtiges Teil des Design-Kits(Bildnachweis: Chrome)

Entwicklung kann als das bevorzugte Kind von Google angesehen werden, aber was auch immer Sie machen, erstellen oder bauen, es muss gut aussehen und dem Nutzer eine Erfahrung bieten, die ihn dazu bringt, es zu nutzen. Material ist eine neuere Erweiterung des Google-Stalls, aber ein Design-System, das sich zu einem wichtigen Teil des Design-Kits entwickelt hat.

Photoshop-Verknüpfung zum Erstellen einer neuen Ebene

Wie jedes gute Designsystem hat es seine eigenen Richtlinien, die Sie beachten müssen, bevor Sie sich mit den aufregenderen Dingen befassen. Verschaffen Sie sich einen Überblick über die Verwendung verschiedener Elemente, das Materialthema, die Implementierung eines Themas und Usability-Anleitungen einschließlich der Barrierefreiheit. An anderer Stelle gibt es einen Einblick in Material Foundation, der die wichtigsten Bereiche des Designs wie Layout, Navigation, Farbe, Typografie, Ton, Ikonografie, Bewegung und Interaktion umfasst. Jede Kategorie zeigt ihre Vor- und Nachteile und wo Sie Vorsicht walten lassen sollten. Um eine Vorstellung davon zu geben, was Sie erwartet, bietet die Kategorie Layout Abschnitte zum Verständnis von Layout, Pixeldichte und zur Arbeit mit einem reaktionsschnellen Layout, einschließlich Spalten, Rinnen und Rändern, Haltepunkten, UI-Bereichen und Abstandsmethoden, um nur einige zu nennen.

Jenseits des Entwurfsbereichs befindet sich Komponenten, die die physischen Bausteine ​​bereitstellen, die zum Erstellen eines Entwurfs erforderlich sind. Was ist hier enthalten? Schaltflächen, Banner, Karten, Dialoge, Teiler, Listen, Menüs, Fortschrittsanzeigen, Schieberegler, Snackbars (dies sind kurze Meldungen zu App-Prozessen am unteren Bildschirmrand), Registerkarten, Textfelder und QuickInfos. Zweifellos eine umfassende Sammlung von Komponenten.

Und Entwickler wurden nicht vergessen, mit Details und Tutorials zum Erstellen für verschiedene Plattformen - Android, iOS, Web und Flutter. Und schließlich gibt es eine Seite, die einer Vielzahl von Ressourcen gewidmet ist, um das von Ihnen gewählte Design zu verwirklichen.

Dieser Artikel erschien ursprünglich im Netzmagazin. Ausgabe 326 kaufen .

Weiterlesen: