Tools

Ganz egal ob ich Webseiten im Kundenauftrag designe oder an meinen eigenen Seiten bastle, ich benutze eine ganze Reihe von Browser-Erweiterungen für meine Arbeit als Webdesignerin. Heute möchte ich dir fünf davon vorstellen. Es handelt sich dabei um kleine Browser-Tools, die dir als Werkzeug dienen und ich bin mir ganz sicher, dass sie auch dir deinen Alltag erleichtern werden!

Die folgenden Anleitungen wurden für den Chrome-Browser erstellt. Die meisten Extensions gibt es auch für Firefox und Co. Ich möchte mich hier jedoch auf Chrome beschränken.

Durchschnittliche Lesedauer: 4 Minuten

Browser-Erweiterungen installieren

Zuerst möchte ich dir zeigen wie du die Browser-Erweiterungen überhaupt installierst.

Öffne zuerst Chrome …

… und klicke auf den folgenden Link: Chrome-Webstore. Dieser führt dich direkt in den Chrome-Webstore, wo du die nachfolgenden Browser-Erweiterungen kostenlos und mit zwei Klicks installieren kannst.

Falls du die Anleitung lieber als Video sehen möchtest:

 

Floating Player

Ist dir das auch schon passiert? Du suchst ein Video-Tutorial, z.B. auf YouTube und möchtest dann die darin vorgestellten Schritte step-by-step auf deiner Website umsetzen. Das Doofe daran ist nur, dass du jetzt alle paar Sekunden zwischen dem Tab mit dem Video und dem Tab von deiner Webseite hin und her wechseln musst 🙄.

Ab jetzt nicht mehr! Diese Browser-Extension ermöglicht dir, Videos "anzupinnen". Genauer gesagt, öffnet sich ein kleines Fenster mit dem Video und egal in welchem Tab du dich gerade befindest, das Video "fliesst" mit.

Schau dir am besten das kurze Video an, installiere die Browser-Extension und probiere es direkt aus 👍🏼! Wenn mehrere Videos auf einer Seite eingebettet sind (wie hier bei diesem Blog-Artikel), dann wirst du eine Miniaturansicht der gesamten Website sehen und kannst einfach zum gewünschten Video scrollen 😉).

Browser-Extension "Floating Player" installieren und verwenden (Video-Anleitung)

ColorZilla

Die kleine Browser-Erweiterung ermöglicht es dir, den exakten Farbcode von Bildern, Fotos, Grafiken, Illustrationen und allem, was halt Farbe enthält, herauszufinden und in deine Zwischenablage zu kopieren, um ihn dann wiederzuverwenden, z.B. in Canva, für Texte, u.s.w.

Gehen wir mal davon aus, dass du auf deiner Website ein Foto mit einer roten Rose eingebunden hast und nun möchtest du in derselben Farbe wie die Rose den Titel einfärben. Dazu klickst du nach dem Installieren lediglich die Browser-Erweiterung an, fährst mit der Pipette über die Rose und pickst so den exakten Farbcode als Hexcode heraus und kannst ihn dann bei der Schriftfarbe wieder hineinkopieren.

Browser-Extension "ColorZilla" installieren und verwenden (Video-Anleitung)

Page Ruler

"Page Ruler" hilft dir als Browser-Extension dabei, die genaue Anzahl Pixel herauszufinden und so z.B. beim Designen deiner Seiten Abstände genauer zu definieren, Elemente genauer auszurichten und anzuordnen oder Design symmetrischer zu gestalten. Du kannst "Page Ruler" als erweiterten Lineal verstehen, der dir die genauen Pixel eines Elements, eines Abstandes zwischen zwei Elementen, u.s.w. anzeigt.

Browser-Extension "Page Ruler" installieren und verwenden (Video-Anleitung)

View Image Info (properties)

Mit View Image Info (properties) kannst du mit einem Klick auslesen, welche Masse (Breite/Höhe) ein Bild effektiv hat, wie gross es ist (KB/MB), was für ein Format (JPG/PNG) es hat und wie der Alt-Text lautet, ebenso den genauen Pfad auf dem Server anzeigen. Das ist dann zum Beispiel extrem hilfreich, wenn du unsicher bist, ob du das bereits hochgeladene Bild auch für andere Stellen auf deiner Seite verwenden kannst, wenn du z.B. andere Grössen benötigst.

Browser-Extension "View Image Info (properties)" installieren und verwenden (Video-Anleitung)

WhatFont

Warst du auch schon mal online unterwegs und hast eine Schriftart entdeckt, in die du dich sofort verliebt hast? Nur wie findest du jetzt heraus, wie diese Schriftart heisst? Du möchtest sie ja vielleicht selbst verwenden oder sie für ein Kundenprojekt abspeichern, zu dem sie perfekt passt. Mit der Browser-Extension "WhatFont" fährst du nur noch über die Schriftart und schon wird dir in einem kleinen Fenster angezeigt, wie sie genau heisst, geil oder?

Browser-Extension "WhatFont" installieren und verwenden (Video-Anleitung)

Bock auf mehr coolen Stuff wie diesen und exklusive Inhalte? Dann melde dich jetzt für meine kostenlose "Hack Your Business"-Academy #4free an!

 

Hack your Business Academy for free

Haben dir meine Tipps gefallen? Oder hast du noch Fragen? Hinterlasse mir gerne einen Kommentar, ich freue mich immer sehr darüber!

A presto!

 

Deine Mary

null

Wer schreibt denn hier?

Hey! Schön, dass du meinen Blog liest!

Ich bin Mary Mattiolo, Webdesignerin und Business-Creator für Expertinnen. Ich helfe Solopreneurinnen durch einzigartiges Webdesign ihr Business nach vorne zu bringen, damit sie von ihren Wunschkunden gefunden werden.

Neben meinen 1 : 1 Angeboten findest du bei mir konkrete und leicht umsetzbare Tipps, wie du dein Online-Business startest, ausbaust und schlussendlich einen Grossteil davon automatisierst.

Mein Motto: Be you - be unique!

#HackYourBusinessAndFreeYourLife

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nie veröffentlicht. Alle Angaben sind freiwillig.

Kommentieren