Allgemein

Nützliche Browsererweiterungen für Designer

Nützliche Browsererweiterungen für Designer

 
Webbrowser bieten in der Regel unzählige Erweiterungen an, die man installieren und direkt im Browser nutzen kann. Im Alltag eines Designers ist alles, was die Arbeit schnell voranbringt und nicht lange aufhält, sehr erwünscht! Daher empfiehlt es sich, in den Stores des jeweiligen genutzten Browsers zu stöbern und nach hilfreichen Erweiterungen zu suchen.
Wer sich einmal auf die Suche begibt, wird von einer riesigen Auswahl unterschiedlichster Add-Ons überschüttet. In einem älteren Blogartikel haben wir bereits einige nützliche Firefox Erweiterungen gezeigt. Aber da die Neu- und Weiterentwicklungen stetig voranschreiten, ist ein aktueller Blick in die Browser Stores ratsam.
 
Wir stellen euch nun fünf praktische Browsererweiterungen für Designer vor, die wir im Praxis-Alltag erprobt haben und selbst intensiv nutzen. Alle Erweiterungen sind kostenfrei und werden von uns im Google Chrome Browser genutzt.
 
 

Fontface Ninja

Eine der besten Browsererweiterungen für Schriften ist Fontface Ninja. Die Anwendung ist einfach zu bedienen und liest aus Webseiten präzise die wichtigsten Infos raus.
Wie das Ganze funktioniert? Man klickt im Browser auf die Anwendung, führt die Maus über den Text und schon erscheint ein Fenster mit den wichtigsten Infos: Schriftart und Schriftschnitt. Dazu außerdem weitere Feinheiten, wie Schriftgröße, Zeilenabstand, Laufweite und Schriftfarbe.
Die Anwendung hat aber noch weitere Funktionen: Wenn man auf den Text klickt, ploppt ein Fenster auf, in welchen man beispielhaften Text eintippen kann und diesen sofort im jeweiligen Font sieht. Hier kann man sogar die Schriftgröße und Laufweite einstellen.
Besonders praktisch ist, dass Fontface Ninja die Bezugsquelle der Schrift erkennt. Über ein Symbol wird der Preis angezeigt und über einen Klick darauf gelangt man zur jeweiligen Webseite. Ist eine Schrift kostenfrei, so kann man sie direkt ohne weitere Umleitung runterladen. Wer sich eine Schrift merken möchte, kann sich diese als Lesezeichen speichern, wofür man sich aber einloggen muss.
Tatsächlich kann die Anwendung auch Fonts aus Bildern auslesen. Dies geschieht mit Hilfe von WhatTheFont, funktioniert aber nach unseren Versuchen noch nicht so optimal.
Die Anwendung ist in den Browsern Google Chrome, Mozilla Firefox und Safari verwendbar.
 

 
 

Page Ruler

Die Anwendung Page Ruler misst Abstände auf Webseiten. Dazu muss man im Browser auf die Erweiterung klicken und ein Feld auf der Webseite aufziehen. In diesem Augenblick erscheint auch schon das blau hinterlegte Feld, welches man verschieben oder mithilfe der markierten Ecken größer und kleiner ziehen kann, bis es den gewünschten Bereich umfasst. Die Pfeiltasten der Tastatur können dazu genutzt werden, das Feld Pixel um Pixel zu bewegen. Im Fenster des Browsers befindet sich oben eine Leiste, welche Breite und Höhe, sowie die Position des festgelegten Bereichs angibt. Um die Auswahl der Fläche zu optimieren, lässt sich hier auch ein Wert eingeben und die Farbe der Auswahl ändern. Wer Flächen auf einer Webseite automatisch erkennen lassen will, hat mit Page Ruler ebenfalls eine gute Erweiterung gefunden. Mit einem Klick auf </> Elements kann man die Maus über die Webseite bewegen, während das Tool Bilder, Textfelder und andere Abstände erkennt. Ein Klick auf den Bereich fixiert die Fläche, welche man optional noch ändern kann. Auf diese Weise lassen sich Abmessungen einfach und exakt durchführen.
Leider haben wir die Anwendung nur im Store von Google Chrome gefunden.
 
 

Dimensions

In Erweiterung zu Page Ruler kann man außerdem die Anwendung Dimensions nutzen. Dieses Mess-Tool ist um Einiges simpler aufgebaut und hilft, Abstände automatisch und schnell zu erfassen. Ein Klick auf Dimensions genügt und man kann mit dem Mauszeiger über die Webseite fahren. Sofort werden Abstände erkannt, wobei die horizontale und vertikale Entfernung angezeigt wird. So muss man lediglich an die Stelle der Webseite navigieren, deren Abstand man messen möchte. Wer die Anwendung vor dem Download testen will, kann dies auf der Webseite des Entwicklers tun. In dem Header der Seite wird die Erweiterung ohne vorangehende Installation demonstriert.
Probleme gibt es allerdings, wenn man das Maß eines Bildes auslesen möchte, da das Tool auch innerhalb eines Bildes Begrenzungen erkennt. Hier hat der Entwickler reagiert und mit gehaltener ALT-Taste lässt sich die Abmessung des gesamten Bildes anzeigen. Allerdings funktioniert das bei manchen Bildern trotz Verbesserung immer noch nicht. Für ein schnelles Erfassen der Abstände ist Dimensions aber dennoch zu empfehlen!
Auf der Webseite wird die Erweiterung als Chrome Browser Extension angegeben, sie wird aber auch bei Firefox Add-Ons angezeigt.
 
 

ColorZilla

ColorZilla ist nach wie vor eines der besten Tools für Farben. Es verfügt über umfangreiche Funktionen, die im Alltag eines Designers sehr hilfreich sind.
Sobald man die Anwendung startet, erscheint ein Fadenkreuz, welches beim Bewegen der Maus über die Webseite in einem Feld oben die entsprechende Farbe, sowie den RGB Wert und HEX Code anzeigt.
Links in der Leiste kann man auswählen, wie groß die Pipette sein soll oder eine eigene Größe festlegen. Mithilfe einer großen Pipette lässt sich der durchschnittliche Farbwert einer Bildfläche ermitteln. Wer den Hex Code der Farbauswahl für weitere Zwecke braucht, klickt einmal auf den ausgewählten Bereich direkt auf der Webseite und der Wert wird automatisch kopiert. Über das Symbol für ColorZilla im Browserfenster gibt es noch weitere Möglichkeiten, mit dem Tool umzugehen. Man kann sich hier etwa die Farbpalette und Farbauswahl-Historie anzeigen lassen.
Die Erweiterung wird derzeit für Google Chrome und Mozilla Firefox angeboten.
 
 

Nimbus Screenshot & Screen Video Recorder

Wer einen Screenshot bequem erstellen will, sollte die Erweiterung Nimbus Screenshot & Screen Video Recorder hinzufügen. Das Aufnahme-Tool ist übersichtlich und einfach zu bedienen.
Zunächst klickt man auf das dazugehörige Symbol im Browser, woraufhin ein Fenster aufploppt, welches eine große Auswahl an unterschiedlichen Aufnahmen bietet. Die Zeiten, als entweder nur der gesamte Monitor oder ein Teilbereich gespeichert werden konnte, sind nämlich längst vorbei. Die klassischen Möglichkeiten (der sichtbare Teil der Webseite oder nur ein Fragment) werden um folgende Optionen ergänzt: Es kann ein Fragment automatisch erkannt, ein ausgewählter Bereich während des Scrollens aufgenommen oder die gesamte Webseite in ihrer Länge gespeichert werden. Es gibt die Möglichkeit, wie bei einem Selbstauslöser den Screenshot nach einigen Sekunden zu erstellen oder die Webseite mit Ansicht des Browserfensters zu speichern. Sogar Videos lassen sich erstellen, welche im Gegensatz zu vielen anderen Add-Ons mit vielen professionellen Einstellungen hervorstechen.
Sobald man eine Option anklickt, wird der Screenshot erstellt und ein neuer Tab erscheint mit dem Bildausschnitt. Wenn alles passt, kann man flink auf Done klicken und im nächsten Fenster das Bild speichern. Wer aber den Screenshot bearbeiten will, kann dies mithilfe der Leiste oben noch vor dem Speichern tun. Hier lässt sich nämlich die Bildgröße ändern, das Bild eventuell nochmal zuschneiden oder zusätzliche Infos mit Pinsel, Text und allerlei anderen Werkzeugen ergänzen. Man kann den Bearbeitungsmodus aber auch überspringen, indem man beim Klick auf das Anwendungs-Symbol unten das sofortige Herunterladen oder Speichern auswählt. So lässt sich die Anwendung besonders gut an die Bedürfnisse des Users zuschneiden.
 

 
 
Wer sich also helfen lassen will, sollte unbedingt in den Erweiterungen des genutzten Browsers stöbern. Uns unterstützen die Add-ons jeden Tag bei den unterschiedlichsten Design-Arbeiten.
 

The following two tabs change content below.

Julia Sinner

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit 2017 im Bereich Web- und Printdesign. Ich habe ein Faible für typografische Feinheiten und bin überzeugt von Design, das konzeptionell durchdacht und ästhetisch vollendet ist.

Neueste Artikel von Julia Sinner (alle ansehen)

#Facebook testet Ads in Suchergebnissen - Das Google-Prinzip: 🔎 Anzeigen in Suche der Apps & im Marketplace für Us… https://t.co/CGWvVm08bN
#Instagram stattet App mit Sprachmitteilungen aus. Neuesten Feature für Privatnachrichten! 💬 Sprachfunktion stößt… https://t.co/NNYPNF1PJJ
#instagram Story Templates: Mehr Reichweite durch Vorlagen! 📄 = Vorlagen, für Nutzer in Stories geteilt 1. Per Sc… https://t.co/iFahWAdzq3
Swipe Left! #instagram testet horizontalen Feed. 🔜 Richtungswechsel für besseres Erlebnis bei Content-Konsum. Eve… https://t.co/K6yLTgrl6o
#Instagram Studie: Analyse von 9 Mio. Posts! 📸 Mehr Interaktionen durch: - möglichst wenig Text (1-50 Zeichen) -… https://t.co/1CcYcTXo6Y
#Facebook testet Shopping Feature für Livestreams - Shopping + Bestellung per Messenger! 🛒 Bestellung per Screensh… https://t.co/2tphxyCOL5
NEU im #Klickkomplizen Blog: Was hat uns bewegt - November! ❄ Online: - Black Friday Wahnsinn - #WhatsApp bleibt… https://t.co/jSyuskEVC5
8 wichtige Call-to-Actions für euren #YouTube Kanal!📽 Elegante Methoden zur CTA Integration: - Pre-Rolls - Videov… https://t.co/Cz0XJy9JUo
Stories in #Facebook Gruppen - Verwaltung und Chancen! 🗣👥 - Veröffentlichung durch Nutzer kann/sollte moderiert we… https://t.co/QRJAIlvSsc
Tipps & Tricks für ein besseres #Google Ranking - Unterstützung bei Suche nach Antworten, Angeboten und Lösungen. 🔎… https://t.co/1cs68IEGzd
So sieht das optimale #Instagram Posting aus! 📸 Die Studie: 44.000 Accounts, 9 Mio. Posts Die Ergebnisse: - Im Sc… https://t.co/0pRj9ipnTN
NEU im #Klickkomplizen Blog: Die Klickies Weihnachtsfeier! 🍫 Selbstgekochtes Schokoladen-Menü: - Schaumsüppchen m… https://t.co/2kcTtt6vgi
#Google Tool-Tipps von der SEOkomm: - Die neue Google Sarch Konsole ( Neuer Anstrich, mehr Daten, genau Prüfungen)… https://t.co/HSvYb9qZv1
Marketing in Streaming und Gaming!🎮 - Enorme Reichweite (Twitch, Periscope, Facebook) - Branding durch Sponsoring… https://t.co/hM4MaN0ITQ
#YouTube launcht Stories! Ab 10.000 Abonnenten, für 7 Tage sichtbar. 📽 - Spontane, individuelle Interaktion - Beka… https://t.co/8seAHk0oRO
NEU im #Klickkomplizen Blog: #Facebook Messenger Bots: Ein Gespräch mit dem Geschenkeberater von LEGO! 🤖 Alter, Bu… https://t.co/esOu6KpxyA
Tipps von den Profis: Mehr Interaktionen auf Instagram durch Video Content und weniger Hashtags! 📽 Videos > Karuss… https://t.co/kfMb7dUMm5
NEU im #Klickkomplizen Blog: Neue Webseite für den TLV! 💻 Thüringer Lehrerverband setzt auf Klickies! Gewinnung ne… https://t.co/QBSiyuwwYU
#YouTube Werbespots im Doppelpack? 📺📺 Was ist mit euch - Lieber einmal viel Werbung am Stück oder mehrmals kleine… https://t.co/oZK70IKZbb
Zeitgemäßes Webdesign: Mobile only? What's next? 🖌 Kontext bestimmt die Funktion - Gesunde Mischung aus Funktional… https://t.co/trULRVoS0T
Share This