Geheimnis Build-Design Schriften nr.3: Anwendung im Website-Design/App
Die Build-Design-Schriftfamilie ist eine Sammlung von Schriften, die Ihnen dabei helfen sollen, bessere Websites zu erstellen. In diesem Artikel behandeln wir die drei wichtigsten Arten von Build-Design-Schriftarten:
Es gibt viele verschiedene Arten von Build-Design-Schriftarten, die für die Verwendung in der Webentwicklung verfügbar sind, aber hier sind die drei wichtigsten:
Die erste Art von Build-Design-Schriftart wird als „Build-on-the-Fly“-Schriftart bezeichnet. Diese Schriftart dient als Platzhalter für den Inhalt Ihrer Website, sodass Sie schnell eine neue Seite erstellen oder neue Inhalte hinzufügen können.
Die zweite Art von Build-Design-Schriftart wird als „Build-on-the-Fly“-Textschriftart bezeichnet. Diese Schriftart dient als Platzhalter für den Inhalt Ihrer Website, sodass Sie schnell eine neue Seite erstellen oder neue Inhalte hinzufügen können. Die dritte Art von Build-Design-Schriftarten wird als „Auto-Complete“-Schriftart bezeichnet.
Diese Schriftart dient als Platzhalter für den Inhalt Ihrer Website, sodass Sie schnell eine neue Seite erstellen oder neue Inhalte hinzufügen können.
Wenn Sie mehr über das Erstellen von Websites mit Build-Design-Schriftarten erfahren möchten,
Wir haben uns die ersten beiden Artikel der Schriften-Reihe zur digitalen typography angesehen.. Nachdem Sie verstanden haben, wie Sie die Schriften auswählen und die Schriften integrieren, müssen Sie dieses Ergebnis als Nächstes auf die Designarbeit anwenden. Lass es uns mit uns in diesem Artikel herausfinden!
Wir und Sie haben zusammen 2 Themen von :“Geheimnis Build-Design Schriften nr.1: Auswahl der Schriftart„und“Geheimnis Build-Design Schriften nr.2: Schriftkombination“ durchgearbeitet. Wie versprochen und aufgrund der positiven Resonanz der Leser werden wir uns mit Thema 3 befassen
Die Art und Weise, wie unsere Augen lesen.
Unsere Design- und Typografie-Verarbeitungsarbeit optimiert nicht nur die Geschwindigkeit des Lesens oder Übertragens von Inhalten, sondern trägt auch dazu bei, die Zuschauer für den Text zu gewinnen und das Leseerlebnis komfortabler zu gestalten. Um dies zu tun, ist die zwingende Voraussetzung zu verstehen, wie Menschen wie „lesen“.
Lesen ist keine lineare Handlung. Stattdessen rollen die Benutzer eine Runde mit den Augen auf den Gesamtinhalt, den sie sehen, von Abschnitt zu Abschnitt, von Zeile zu Zeile. Gleichzeitig scannt und bewertet das Gehirn den gesammelten Augeninhalt, um zu sehen, ob er mit dem Suchziel übereinstimmt.
In der Tat, wenn wir das Design beobachten, ist es wahrscheinlicher, dass unsere Augen Überschriften linien und prominente Textcluster erkennen, sowohl in der Größe als auch in der Farbe. Und der Stopp wird der Inhalt sein, an dem sie interessiert sind, oder der dem Zweck der Suche von Anfang an treu bleibt.
Beim Lesen kleiner Zeilen erzeugt das, was das resultierende Auge zum verarbeitenden Gehirn schiebt, aufeinanderfolgende Informationsströme, und laut Forschung ist dieser Informationsfluss nicht kontinuierlich, da unsere Augen nur jeden kleinen Cluster sehen und dann zum nächsten Cluster übergehen können.
Wenn man einen so kleinen Bereich betrachtet, wird alles um ihn herum verschwommen, und laut Forschung wird das normale menschliche Auge nur etwa 4-5 Zeichen erkennen, aber die Geschwindigkeit des menschlichen Scannens ist immer noch sehr schnell, weil unser Gehirn durch das Bild erhalten wird, Wenn Sie klare Zeichen und verschwommene Zeichen hinzufügen, wird in Kombination mit dem nächsten klaren Bild, das während des Scans empfangen wird, der verbleibende Inhalt erraten.
*Illustration: Der Text zeigt deutlich an, dass im Bereich des menschlichen Auges die Umgebung verschwommen sein wird.
Wie der Bildschirm Text rendert
Heutzutage gibt es viele Menschen, denen es unangenehm ist, E-Books anstelle von Papierbüchern lesen zu müssen. Sie fühlen sich immer müde und unwohl, wenn sie auf dem Bildschirm lesen. Es ist verständlich, denn nach dem Wissen der Physik ist der Bildschirm die Lichtquelle, sendet selbst Lichtstrahlen in unsere Augen, und Papierbücher sind helle Objekte, wir sehen nur das Licht, das von ihm reflektiert wird. Da es sich um die Lichtquelle handelt, haben unsere Augen, abhängig von der Qualität des Bildschirms, unterschiedliche Erfahrungen, vom Panel, der Auflösung und der Fähigkeit, Farben anzuzeigen,… Sie alle haben einen eindeutigen Einfluss auf das Erlebnis des Betrachters.
Diese Faktoren zwingen Designer, genau darauf zu achten, wie die von ihnen entworfene Typografie auf dem Bildschirm angezeigt wird. Der Leser scannt die auf dem Bildschirm gerenderten Dinge sehr schnell und hört bei den kleinen Details auf, an denen er interessiert ist. Neben dem Design müssen wir also auch verstehen, wie der Text auf dem Bildschirm angezeigt wird, um das Hindernis für die Leseerfahrung des Endbenutzers zu minimieren.
Wir müssen wissen, dass Schriftarten als Vektoren entworfen und gespeichert werden. Wenn wir den Bildschirm jedoch so geben, dass wir ihn sehen können, wird er in Rasterform gerendert, was die Art der Anzeige ist, die stark von der Bildschirmauflösung, aber insbesondere von der Anzahl der Pixel abhängt: Je höher der Auflösungsbildschirm, desto mehr Pixel, desto schärfer der gerenderte Text und umgekehrt. Und so oder so, der Wechsel von Vektor zu Raster bedeutet einen Rückgang der Bildqualität.
Außerdem wird jeder Bildschirm, jedes Betriebssystem ein anderes Rendering haben, und wir sind gezwungen zu akzeptieren, dass die gleiche Datei, aber manchmal auf unserem Bildschirm sehr scharf sehen, dass der Bildschirm des Kunden das Wort „kaputt“ sieht. Um dies zu minimieren, verwenden die Leute oft Anti-Aliasing und Hinting, um die Zeichen klarer zu machen.
Anti-Aliasing
Wenn Sie die Pixel in dem Bereich platzieren, in dem der Buchstabe Platz auf dem Bildschirm einnimmt, gibt es Bereiche, in denen sich das Pixel gegen den Umriss des Zeichens befindet – Kurven, die die Pixelquadrate auf dem Bildschirm durchschneiden. Dies führt dazu, dass das Wort, wenn gerendert wird, gezackte Ränder erscheint.
Bei der Verwendung von Anti-Aliasing, das grob als gezackt verstanden wird, verwandeln Benutzer Pixel, die sich nicht im Umriss befinden, in Grau, während das Pixel in der Kontur schwarz ist. Auf diese Weise wird der gezackte Rand in den Hintergrund verwischt und was wir sehen können, ist, dass der Buchstabe im Grenzbereich viel glatter ist, von wo aus sich der Endbenutzer weniger unwohl fühlen wird, anstatt wie zuvor auf die „Augenspitzen“ schauen zu müssen.
Anspielend
Wie bereits erwähnt, hat die Bildschirmauflösung einen großen Einfluss darauf, wie Wörter wiedergegeben werden. Je niedriger die Auflösung, desto weniger Pixel gibt es, um den Charakter darzustellen.
Um dieses Defizit auszugleichen, haben Schriften designer versucht, die Zeichenumrisslinien „umzuformen“, und der Prozess wird als Hinting bezeichnet – das „Formen“ der Zeichenumrisse in einen pixeligen Buchstabenstil, der sie auf einem Bildschirm mit niedriger Auflösung leichter lesbar macht.
So erstellen Sie eine Typografiehierarchie im Webdesign
Wir verstehen den menschlichen Lesemechanismus. Wenn Sie dies im Design anwenden, können die Informationen visueller dezentralisiert werden und gleichzeitig die Leser schneller scannen.
In den vorherigen 2 Artikeln haben wir Ihnen Vorschläge gemacht, um die Schriften auszuwählen und die Schriften zu kombinieren. Sobald wir das richtige Schriftpaar haben, werden wir fortfahren, die Ebenen der Buchstaben aus diesen beiden Schriftarten zu erstellenGesichter, die im Design verwendet werden sollen, und diese Methode kann immer noch genauso angewendet werden, wenn nur 1 Schriftart auf der gesamten Website verwendet wird.
Abschließende Worte
Also gingen wir gemeinsam durch die digitale Typografie-Serie. Wir hoffen, dass diese Serie zu einem Handbuch für Designer wird, die sich mit Typografie im Allgemeinen und der Auswahl und Verarbeitung von Schriften im Besonderen beschäftigen. Wir sehen uns im nächsten Beitrag!
Sie können mit uns gehen, um viele andere Themen von schriftarten123.com uns zu lernen
Vielen Dank für das Lesen dieses Beitrags!