16 großartige Chrome-Extensions für Designer und Kreative

Chrome hat einen Marktanteil von 63,69 % und die meisten Designer bevorzugen den von Google betriebenen Browser wegen seiner Geschwindigkeit, Benutzeroberfläche und der Möglichkeit, nützliche Erweiterungen hinzuzufügen.

Wir haben eine praktische Liste von Chrome-Erweiterungen zusammengestellt, die Ihnen helfen können, Design-Inspirationen zu finden, Schriften und Farben von Webseiten zu identifizieren, CSS anzuzeigen, Screenshots von ganzen Seiten zu machen, Paletten zu generieren und vieles mehr.

Diese Erweiterungen werden die beste Hilfe für die Designer für die Erstellung von leistungsfähigen Designs und auch, um die Produktivität zu erhöhen. Ein gutes digitales Branding ist für das Wachstum eines Unternehmens verantwortlich. Daher sollte die Erstellung von erstaunlichen Designs nie aufhören.

Hier sind die 16 Must-Have-Chrome-Extensions für Designer, die sich von anderen Designs inspirieren lassen möchten.

1. Google Font Previewer

Das Beste an diesem Plugin ist, dass Sie Ihre Lieblingsschrift markieren können, die Sie regelmäßig verwenden.

Schriftarten sind beim Entwerfen von Webseiten oder Vorlagen sehr wichtig. Die Auswahl der richtigen Schriftart ist notwendig und es kann schwierig sein, die Schriftart anhand des Namens zu finden. Google Font Previewer kann diese Aufgabe mit einer Vorschau der Schriftart über der Seite erleichtern.

2. WhatFont

Der einfachste Weg, um Schriften auf Webseiten zu identifizieren. Sie können die Schriftart mit einem einzigen Mausverweis identifizieren. Es erkennt auch die Dienste, die für die Bereitstellung der Web-Schriften verwendet werden. Es ist einfach und elegant.

Was ist der einfachste Weg, um die in einer Webseite verwendeten Schriftarten herauszufinden? Firebug und Webkit Inspector sind für Entwickler sehr einfach zu bedienen. Mit dieser Erweiterung können Sie Webfonts inspizieren, indem Sie einfach mit dem Mauszeiger darauf fahren.

WhatFont ermöglicht es dem Benutzer, die Schriftartinformationen eines beliebigen Elements auf einer Seite zu analysieren. Das Plugin ist einfach zu bedienen, da Sie nur die Maus über das Element halten müssen und das Ergebnis wird angezeigt.

Es handelt sich um ein einfaches, benutzerfreundliches und schnell reagierendes Plugin, das für Millionen von Designern auf der ganzen Welt eines der besten ist.

3. CSSViewer

Ein einfacher CSS-Eigenschaftsbetrachter.

CSSViewer ist ein einfacher CSS-Eigenschaftsbetrachter, der ursprünglich von Nicolas Huon als FireFox-Add-on entwickelt wurde.

Wie man ihn benutzt: Um CSSViewer zu aktivieren, klicken Sie einfach auf das Symbol in der Symbolleiste und bewegen Sie dann den Mauszeiger über ein beliebiges Element auf der aktuellen Seite, das Sie untersuchen möchten.

Tipps: Um ordnungsgemäß zu funktionieren, benötigt CSSViewer die Erlaubnis, auf Ihren Verlauf und Ihre Website-Daten zuzugreifen. CSSViewer sammelt jedoch keine Ihrer privaten Daten und wird diese auch niemals weitergeben.

Open Source im Inneren:

https://github.com/miled/cssviewer

4. GoFullPage

Full Page Screen Capture

Die fortschrittliche Screen-Capture-Technologie behandelt komplexe Seiten - einschließlich innerer scrollbarer Elemente sowie eingebetteter Iframes - wie keine andere Erweiterung.

Um einen Screenshot der gesamten Seite zu erstellen, muss sie zu jedem sichtbaren Teil scrollen, also haben Sie bitte etwas Geduld, während sie alle Teile schnell zusammensetzt. Für das seltene Szenario, dass Ihre Seite zu groß für Chrome ist, um sie in einem Bild zu speichern, wird er Sie darauf hinweisen und sie in Bilder in separaten Tabs aufteilen.

Exportieren Sie Ihr Ergebnis als PNG, JPEG oder in verschiedenen PDF-Papiergrößen - alles konfigurierbar in den Optionen der Erweiterung.

5. Eye Dropper

Eye Dropper ist eine Open-Source-Erweiterung, die es Ihnen ermöglicht, Farben aus Webseiten, dem Color Picker und Ihrem persönlichen Farbverlauf auszuwählen.

Eye Dropper ist eine Erweiterung für Google Chrome. Sie ermöglicht es Ihnen, Farben von jeder Webseite oder aus dem erweiterten Farbwähler auszuwählen. Es ist ein großartiges Werkzeug für Webentwickler und Designer.

6. Spectrum

Diese Erweiterung hilft Ihnen, Webseiten für Menschen mit verschiedenen Arten von CVD zu testen.

Farbsehschwäche (Color Vision Deficiency, CVD) betrifft die Fähigkeit von Menschen, bestimmte Farben zu unterscheiden. Schätzungen gehen davon aus, dass weltweit etwa 200 Millionen Menschen von einer Art von CVD betroffen sind. Bei Menschen nordeuropäischer Abstammung leiden bis zu 8 Prozent der Männer und 0,5 Prozent der Frauen an der häufigen Form der Rot-Grün-Farbenblindheit.

Sie ist besonders nützlich für Webseiten mit Datenvisualisierungen, da einige Farben in den Diagrammen möglicherweise nicht von anderen Farben unterschieden werden können.

Testen Sie Ihre Webseite sofort mit verschiedenen Arten der Farbsehschwäche.

7. Site Palette

Extrahieren Sie Farben aus jeder Website. Eine Browser-Erweiterung zum Erzeugen umfangreicher Paletten. Ein Must-Have-Tool für Designer und Frontend-Entwickler. Kostenlose Farbschema-Extraktion.

- Kostenlose Site Palette API verfügbar

- Mehrere Paletten-Generatoren werden unterstützt

- Automatisch generierte Sketch-Vorlage herunterladen

- Adobe Swatch-Unterstützung hinzugefügt

Kostenlose Browser-Erweiterung, die Farbpaletten generiert. Ein unentbehrliches Werkzeug für Designer und Frontend-Entwickler. Holen Sie sich Farben für jede Website.

8. Web Paint

Zeichnen Sie Formen, Linien und fügen Sie Text zu Live-Webseiten hinzu und machen Sie einen Screenshot.

Web Paint bietet die folgenden einfach zu bedienenden Zeichenwerkzeuge, mit denen Sie Formen und Linien zeichnen und Text zu Live-Webseiten hinzufügen sowie Screenshots erstellen können:

Bleistift-Werkzeug - zeichnen Sie eine benutzerdefinierte Linie mit der ausgewählten Linienbreite und Farbe.

Pipetten-Werkzeug - wählen Sie eine Farbe aus der Webseite oder Ihren Zeichnungen aus und verwenden Sie diese zum Zeichnen.

Textwerkzeug - fügt Text in die Webseite mit der gewählten Farbe und Transparenz ein.

Linien-Werkzeug, Quadratische Kurve, Bezier-Kurve, Polygon zu, Ellipsen-Werkzeug, Farbeimer-Werkzeug, Rechteck-Werkzeug, Cursor-Werkzeug, Radiergummi-Werkzeug, Screenshot-Werkzeug...

9. Muzli

Alle Design-Inspirationen, die Sie brauchen.

Designers' Secret Source - Die beste Design-Inspiration

Muzli bringt Ihnen die frischesten Design, UI, UX und interaktiven Nachrichten und Bilder aus dem ganzen Web.

Muzli ist ein Browser-Plugin, das Ihnen sofort relevante Design-Stories und Inspirationen liefert. Muzli ersetzt Ihren Standard-Tab, es wird zu Ihrer Startseite, so dass Sie nichts verpassen.

Die frischesten Links über Design und Interaktivität aus dem ganzen Web. Muzli bringt Ihnen die frischesten Design, UI, UX und interaktiven Nachrichten und Bilder aus dem gesamten Web.

10. ColorZilla

ColorZilla ist die beliebte Chrome-Erweiterung zum Lesen und Verwalten von Farben. Erweiterte Pipette, Color Picker, Farbverlaufsgenerator und andere bunte Goodies.

ColorZilla, eine der beliebtesten Erweiterungen für Firefox-Entwickler mit über 5 Millionen Downloads! Mit ColorZilla können Sie eine Farbmessung von einem beliebigen Punkt in Ihrem Browser erhalten, diese Farbe schnell anpassen und in ein anderes Programm einfügen. Genaue Farbabtastung und -identifikation sind entscheidend für die Konsistenz eines Designprojekts.

Mit seiner einfachen Bedienung und Leichtigkeit ist es die meistgewählte Erweiterung für Farbpaletten und CSS-Design-Generator. Das Plugin ist sehr schnell und einfach mit nur einem Hover zu bedienen.

11. Page Ruler Redux

Ein Lineal für Webentwickler und Designer, um perfekte Pixelmaße und Positionierungen zu erhalten, um Elemente auf jeder Webseite zu messen.

Page Ruler Redux ist ein zentrales Webentwickler- und Designer-Tool, mit dem Sie pixelgenaue Maße von Web-Elementen für die Website-Frontend-Entwicklung, das Web-Design oder jede andere Aufgabe erhalten können, die Sie benötigen, um perfekte Pixelmaße von beliebigen Web-Elementen zu erhalten.

Es ist immer zeitaufwendig, wenn es darum geht, Dinge in der richtigen Position zu halten. Ein Pixel kann das Design ruinieren. Die Page Ruler Redux-Erweiterung in Chrome kann die Breite, Höhe oder Ausrichtung von Seitenelementen in Pixeln überprüfen, wodurch das Design genauer wird.

Wenn Design auf die Unterstützung durch das Lineal trifft, ist die Kombination immer großartig. Wenn Sie auch ein Designer sind, können Sie dieses coole Plugin ausprobieren.

12. Colorblind-Dalton

Software für farbenblinde Menschen.

Dalton ist eine Software, die es Menschen mit verschiedenen Arten von Farbenblindheit (Farbsehschwäche) ermöglicht, mehr Farben zu sehen.

Jeder Designer muss mit verschiedenen Farben spielen, während er ein aussagekräftiges Design erstellt. Ein Designer sollte in der Lage sein, alle Farben zu erkennen. Designer mit Farbenblindheit sind möglicherweise nicht in der Lage, einige der Farben beim Entwerfen oder Betrachten von Bildern wahrzunehmen.

Dalton bietet Lösungen für einige der alltäglichen Probleme von Farbenblinden. Menschen mit verschiedenen Arten von Farbfehlsichtigkeit könnten von der Verwendung der Dalton-Software profitieren, einschließlich derer, die von Tritanopia (blaue Farbsehschwäche), Deuteranopia (grün), Protanopia (rot) betroffen sind.

Diese coole Erweiterung kann den Menschen mit Farbenblindheit helfen, die genaue Farbe zu erkennen. Diese erstaunliche Erweiterung hat verschiedene Modi, die je nach dem Grad der Farbenblindheit eingestellt werden können. Diese Erweiterung schaltet die normalen Farben in farbenblindenfreundliche Farben um, so dass jemand, der farbenblind ist, Farben mit maximaler Präzision auswählen kann.

13. Wireframe

Wireframe ist eine weitere, von Designern häufig verwendete Chrome-Erweiterung. Diese Erweiterung zeigt die Elemente einer Seite in einer Wireframe-Ansicht an, was das Entwerfen einfacher macht.

Diese Erweiterung kann dabei helfen, die Grundstruktur der Seite zu entwerfen. Färbt die Divs der Seiten, hebt alle html5-Elemente auf der Webseite hervor.

Diese Erweiterung ist nützlich, um den Bauplan anderer Webseiten zu visualisieren und das Design der Seite zu verstehen, da sie die Elemente, Position und Ausrichtung anzeigt.

14. Sizzy

https://sizzy.co/

Der Browser für responsives Design.

Die Sizzy-Chrome-Erweiterung ist nur eine Ergänzung der App, sie fügt einen Button zu Ihrer Symbolleiste hinzu. Wenn die Schaltfläche angeklickt wird, wird die aktuelle URL in Sizzy geöffnet.

Mit Sizzy können Sie sich eine Website auf mehreren Geräten gleichzeitig ansehen. Sizzy ist ein Browser, der speziell für die responsive Entwicklung entwickelt wurde.

15. Evernote Web Clipper

Diese Erweiterung hilft Ihnen, alles, was Sie interessiert, in einer Notiz festzuhalten. Evernote Web Clipper hilft dabei, alle interessanten Dinge an einem Ort zu sammeln. Die Funktion umfasst das Speichern von Bildern, das Hervorheben von wichtigem Text, das Clippen der gesamten Seite und hat weitere coole Funktionen. Auf die geklammerten Elemente kann von jedem Gerät und von überall aus zugegriffen werden.

Diese Erweiterung in Chrome wird den Trend des Lesezeichens ablösen, da jede interessante Funktion in eine kleine und leichte App gepackt ist.

16. PicMonkey

https://www.picmonkey.com/

PicMonkey ist ein Bildbearbeitungs-Tool, das es in sich hat, wenn es um digitale und reale Bereiche geht. Diese Erweiterung ist mächtig, PicMonkey ist auch eine Must-Have-Erweiterung für Designer.

Diese Erweiterung hilft, Bilder von jeder Webseite zu greifen und diese Bilder in Ihrem lokalen Speicher zu speichern. Ein weiteres Merkmal dieser Erweiterung ist, dass sie einen eingebauten Fotoeditor hat, der die Grundlagen der Gestaltung beinhaltet.

Es gibt viele Overlays, die Bilder sofort cool aussehen lassen können. Flexibilität, Zusammenarbeit, schnelle Iteration - alles, was Designer und Nicht-Designer gleichermaßen brauchen, um schneller zu fantastischen Ergebnissen zu kommen.

Diese Tools sind für unterschiedliche Zwecke konzipiert, aber alle Tools sind entwickelt worden, um Designern zu helfen. Wenn Sie die Tools mögen, teilen Sie sie bitte mit Ihren Freunden.

Wenn ein Designer mit diesen Werkzeugen unterstützt wird, wird die Arbeit noch leistungsfähiger und einfacher mit hoher Genauigkeit.