7 Must-Have Chrome-Erweiterungen für Webdesigner

• Kreativ

Werbung

Welche Software müssen Sie als Webdesigner unbedingt auf Ihrem Computer haben? Die Chancen stehen gut, dass es sich um Photoshop und Illustrator handelt. Und obwohl dies die Grundvoraussetzungen für Ihren Design-Workflow sind, gibt es kleinere Tools, von denen Sie wahrscheinlich nicht wissen, dass Sie sie benötigen.

Schalte jetzt den Spickzettel "Google Chrome Tastaturkürzel" frei!

Hiermit melden Sie sich für unseren Newsletter an

Das Beste ist, Sie müssen sie nicht einmal herunterladen - installieren Sie einfach diese Chrome-Erweiterungen und schon kann es losgehen. Von der Identifizierung von Schriftarten auf Seiten bis zur Messung der Abstände zwischen Webelementen - diese Chrome-Erweiterungen für das Webdesign erleichtern Ihnen das Leben.

1. Dropbox für Google Mail

Dropbox war ursprünglich ein Datei-Hosting-Dienst, doch bald stellte sich heraus, dass das Publikum hauptsächlich aus Designern besteht, die den Dienst nutzen, um ihre Arbeit mit Kollegen zu teilen. Da Designdateien für E-Mail-Anhänge häufig zu groß sind, ist es einfacher, einen Dropbox-Link an die Datei zu senden.

Dropbox for Gmail macht den Vorgang noch komfortabler. Wenn Sie mit einer Dropbox-Schaltfläche am unteren Rand des neuen E-Mail-Fensters eine Verknüpfung zu Ihrer Datei herstellen, erhält der Empfänger einen kurzen Einblick in das, was Sie senden. Durch Links zu Bilddateien werden die Bilder direkt in die E-Mail hochgeladen, und durch Links zu anderen Dateitypen wird eine praktische Vorschau erstellt.

Installieren: Dropbox für Google Mail

2. FontFace Ninja

Mit Tausenden von verfügbaren Schriftarten sind Ihre Typografiemöglichkeiten endlos. Vor allem, wenn Sie eine schöne Schriftart identifizieren können, die Sie irgendwo sehen, und diese für Ihr eigenes Projekt ausleihen können.

FontFace Ninja ist eine Chrome-Erweiterung, mit der Sie genau das tun können. Ähnlich wie bei den Tools, mit denen Schriftarten aus Bildern gesucht werden WhatTheFont und 4 Alternativen zum Suchen von Schriftarten aus Bildern WhatTheFont und 4 Alternativen zum Suchen von Schriftarten aus Bildern Möchten Sie Schriftarten aus Bildern suchen? Es gibt Online-Tools, die dies für Sie tun können, darunter WhatTheFont und verschiedene Alternativen. Lesen Sie mehr. Es hilft Ihnen, die online angezeigten Schriftarten zu identifizieren. Der einzige Unterschied besteht darin, dass FontFace Ninja die im CSS der Seite codierten Schriftarten wie die Schriftart von Überschriften und Text liest.

Wenn Sie FontFace Ninja starten, werden die Informationen zu der Schriftart angezeigt, zu der Sie es weiterleiten - und nicht nur die Schriftart, sondern auch das Gewicht, die Größe, die Höhe, die Breite und die Farbe. Um diese Schriftart als Lesezeichen zu speichern, benötigen Sie ein Konto beim Schwesterdienst FontFace Dojo.

Installieren Sie: FontFace Ninja

3. ColorPick Pipette

Unabhängig davon, wie gut Sie ein Auge für Farbe haben, ist es schwierig, einen bestimmten Farbton, den Sie online gesehen haben, wiederherzustellen, es sei denn, Sie kennen die RGB- oder HTML-Werte. Zum Glück müssen Sie nicht raten, ob Sie ColorPick Eyedropper haben.

Wie die besten Farbwähler-Apps für Mac Die 5 besten Farbwähler-Apps für Mac Die 5 besten Farbwähler-Apps für Mac Möchten Sie die perfekte Farbe für Ihren Mac finden? Probieren Sie diese Farbwähler-Apps von macOS aus, um Farben einfach zu identifizieren, zu speichern, zu formatieren und zu kopieren. Lesen Sie weiter, ColorPick Eyedropper zeigt Ihnen die Werte für jede Farbe an, auf die Sie zeigen. Der Unterschied besteht darin, dass es immer in Ihrem Browser vorhanden ist und Sie nichts hochladen müssen - klicken Sie einfach auf das Symbol und verschieben Sie das Ziel an die richtige Stelle.

Die Erweiterung liest Farben aus Text, Bildern und so ziemlich allem, was auf einer Webseite zu sehen ist (sogar aus den Anzeigen). Sobald Sie eine Farbe erfasst haben, werden die entsprechenden HTML-, RGB- und HSL-Werte angezeigt.

Installieren Sie: ColorPick Eyedropper

4. Abmessungen

Diese Open-Source-Erweiterung ist eine Entdeckung für Webdesigner, insbesondere wenn Sie einmalige Auftritte für kleine Unternehmen durchführen. Wenn ein Kunde eine Website ohne vorherige Dateien oder Dokumentation weitergibt und Sie auffordert, „eine Seite wie diese, aber mit unterschiedlichen Texten und Bildern“ zu entwerfen, ist es ein Problem, das Layout herauszufinden.

Mit Bemaßungen können Sie auf einfache Weise die Höhe und Breite aller Elemente auf der Seite sowie die Ränder zwischen ihnen messen. Das macht es einfach, vorhandene Seiten neu zu erstellen und Ihre eigenen Designs zu überprüfen, nachdem sie in Produktion gegangen sind.

Installieren: Abmessungen

5. Visueller Inspektor

Visual Inspector ist ein leistungsstarkes Tool für Feedback und Zusammenarbeit für Designteams, das die Funktionen der vorherigen drei Erweiterungen kombiniert und noch mehr hinzufügt.

Auf der Registerkarte Prüfen können Sie ein beliebiges Element auf der Seite auswählen, um vollständige Informationen zu erhalten, von den Abmessungen bis zum Dateinamen. Auf den Unterregistern Farben und Typografie sehen Sie die Farbpalette und alle Schriftarten auf einen Blick, während Assets alle Bilder auf der Seite an einem Ort sammelt.

Auf der Registerkarte " Zusammenarbeiten" können Sie Feedback geben und Diskussionen mit Ihrem Team führen. Sie können auch einfach einen Kommentar hinterlassen, indem Sie auf ein Element auf der Seite klicken.

Wie die meisten fortschrittlichen Tools ist auch Visual Inspector mit einem Preisschild ausgestattet: Sie müssen 9 US-Dollar pro Benutzer und Monat bezahlen, um Kommentare hinzuzufügen und Änderungen zu synchronisieren. Die grundlegenden Funktionen wie das Überprüfen von Farben, Schriftarten und Bildern können jedoch kostenlos verwendet werden.

Installieren Sie: Visual Inspector

6. Einfache Bildschirmaufnahme

Eine Screenshot-Erweiterung erscheint möglicherweise überflüssig, da ein Screenshot auf einem Mac erstellt werden muss. So erstellen Sie Screenshots auf einem Mac: Tipps, Tools und Tricks zum Erstellen von Screenshots auf einem Mac: Tipps, Tools und Tricks zum Erstellen eines Screenshots dein Mac? Hier finden Sie die besten Verknüpfungen, Tipps und Apps für MacOS-Screenshots. Lesen Sie mehr ist ein Kinderspiel und erfassen Sie Ihren Bildschirm unter Windows. So erstellen Sie den perfekten Screenshot unter Windows: So erstellen Sie den perfekten Screenshot unter Windows: Der beste Weg, einen Screenshot zu erstellen, hängt von der Windows-Version ab, auf der Sie sich befinden. Wir zeigen Ihnen die subtilen Unterschiede, geben Tipps zur Fehlerbehebung und zeigen die besten Tastenkombinationen und Tools auf. Lesen Sie mehr ist nur ein bisschen mehr Aufwand. Easy Screen Capture hat jedoch einige Verkaufsargumente.

Am wichtigsten ist, dass Sie damit die gesamte Webseite erfassen können, nicht nur den Bereich, den Sie auf Ihrem Bildschirm sehen. Dies ist von unschätzbarem Wert, wenn Sie mehrere Probleme auf einer langen Seite melden müssen. Für die Erfassung aller Probleme sind drei bis vier Screenshots erforderlich.

Ein weiterer Trick ist, den Screenshot in die Zwischenablage zu kopieren und ihn direkt in einen Chat oder eine E-Mail einzufügen, anstatt unnötige Bilddateien auf Ihrem Computer zu horten.

Installieren Sie: Easy Screen Capture

7. Muzli 2

Schließlich gibt es eine entscheidende Aufgabe, die Sie jeden Morgen erledigen müssen: die Reste des Schlafes abzuschütteln und in den Groove zu gelangen. Muzli 2 von InVision ist Ihre Morgenzeitung mit kuratierten Artikeln zu Kunst, Design, UX und Technologie.

Muzli ersetzt Ihre Standard-Chrome-Registerkarte und ermöglicht es Ihnen, das, was Sie dort sehen, anzupassen. Abhängig von Ihren Interessen wählt Muzli Feeds für Sie aus, mit Websites von Dribble und Behance bis zu 99designs und Creative Bloq. Viel Inspiration zum Blättern, während Sie Ihren ersten Kaffee trinken!

Wenn Sie der Meinung sind, dass ein ganzer Browser-Tab voller Design-Inhalte zu umfangreich ist, bietet Muzli auch eine Lite-Version an. Die Standardregisterkarte wird nicht überschrieben, und Sie können jederzeit auf den Feed zugreifen, indem Sie auf das Erweiterungssymbol klicken.

Installieren Sie: Muzli 2

Holen Sie sich Chrome-Erweiterungen für alle Ihre Designaufgaben

Die Chrome-Erweiterungen in dieser Liste passen nicht zu Ihrer Design-Software, decken jedoch all die kleinen Dinge ab, die Designer mit sich bringen - sei es typografische Informationen oder die Zusammenarbeit mit Ihren Kollegen.

Sobald Sie feststellen, dass der Chrome Web Store überfüllt ist mit Tools, kann es schwierig sein, das Hinzufügen neuer Tools zu beenden. Erfahren Sie also, wie Sie Ihre Chrome-Erweiterungen verwalten können. So verwalten Sie Ihre Chrome-Erweiterungen mühelos. So verwalten Sie Ihre Chrome-Erweiterungen mühelos. Durch die ordnungsgemäße Verwaltung von Chrome-Erweiterungen kann Ihr Browser noch leistungsfähiger werden. Hier sind einige wichtige Tipps und Tricks, die Sie kennen sollten. Lesen Sie mehr, bevor sie außer Kontrolle geraten.

Erfahren Sie mehr über: Browsererweiterungen, Google Chrome, Webdesign.