Webflow-Symbole — Alles was du wissen musst

Die Website besteht aus gemischten Assets, Animationen und Formularen. Wenn es um Symbole geht, sind sie ein unvermeidlicher Bestandteil des gesamten Erscheinungsbilds der Website. Ihre Wirkung und Effektivität müssen berücksichtigt werden, um einen starken visuellen Effekt zu erzielen.

Sie visualisieren Ideen und Konzepte und etablieren die Marke mithilfe des gleichen Ikonenstils, der gleichen Farbe, Form und Form. Die Verwendung von Symbolen in Ihrem Design ist für Ihre Besucher wie ein geheimer Handschlag.

Icons sind immer willkommen, wenn geplant ist, sie moderat und ausgewogen zu verwenden. Sie helfen dabei, die Navigation zu vereinfachen, Teile Ihrer Websites zu verstehen, ohne sie lesen zu müssen, und helfen ihnen, sich an Funktionen Ihrer Website zu erinnern.

Wir müssen also sicherstellen, dass wir Icons auswählen, die zum Zweck unserer Website passen und mit unserer Marke in Verbindung stehen. Andernfalls ist es so, als würde man versuchen, Hieroglyphen ohne Übersetzer zu lesen, wenn Designprinzipien vernachlässigt werden. Daher sollten Icons im Allgemeinen verwendet werden, um den Text zu ergänzen und die Benutzerfreundlichkeit einer Website zu verbessern, nicht um sie zu ersetzen.

Was ist bei der Verwendung von Icons in Webflow zu beachten

Bevor wir anfangen, Symbole zu verwenden, müssen wir einige Prinzipien kennen und sie als Karte überall in unserem Design verarbeiten. Diese Prinzipien werden uns helfen, auf Kurs zu bleiben, da Designer oft versucht sein können, ihrer Arbeit etwas mehr Würze zu verleihen.

Bei der Verwendung von Symbolen in Webflow ist es wichtig, Folgendes zu beachten:

1. Kohärenz

Verwenden Sie für alle Symbole einen einheitlichen Stil, um die einheitliche visuelle Identität der Website zu wahren. Wenn Sie auf der gesamten Website ein bestimmtes Symboldesign verwenden, z. B. ein flaches Design, stellen Sie sicher, dass alle Symbole der gleichen Ästhetik entsprechen. Der einheitliche Stil erleichtert es den Benutzern, die Symbole zu verstehen und zu erkennen.

2. Barrierefreiheit

Um die Barrierefreiheit zu verbessern, fügen Sie neben jedem Symbol alternativen Text ein. Wenn die Home-Taste beispielsweise durch ein Symbol für eine Sicherheitsfunktion dargestellt wird, stellen Sie sicher, dass Sie einen alternativen Text mit der Aufschrift „z. B. Sicherheitsfunktionen“ einfügen, damit Personen, die Screenreader verwenden, verstehen, wofür das Symbol steht.

3. Skalierbarkeit

Verwenden Sie skalierbare, vektorbasierte Symbole, um Qualitätseinbußen zu vermeiden. SVG-Dateien, die vektorbasiert sind und einfach auf mehrere Größen skaliert werden können, ohne an Qualität zu verlieren, können beispielsweise zum Erstellen von Symbolen verwendet werden.

4. Kontext

Um Verwirrung zu vermeiden, verwenden Sie die Symbole korrekt und kennzeichnen Sie sie mit entsprechenden Bezeichnungen. Wenn Sie sich dafür entscheiden, die Schaltfläche durch das Symbol eines Einkaufswagens darzustellen, platzieren Sie es neben einem klar definierten Symbol, um Verwirrung zu vermeiden.

5. Wird geladen Erfahrung

Um die Leistung der Website zu beschleunigen und die Ladezeiten zu verkürzen, achten Sie immer darauf, den Prozess der Optimierung der Icons nicht zu überspringen oder zu unterschätzen. Dies wird dazu beitragen, die Benutzererfahrung auf Ihrer Website zu verbessern. Sie können beispielsweise Symbolschriften verwenden, um HTTP-Anfragen zu reduzieren und das Laden von Websites und damit die Benutzererfahrung zu beschleunigen.

Was Sie bei der Verwendung von Webflow-Symbolen vermeiden sollten

Hier sind einige der Prinzipien, die berücksichtigt werden müssen, wenn es darum geht, schlechte Praktiken zu vermeiden;

• Die Verwendung einer übermäßigen Anzahl von Symbolen kann das Design chaotisch und verwirrend erscheinen lassen. Beispielsweise könnte es für Verbraucher schwierig sein, die benötigten Informationen zu identifizieren, wenn sich auf einer Seite zu viele Symbole befinden.
• Vermeiden Sie die Verwendung irrelevanter Symbole, die das Design nicht verbessern. Benutzern fällt es schwer zu verstehen, was ein Symbol bedeutet, wenn Sie beispielsweise ein Symbol zum Teilen verwenden, um eine Schaltfläche „Kontaktieren Sie uns“ darzustellen.
• Verwendung von unzugänglichen oder unklar beschrifteten Symbolen. Wenn Sie ein Symbol ohne eine andere Sprache oder eine klare Erklärung verwenden, können Personen mit Sehbehinderungen möglicherweise nicht verstehen, wofür das Symbol steht. Darüber hinaus ist es für Suchmaschinen wichtig, solche Beschreibungen für eine einfache Indexierung bereitzustellen.
• Verwenden von Rastergrafiken anstelle von aus Vektoren erstellten Symbolen. Bei einer Größenänderung können Rastergrafiken wie PNG oder JPG an Qualität verlieren, da sie weniger anpassungsfähig und skalierbar sind als vektorbasierte Symbole.

Webflow-Symbole — So installieren Sie sie

Eine Website kann sich dadurch auszeichnen, dass sie mit all ihren Komponenten und in unserem Fall ihren von Grund auf neu gestalteten Symbolen ein unverwechselbares Erscheinungsbild hat. Der Nachteil dabei ist, dass es zu lange dauern kann, wenn so viele hervorragende Icon-Sets online verfügbar sind.

Daher können vorgefertigte Symbole als solide Grundlage dienen, um von dort aus weiterzumachen und ihre Farbe, Form und Absicht, für die sie verwendet wurden, anzupassen und zu aktualisieren. Wir können Zeit und Mühe sparen, indem wir eines der vielen kostenlosen Icon-Sets verwenden, die sofort verfügbar sind und in unseren Projekten verwendet werden können.

Das Hinzufügen und Verwenden von Symbolen in Webflow ist im Wesentlichen recht einfach. Bevor wir in Webflow eintauchen, müssen wir nach kostenlosen Google-Symbolen oder anderen suchen Prämie Symbole, die der Webdesign-Ästhetik entsprechen, die wir verwenden möchten. Nach Abschluss des Speicherns müssen wir den Webflow-Designer öffnen und unter Assets einen Ordner erstellen, in diesem Fall Icon Set, und die Datei hochladen, die Sie bereits gespeichert haben.

Dies ist die einfachste Methode, um die Webflow-Symbole in Ihren Projekten zu verwenden. Eine Sache, die Sie bei all dem vielleicht nicht so nützlich finden, ist, dass wir, wenn wir die Farben aller Symbole ändern möchten, dies manuell tun müssen, jedes Symbol einzeln.

Wenn Sie diesen Ansatz der Verwendung von Webflow-Symbolen bereits beherrschen, können wir Ihnen zeigen, dass es eine andere flexiblere Art gibt, mit Webflow-Symbolen zu arbeiten. Wie können wir diese Methode also nutzen, um mehr Flexibilität und Produktivität bei der Arbeit mit Webflow-Symbolen zu erreichen?

Icon Fonts sind die Antwort.

Was sind Icon Fonts?

Icon-Fonts sind skalierbare Vektorgrafiken, die völlig unabhängig von der Auflösung sind. Icon-Schriften bestehen im Vergleich zu Bildern aus einer einzigen Schriftdatei, sodass es nur eine HTTP-Anfrage gibt. Symbolschriften sind Schriften, die Symbole und Glyphen anstelle von Buchstaben oder Zahlen verwenden.

Ein Vorteil, durch den sich Symbolschriften von zufälligen Symbolen unterscheiden, besteht darin, dass sie in Bezug auf ihre Verwendung viel flexibler sind. Aus diesem Grund finden viele Designer sie praktischer und wirken sich auf ihre Produktivitätsleistung aus.

So installieren Sie Icon Fonts

In erster Linie sollten Icon-Fonts als zufällige Schriftdatei von Quellen Dritter heruntergeladen werden, z. B. von Google-Symbolschriften, Schrift Awesomeusw. In diesem Beispiel werden wir den Font Awesome-Prozess durchlaufen. Wie oben erwähnt, müssen wir zuerst herunterladen das Icon-Set ist in unserem Fall kostenlos.

Jetzt müssen wir die Icon-Schriftdatei entpacken, uns dann bei Webflow anmelden und das Projekt finden, in dem Sie die Icon-Schriftarten verwenden möchten. Gehen Sie zu Projekteinstellungen> Schriftarten> Benutzerdefinierte Schriftarten> Hochladen.

Nachdem Sie die Icon-Schriftarten hochgeladen haben, finden Sie sie in der Liste aller anderen Schriftarten unter Typografie im Webflow Designer.

Was du als Nächstes tun musst, ist, die Schrift großartig zu machen. Spickzettel und wählen Sie eines der Symbole aus, die Sie in Ihrem Design verwenden möchten. Eine Sache, die Sie in diesem Schritt beachten sollten, ist, dass Sie sich die von Ihnen gewählte Kategorie der Symbole merken müssen.

Wir haben die Kategorie Solid ausgewählt und eine Symbolschrift aus dieser Kategorie kopiert, um sie in Webflow Design einzufügen. Der Schriftstil sollte genauso ausgewählt werden wie die Symbolkategorie aus dem Cheatsheet.

Andernfalls passiert dies, wenn wir das Icon-Asset und das Schriftformat nicht aufeinander abstimmen.

Wenn Sie sich um die oben genannten Schritte kümmern, würde dies die Arbeit erledigen und in Ihren Webdesigns problemlos funktionieren. Diese Methode wird als sehr flexibel bei der Arbeit mit Symbolen in Webflow angesehen. Basierend auf den Entwicklungsfähigkeiten und der Kreativität im Design gibt es viele Möglichkeiten, mit denen Sie intelligenter und schneller arbeiten können. In jedem Fall, wenn Sie Schwierigkeiten haben, uns zu kontaktieren, wir werden versuchen, Ihnen zu helfen.

Ressourcen für hochwertige Webflow-Symbole

Es gibt zahlreiche Ressourcen mit hochwertigen Symbolen, die Sie in Webflow kostenlos und Premium verwenden können. Zu den bekanntesten gehören:

• Google-Schriften
• Schrift Awesome
• Ikonen 8
• Ico Mond
• Fontello

Es gibt weitere Ressourcen, nach denen Sie suchen können, falls Sie mit den oben genannten nicht zufrieden sind.

Abschließend

Die Verwendung von Symbolen in Webflow ist entscheidend für die Entwicklung einer Website, die sowohl ästhetisch ansprechend als auch benutzerfreundlich ist. Denken Sie bei der Verwendung von Symbolen daran, dass Konsistenz, Zugänglichkeit, Skalierbarkeit, Kontext und Ladezeiten berücksichtigt werden sollten.

Designer sollten darauf achten, nicht zu viele Symbole, unnötige oder schwer zugängliche Symbole oder Rastergrafiken anstelle von vektorbasierten Symbolen zu verwenden, um schlechte Entwurfspraktiken zu vermeiden.