Nützliche Tools zum Überprüfen der Designelemente einer Website (und zum Erlernen der feineren Details des Webdesigns)

Nützliche Tools zum Überprüfen der Designelemente einer Website (und zum Erlernen der feineren Details des Webdesigns)
⏱️ 6 min read

Attraktiv aussehende Websites sind auf ihre Weise ein Mini-Meisterwerk des Internetzeitalters. Die Anpassung kann so einfach oder so komplex sein, wie Sie möchten. Sie reicht von der Änderung eines WordPress-Themas bis zur Entwicklung des Erscheinungsbilds einer Site von Anfang bis Ende.

In der Folge werden Sie wahrscheinlich auf Elemente und Farben stoßen, die Sie in Ihren eigenen Projekten wiederverwenden möchten. In diesem Artikel zeigen wir Ihnen die Grundlagen, damit Websites Ihnen alles erzählen, was Sie wissen möchten.

[FIX] "Kein Internet, Gesichert...
[FIX] "Kein Internet, Gesichert" Windows 10/11| Routech

Was ist die Farbe?

ColorZilla

Ursprünglich erstellt für Feuerfuchs, ColorZilla ist seitdem verfügbar Chrom und die zugehörigen Browser ebenfalls.

WebInter-ColorZilla-InstallPage

Nach der Installation finden Sie in der Benutzeroberfläche eine zusätzliche Schaltfläche für beide Browser. Mit dieser Schaltfläche können Sie die Farbe von fast allem online herausfinden. Sie werden schnell feststellen, dass ColorZilla viel mehr kann als nur Farben zu identifizieren, da es auch Paletten unterstützt.

WebInter-ColorZilla-Paletten

Was ist die Schriftart?

WhatFont? (Chrom)

WebInter-WhatFont-AddonPage

Genau genommen brauchen Sie das nicht WhatFont? 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 es zu durchsuchen.

WebInter-WhatFont-InstallPrompt

WhatFont installieren? und Sie sehen ein neues Symbol in Ihrer Browser-Benutzeroberfläche. Sofern Sie den Browser nicht vollständig neu starten, müssen Sie die Seite aktualisieren, auf der Sie die Schriftarten identifizieren möchten. Klicken Sie anschließend in Ihrem Browser auf die Schaltfläche.

WebInter-WhatFont-ExitButton

In der oberen rechten Ecke der Webseite sollte eine neue Schaltfläche angezeigt werden. Wenn Sie mit der Maus über Text fahren, sollte der Schriftname angezeigt werden. Durch Klicken auf die Schriftart erhalten Sie zusätzliche Informationen zur Größe. Außerdem werden die anderen Schriftarten im „Stapel“ identifiziert. Dies ist praktisch, wenn Sie sehen möchten, welche Alternativen Webentwickler für die beabsichtigte Schriftart in Betracht ziehen.

WebInter-WhatFont-FontDetails

Font Finder (Firefox)

WebInter-FFinder-AboutAddon

Eine Firefox-exklusive Erweiterung in der gleichen Weise wie Chrome WhatFont?

WebInter-FFinder-InstallPrompt

Wenn Sie die Erweiterung installieren, wird im Kontextmenü mit der rechten Maustaste eine neue Option angezeigt.

WebInter-FFinder-RightClick

Wenn Sie etwas finden, das Sie identifizieren möchten, markieren Sie es und rufen Sie die verfügbaren Optionen auf. Unter „Auswahl analysieren“ erfahren Sie alles, was Sie schon immer wissen wollten.

WebInter-FFinder-FontDetails

Das Detail, das es bietet, ist geradezu umwerfend. Wenn Text als “(Stapel)” markiert ist, wird die erste Schriftart im Stapel ausgewählt, die Sie installiert haben. Stapel enden normalerweise mit einem allgemeinen Begriff, wie im obigen Beispiel „serifenlos“. In dem unwahrscheinlichen Fall, dass eine der anderen Schriftarten im Stapel nicht installiert ist, wird auf das serifenlose Standardgesicht Ihres Systems zurückgegriffen.

WebInter-FFinder-WikipediaMessedUp

Sie können Elemente auch über die Option „Element anpassen“ anpassen. Sobald die Erweiterung Sie auffordert, eine Schriftfamilie einzugeben, können Sie wild werden. In unserem Beispiel haben wir fast jede Schriftart auf Wikipedia in eine andere geändert und so das bizarre Mashup erstellt. Diese Änderungen sind nicht dauerhaft und verschwinden, wenn Sie die Seite neu laden.

WebInter-FFinder-DisableFont1

Mit „Schriftart ersetzen (gesamtes DOM)“ können Sie jede Instanz einer Schriftart auf der Seite ändern. Kein Fan von Roboto (das wir als unsere serifenlose Hauptsache verwenden)? Markieren Sie diese Option, klicken Sie in der Liste der auf der Seite vorhandenen Schriftarten auf „Roboto“ und geben Sie den Namen der Schriftart ein, die Sie bevorzugen. Auch hier ist es nicht permanent, aber es ermöglicht Ihnen, mit dem Design Ihrer Lieblingswebsites zu spielen, auch wenn dies nur vorübergehend ist.

WebInter-FFinder-DisableFont2

WebInter-FFinder-DisableFont3

Standortmessung

Seitenlineal (Chrome)

WebInter-PRuler-WebSTore

“Ein Lineal? Ja wirklich?” wir hören dich fragen. Seitenlineal ist ein Bildschirmlineal, das sich ein wenig von dem unterscheidet, was es klingt. Tatsächlich würden wir auch jede anfängliche Skepsis völlig verstehen.

Positionierungsangelegenheiten im Web. Elemente einer Seite müssen genau so beabstandet sein, sonst sind sie nicht so ansprechend wie sie sein könnten. Während es besonders esoterisch ist, diese Informationen wissen zu wollen, macht es Page Ruler möglich.

WebInter-PRuler-NBKWiki

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 in Chrome integrierten Webseiten verwenden.

WebInter-PRuler-ColorChoices

Sobald Sie auf die Schaltfläche geklickt haben, erhalten Sie einen zusätzlichen Informationsstreifen direkt unter der Adressleiste. Mit der Maus können Sie auf eine Form klicken und sie herausziehen, deren Abmessungen berechnet und entlang der oben genannten Leiste angezeigt werden . Darüber hinaus haben Sie auch die Möglichkeit, das Raster zu aktivieren oder zu deaktivieren, obwohl dies bei der Genauigkeit hilfreich sein kann.

WebInter-PRuler-ChangedColors

Wenn Sie möchten, können Sie auch die Farbe des Rechtecks ​​von seinem Standardblau ändern. Unabhängig von der gewählten Farbe wird automatisch ein gewisses Maß an Transparenz hinzugefügt, sodass Sie den Inhalt darunter sehen können.

WebInter-PRuler-ElementMOde

Page Ruler verdient eine gewisse Anerkennung für eine besonders minimalistische Herangehensweise an seine Funktionen, bei der alle wichtigen Informationen in eine kleine Leiste oben im Fenster gepackt werden.

MeasureIt (Firefox und Chrome)

WebInter-MeasureIt-AddonDetails

Messe Es führt die gleiche Aufgabe wie Page Ruler aus und ist sowohl für Firefox als auch für Chrome verfügbar.

WebInter-MeasureIt-BrowserUI

Klicken Sie nach der Installation auf die Schaltfläche, und Sie können klicken und ziehen, um ein Rechteck zu erstellen. Neben dem Rechteck befindet sich eine Pixelanzahl, sodass Sie genaue Messungen für die Positionierung erhalten können.

WebInter-MeasureIt-RulerAdvanced

Wenn Sie sich Sorgen machen, dass die Messungen mit nur einer Maus richtig sind, können Sie die Größe des hervorgehobenen Bereichs mit den Pfeiltasten anpassen, wodurch die Präzision viel einfacher wird, als es sich anhört. Wir empfehlen, die Option “Bereich” in den Einstellungen zu aktivieren. Es ändert nichts an der Funktionsweise der Software und gibt Ihnen lediglich eine Vorstellung von dem Bereich, den das von Ihnen gezeichnete Rechteck einnimmt.

WebInter-MeasureIt-Optionen

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. Wenn nichts anderes, sollte der Begriff „Bildschirmimmobilie“ auf jeden Fall relativiert werden.

Fazit

Es dauert eine Weile, um das Beste aus diesen Erweiterungen herauszuholen, aber sie bieten einige großartige Informationen, die leicht zu erreichen sind. Sie werden sich schnell mit ihnen auseinandersetzen, aber wenn Sie Schwierigkeiten haben, Schriftarten zu ersetzen, denken Sie daran, dass die Namen genau sein müssen. “Comic Sans” funktioniert nicht, während “Comic Sans MS” (wie es in Office erscheint) funktioniert.

Denken Sie daran, dass alle diese Erweiterungen diese Genauigkeit der von Ihnen angegebenen Informationen erfordern und dass Sie gut gerüstet sind, um sie in vollem Umfang nutzen zu können.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Das könnte dich auch interessieren …

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x