Typografie im UI-Design

Es mag unnötig sein zu sagen, dass das Wort eine Zelle der täglichen Kommunikation zwischen Menschen ist. Sprache oder Text, unser Wortgebrauch ist breit gefächert und — überraschenderweise — automatisch.

Das bedeutet, dass wir oft übersehen, wie viel Macht und Einfluss unsere Botschaft im Text auf jemanden haben kann, der liest. Wir vergessen oft, dass Wörter neben ihrer Bedeutung auch eine andere Dimension haben können — eine visuelle. Ja, heute haben wir es mit Worten zu tun — unserem wichtigsten Instrument zur Vermittlung von Gedanken und Ideen. Aber wir behandeln Wörter als Gestaltungselemente, die neben ihrer Bedeutung auch eine starke visuelle Wirkung auf den Betrachter haben. Wir beschäftigen uns mit der Rolle der Typografie im Design.

Typografie als Technik gibt es seit vielen Jahren. Die Menschen haben schon früh die vielen Rollen eines gut komponierten Satzes, einer Phrase oder eines Textes entdeckt. Abgesehen davon, dass wir unsere Gedanken mit anderen teilen, ist uns auch wichtig, wie wir klingen. Wir wollen unsere Botschaft organisieren und wissen, was sie für andere bedeutet. Mit anderen Worten, es kommt nicht mehr nur auf den Inhalt des Textes an. Was zählt, ist die Art und Weise, wie wir vermitteln, was wir zu sagen haben. Die Form des Textes, die Struktur, die Organisation und das Erscheinungsbild all seiner Elemente wurden zu einem wichtigen Bestandteil der Kommunikation. Auf diese Weise wird der Text zu einem Element im Dienste der Ästhetik und der gestalterischen Funktion. Es bietet ein echtes kleines Vermögen für Designarbeiten.

Nun, wer hat gesagt, dass ein Bild mehr sagt als Worte? Ein Wort ist ein Bild.

‍

Typografie im UI-Design

UI-Design bezieht sich auf das Design von Websites und Anwendungen. Es sind alle Produkte und Dienstleistungen gemeint, die in direktem Kontakt mit Kunden stehen. Deshalb muss das Design solcher Benutzeroberflächen perfekt auf eine einfache, übersichtliche und schnelle Bedienung abgestimmt sein. Das Gleiche gilt für Typografie im Webdesign und dergleichen.

Wenn Sie ein gut gestaltetes haben möchten Webseite oder Bewerbung, nehmen Sie die Regeln der Typografie ernst. Es darf nicht das Letzte im Designprozess sein oder einfach nur etwas, das zu anderen Designelementen passt. Mikro- und Makroorganisation des Textes sind wichtig, denn wenn Ihr Text chaotisch und schlampig ist, können Sie sicher sein, dass es den Benutzern egal ist, was Sie zu sagen haben.

Aus diesem Grund haben wir etwas für Sie herausgesucht - 5 durchdachte Typografieregeln im UI-Design. Schauen Sie sich also an, was wir herausgefunden haben!

5 Regeln der Typografie im UI-Design

• WAHL DER SCHRIFT. Zunächst wissen Sie vielleicht schon, dass Sie die richtige Schrift für Ihren Text auswählen müssen! Sicherlich haben Sie einige attraktive Designs gesehen und darüber nachgedacht, wie sehr die Buchstabenform den Eindruck von allem verändert. Wir sind uns einig, dass einige Schriften sehr cool und gut geformt sind, aber sie können schwierig sein. Wenn es um das UI-Design geht, sollte man sich an Schriften halten, die klar und lesbar sind. Dies sind die Serif- und Sans-Serif-Schriften. Sie unterscheiden sich darin, dass die Serif an den Enden der Buchstaben Bindestriche hat, die eine elegante Atmosphäre verleihen. Sans-Serif verfügt nicht über diese typografischen Merkmale und wird daher häufig in modernen minimalistischen Konzepten verwendet. Diese Buchstabenformen eignen sich perfekt für einen Standardlook, der nicht schwer zu lesen ist, und passen gut zu Designs verschiedener Marken. Es gibt auch verschiedene Schriftarten in den Schriften, sodass Sie sich keine Sorgen machen müssen, dass der Text eintönig aussieht.
  ‍Typischer Fehler: Menschen verlieben sich oft in dekorative Schriften. Obwohl sie vielseitig einsetzbar sind und gut aussehen, sind sie für das UI-Design oft nicht nützlich. Denken Sie daran, dass die Botschaft in erster Linie klar und lesbar sein sollte und nicht den künstlerischen Ausdruck widerspiegeln sollte. Es gibt natürlich Situationen, in denen kurvige dekorative Typografie in UI-Designs häufig verwendet wird, aber dies sind normalerweise kurze Phrasen oder Wörter, die von vornherein nicht informieren sollten.

• TYPOGRAFIE-HIERARCHIE. Apropos eintönig — entscheide, was im Text mehr und was weniger wichtig ist, weil nicht alles gleich aussehen kann! Wenn du Gedanken ordnest, entscheidest du ganz einfach, was dem Nutzer zuerst auffallen soll und was erst am Ende. Anschließend können Sie verschiedene Schriftgrößen, Leerzeichen, Farben und Positionen verwenden, um eine Informationshierarchie zu erstellen. Was wichtig ist, sollte ein größeres Format sein, an einer gut sichtbaren Stelle, vielleicht oben auf der Seite, mittig und dergleichen. Auf diese Weise leiten Sie den Benutzer beim Lesen der Inhalte der Website an, sodass er sie bestmöglich erlebt und versteht. Ziemlich cool, oder?

• TEXT. GRÖSSE UND AUSRICHTUNG. Seien wir ehrlich, die Textgröße kann (und sollte) variieren. Gemäß der von uns erwähnten Hierarchie sollten einige Teile des Textes, wie Überschriften und Unterüberschriften, größer sein. Die richtige Schriftgröße sollte auch von der Bildschirmgröße abhängen, auf der die Seite angezeigt wird. Es geht jedoch darum, relevante Informationen auf jedem Bildschirm einfach zu scannen. In jedem Fall sollte die Textgröße nicht weniger als 16 pt betragen! Dies ist sehr wichtig, wenn es um Typografie für die Website und Anwendungen geht. Wenn Sie möchten, dass die Buchstaben genau 16 Punkt groß sind, geben Sie als Größe für den Haupttext (Text) an, der eine etwas detailliertere Beschreibung enthält. Wenn wir über Textausrichtung sprechen, sprechen wir eigentlich von linksbündigem, rechtsbündigem, zentriertem und ausgerichtetem Text. Und wie Sie den Text auf der Seite wieder ausrichten, hängt vom Inhalt ab. Markante Gedanken und Botschaften stehen im Mittelpunkt! So kann sie jeder mit Sicherheit sehen. Solche Textteile sind normalerweise kürzer und prägnant, weil sie beim Leser den stärksten Eindruck hinterlassen. Stellen Sie sich das als kleine Pointen vor. Die Linksausrichtung ist Standard für die Typografie von Websites. Es wird für mehr oder weniger Text mit verschiedenen Informationen verwendet. Andererseits (wörtlich und bildlich) ist es möglich, den Text rechts auszurichten, was in einigen Fällen interessant sein kann. Rechtsbündige Kurznachrichten am Ende der Seite oder Kontaktinformationen sehen aus wie eine nette Ergänzung zum Haupttext. Der rechtsbündige Text ist jedoch bei Sprachen mit Schreibrichtung von rechts nach links am beliebtesten.

• LINIE. LÄNGE, HÖHE, ABSTAND. Die Länge der Zeile wird je nach Texttyp gekürzt. Beispielsweise unterscheidet sich die Typografie einer Website von der Typografie eines Blogs. Im Blog findest du immer längere Sätze und mehr Freiheit beim Schreiben (hehe), weil der Textinhalt weitaus umfangreicher ist. Beim UI-Design sollten die Sätze im Text etwa 70-80 Zeichen lang sein. Es reicht völlig aus, wenn der Benutzer die relevanten Informationen herausfindet, ohne sich beim Lesen zu verlieren. Und es reicht aus, wenn alle Typografie-Elemente Wirkung zeigen. Typischer Fehler: Du willst alles Relevante in zwei Sätzen zusammenfassen. Am Ende des Satzes können sich die Nutzer dann nicht einmal mehr daran erinnern, wie alles angefangen hat. Halte es kurz und mit klaren Gedanken. Der Zeilenabstand oder die Zeilenhöhe ist der Abstand zwischen zwei Zeilen im Text. Wenn Sie wissen, wie man diese einfachen Maßänderungen manipuliert, kann der Text viel besser lesbar werden. 130-180% des vertikalen Abstands werden für optimale Lesbarkeit und optimales Scannen empfohlen. Achten Sie bei der Auswahl der besten Schriftgröße für die Website besonders darauf. Beim Verkleinern der Schrift ist mehr Abstand zwischen den Zeilen erforderlich. Buchstabenabstand. Der Abstand zwischen den Buchstaben ist wichtig, insbesondere wenn Sie unterschiedliche Schriftgrößen und Schriftstärken verwenden. Verwenden Sie nämlich für größere Buchstaben engere Abstände und für kleinere Buchstaben einen lockeren Abstand, um den Eindruck zu verbessern.
  ‍Typischer Fehler: Die Leute denken oft, dass ein Wort besser lesbar ist, wenn die Buchstaben näher beieinander liegen, aber das ist möglicherweise nicht immer der Fall. Insbesondere bei schweren Schriften kann ein enger Buchstabenabstand das Auge belasten und das Lesen besonders wichtiger Textteile erschweren.

‍

• FARBEN. Vergiss sie nicht! Wie bei jedem Designteil können Farben das Gesamtbild verbessern oder beeinträchtigen. Sie sind die wichtigsten Elemente der Typografie. Wenn wir von der Hauptregel ausgehen, dass alles leicht lesbar sein sollte, dann sollten auch die Textfarben angenehm sein. Vor allem die Korrelation zwischen Text und Hintergrund. Die Text- und Hintergrundfarbe schaffen die gesamte Atmosphäre, in der sich der Leser befindet. Deshalb ist zu beachten, dass die häufigen Hintergrundfarben - Schwarz und Weiß - auf dem Bildschirm sehr hell sind. Da das Anschauen sehr anstrengend sein kann, werden einige sehr helle Töne anderer Farben anstelle von Weiß verwendet.
  In diesem Zusammenhang, bei der Erstellung des Logos und der Website unserer Broworks Studio, wir haben Dunkelgrau statt Schwarz verwendet. Auf diese Weise macht das Durchsuchen der Website viel mehr Spaß.
  Typischer Fehler: Die Leute möchten natürlich, dass eine bestimmte Farbe ihrer Marke auf der Website im Vordergrund steht. Was aber, wenn es nicht ganz zur Typografie des Textes passt? Erzwingen Sie diese Farbe nicht, wenn der Kontrast schlecht ist, da viele Farbnuancen in der Umgebung viel besser aussehen können. Die authentischen Farben der Marke werden nicht in Frage gestellt, während die Typografie viel effektiver wird.
  Kontrast. Der Kontrast geht mit der Farbgebung einher. Sie können die Farbopazität des Textes manipulieren und auf die Hauptteile des Textes hinweisen. Das Lesen kann noch angenehmer sein. Hellere und dunklere Texttöne in einer gesunden Kombination können einen wunderbaren Überblick über alles auf Ihren Seiten geben.

‍

Und das wäre alles!

Wenn Sie all dies berücksichtigen, besteht kaum eine Chance, dass die Typografie schlecht gestaltet ist. Im Gegenteil, diese Typografie-Tipps lassen den gesamten Web- oder App-Inhalt elegant und professionell aussehen. Langfristig basiert alles darauf, Ihre Botschaft klar und ästhetisch organisiert zu machen.

Nutzen Sie die Kraft der Typografie. Im Rest dreht sich alles um Kreativität!