Nützliche Tools zum Überprüfen der Designelemente einer Website (und zum Erlernen der feineren Details des Webdesigns)
Attraktiv aussehende Websites sind auf ihre Art ein Mini-Meisterwerk des Internetzeitalters. Die Anpassung kann so einfach oder so komplex sein, wie Sie es wünschen, angefangen vom Ändern eines WordPress-Designs bis hin zum Entwickeln des Aussehens einer Website von Anfang bis Ende.
Anschließend werden Sie wahrscheinlich auf Elemente stoßen, die Sie genießen, und Farben, die Sie in Ihren eigenen Projekten wiederverwenden möchten. In diesem Artikel zeigen wir Ihnen das Wesentliche, damit Websites Ihnen alles erzählen können, was Sie wissen wollen.
Was ist die Farbe?
ColorZilla
Ursprünglich für Firefox erstellt, ist ColorZilla nun auch für Chrome und die zugehörigen Browser verfügbar.
Nach der Installation finden Sie in der Benutzeroberfläche für beide Browser eine zusätzliche Schaltfläche. Dieser Knopf gibt Ihnen die Fähigkeit, die Farbe von fast allem online zu erfahren. Sie werden schnell feststellen, dass ColorZilla mehr als nur Farben erkennt, da es auch Paletten unterstützt.
Was ist der Font?
WhatFont? (Chrom)
Genau genommen brauchen Sie das WhatFont nicht? Erweiterung, um die Schriftart einer Website herauszufinden, aber es ist bei weitem der schnellste Weg, dies zu tun. Die Alternative wäre, das Stylesheet zu öffnen und damit zu jagen.
Installieren Sie WhatFont? und Sie werden ein neues Symbol in der Benutzeroberfläche Ihres Browsers sehen. Wenn Sie den Browser nicht vollständig neu starten, müssen Sie die Seite aktualisieren, auf der Sie die Schriftarten identifizieren möchten. Sobald Sie dies getan haben, klicken Sie auf die Schaltfläche in Ihrem Browser.
Eine neue Schaltfläche sollte in der oberen rechten Ecke der Webseite angezeigt werden, und wenn Sie die Maus über den Text bewegen, sollte der Name der Schriftart angezeigt werden. Wenn Sie auf die Schriftart klicken, werden zusätzliche Informationen zur Größeneinstellung angezeigt. Es wird auch die anderen Schriftarten im "Stapel" identifizieren, was praktisch ist, wenn Sie sehen möchten, welche Alternativen Webentwickler für ihre beabsichtigte Schriftart halten.
Schriftfinder (Firefox)
Eine Firefox-exklusive Erweiterung in der gleichen Art wie Chrome WhatFont?
Installieren Sie die Erweiterung, und Sie haben eine neue Option im Kontextmenü der rechten Maustaste.
Wenn Sie etwas finden, das Sie identifizieren möchten, markieren Sie es und rufen Sie dann die verfügbaren Optionen auf. "Analyze Selection" sagt Ihnen alles, was Sie schon immer wissen wollten.
Das Detail, das es zur Verfügung stellt, ist nichts weniger als atemberaubend. Wenn Text als "(Stapel)" markiert ist, wählt er die erste Schriftart in dem Stapel, den Sie installiert haben. Stacks enden in der Regel mit einem allgemeinen Begriff wie "Sans-Serif" im obigen Beispiel. In dem unwahrscheinlichen Fall, dass eine der anderen Schriftarten im Stapel nicht installiert ist, wird sie auf das Standard-Sans-Serif-Gesicht des Systems zurückgesetzt.
Sie können Elemente auch über die Option "Element anpassen" anpassen. Sobald Sie von der Erweiterung dazu aufgefordert werden, eine Schriftfamilie einzugeben, können Sie in die ursprüngliche Fassung wechseln. In unserem Beispiel haben wir fast jede Schriftart auf Wikipedia geändert, um das bizarre Mash-up darzustellen. Diese Änderungen sind nicht dauerhaft und verschwinden, wenn Sie die Seite neu laden.
Mit "Schrift ersetzen (gesamtes DOM)" können Sie jede Instanz einer Schriftart auf der Seite ändern. Kein Fan von Roboto (welches wir als unsere Haupt-Serifenform benutzen)? Markieren Sie diese Option, klicken Sie auf "Roboto" in der Liste der Schriftarten auf der Seite und geben Sie den Namen der Schriftart ein, die Sie lieber sehen möchten. Auch das ist nicht dauerhaft, aber Sie können mit dem Design Ihrer Lieblingswebseiten spielen, wenn auch nur vorübergehend.
Standortmessung
Seitenlineal (Chrome)
"Ein Lineal? Wirklich? "Hören wir dich fragen. Seitenlineal ist ein Bildschirmlineal, das ein wenig anders ist als es klingt. In der Tat würden wir jede anfängliche Skepsis auch völlig verstehen.
Positionierung spielt im Web eine Rolle. Elemente einer Seite müssen genau so beabstandet sein, oder sie sind nicht so ansprechend wie sie sein könnten. Während diese Information besonders esoterisch ist zu wissen, macht Page-Ruler es möglich.
Installieren Sie es wie jede andere Erweiterung und Sie haben eine weitere Schaltfläche in der Benutzeroberfläche Ihres Browsers. Beachten Sie, dass Sie eine Webseite öffnen müssen, um die Erweiterung auszuprobieren. Aus Sicherheitsgründen können Sie keine der integrierten Chrome-Webseiten verwenden.
Sobald Sie auf die Schaltfläche geklickt haben, erhalten Sie einen zusätzlichen Informationsstreifen direkt unter der Adressleiste, und Sie können mit der Maus eine Form anklicken und ziehen, deren Abmessungen berechnet und entlang der oben genannten Leiste angezeigt werden . Darüber hinaus haben Sie auch die Möglichkeit, das Gitter zu aktivieren oder zu deaktivieren, obwohl es mit Genauigkeit helfen kann.
Wenn Sie möchten, können Sie auch die Farbe des Rechtecks von seinem Standard-Blau ändern. Unabhängig von der ausgewählten Farbe wird automatisch ein Grad an Transparenz hinzugefügt, sodass Sie den darunter liegenden Inhalt sehen können.
Page Ruler verdient Anerkennung dafür, dass seine Funktionen besonders minimalistisch sind und alle wichtigen Informationen in einer kleinen Leiste am oberen Rand des Fensters untergebracht sind.
MeasureIt (Firefox und Chrome)
MeasureIt macht dieselbe Aufgabe wie Page Ruler und ist sowohl für Firefox als auch für Chrome verfügbar.
Klicken Sie nach der Installation auf die Schaltfläche, und Sie können klicken und ziehen, um ein Rechteck zu erstellen. Neben dem Rechteck wird eine Pixelzahl angezeigt, was bedeutet, dass Sie genaue Messungen für die Positionierung erhalten können.
Wenn Sie Bedenken haben, die Maße mit nur einer Maus zu korrigieren, können Sie die Größe des hervorgehobenen Bereichs mit den Pfeiltasten anpassen, was die Genauigkeit viel einfacher macht als es klingt. Wir empfehlen, die Option "Bereich" in den Einstellungen zu aktivieren. Es ändert nichts daran, wie die Software funktioniert, und gibt Ihnen lediglich eine Vorstellung davon, in welchem Bereich das Rechteck, das Sie gezeichnet haben, Platz nimmt.
Wir wetten, Sie werden überrascht sein, wenn Sie sehen, wie viele Pixel auf dem Bildschirm angezeigt werden und welchen Bereich sie ausmachen, wenn sie hervorgehoben werden. Nicht zuletzt sollte der Begriff "Bildschirmimmobilie" auf jeden Fall relativiert werden.
Fazit
Es dauert eine Weile, um das Beste aus diesen Erweiterungen herauszuholen, aber sie bringen einige großartige Informationen in Reichweite. Sie werden sich schnell mit ihnen auseinandersetzen, aber wenn es Ihnen schwerfällt, Fonts zu ersetzen, denken Sie daran, dass die Namen genau sein müssen. "Comic Sans" wird nicht funktionieren, während "Comic Sans MS" (wie es in Office erscheint).
Denken Sie daran, dass alle diese Erweiterungen diese Art von Genauigkeit in den Informationen erfordern, die Sie ihnen geben, und Sie werden gut ausgerüstet sein, um sie voll zu nutzen.