7 unverzichtbare Chrome-Erweiterungen für Webdesigner

7 unverzichtbare Chrome-Erweiterungen für Webdesigner

Welche Software müssen Sie als Webdesigner unbedingt auf Ihrem Computer haben? Die Chancen stehen gut, dass es Photoshop und Illustrator ist. Und obwohl dies die wesentlichen Elemente Ihres Design-Workflows sind, gibt es kleinere Tools, von denen Sie wahrscheinlich nicht wissen, dass Sie sie benötigen.





Das Beste daran ist, dass Sie sie nicht einmal herunterladen müssen – installieren Sie einfach diese Chrome-Erweiterungen und schon können Sie loslegen. Von der Identifizierung von Schriftarten auf Seiten bis hin zum Messen von Abständen zwischen Webelementen – diese Chrome-Erweiterungen für das Webdesign werden Ihnen das Leben erleichtern.





1. Dropbox für Gmail

Dropbox begann als File-Hosting-Dienst, stellte aber bald fest, dass seine Hauptzielgruppe Designer sind, die den Dienst nutzen, um ihre Arbeit mit Kollegen zu teilen. Da Designdateien für E-Mail-Anhänge oft zu groß sind, ist es einfacher, einen Dropbox-Link an die Datei zu senden.





Dropbox für Gmail macht den Vorgang noch bequemer. Wenn Sie über eine Dropbox-Schaltfläche am unteren Rand des neuen E-Mail-Fensters auf Ihre Datei verlinken, erhält der Empfänger einen Vorgeschmack auf das, was Sie senden. Links zu Bilddateien laden die Bilder direkt in die E-Mail hoch und Links zu anderen Dateitypen erzeugen eine praktische Vorschau.

Installieren: Dropbox für Gmail



2. FontFace Ninja

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

FontFace Ninja ist eine Chrome-Erweiterung, die Ihnen dabei hilft. Ähnlich wie die Tools, die Schriftarten aus Bildern finden es hilft Ihnen, die Schriftarten zu identifizieren, die Sie online sehen. Der einzige Unterschied besteht darin, dass FontFace Ninja die im CSS der Seite codierten Schriftarten liest, wie die Schriftart von Überschriften und Fließtext.





Wenn Sie FontFace Ninja starten, zeigt es Ihnen die Informationen über die Schriftart an, an die Sie es richten - und nicht nur die Schriftart, sondern auch das Gewicht, die Größe, die Höhe, die Breite und die Farbe. Um diese Schriftart mit einem Lesezeichen zu versehen, benötigen Sie ein Konto beim Schwesterdienst. FontFace Dojo .

Installieren: FontFace Ninja





3. ColorPick Pipette

Egal, wie gut Sie ein Auge für Farbe haben, es ist schwierig, einen bestimmten Farbton, den Sie online gesehen haben, nachzubilden, es sei denn, Sie kennen seine RGB- oder HTML-Werte. Glücklicherweise müssen Sie nicht raten, ob Sie eine ColorPick Pipette haben.

Mögen die besten Farbauswahl-Apps für Mac , ColorPick Pipette zeigt Ihnen die Werte für jede Farbe, 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 Sie auf einer Webseite sehen (sogar den Anzeigen). Sobald Sie eine Farbe erfasst haben, werden die HTML-, RGB- und HSL-Werte dafür angezeigt.

Installieren: ColorPick Pipette

4. Abmessungen

Diese Open-Source-Erweiterung ist ein Fundstück für Webdesigner, insbesondere wenn Sie einmalige Auftritte für kleine Unternehmen durchführen. Wenn ein Kunde Ihnen eine Website ohne vorherige Dateien oder Dokumentation übergibt und Sie bittet, „eine Seite wie diese, aber mit anderen Texten und Bildern“ zu gestalten, ist es mühsam, das Layout herauszufinden.

So ändern Sie das Verzeichnis in cmd Windows 10

Mit Dimensionen können Sie ganz einfach die Höhe und Breite jedes Elements 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: Maße

5. Visueller Inspektor

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

In dem Prüfen Registerkarte können Sie jedes Element auf der Seite auswählen, um vollständige Informationen darüber zu erhalten, von den Abmessungen bis zum Dateinamen. Die Farben und Typografie Unterregisterkarten lassen Sie die Farbpalette und alle Schriftarten auf einen Blick sehen, während Vermögenswerte sammelt alle Bilder auf der Seite an einem Ort.

Die Zusammenarbeiten Auf der Registerkarte können Sie Feedback geben und mit Ihrem Team diskutieren. Sie können ganz einfach einen Kommentar hinterlassen, indem Sie auf ein beliebiges Element auf der Seite klicken.

minecraft wie man zum überleben wechselt

Wie die meisten fortschrittlichen Tools hat Visual Inspector einen Preis: Sie müssen ab 9 USD/Benutzer/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: Visueller Inspektor

6. Einfache Bildschirmaufnahme

Eine Bildschirmaufnahmeerweiterung mag überflüssig erscheinen, da das Erstellen eines Screenshots auf dem Mac ein Kinderspiel ist und Erfassen Ihres Bildschirms unter Windows ist nur etwas umständlicher. Aber Easy Screen Capture hat einige Verkaufsargumente.

Am wichtigsten ist, dass Sie die gesamte Webseite erfassen können, nicht nur den Bereich, den Sie auf Ihrem Bildschirm sehen. Das ist unbezahlbar, wenn Sie mehrere Probleme auf einer langen Seite melden müssen und alle drei bis vier Screenshots benötigen würden.

Ein weiterer netter Trick besteht darin, den Screenshot in die Zwischenablage zu kopieren und direkt in einen Chat oder eine E-Mail einzufügen, anstatt nutzlose Bilddateien auf Ihrem Computer zu horten.

Installieren: Einfache Bildschirmaufnahme

7. Eisig 2

Schließlich gibt es eine entscheidende Aufgabe, die Sie jeden Morgen erledigen müssen: Schlafreste abschütteln und in den Groove kommen. Muzli 2 von InVision dient als Ihre Morgenzeitung mit kuratierten Artikeln zu Kunst, Design, UX und Technologie.

Muzli ersetzt Ihren standardmäßigen Chrome-Tab und ermöglicht es Ihnen, das, was Sie dort sehen, anzupassen. Je nach Ihren Interessen wählt Muzli Feeds für Sie aus, mit Websites von Dribble und Behance bis hin zu 99designs und Creative Bloq. Viele Inspirationen zum Durchblättern, während Sie Ihren ersten Kaffee schlürfen!

Wem ein kompletter Browser-Tab voller Design-Inhalte zu intensiv ist, für den gibt es bei Muzli auch eine Lite-Version. Dadurch wird Ihr Standard-Tab nicht überschrieben und Sie können jederzeit auf den Feed zugreifen, indem Sie einfach auf das Erweiterungssymbol klicken.

Installieren: Eisig 2

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

Die Chrome-Erweiterungen auf dieser Liste sind Ihrer Design-Software nicht gewachsen, aber sie decken alle kleinen Dinge ab, die man als Designer mit sich bringt – sei es Typografie-Intelligenz oder die Zusammenarbeit mit deinen Kollegen.

Sobald Sie feststellen, dass der Chrome Web Store voller Tools ist, kann es schwierig sein, neue hinzuzufügen. Also lerne So verwalten Sie Ihre Chrome-Erweiterungen bevor sie außer Kontrolle geraten.

Teilen Teilen Tweet Email Lohnt sich ein Upgrade auf Windows 11?

Windows wurde neu gestaltet. Aber reicht das aus, um Sie davon zu überzeugen, von Windows 10 auf Windows 11 umzusteigen?

Weiter lesen
Verwandte Themen
  • Internet
  • Kreativ
  • Google Chrome
  • Web-Design
  • Browsererweiterungen
Über den Autor Alice Kotlyarenko(28 veröffentlichte Artikel)

Alice ist eine Technologieautorin mit einem Faible für Apple-Technologie. Sie schreibt seit einiger Zeit über Mac und iPhone und ist fasziniert von der Art und Weise, wie Technologie Kreativität, Kultur und Reisen neu gestaltet.

Mehr von Alice Kotlyarenko

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren