10 Google Chrome-Erweiterungen für Designer

Wenn Sie ein Webdesigner sind, der dem Standarddesignprozess folgt, umfassen Ihre Aufgaben Dinge wie:

• Forschen
• Wireframing
• Auswahl eines Farbschemas
• Auswahl der richtigen Schriftart
• Testen mehrerer Varianten
• Zusammenarbeit mit Kunden und Teamkollegen

Und noch mehr…

Wussten Sie, dass Sie all dies und mehr direkt in Ihrem Browser tun können? Ja, wenn Sie ein Google Chrome-Profi sind, können Sie all diese Aufgaben über die Chrome-Erweiterungen erledigen. Die meisten von ihnen mit nur ein paar Klicks.

Sparen Sie also eine Menge Zeit und probieren Sie diese 10 Google Chrome-Erweiterungen für Designer aus.

1. Responsive Webdesign-Tester

Posten Sie Googles mobilfreundliches Update, Reaktionsfähigkeit ist das Schlagwort! Hier ist also eine Erweiterung, mit der Sie Ihre Website auf allen gängigen Android- und Apple-Mobilgeräten testen können.

Es funktioniert auch offline, daher ist es eine großartige Option, selbst wenn Sie lokal an Ihrem Design arbeiten. Es hat Voreinstellungen für alle gängigen Geräte, aber Sie können auch Ihre benutzerdefinierten Abmessungen hinzufügen.

Sobald Sie ein Gerät für die Vorschau ausgewählt haben, öffnet sich die aktuelle Registerkarte in einem Popup-Fenster, das zeigt, wie Ihre Seite auf diesem Gerät aussehen würde.

2. Geben Sie Wonder ein

Schriftarten bestimmen wirklich die Stimmung einer Website, aber es ist eine ziemliche Aufgabe, die richtige auszuwählen. Sie kennen die Übung – zu Ihrem Code zurückkehren, Änderungen vornehmen und eine Vorschau anzeigen. Und das alles immer wieder.

Aber hier kommt diese praktische Schrifterweiterung ins Spiel. Mit TypeWonder können Sie die Schriftart jeder Website in Ihrem Browser ändern.

Besuchen Sie einfach Ihre Website und klicken Sie auf das Symbol der Erweiterung. Sie erhalten mehrere Schriftartoptionen. Wenn Sie auf eine beliebige klicken, wird fast sofort eine Vorschau Ihrer Website in dieser Schriftart erstellt. Wenn Sie mit der Vorschau zufrieden sind, können Sie den entsprechenden Code abrufen, um ihn Ihrer Website und ihrer CSS-Datei hinzuzufügen.

3. Registerkarte Packager

Recherchieren ist eine große Sache. Und wenn Sie ein Designer sind, der das Recherchieren ernst nimmt, kann ich mit Sicherheit sagen, dass Sie zu jedem Zeitpunkt mindestens sieben bis zehn Tabs geöffnet haben.

Was wäre, wenn Sie die Meinung Ihres befreundeten Designers oder Teamkollegen zu den Websites einholen müssten, auf die Sie sich beziehen? Sie werden alle Seiten in einem Ordner mit einem Lesezeichen versehen, alles exportieren und dann den Satz zum Versenden auswählen, natürlich nachdem Sie Ihr E-Mail-Programm geöffnet haben. Ganz schön viel Arbeit!

Zum Glück müssen Sie nicht so hart arbeiten. Mit Tab Packager können Sie alle geöffneten Registerkarten verpacken. Und dann können Sie mit nur einem Klick den Link des Pakets versenden. Sie können per E-Mail, Twitter und vielen weiteren Diensten teilen.

4. TrackDuck

Effektive Kommunikation steht hinter jedem erfolgreichen Projekt. Aber es kann anstrengend werden, mit E-Mails hin und her zu gehen, um kleine Optimierungen auszuarbeiten oder große Änderungen vorzunehmen.

Das mag jetzt etwas übertrieben klingen, aber TrackDuck ist wie ein Mini-Asana, exklusiv für Designer.

TrackDuck ist ein visuelles Kollaborationstool, mit dem Sie Websites als Projekte hinzufügen können. Sobald Sie ein Projekt hinzugefügt haben, können Sie Ihre Teamkollegen dazu einladen. Immer wenn Sie einen Kommentar zu diesem Projekt (oder dieser Website – was Sie tun können, indem Sie einfach auf das Symbol der Erweiterung klicken) hinterlassen, wird eine Aufgabe zu dem Kommentar generiert. Sie können diese Aufgabe Ihren Teamkollegen zuweisen, Anhänge und Screenshots hinzufügen und sie mit vielen Tools für die Zusammenarbeit wie Trello und Basecamp integrieren.

5. ColorZilla

Sie wissen nie, wann Sie eine schöne Farbe sehen werden, die die Palette Ihres nächsten Webprojekts inspirieren wird.

Also, wie erfasst man Farben im Web?

Nun, hier ist ColorZilla – es ist mit Sicherheit das Lieblings-Chrome-Goodie jedes Designers. Die grundlegendste und beliebteste Funktion ist das Abrufen des Codes für eine beliebige Farbe auf einer Webseite.

Eine weitere Funktion ist, dass Sie das Farbschema jeder Website erhalten können. Sie müssen auf die Option Webpage Color Analyzer klicken , und eine Palette mit allen Farben auf dieser Webseite wird angezeigt.

6. WhatFont

Es kommt so oft vor, dass Sie auf eine Website stoßen, die die perfekte Schriftart, Farbe und Größe verwendet. Tatsächlich könnte es so gut sein, dass Sie die genaue Kombination auf Ihrer Website verwenden möchten.

Aber Sie müssen nicht mehr den Weg des Inspect Elements gehen – WhatFont analysiert jede Schriftart auf einer Webseite mit einem einzigen Klick.

Klicken Sie einfach auf das Symbol der Erweiterung und bewegen Sie den Mauszeiger über den Textabschnitt, an dem Sie interessiert sind. WhatFont erzeugt Schriftart, -größe, -höhe, -farbe und -familie.

7. Sofortiges Wireframe

Wenn Sie die Informationshierarchie Ihrer Website definieren, bevor Sie sie entwerfen, erstellen Sie eine benutzerfreundliche Website. Und Wireframing ist der beste Weg, dies zu tun.

Mit der Instant Wireframe-Erweiterung können Sie ein einigermaßen gutes Drahtmodell jeder Webseite anzeigen. Es ist noch in der Beta-Phase, leistet aber gute Arbeit.

Wenn Sie auf eine Website stoßen, von der Sie das Wireframe anzeigen möchten, klicken Sie einfach auf das Symbol der Erweiterung in der Adressleiste. Einen Versuch wert!

8. Seitenlineal

Es gibt verschiedene Möglichkeiten, die Abmessungen der Elemente einer Webseite zu messen. Aber die meisten von ihnen beinhalten mehrere Schritte und brauchen Zeit.

Das Seitenlineal ist die praktischste Methode, dies zu tun. Mit dem Seitenlineal können Sie die Höhe, Breite und relative Position eines Elements anzeigen. Sie können die Elemente auch div-weise analysieren.

Und es eignet sich hervorragend zum Erstellen von pixelgenauen Bannern, vorgestellten Bildern und anderen Marketingmaterialien.

9. Palette für Chrom

Websites sind voller Bilder, und Sie können nicht sagen, wann Sie ein Bild sehen, das gut genug ist, um eine Farbpalette zu inspirieren.

Aber Sie müssen sich keine Sorgen machen, da Palette for Chrome Sie immer abdeckt. Klicken Sie einfach mit der rechten Maustaste auf das Bild, das Sie interessant finden, und wählen Sie die Option dieser Erweiterung. Es wird sofort eine Farbpalette erstellt, die vom ausgewählten Bild inspiriert ist. Sie können die Anzahl der Farben angeben, die Sie für das Farbschema generieren möchten.

Ich hätte es mehr gemocht, wenn es eine Möglichkeit gäbe, das Farbschema zu exportieren. Aber die Erweiterung ist immer noch ein Muss.

10. ExtensionMuzli – Design-Frühstück

Weißt du, wenn du gerade erst anfängst, abonnierst du alle Top-Blogs in deiner Nische. Ihre RSS-Feeds sind alle hochgefahren. Aber wenn sich Ihre Arbeit häuft, werden Sie etwas getrennt. Und es ist nicht so, dass Sie keine Inspiration brauchen, es wird nur schwierig, aufzuholen.

ExtensionMuzli wurde entwickelt, um dies auszugleichen. Es kuratiert Geschichten aus etwa 12-15 der besten Designressourcen. Es gibt auch einen Bereich für Webdesign-Jobs, wenn Sie wechseln möchten.

Sobald Sie diese Erweiterung installiert haben, enthält Ihr neuer Tab einige der neuesten inspirierenden oder lehrreichen Designgeschichten aus dem gesamten Internet. Es bietet eine nette Möglichkeit, das Neueste in Ihrer Nische im Auge zu behalten.

Hier bitteschön. Verbessern Sie Ihren Chrome mit diesen erstaunlichen Webdesigner-Erweiterungen und beobachten Sie, wie Ihre Produktivität in die Höhe schnellt. Wie unterteilen Sie Ihren Designprozess und welche Erweiterungen verwenden Sie für welche Aufgaben? Ich würde gerne mehr erfahren.