Grundlagen der UI-Typografie

1. 00 Grundlagen der Typografie: Willkommen zu diesem umfassenden Kurs über die Grundlagen der UI-Typografie Typografie ist ein Schlüsselelement im Design, Ihrer Arbeit Leben einhaucht und Ihr Publikum anleitet In diesem einstündigen Kurs möchte ich Ihnen einen Überblick über eher technische Seite der Einrichtung von und der Arbeit mit Typografie im Internet Wir beginnen mit den Grundlagen, z. B. wo man Schriften findet, wie viele man für ein gutes UI-Setup benötigt und warum Superfamilien so fantastisch sind Ich zeige Ihnen, wie Sie eine solide Hierarchie erstellen können, indem Sie eine Typenskala auf verschiedene Arten einrichten eine Typenskala auf verschiedene Arten einrichten , auf die Sie das tun könnten Wir werden lernen, wie man Textilien effektiv benennt und zeigen, dass wir uns nicht in die Code-Setup und Suchmaschinenoptimierung einmischen . Und ich werde zeigen, warum es so wichtig ist , RM-Einheiten anstelle von Pixeln zu verwenden , sobald Ihr Design im Code zum Leben erweckt wird. Wir werden etwas über Schriftstärke und variable Schriften lernen, und ich werde erklären, wie die Zeilenhöhe in CSS funktioniert und was das für Ihr Typografie-Setup bedeutet Wir werden auch untersuchen, wie wichtig der Farbkontrast ist und wie man ihn überprüft und dokumentiert Und vor allem werden wir uns genauer ansehen, wie man mit Typografie auf verschiedenen Bildschirmgrößen umgeht Dazu gehören die Untersuchung von Setups mit Breakpoints sowie ein modernerer Ansatz für flüssige Typografie mithilfe von Der Fokus liegt zwar auf dem theoretischen Aspekt, die Lücke zwischen Design und Code überbrückt, wir werden auch einen Blick auf die praktische Umsetzung mit Tools wie Figma werfen praktische Umsetzung mit Tools Von der grundlegenden Texteinrichtung zwei fortgeschritteneren Techniken wie der Verwendung von Stilen, Variablen und Modi Egal, ob Sie ein Anfänger oder ein erfahrener Designer sind, diese Kurse sind darauf zugeschnitten, Ihnen zu helfen, Ihre typografischen Fähigkeiten und Ihr technisches Setup zu verfeinern Ihre typografischen Fähigkeiten und Ihr technisches Setup Dies ist ein Kurs von MonaRo von MonaRo A. 2. Übersicht: Es gibt wohl kein Thema in der Designbranche von besser zu bedienenden Designs umgeben ist als Typografie Lass dich nicht einschüchtern. Es geht nicht darum, einen Doktortitel zu bekommen. Es geht darum, ein paar Grundregeln zu verstehen , um sicherzustellen, dass Ihre Typografie online gut aussieht Und ich werde es dir zeigen. Das Wichtigste ist zu verstehen , dass die Leute dazu neigen, Text zu scannen, anstatt jedes einzelne Wort online zu lesen . Worum geht es in diesem Text also? Ja, das war genug. Und worum geht es in diesem Text? Es ist genau dasselbe, aber wie Sie sehen können, sieht es ganz anders weil es eine funktionierende Hierarchie hat. Wir haben viele Elemente wie Größe, Gewicht, Farbe, Position und Abstand, um diese Hierarchie zu erstellen, und wir werden sie uns alle genauer ansehen. Es ist mir auch sehr wichtig , Ihnen ein wenig zu zeigen , wie das im Code funktioniert, um unser Setup besser zu übersetzen und zwischen Design und Entwicklung zu kommunizieren . In diesem Kurs werden wir also über Schriften und Schriften sprechen und darüber , was der Unterschied eigentlich ist Serif und die sogenannten Superfamilien. Wir werden besprechen, wo wir Schriftbilder finden, die wir verwenden können und wie viele wir brauchen, damit ich sie richtig entwerfe verwenden können und wie viele wir brauchen, damit ich sie richtig Wir werden gemeinsam eine Typenskala einrichten, und ich werde Ihnen verschiedene Möglichkeiten zeigen, wie Sie das tun können. Ich werde Ihnen erklären, warum wir RM für Code und Pixel verwenden , wenn wir Größen für die Programmierung definieren. Ich werde ein Wort zur Benennung haben und warum es so wichtig ist, sie richtig zu machen. Wir werden über Stärke , Zeilenhöhe und Linienlänge sowie Leerraum sprechen. Und wir werden über Kontrast sprechen, ein sehr wichtiges Thema, wenn es um Barrierefreiheit geht. Und das ist sehr wichtig und wir werden uns mit responsiver Typografie befassen , um sicherzustellen, dass Ihr Text auf allen Bildschirmgrößen gut aussieht Dabei werden wir sowohl das traditionelle Setup mit Breakpoints als auch einen moderneren Ansatz mit CSS-Clamp betrachten traditionelle Setup mit Breakpoints als auch einen moderneren Ansatz und besprechen, wann es sinnvoll ist, was zu verwenden? Während sich dieser Kurs auf theoretische Aspekte konzentriert , werfen wir nebenbei auch einen Blick in die praktische Umsetzung mit Tools wie Figma, werfen wir nebenbei auch einen Blick in praktische Umsetzung mit Tools wie von der grundlegenden Texteinstellung bis hin zu fortgeschritteneren Techniken wie der Verwendung von Stilen, Variablen und Modi sowie Anpassung an die Einstellungen für responsives Design Und natürlich jede Menge Tipps und Tricks sowie einige Beispiele aus der Praxis. 3. 02 typefaceandfont en audio: Schrift und Schrift. Was ist eine Schrift? Es handelt sich um eine Reihe von Designzeichen, einschließlich Buchstaben, Zahlen und Satzzeichen In dieser Präsentation verwende ich eine Schrift Eine Textphase umfasst Variationen wie extra fett, fett, normal, kondensiert usw. Bei einer Schrift handelt es sich dagegen um einen bestimmten Stil und eine bestimmte Größe einer Textphase Während sich die Typphase also auf das Design der Zeichen bezieht, bezieht sich die Schrift auf einen bestimmten Stil und eine bestimmte Größe dieses Designs. Zum Beispiel Poppins Bold 16 Point, das ist eine Schrift. Obwohl der richtige Begriff Schrift ist, meinen viele Menschen gern beides Es ist eine häufige Verwechselung, aber es ist keine große Sache, solange Sie den Unterschied in Ihrer täglichen Arbeit verstehen 4. 03 Serif, Sans Serif & Superfamilies: Serif, San Serif und Superfamilien. Es gibt viele Kategorien von Schriften, aber diejenigen, die Sie wirklich kennen sollten sind Serif und San Serif, da sie für das Verständnis der Rolle der Typografie in Bezug auf Lesbarkeit und Designästhetik von grundlegender Bedeutung sind Typografie ziemlich einfach, den Unterschied zwischen ihnen zu erkennen Es ist ziemlich einfach, den Unterschied zwischen ihnen zu erkennen. Serapons enthalten am Ende des Buchstabens einen zusätzlichen Strich oder ein dekoratives Element, das die Lesbarkeit von gedrucktem Material verbessern kann , indem es das Auge entlang dieser Zu den klassischen Beispielen gehören Times New Roman und Garamond. Wenn Sie wissen, wann und warum Sie die einzelnen Typen verwenden kann sich dies erheblich auf die Effektivität Ihres Designs auswirken Egal, ob Sie einen traditionellen Look mit Serapons oder einen moderneren Look mit einem San Seraph anstreben Serapons oder einen moderneren Look mit einem San Lassen Sie uns das etwas besser verstehen . San SRF-Schriften, die sich durch ihr klares und modernes Erscheinungsbild auszeichnen , sind eine beliebte Wahl für digitale Displays und Online-Inhalte Bemerkenswerte Beispiele sind Helvetica und Inter. Diese Schriften vermitteln Informationen schnell und effektiv nach Größe daher ideal für kleinere Bereiche, z. B. für Beschriftungen unter Symbolen oder generell für digitale Benutzeroberflächen Sie bieten eine gute Lesbarkeit auf verschiedenen Bildschirmgrößen und Auflösungen Die Schriftfelder mit ihren dekorativen Elementen an den Buchstabenenden bieten ein traditionelleres und raffinierteres Aussehen Dieser klassische Stil ist ideal eine Atmosphäre des Vertrauens und der Autorität zu schaffen auch bei digitalen Inhalten eine Atmosphäre des Vertrauens und der Autorität zu schaffen. Sie können auch dazu beitragen, Websites und Apps einen Hauch von Eleganz und Formalität zu verleihen , insbesondere in Umgebungen wie Online-Magazinen, akademischen Plattformen und professionellen Dienstleistungen Serapons werden zwar oft mit Printmedien in Verbindung gebracht, können aber auch im digitalen Design verwendet werden Ihre detaillierten Seraps können dabei helfen , den Blick entlang der Textzeilen zu lenken, sodass sie sich für längere Lesevorgänge auf Bildschirmen mit höherer Auflösung eignen , wo die Lesbarkeit verbessert Sie können auch sowohl die Era- als auch die San Sera-Schrift in Ihr Design integrieren und dabei zwischen dem Haupttext der Überschrift wechseln, zwischen dem Haupttext der Überschrift wechseln, oder vielleicht einen Serafond für ein herausragendes Zitat wählen Um ein harmonisches Design zu erzielen, sind jedoch sorgfältige Anpassungen erforderlich. Schriftgrößen können beispielsweise zwischen den beiden Stilen unterschiedlich angezeigt Was für den einen funktioniert, passt möglicherweise nicht zum anderen. Wenn Sie erwägen, Seraph- oder San Sera-Schriften zu mischen, empfehle ich die Verwendung einer sogenannten Superfamilie Wie der Begriff schon sagt, handelt es sich bei einer Superfamilie um eine Sammlung von Schrifttypen, die so gestaltet sind, dass sie sich harmonisch ergänzen, obwohl es sich bei einer um Seraph und bei der anderen um San-Serp diesen Überfamilien gehören häufig zusätzliche Varianten, wie z. B. abgerundete, komprimierte oder schräge Dank der gemeinsamen DNA, wie z. B. der gleichen Basis, Größe, Proportionen und Abstände, können Sie sie problemlos mischen ohne die allgemeine Harmonie Ihres Designs zu verlieren 5. 04 Wo man Schriftarten findet: Wo finde ich fs. Es gibt drei Orte, von denen Sie Ihre Schriften beziehen können Wenn Sie für ein großes Unternehmen arbeiten, haben diese möglicherweise ihre eigene benutzerdefinierte Schrift , die sie Ihnen zur Verfügung stellen Zum Beispiel haben AB and B eine Cereali-Schrift, eine wirklich schöne Schrift Nun ist es wichtig zu wissen, dass Sie die Schrift zwar auf Ihrem Computer installiert haben, verwenden dürfen sie aber nur mit dieser bestimmten Firma Die zweite Option ist der Kauf einer Lizenz. Es gibt viele Seiten wie MyFons oder Fun Shop denen Sie stöbern und tolle Schriften finden können . Lass es mich dir zeigen. Hier sind wir in meinen Schriften, und Sie können Schriftarten nach Kategorien, Bestsellern usw. durchsuchen. Ich werde mich einfach für die Kategorie entscheiden und sagen, dass wir nach einer Sansa-Schrift suchen Dann haben wir hier auf der linken Seite mehr Filter , also wirklich praktisch Wir können hier unten verschiedene Schriftarten sehen und wir bekommen eine wirklich schöne Vorschau. Lass uns einfach diesen nehmen. Ich mag diese Beispiele sehr, die sie uns geben damit Sie eine gute Vorstellung davon bekommen, wie Sie damit entwerfen können. Hier unten findest du Informationen zu den verschiedenen Schriftstärken und du kannst auch sehen, ob du ein Familienpaket oder einzelne Stile möchtest . Normalerweise ist es sinnvoll, sich für das Familienpaket zu entscheiden, und Sie erhalten die technischen Spezifikationen und, was sehr wichtig ist, die Lizenzierung. Das müssten Sie wirklich mit Ihrem Kunden besprechen, um sicherzustellen, dass Sie das, was Sie kaufen, das Recht haben, es zu verwenden und dass Sie sich der Kosten bewusst sind. Sie können dann einfach auf „nach“ klicken, sobald Sie sich dafür entschieden haben, und dann können Sie wählen, wofür Sie diese Schrift verwenden möchten. Und dann wollen wir zum Beispiel eine Desktop-Version, mit der wir entwerfen können, und wir möchten diese in eine Website einbetten, und dann können Sie hier sehen, dass dies pro Views berechnet wird. Sie müssten dies auf Ihrem Computer installieren um darauf eine UI-Design-Software wie IGMA zugreifen zu Die dritte Option wird die Verwendung einer kostenlosen Schriftart sein. Einige sind bereits auf Ihrem Computer vorinstalliert , wie Aerial. Sie sind als Ausweichschrift in Ordnung, aber Sie werden vielleicht feststellen, dass sie für Ihr UI-Design nicht ganz ausreichend ist für Ihr UI-Design nicht ganz ausreichend Google Fonts ist ein großartiger Ort für kostenlose Schrifttypen. Es ist sehr beliebt, bietet eine große Auswahl und ist sehr einfach zu bedienen. Seien Sie sich jedoch bewusst, dass jedes Mal, wenn Sie etwas kostenlos online erhalten, normalerweise mit einem Datenaustausch verbunden ist. Das ist auch hier der Fall. Es ist eine sehr geringfügige, absolut nichts Tragisches, aber Sie sollten Ihren Kunden trotzdem darauf aufmerksam machen wenn Sie eine Google-Schrift verwenden möchten. Das gilt übrigens auch für Google Maps. Schauen wir uns an, wie die Google-Schrift funktioniert. Am wichtigsten, da es viele gibt, wenn Sie auf Filter klicken, können Sie sie mit den verschiedenen Schriftarten füllen. Sagen wir einfach, wir wollen nur den Sanserf oder wenn du nach einer bestimmten Sprachunterstützung suchst, dann ist das wirklich praktisch Klicken wir jetzt auf den ersten hier oben. Eigentlich nehme ich Open Sans, das gefällt mir sehr gut. Dann kannst du dir eine Vorschau holen. Sie können auch den gewünschten Text eingeben. Wenn wir auf GFont klicken, erhalten wir weitere Informationen. Wenn Sie mehr wissen möchten, klicken Sie auf Design, und das wird für Sie relevant sein Wir erhalten auch alle Informationen, die die Entwicklung benötigt. Wahrscheinlich holen sie sich dann den Einbettungscode, und dann sind hier alle technischen Informationen. Sie müssen buchstäblich nur wissen , welches Sie verwenden möchten. Übrigens, wenn Sie in Figma arbeiten, müssen Sie nichts tun Sie müssen die Schrift nicht einmal herunterladen, da alles in Figma bereits vorinstalliert ist in Figma bereits vorinstalliert solange Sie Google Fonts verwenden 6. 05 Wie viele Schriften: Wie viele Schrifttypen sollten Sie verwenden? Wie viele Schriftflächen sollten oder könnten Sie also in Ihrem Design haben? Es wird generell empfohlen , nicht mehr als zwei zu verwenden. Möglicherweise haben Sie eine sehr dominante, sogenannte Display-Schrift , die Teil des Brandings ist und nur Ihre Hauptüberschriften wie Handschrift oder etwas ganz Besonderes verwendet Ihre Hauptüberschriften wie , die nicht wirklich lesbar ist und bei kleinem Text überwältigend wäre Für alle anderen Texte würden Sie dann eine weitere Schrift hinzufügen, würden Sie dann eine weitere Schrift hinzufügen die gut lesbar und einfach zu verwenden ist Sofern Sie sich nicht wirklich mit Typografie auskennen oder einem bestimmten Branding folgen müssen, würde ich empfehlen, sich lieber von diesen ausgefallenen Display-Schriften fernzuhalten von diesen ausgefallenen Display-Schriften fernzuhalten Für ein solides Design braucht man sie nicht wirklich. Wenn Sie jedoch gemischte Schrifttypen wie Saraf, San Saraf, abgerundet usw. haben möchten , würde ich Ihnen empfehlen, die Verwendung einer Superfamilie in Betracht zu ziehen , da sie sehr gut zusammenpassen Das wäre also ein weiterer Grund warum Sie zwei Schrifttypen haben könnten Sie jedoch keine Displayschrift verwenden oder Kategorien wie Serif und San Serif mischen, werden Sie wahrscheinlich zwei sehr ähnliche Schrifttypen haben, und dann ist es viel besser, nur eine zu Ich persönlich empfehle , zu beginnen und sich wann immer möglich an nur eine Schrift zu halten nur eine Schrift zu Um ehrlich zu sein, verwende ich selten mehr, und Sie können diese Variante trotzdem hinzufügen , indem Sie unterschiedliche Größen, Gewichte und Farben verwenden , um Ihre Hierarchie zu erstellen Und das ist normalerweise mehr als genug. Zusammenfassend lässt sich sagen, dass es sei denn, Ihr Branding verlangt nach einer markanten Displayschrift oder Sie möchten Stile wie Serif und San Serif mischen, wobei ich empfehlen würde, sich mit Superfamilien zu befassen, halten Sie sich an eine Schrift oder Sie möchten Stile wie Serif und San Serif mischen, wobei ich empfehlen würde, sich mit Superfamilien zu befassen, halten 7. 06 The typescale: Erstellen einer Typskala bedeutet, die Textgrößen einheitlich zu organisieren , was für die Erstellung einer Hierarchie von entscheidender Bedeutung ist Es ist, als würde man jedem Text seine eigene Wichtigkeitsstufe geben, wodurch alles leichter verständlich und visuell ansprechender wird. Wenn wir eine Schriftskala einrichten, beginnen wir in der Regel mit der Festlegung einer Basisschriftgröße, die normalerweise mit unserer Textgröße übereinstimmt, da sie am häufigsten verwendet wird. Eine beliebte Option sind 16 Pixel, was ebenfalls einem RM entspricht, der Standardgröße, die Browser verwenden Sie können die Größe natürlich ändern, wenn Sie möchten, aber es ist oft am besten, bei dieser Grundgröße von 16 Pixeln oder einem RAM zu bleiben dieser Grundgröße von 16 Pixeln oder einem RAM Sie können es natürlich auch größer machen. Das erleichtert das Lesen. Ich persönlich halte mich gerne daran, weil es auch sehr gut zu meinem allgemeinen System von Vielfachen von Vier und Acht passt sehr gut zu meinem allgemeinen System , das ich in meinem gesamten Design für Ausrichtung und Abstände verwende meinem gesamten Design für Ausrichtung und Sobald wir also unseren Haupttext festgelegt haben, können wir unsere Skala darauf ausrichten. Es gibt nicht den einen Weg, das einzurichten. Aber zumindest würde ich einige Schlagzeilen hinzufügen. Button-Links und vielleicht eine Bildunterschrift. Und das können Sie natürlich weiter an Ihre Bedürfnisse anpassen. Zum Beispiel könnten Sie mehr als eine Version für Ihren Haupttext haben . Dies könnte in der Größe variieren. Oder in meinem Beispiel verwende ich hervorgehobene und einige reguläre Stile. Darüber hinaus müssen Sie möglicherweise kursiv formatieren Zitate kursiv formatieren oder Überschriften in Anzeige- und normale Kategorien unterteilen in Anzeige- und normale Anzeigenüberschriften wären ein großer Blickfang, während normale Überschriften sich nahtloser in den Textfluss einfügen würden nahtloser in den Textfluss Das hängt also wirklich stark davon ab, was Ihr Design benötigt. Aber obwohl Sie Ihre Schriftskala beliebig erweitern können , würde ich immer empfehlen, sie so einfach und kompakt wie möglich zu halten . In einem Sternblatt stellen wir auch allgemeine Informationen zur Verfügung. Zum Beispiel die Schriftfamilie, die wir verwenden werden, in meinem Fall Poppins. Wir möchten einige Informationen über die Größe geben und darauf hinweisen, Wir möchten einige Informationen über die Größe geben dass wir in vielen Benutzeroberflächenprogrammen immer noch Pixel verwenden, um dies zu definieren In CSS verwenden wir RAM. Ich persönlich bevorzuge es daher Gründen der Übersichtlichkeit, beide Maße anzugeben. Ein RM entspricht 16 Pixeln, es ist also ziemlich einfach, dies aus Ihren Pixelwerten zu berechnen . Zusätzlich möchten wir das Gewicht mitteilen. Auch hier gebe ich gerne den Namen an, den ich in meiner UI-Software verwende , sowie die CSS-Nummer. Außerdem fügen wir Informationen zur Zeilenhöhe und zum Zeilenabstand hinzu. Ich war hier ein bisschen faul, und in meinem Beispiel habe ich nur etwas Abstand für meine Schaltfläche hinzugefügt. Und schließlich fügen wir auch eine Vorschau unseres Textes hinzu. Normalerweise beginnen wir bei der Festlegung unserer Typskala mit der kleineren Bildschirmgröße. Bei Bedarf können wir Haltepunkte hinzufügen und angeben, wie sich unser Fond an verschiedene Größen anpasst Dafür gibt es verschiedene Herangehensweisen. Einige modernere benötigen nicht einmal mehr Breakpoints, aber ich werde das in einem separaten Video besprechen Dieser Überblick darüber, wie unsere Typografie in unseren Produkten in verschiedenen Größen funktioniert , ist also unseren Produkten in genau das, wonach wir suchen Jetzt können Sie mit Ihrem Design beginnen, indem Sie eine Schriftskala erstellen, aber vielleicht möchten Sie auch anfangen, frei zu entwerfen Sobald Sie sich Ihr Design die richtige Richtung einschlägt, möchten Sie dies vielleicht ein wenig in einer Schriftskala organisieren wenig in einer Schriftskala Und das können Sie auf jeden Fall tun. Ich gehe also so vor, dass ich mein Design wirklich locker aufstelle Und wenn ich dann das Gefühl habe, dass ich das übersichtlicher gestalten möchte, suche ich mir die verschiedenen Bereiche heraus Also suche ich mir einfach nach dem Zufallsprinzip verschiedene Überschriften und Haupttexte und ordne sie an. Ich kann auch sehen, welche sich ähneln, also kombiniere ich sie zu einer Größe und kann jetzt eine Hierarchie erstellen. Sobald ich die Hierarchie habe und sehe, welche Stile ich benötige, gebe ich ihnen einige Namen, gebe ihnen eine Reihenfolge, und ich kann sie von hier aus nehmen und sie in die Typskala umwandeln, die ich benötige. Sie können so vorgehen, wie es für Sie am besten ist. 8. 07 Verschiedene Skalierungssysteme: Verschiedene Arten der Skalierung. Sie können eine Größe für Ihre Typografie-Skala völlig zufällig wählen , wenn Sie möchten. Ehrlich gesagt, das würde gut funktionieren Aber in Ihrem Design ist es normalerweise am besten, ein gewisses System und Konsistenz zu haben Ich zeige Ihnen zwei beliebte Ansätze eine feste Skala mit dem Acht-Punkte-Skalierungssystem und eine modulare Skala mit einem Verhältnis. Ich mag es, die Dinge in meinem Design einfach zu halten , indem ich für alle meine Größen, einschließlich Typografie, ein Vielfaches von vier oder acht Normalerweise halte ich mich für meine Schriftgrößen an Vielfache von acht, z. B. 16, 24 und 32. Ich bin nicht zu streng, wenn ich es also für das gewünschte Erscheinungsbild verwechseln muss, mache ich einfach einen größeren Sprung, aber ich behalte trotzdem die Konsistenz Das macht es auch ziemlich einfach, die Linie I auf ein Vielfaches von Vier zu setzen, wodurch ein schöner vertikaler Rhythmus im Design entsteht. Es müssen nicht vier und acht sein, aber Sie werden feststellen, dass diese Zahlen wie ein Zauber wirken. Ein anderer Ansatz ist die Skalierung mit einem Verhältnis. Dadurch wird das proportionale Verhältnis sehr gut aufrechterhalten. Sie beginnen immer noch mit Ihrer Basisgröße und multiplizieren dann nach oben, und multiplizieren dann nach oben wobei das gewählte Verhältnis exponentiell wächst Sie können mit verschiedenen Verhältnissen spielen, um das Wachstum anzupassen. Beliebte Quotienten sind das dritte, das perfekte, fünfte und das Tor und das Verhältnis, aber es gibt noch viel mehr zur Auswahl. Es gibt großartige Online-Tools , die Ihnen bei der Einrichtung helfen können, sodass Sie das nicht von Hand ausarbeiten müssen . Lass es mich dir zeigen. Es gibt viele verschiedene Optionen, und ich werde den Typ Scale Com für mein Beispiel verwenden. Lassen Sie auf der Website den Haupttext unangetastet, aber direkt unten in der Drop-down-Liste können Sie verschiedene Verhältnisse wählen und mit ihnen spielen Sie können auch eine andere Schriftart wählen sofern es sich um eine Google-Schrift handelt, mit der Gewichtung spielen und so weiter Auf der rechten Seite sehen Sie eine Demo, wie die Seite aussehen würde. Sie können dies auch in eine mobile Ansicht ändern. Das ist wirklich nett , weil Sie eine gute Vorstellung davon bekommen , ob Sie nach der Hierarchie suchen. Sie können zwischen RM und Pixeln wählen, und Sie können diese Informationen einfach auswählen und sie sowohl in Ihr Design als auch in Ihren Code übersetzen. Wenn Sie sich für die Pro-Version entscheiden, erhalten Sie hier auch die Codefragmente Es ist nicht so, dass ein Ansatz besser ist als der andere. Sie könnten das sogar mischen und das Beste aus beiden Welten nutzen. Finden Sie eine Skala, die Ihnen gefällt, und passen Sie dann die Zahlen auf das nächste Vielfache von Acht an. Die Welt liegt dir zu Füßen. Der wichtige Teil ist also, dass Sie eine klare Hierarchie haben. Denken Sie daran, dass ein System dazu da ist , Ihnen zu helfen, sich nicht einzuschränken. 9. 08 Warum rem und nicht px: Was ist RAM und warum ist es wichtig? RAM ist eine CSS-Einheit, die die Schriftgröße relativ zum Stammelement der Webseite misst . Normalerweise das HTML-Tag. Die Stammschriftgröße ist im Grunde die Standardschriftgröße einer Webseite. Diese ist normalerweise auf 16 Pixel eingestellt. Es ist wie der Ausgangspunkt für alle anderen Schriftgrößen auf der Seite. Alles andere wird also anhand dieser Größe berechnet. Wir können diese Größen natürlich für unser Design ändern, aber selbst wenn wir nichts definieren, der Browser bereits seine eingebaute Hierarchie Es ist einfach, zwischen RAM und Pixeln umzurechnen , da ein RM 16 Pixeln entspricht 1,5 RM wären also 25 Pixel und so weiter. Benutzer können die Größe jedoch anpassen. In Chrome können Benutzer beispielsweise das Einstellungsmenü aufrufen, das Erscheinungsbild auswählen und die Schriftgröße anpassen. Dies ist entscheidend für Menschen mit Leseschwierigkeiten. Wir können nicht wissen, ob sie diese Einstellung oder Zoom verwenden, aber es ist wichtig, diese Einstellungen zu respektieren , falls sie gesetzt sind. Stellen Sie sich vor, Sie definieren alle Schriftgrößen in Pixeln. Nehmen wir der Einfachheit halber an, H eine Überschrift hat 48 Pixel und Ihr Absatztext P 16 Pixel. nun Pixel als Schriftgröße verwenden, verhält sich dieser Wert wie ein fester Wert und überschreibt die Browsereinstellungen. Es ist, als ob sie sich von der ursprünglichen Schriftgröße trennen. Wenn ein Benutzer beispielsweise in unserem Beispiel die Stammschriftgröße 16-24 angepasst hat, bleibt die angezeigte Schrift immer noch bei 16. Dies führt zu einer Barriere bei der Benutzerfreundlichkeit , da sich der Inhalt nicht an die Vorlieben des Benutzers anpasst Aber wenn wir stattdessen RM verwenden , ist das eine andere Geschichte. Nehmen wir die Überschrift. In meiner Standardeinstellung, die die meisten Leute verwenden werden, drei RAM dreimal 60, also 48, und wir erhalten das gleiche Ergebnis wie zuvor mit Pixeln. Dem Benutzer, der ein RM auf 24 Pixel geändert hat, wird die Überschrift jetzt in einer größeren Größe von 72 angezeigt. Das Tolle daran ist, dass dadurch unsere Hierarchie erhalten bleibt da die verschiedenen Größen weiterhin wie zuvor zueinander passen. Möglicherweise stoßen Sie auch auf EM-Einheiten oder -Einheiten. Der Unterschied zwischen RAM- und EM-Einheiten besteht , dass RM die Größe relativ zur Wurzelfondsgröße berechnet, während Einheiten die Größe relativ zur Fondsgröße des nächstgelegenen übergeordneten Elements berechnen relativ zur Fondsgröße des nächstgelegenen übergeordneten Elements berechnen Wenn die ursprüngliche Schriftgröße beispielsweise 16 ist, entspricht ein RM 16, unabhängig davon, wo er verwendet wird Einheiten können sich zusammensetzen , wenn sie in mehreren Elementen mit unterschiedlichen Schriftgrößen verschachtelt sind, und sie vom übergeordneten Element erben EM respektiert jedoch ebenso wie RAM die Voreinstellungen des Benutzers und ermöglicht flexible und anpassungsfähige Designs, ermöglicht flexible und anpassungsfähige Designs die auf den bevorzugten Einstellungen des Benutzers basieren Beide Einheiten haben ihre eigenen Stärken und Schwächen, je nachdem, wie sie eingesetzt werden Geschickte Front- und Entwickler gehen effektiv mit ihrer Kombination um, was für Designer in der Regel überhaupt kein Problem darstellt. Während Designer im Allgemeinen nicht einmal RAM berücksichtigen müssen, nehmen einige, wie ich, ihn gerne in unsere Typenskala auf, um die Verwendung verschiedener Einheiten durch Entwickler anzuerkennen. Und das ist wirklich gut, um Missverständnisse zu vermeiden, zum Beispiel, aber der Designer hat mir hartbeschichtete Werte gegeben Auf diese Weise machen wir wirklich deutlich, dass wir Pixel im UI-Design verwenden, weil es so eingerichtet ist, aber wir wollen trotzdem alle Benutzervoreinstellungen respektieren. Okay. 10. 09 Schriftstärke und variable Schriftarten: Schriftstärke. Unter anderem ist die Schriftstärke auch ein wichtiges Element Ihrer Schrift, um eine Hierarchie zu erstellen. In den meisten UI-Designprogrammen finden Sie jedoch ein Wort für das Gewicht. Also so etwas wie normal fett oder mittel. In CSS wird dies durch eine Zahl dargestellt. 400 ist zum Beispiel normalerweise normal oder normal und 700 fett. Sie können diese Gewichte nach Ihren Wünschen verwenden. , In den meisten Fällen werden Überschriften jedoch etwas fett gedruckt um sich von der Masse abzuheben, und Sie kopieren Text um etwas Normales herum mit manchmal ein paar fetten Markierungen Das Einzige, worüber Sie wirklich nachdenken sollten, ist, Ihren Text nicht zu leicht zu gestalten , um sicherzustellen, dass er lesbar bleibt. Es ist also eine gute Idee, für diese Dinge normal oder normal zu bleiben . Übrigens sind nicht alle Schriften strikt auf 100-900 eingestellt Vielleicht bekommst du auch so etwas. Es hängt wirklich von der Schrift ab. Und eine weitere wichtige Sache ist, dass nur weil Sie all diese unterschiedlichen Gewichte haben, das nicht bedeutet, dass Sie sie alle verwenden müssen . Lass mich dir zeigen warum. Hier bin ich also in Google Fonts und kann jetzt jede Schriftart auswählen, die mir gefällt. Nehmen wir einfach diesen hier. Wenn ich darauf klicke, kann ich die verschiedenen Gewichte sehen , die mit dieser speziellen Schrift einhergehen, und ich kann auf die G-Schrift klicken. Schauen wir uns nun an, was das eigentlich bedeutet. Schauen wir uns den eingebetteten Code an, den wir bekommen würden. Also hier kannst du das aktuell sehen. Dies beinhaltet all die verschiedenen Gewichte. Und was ich jetzt tun kann, ist auf Stile ändern zu klicken. Ich kann sie jetzt alle ausschalten, und du wirst sehen, dass standardmäßig nur die regulären aktiviert bleiben, und ich kann jetzt einfach die auswählen , die ich tatsächlich in meinem Design verwende. Und natürlich könnte ich jederzeit mehr hinzufügen, wenn ich sie später benötige. Nun, wenn Sie ein Design haben, bei dem Sie viele verschiedene Gewichte verwenden möchten und das quasi der Kern Ihres Designs ist, dann ist das auch in Ordnung und absolut möglich. Ich empfehle Ihnen, sich beispielsweise die Google-Schriftarten in den Filtern anzusehen Google-Schriftarten in und sich für eine so genannte variable Schriftart zu entscheiden. variabler Schrift handelt es sich also um eine Schriftart, die Bei variabler Schrift handelt es sich also um eine Schriftart, die die Anpassung von Gewicht, Breite und anderen Attributen über eine einzige Schriftdatei ermöglicht . Wie bei jeder Schriftphase ist dies also nicht immer für alle gleich. Klicken wir zum Beispiel hier auf Open Sans und wir können sehen, dass es drei Achsen hat. Wenn wir uns das ansehen, dann sieht es einfach so aus wie vorher, wir haben unsere unterschiedlichen Gewichte. Aber jetzt klicken wir auf die Schrift G und schauen uns den eingebetteten Code an, den wir erhalten. Wenn wir hier klicken, dann können Sie sehen, wir haben das Gewicht, wir haben die Breite und wir haben hier Kursiv. Das sind also die drei Achsen, die wir ändern können. Derjenige, der interessiert, ist das Gewicht. Wenn wir also auf einen Wert klicken, dann haben wir wie zuvor, wir klicken auf 300 400 oder so weiter, und das wird hier dargestellt. Was wir aber auch tun können, ist die volle Achse zu haben. Jetzt können Sie sehen, dass das so ist wie bei allen Backwaren, und wir laden nicht all diese verschiedenen Stile, und das ist nur in dieser einen Schrift Und beachten Sie, dass es 300 bis 800 heißt , wenn es um unsere Gewichtsachsen geht Das bedeutet, dass Sie diesen Wert nicht auf 300 400 und irgendwelche anderen Werte setzen müssen . Sie können diese Achsen frei wählen und Sie könnten etwas wie 415 wählen, und Sie können es wirklich, wirklich fein abstimmen. Denken Sie daran, dass nicht alle Browser das exakt gleich wiedergeben werden. Die Vorteile sind eine geringere Dateigröße im Vergleich zu mehreren statischen Schriften, die Flexibilität und das Design mit der Möglichkeit, wirklich fein abzustimmen, und Sie haben eine verbesserte Leistung auf Webseiten, da Sie die Ladezeiten verkürzen. 11. 10 Linienhöhe entmystifizieren: Die Linienhöhe verstehen. Beim Übergang vom Grafikdesign zum Webdesign werden Sie auf das entscheidende Konzept der Zeilenhöhe stoßen Dies ist ein CSS-Eigenschaftsschlüssel zur Bestimmung der Gesamthöhe einer Textzeile Sie können es sich als eine Kiste vorstellen. Es wird eigentlich als Zeilenbox bezeichnet , die einen Text mehr oder weniger vertikal sendet. Die Zeilenhöhe setzt sich aus der Schriftgröße selbst sowie aus zusätzlichem Abstand zusammen, der oben und unten hinzugefügt wird. Dieser Raum wird als führend bezeichnet. Und die Hälfte oben und unten heißt, Sie haben es vielleicht erraten, halb führend Dieser Raum ist sehr wichtig, um sicherzustellen, dass der Text sowohl visuell ansprechend als auch leicht lesbar ist, und trägt außerdem zu einer allgemeinen Barrierefreiheit bei . Schauen wir uns ein Beispiel an , um es besser zu verstehen. Die Schriftgröße meines Beispiels beträgt 24 Pixel, und ich möchte eine Zeilenhöhe von 1,5. Das heißt, wir rechnen 24 mal 1,5, und das entspricht 36. Die Höhe des Felds, das unseren Text enthält, ist also 36. Die Zeilenhöhe kann wie ein Multiplikator in Werten ohne Einheit ausgedrückt werden , genau wie wir es im Beispiel verwendet haben, Prozentwert oder als Pixelwert Während Sie in Ihrer Augensoftware vielleicht immer noch Pixelwerte verwenden, gewöhnen Sie sich daran, die Zeilenhöhe als Multiplikator und nicht als und nicht Prozentsätze funktionieren ganz gut, aber am häufigsten werden Sie in CSS wahrscheinlich Notationen ohne Einheiten sehen Die Zeilenhöhe, die Sie auswählen hängt stark von der Textphase, Schriftgröße und der Anwendung Sie werden jedoch wahrscheinlich feststellen, dass der optimale Wert in einem Bereich von 1,25 bis 1,75 liegt, was Ihnen viel Flexibilität bei Ihren Designs bietet Wenn das alles sehr neu für Sie ist, beginnen Sie einfach mit einem soliden Wert von 1,5 für Ihre Designs Das ist wirklich ein sicheres Bett, um dir den Einstieg zu erleichtern. Ihr Selbstvertrauen wächst, werden Sie sicherlich beginnen, Zeilenhöhen zu finden. Sie erhöhen sie für kleineren Text, um die Lesbarkeit zu verbessern , und reduzieren sie für Überschriften, um ein perfektes Gleichgewicht zu erreichen Denken Sie daran, dass die ideale Zeilenhöhe stark von der von Ihnen gewählten Schriftart abhängt. Es geht also darum, zu experimentieren und herauszufinden Bei Designs, die nur eine einzige Textzeile enthalten, könnten Sie versucht sein, Ihre Zeilenhöhe auf zwei — eins festzulegen jedoch, außer in seltenen Fällen, Ich würde jedoch, außer in seltenen Fällen, von diesem Ansatz abraten Die Suche ist nicht statisch, sodass bei einem Wechsel der Ansicht der Text in eine zweite Zeile verschoben werden kann der Text in eine zweite Zeile verschoben Seiten werden möglicherweise übersetzt und plötzlich ist der Text viel länger, und auch der Inhalt ändert sich im Laufe Ich empfehle daher, sich immer an die spezifische Zeilenhöhe zu halten , die für den von Ihnen verwendeten Stil festgelegt wurde. Die Zeilenhöhe ist eine wichtige Designentscheidung. Achten Sie also darauf, sie an Ihre Typografie-Skala und Ihr Seitenlicht anzupassen Eine kleine Randnotiz: Sie erwarten wahrscheinlich, dass die Zeilenhöhe ein oder 100% der exakten visuellen Höhe der Schrift So etwas und halb oben und unten links liegen lassen. Dies könnte bei einigen der Fall sein, und es sind die Bilder, die ich für meine Erklärungen verwende Wenn Sie sich jedoch mit den Einzelheiten befassen, werden Sie geringfügige werden Sie Kurz gesagt, ein Schriftdesign innerhalb eines bestimmten Rahmens, sogenannte N-Quadrat, das dem Schriftdesigner als eine Art Leinwand dient Die Schriftkennzahlen, einschließlich Aspekten wie der Höhe eines Aszenders , also der hohen Teile wie eines M, und der Länge von Dezentern, etwa einem G, können innerhalb des Quadrats je nach Schriftdesign erheblich variieren je nach Bei einer Zeilenhöhe von 100% kann der Text die Ränder des Felds berühren oder auch nicht Die Zeilenhöhe wird dem gesamten Quadrat hinzugefügt, nicht der wahrgenommenen visuellen Höhe, was zu scheinbar ungleichmäßigen visuellen Abständen führen kann , obwohl der Zeilenabstand technisch ausgewogen ist. Dies ist normalerweise kein großes Problem, kann sich jedoch auf die Textausrichtung auswirken, insbesondere bei Benutzeroberflächenelementen wie Schaltflächen, die leicht außerhalb der Mitte erscheinen. Eine manuelle Anpassung ist oft die Lösung, und CSS-Updates wie das Trimmen von Textfeldern sind geplant, aber noch nicht implementiert, auch wenn Sie sie möglicherweise bereits in einigen UI-Tools finden. Es ist also gut, dieses Detail zu verstehen, aber es gibt nichts Wichtiges, worüber man sich Sorgen machen müsste. In den meisten Fällen werden Sie feststellen, dass das bloße Arbeiten mit der angegebenen Linienverdeckung einwandfrei funktioniert. Wenn Sie verschiedene Schriftarten zusammen verwenden, die Auswahl von Schriften aus derselben Superfamilie kann die Auswahl von Schriften aus derselben Superfamilie dazu beitragen, die Konsistenz der Kennzahlen aufrechtzuerhalten 12. 11 Ein Wort zum Thema Benennen: Wenn Sie sich Typskalen ansehen, stoßen Sie vielleicht oft auf diese Benennungskonvention von H eins, H zwei, H drei usw. Diese Namen sind nun von HTML-Benennungs-Tags abgeleitet. Und ich möchte Sie ermutigen, diese Art der Benennung in Ihrem UI-Design-Setup zu vermeiden Ihrem UI-Design-Setup und sich für einen semantischeren Ansatz zu entscheiden Lassen Sie mich Ihnen erklären, warum. Beim korrekten Erstellen einer Website ist die Verwendung von Überschriften und anderen HGML-Tags unerlässlich Diese Tags dienen als Framework für die Organisation von Inhalten, unabhängig davon, wie sie mit CSS gestaltet sind Beispielsweise könnte ein hervorstechendes H in einem Heldenbereich eine völlig andere Größe und einen anderen Stil haben als der Haupttitel , der auch auf einer Seite mit Nutzungsbedingungen ein H ist. Dies ist nicht nur wichtig für die Suchmaschinenoptimierung, sondern korrekte Überschriften-Tags sind auch entscheidend für Benutzer, die sich auf Screenreader verlassen , um die Inhaltsstruktur zu verstehen. Es ist wichtig, HTML-Text von visuellen Designs wie Stilen zu trennen . Sie arbeiten zwar zusammen, jeweils ihren eigenen Zweck, nämlich ein effektives Benutzererlebnis zu schaffen. Übrigens verwenden wir im Webdesign HTML-Text mit CSS für das Styling, aber nicht alles funktioniert so. Bei der Entwicklung von IOS-Apps gibt es beispielsweise kein CSS und keine Suchmaschinenoptimierung, über die man sich Gedanken machen müsste. Stattdessen verwenden wir einen sogenannten dynamischen Typ, dem es sich lediglich um eine Textgröße handelt, die auf den Benutzereinstellungen basiert. Entwickler können mit Voreinstellungen aus der Dokumentation beginnen und diese bei Bedarf anpassen Im Gegensatz zu HTML-Text mit dynamischem können Sie Ihre Typskala auch darauf aufbauen, aber achten Sie immer darauf, dies zuerst mit der Entwicklung zu besprechen Es ist also wirklich nützlich zu verstehen, woher diese verschiedenen Namenskonventionen kommen und wofür sie gemacht sind. Wenn wir zu unserem Web-App-Projekt zurückkehren, ist ein semantischer Ansatz wahrscheinlich die beste Wahl Es gibt nicht den einen richtigen Weg, dies zu tun, aber solange er beschreibend ist und das Ändern von Werten ermöglicht, wird er einwandfrei funktionieren Eine gängige Methode, um Hierarchien von Texten zu trennen, wie z. B. die Zahlen 1—6 besteht darin, die T-Shirt-Größenordnung anzupassen Wir verwenden also S, M, L usw., die auch erweitert werden können Manche Menschen bevorzugen einen aussagekräftigeren Ansatz wie winzig, normal oder riesig Ich muss zugeben, dass dieser Ansatz auch seine eigenen Herausforderungen mit sich bringt , da zwischen diesen Größen kein Leerzeichen Es ist also schwierig, die Dinge später zu optimieren. Sie könnten versucht sein, Überschriften zehn, 20, 30 zu verwenden, wie wir es mit Farben tun, was uns Zwischenräume wie eine Größe von 25 ermöglicht Aber das kann in diesem Fall leicht mit Pixeln verwechselt werden, weshalb ich persönlich nicht empfehlen würde, dies zu verwenden Um mehr Struktur zu schaffen, können Sie Ebenen erstellen, indem Sie Begriffe wie Hauptteil, Titel, Überschriften und Anzeigenüberschriften verwenden. Das ist also wirklich gut, wenn Sie ein wirklich großes System haben. Möglicherweise haben Sie auch mehrere Optionen z. B. unterschiedliche Schriftstärken. Auch hier ist es wichtig, beschreibend zu bleiben , damit die Werte leicht geändert werden können Anstatt es normal fett oder 700 oder 500 zu nennen, entscheiden Sie sich für etwas wie betont oder stark Benennen ist schwierig und Benennen ist wichtig. Deshalb empfehle ich generell, die Benennung so früh wie möglich mit der Entwicklung zu besprechen , um Missverständnisse zu vermeiden und Möglichkeiten der Abstimmung zu nutzen 13. !!! BITTE BEOBACHTET !!! Neue Figma-Benutzeroberfläche in der Beta: Heads Figma hat seine Benutzeroberfläche aktualisiert, und Sie sehen möglicherweise ein neues Design anstelle des alten Dieses Update befindet sich derzeit in der geschlossenen Betaphase, sodass noch nicht jeder Zugriff darauf hat Ich werde die Grafiken aktualisieren und das neue Interface wiedergeben , sobald es für alle verfügbar ist. Die Änderungen sind hauptsächlich visuell. Alle Funktionen und Tools sind immer noch da, nur an etwas anderen Stellen oder mit einem neuen L. Beispielsweise wurde die obere Werkzeugleiste nach unten verschoben. Die linke Seitenleiste ist dagegen größtenteils unverändert geblieben. Sie können jetzt den Namen Ihrer Datei hier ändern. Sie können weiterhin alle Ihre Seiten, Ebenen und Elemente sehen. Auf der rechten Seite werden Sie einige Änderungen feststellen, wenn Sie in ein Design klicken, aber alle Funktionen sind weiterhin verfügbar. Wenn Sie ein Anfänger sind und die neue Oberfläche verwirrend finden , können Sie auf das Fragezeichen rechts unten klicken und vorübergehend zur alten Benutzeroberfläche zurückkehren. Das hat keinen Einfluss auf dein Design. Auf diese Weise können Sie die Videos des Kurses mit der alten Benutzeroberfläche viel einfacher verfolgen die Videos des Kurses mit der alten Benutzeroberfläche viel , bis Sie bereit sind, zur neuen zu wechseln. FIMA führt dieses Update schrittweise ein. Wenn Sie noch keinen Zugang haben, können Sie ihn auch bei FIMA beantragen, aber es gibt keine Garantie, einige von Ihnen müssen möglicherweise nur ein wenig Geduld haben Möglicherweise muss Ihr Team-Admin das Update auch für Sie aktivieren. Stellen Sie also sicher, dass Sie dies ebenfalls überprüfen Figma aktualisiert die Software regelmäßig Erwarten Sie also Änderungen und seien Sie bereit, sich anzupassen Funktionen können sich ändern wie diese Bibliotheksschaltfläche hier in den letzten Jahren an jeder möglichen Stelle Aber keine Sorge, nichts wird jemals verloren gehen, und Sie werden sich daran gewöhnen FIMA viel flexibler zu nutzen Es hat einen wirklich großen Fokus auf Benutzerfreundlichkeit. Es geht also nicht darum, etwas auswendig zu lernen, sondern die Software als Ganzes zu verstehen. 14. 12 Typografie in Figma: Lassen Sie uns verstehen, wie man mit Text in Figma umgeht. Werfen wir einen kurzen Blick auf das Figma-Textmenü. Wenn Sie einen beliebigen Text in Figma auswählen, Sie auf der rechten Seite im Eigenschaftenfenster können Sie auf der rechten Seite im Eigenschaftenfenster die Texteinstellungen sehen Hier können wir eine Typphase wählen. Wir können das Gewicht wählen. Wir können die Größe ändern. Und wir können auch eine Zeilenhöhe wählen. Dies wird normalerweise in Pixeln festgelegt. Sie können dieses Feld zur Berechnung verwenden. Wenn ich also 1,5 will, würde ich 16 mal 1,5 berechnen. Aber was ich gerne mache, ist , das tatsächlich in Prozent anzugeben. Und wenn ich auf diese Weise die Größe ändern würde , würde ich die gleiche Zeilenhöhe beibehalten. Kleiner Tipp, Figma unterstützt auch variable Schriften. Nun, die Schriftart, die ich verwende, nämlich Poppins, ist keine variable Wenn ich also dieses Drop-down-Menü hier für das Gewicht verwende, erhalte ich nur die Voreinstellungen Wenn ich es jedoch in eine variable Schriftart ändern würde, sagen wir Open Sans Und ich verwende dasselbe Dropdown. Dann kann ich zum Beispiel für meine Gewichte hier eine variable Schriftachse finden, und ich kann jetzt die Gewichtung anhand der Achsen einstellen. Sie können auch den Buchstabenabstand und den Absatzabstand ändern . Dies wäre der Abstand zwischen unseren Absätzen, wenn wir solche Texte hätten. Hier können Sie festlegen, wie Ihr Text in der Box platziert werden soll . Ich würde empfehlen, immer die automatische Höhe zu wählen. Das bedeutet, dass Ihr Textfeld automatisch Ihre Höhe oder Ihre Zeilenhöhe berücksichtigt und daher ein Feld darum herum erstellt wird . Sie können den Text ausrichten und auch wählen , aus welcher Richtung der Text wachsen soll. Wenn ich es zum Beispiel auf „Zeile nach oben“ setze und jetzt mehr Text hinzugefügt wird, würde das zu einem Text wie diesem hinzugefügt. Alles andere, was Sie suchen, klicken Sie einfach auf die drei kleinen Punkte. Hier finden Sie zusätzliche Einstellungen wie Textdekoration, Groß-/Kleinschreibung , vertikale Kürzung, Listenstile, Absatzabstand. Das haben wir hier schon im Hauptmenü. Wenn ihr die kleinen Punkte haben wollt, wenn Text abgeschnitten wird, dann findet ihr das hier. In diesem Fall werden Sie feststellen, dass Ihre Box wieder auf eine feste Größe zurückspringt Sobald wir diese Überschrift und den Text nach unseren Wünschen eingerichtet haben, möchten wir sie als Stil speichern , um sie in unserem Design wiederzuverwenden Schauen wir uns also an, wie das funktioniert. Also, hier ist ein sehr vereinfachtes Beispiel für eine Typenskala. Sie können sehen, ich möchte eine Anzeigeschrift, einen Titel, einen Textkörper, eine Überschrift und eine Schaltfläche einrichten . Und ich möchte dies für mein Design im Allgemeinen sowie für eine Komponente verwenden . Also sollte meine Instanz hier diesen Stil erben. Das Einrichten eines Stils ist also ziemlich einfach. Wählen Sie einfach den Text aus. Und dann sehen Sie im Eigenschaftenbereich auf der rechten Seite das Stilsymbol. Klicken Sie darauf, klicken Sie auf Plus und ich kann es jetzt benennen. Ich werde das Display One nennen . Und ich werde dasselbe für alle anderen tun. Ich werde diesen Prozess für Sie ein wenig beschleunigen. Und natürlich könnte Ihre Typenskala ganz anders aussehen. Das ist wirklich nur ein vereinfachtes Beispiel. Wenn ich einen Überblick über meine Stile sehen möchte, kann ich auf den grauen Canvas-Bereich klicken und dann auf der rechten Seite sehe ich sie alle. Hier könnte ich sie auch ändern. Wenn ich also etwas am Namen oder an einem der Attribute ändern möchte, kann ich das hier tun. Wir wollen jetzt unsere Stile auf unser Design anwenden. Wichtig, wenn Sie mit Komponenten arbeiten, wenden Sie den Stil immer auf die Komponente an , nicht auf die Instanz. Wie Sie hier sehen können, wende ich den Stil der Überschrift auf die Überschrift an, und dann wähle ich hier meinen Titel Aus dem Drop-down-Menü kann ich jetzt den Stil auswählen, den ich für den Titel erstellt habe. Wenn wir auf die Instanz klicken, können Sie sehen, dass sie automatisch vererbt wurde. Bei losem Text wie diesem können wir ihn direkt in unserem Design anwenden. Nehmen wir zum Beispiel an, es hätte eine andere Größe, also nehmen wir an, es wäre viel kleiner. Sobald wir dann unseren Stil anwenden, würde er natürlich die richtige Größe annehmen und die gesamte Zeilenhöhe und alles, was im Stil gespeichert ist, korrigieren . Wenn Sie einen Stil ändern oder trennen möchten, einfach mit der Maus über den Stil und Sie sehen ein kleines abgetrenntes Wenn du darauf klickst , ist es losgelöst und du kannst einen beliebigen anderen Stil wählen Sie können einfach solche Stile verwenden. Das wäre eigentlich genug. Aber seit April 2024 können wir auch Variablen hinzufügen, wenn wir wollen. Wir haben also immer noch unsere Stile, aber in unseren Stilen, diesen kleinen Bausteinen, können sie Variablen sein oder nicht. Wir haben also so etwas wie Schriftart, Stärke, Größe, Zeilenhöhe, Abstand und so weiter Und wir können sie so lassen und mit ihnen arbeiten. Es ist absolut in Ordnung. Sobald Sie jedoch auf ein skalierbareres System umsteigen , möchten Sie möglicherweise Variablen hinzufügen. 15. 13 Figma-Variablen für Typografie: In Figma können wir auch Variablen setzen, und sie funktionieren ziemlich ähnlich wie Lassen Sie uns zunächst verstehen, was eine CSS-Variable ist. Hier haben wir also ein Beispiel in CSS, und Sie können sehen, dass die Linkfarbe als Variable definiert ist. Dann haben wir eine Klasse namens Primary Link, in der wir weitere Informationen wie die Schriftgröße, die Formularfamilie usw. hinzufügen . Und Sie können sehen, dass wir hier unsere CSS-Variable als Teil dieser Klasse wiederverwenden unsere CSS-Variable als Teil dieser Klasse Wir könnten auch den gesamten Stil mit Bausteinen oder Variablen einrichten , wenn wir wollten Der Vorteil ist, dass, wenn ich etwas ändern möchte, sagen wir die Standardgröße des Textes, dann müsste ich das nur in der Variablen ändern, und überall in meinem gesamten Design wo ich diese Variable verwende, würde sie automatisch aktualisiert. Schauen wir uns Figma an. In meinem Setup hier habe ich also eine sehr vereinfachte Typenskala, und Sie können sehen , dass all dies bereits in Stile umgewandelt wurde Wenn wir auf den Hintergrund der Kamera klicken, Sie einen Überblick über die Stile Diese Stile werden in unseren Komponenten sowie in jedem losen Text innerhalb unseres Designs verwendet unseren Komponenten sowie . Nun, das funktioniert für sich genommen einfach hervorragend, sodass Sie es absolut so verwenden können. Aber sobald Sie das etwas weiter skalieren und innerhalb eines Designsystems arbeiten möchten , möchten Sie vielleicht Variablen hinzufügen. Also habe ich eine Sammlung erstellt, auf den Bereich Ihrer Kameras geklickt und dann zu den lokalen Variablen gewechselt. Und hier habe ich mehrere Kollektionen, und eine davon heißt Brand Typography Ich kann es wie auch immer nennen. Insider hat bereits einige Variablen erstellt. Sie können sehen, dass ich Textgrößenvariablen erstellt habe. Dies ist eine Größenvariable, und ich habe 16, 24, 32 und 40, und ich habe einige Variablen für mein Gewicht erstellt. Hier verwende ich eine Zeichenfolge. Ich habe eine Zeichenfolge und dann tippe ich einfach das Wort mit dem Gewicht ein, das ich hier haben möchte. Mein Fall normal oder fett. Ich werde auch eine Schriftfamilie hinzufügen. Ich klicke auf die Plus-Schaltfläche und wähle erneut eine Zeichenfolge für eine Schriftfamilie aus. Ich nenne es Schriftfamilie und verwende Poppins, ich gebe einfach Poppins Wenn ich diese netten kleinen Kategorien haben möchte, denken Sie daran, wir können sie einfach gruppieren, rechten Maustaste klicken und dann eine neue Gruppe mit Auswahl erstellen, und ich nenne diese Schriftfamilie Wenn ich also auf alle Variablen klicke, siehst du, dass ich alle sieben Variablen sehen kann die ich derzeit in der Sammlung habe, und ich kann ihnen natürlich alle hinzufügen oder, falls ich welche löschen muss. Lassen Sie mich einfach die Schriftfamilie hierher verschieben. Sie können das nach Ihren Wünschen organisieren. Wenn Sie den Mauszeiger über eine Variable bewegen, können Sie auf Variable bearbeiten klicken Sie können jetzt weitere Informationen hinzufügen und auch den Geltungsbereich festlegen Das bedeutet, dass es nur in diesem speziellen Feld angezeigt wird in diesem Jetzt nehme ich das direkt nach der Veröffentlichung von Variablen für Textseiten auf. Wir haben noch keinen Umfang dafür, aber es sollte veröffentlicht werden und du solltest es in diesem Menü finden. Es gibt einen sogenannten Textinhalt. Das ist etwas anderes. Das würde bedeuten, dass es den tatsächlichen Wert annehmen würde. Ersetze deinen Text durch 16. Das wollen wir nicht. Seien wir also geduldig und warten wir auf das Scoping-Update. Ein kleiner Tipp: Halten Sie die Umschalttaste und die Befehlstaste gedrückt, und Sie können mehrere Variablen gleichzeitig eingrenzen. Okay, großartig. Also, wie wir diese Variablen in unseren Stil integrieren werden. Was wir tun müssen, ist , zu unserem Stil zurückzukehren und dann mit der Bearbeitung fortzufahren. Und dann können Sie hier eine beliebige Variable wählen. Wenn ich also zum Beispiel meine Textphase auswähle, kann ich jetzt hier weitermachen und meine Schriftfamilie namens Poppins sehen Und jetzt wird daraus eine Variable. Und ich kann genau das Gleiche für alle anderen tun. Also, hier gehe ich zum Beispiel auf Variable anwenden, und jetzt suche ich meine Typografie, und dann schauen wir uns hier um. diesem wollen wir fett sein, also werde ich diesen wählen, und wir werden dasselbe mit unserer Größe machen Lass uns die richtige Größe für diese wählen. Höhe angeht, lasse ich hier momentan 150% fest codiert , weil ich das gerne in Prozent oder so etwas wie 1,5 habe , was wir in CSS sehen würden Aber Figma unterstützt dies derzeit nicht in Variablen. Es unterstützt nur Pixelwerte da ich das gerade aufnehme, als es herauskam Wenn Sie sich dieses Video etwas später ansehen , können Sie natürlich auch die Zeilenhöhe hinzufügen und schauen, ob Prozentwerte oder Werte ohne Einheiten wie 1,5 bereits funktionieren. Sie können Pixel verwenden. Ich persönlich bin einfach kein großer Fan davon. Aber im Allgemeinen können Sie Variablen für alle verschiedenen Felder einrichten , sobald Sie das Variablenzeichen sehen. Jetzt können Sie dies zu Ihren vorhandenen Stilen hinzufügen. Aber was ist, wenn Sie nur Stile erstellen? Das würde genauso funktionieren. Lassen Sie uns einen Text herausziehen und ihn abtrennen, und jetzt ist es noch kein Stil Sie können also sehen, dass ich mit meinen Variablen bereits an jedem beliebigen Text arbeiten kann, also kann ich das alles einrichten und es später als Stil speichern Sie sind also sehr flexibel in Ihrem Arbeitsablauf. Und wenn ich auf lokale Variablen klicke und irgendetwas an einer dieser Variablen ändere, dann würde sich das natürlich und irgendetwas an einer dieser Variablen ändere, in meinem gesamten Design widerspiegeln. In diesem Beispiel scheint das wirklich unbedeutend zu sein, weil es ein sehr vereinfachtes Beispiel ist. Aber in einem größeren System wird das eine große Hilfe sein. Stellen Sie sich vor, Sie ändern die Schriftfamilie, Sie müssten all Ihre Textilien und Designs durchgehen . Auf diese Weise müssen Sie es nur hier oben ändern, und dann wird es sich in all Ihren verschiedenen Stilen widerspiegeln . Wenn Sie außerdem eine Größe ändern, wir an, Sie haben eine Basisgröße von 16, und Sie müssen diese erhöhen. Dann werden Sie diese Schriftgröße S für verschiedene Textilien verwendet haben , vielleicht für eine hellere Version, eine mutigere Version usw. Das wird sehr praktisch sein, sobald Sie anfangen, in einem größeren System zu arbeiten 16. 14 Weißraum ist deine Superkraft: Weißraum, deine geheime Supermacht. Nun, vielleicht haben Sie Ihre Schriftwaage, Stärke und Linienhöhe perfekt eingestellt , aber es fehlt immer noch etwas Und dieses Etwas ist normalerweise Leerraum. Indem Sie Weißraum hinzufügen, geben Sie Ihrem Design Raum zum Atmen und um richtig wahrgenommen zu werden. Es gibt keine festen Regeln , wie und wo bearbeitet werden soll. Aber wir werden uns einige allgemeine Prinzipien ansehen, die du anwenden kannst. Deshalb verwende ich gerne mein Acht-Punkte-Skalierungssystem , um die Dinge konsistent zu halten. Also ist alles ein Vielfaches von Acht. Zum Beispiel habe ich zwischen meiner Überschrift und meinem Text 16. Und für kleinere Entfernungen verwende ich acht, und ich kann sogar auf vier reduzieren. Ich werde das in kleineren Elementen wie einem Button verwenden. Und auch hier ist dieses System da, mir zu helfen, mich nicht einzuschränken. Also kann ich natürlich einen Umriss von einem Pixel oder ähnlichem haben . Es ist wirklich eine allgemeine Richtlinie, um einen Rhythmus zu kreieren. Sie können auch zwischen Mikroabstand und Mikroabstand unterscheiden zwischen Mikroabstand und Mikroabstand Also zum Beispiel zwischen dem Abstand innerhalb Ihrer Komponenten und dem Abstand um sie herum Auch bei diesem größeren Leerraum zwischen Abschnitten verwende ich ein Vielfaches von Acht. Je mehr Sie entwerfen, desto mehr werden Sie ein Gefühl dafür bekommen , wo Sie etwas Leerraum hinzufügen müssen. Weißraum ist also definitiv kein verlorener Raum. Es hilft dir bei deinem Layout. Es ist wirklich eine Geheimwaffe. Denken Sie auch daran, je näher die Dinge beieinander liegen, desto mehr werden sie als Einheit wahrgenommen. Verwendet also wirklich, wirklich Leerraum in Ihrem Layout. Das macht den ganzen Unterschied. Eine gute Idee ist auch immer zu schauen, wie es andere machen. Hier ist ein Beispiel für das UBA-Designsystem, und Sie können sehen, dass sie Viererstufen verwenden, und dann haben sie einige allgemeine Abstandsblöcke, die sie für alles verwenden, sie für alles verwenden, z. B. für die Einrichtung von Rastern bis hin zur Symbolgröße, und auch für alle Abstände innerhalb ihres In Designsystemen werden Sie feststellen, dass Abstände normalerweise als Zeichen festgelegt Hier ist ein Beispiel aus dem Entwurfssystem für Drähte, und Sie können sehen, dass sie ihr allgemeines Merkmal haben. Größe vier acht und so weiter, was wiederum einem Vielfachen von vier und acht entspricht. Dann können wir hier unten sehen , dass sie diese Tokens dann in ein semantischeres System einspeisen. Sie gehen also viel detaillierter vor. Also zum Beispiel zwischen Chips, und sie verwenden diese Basisgrößen, definieren sie dann aber viel klarer. 17. 15 Optimale Linienlänge: In der Länge. Auf größeren Bildschirmen möchten Sie nicht, dass der Text über die gesamte Breite fließt weil er dann einfach zu lang und schwer lesbar ist. Die ideale Zeilenlänge soll 50-70 Zeichen betragen. Beachten Sie, dass wir hier von Zeichen und nicht von physischer Größe sprechen Zeichen und nicht von physischer Größe Das kann also für verschiedene Arten von Gesichtern sehr unterschiedlich sein. Du solltest nie mehr als 90 Zeichen pro Zeile haben , weil es dann wirklich ziemlich unmöglich wird, es zu lesen. Jetzt brauchen Sie nicht mehr Zeichen zu zählen, aber Sie können sehen, wenn Sie sich locker an diese Regel halten, wird sie schon viel angenehmer und viel einfacher zu lesen sein angenehmer und viel einfacher zu lesen außerdem sicher, dass Sie Ihre Typografie so gestalten, wie sie entworfen und beabsichtigt war Verwenden Sie kein sogenanntes Rechtfertigungswort. Rechtfertigung bewirkt, dass Ihre Typografie dadurch gezwungen wird, in eine Schachtel zu passen Nun, manchmal sieht das toll aus, wenn Sie damit entwerfen Aber denken Sie daran, dass Ihr Design nicht das Endergebnis ist. Der Browser ist nicht statisch. Und sobald sich der Bildschirm bewegt und seine Größe ändert, werden Sie ziemlich hässliche Lücken bekommen. Also tu das nicht. Es wird wirklich schwer zu lesen sein. Lassen Sie die Typografie immer das tun, wofür sie entworfen wurde , und lassen Sie sie natürlich fließen 18. 16 Farben und Kontrast in der Typografie: Farbe und Kontrast der Typografie. Kontrast ist ein wichtiger Aspekt, der in den Richtlinien zur Barrierefreiheit von Webinhalten, kurz WCAG, behandelt den Richtlinien zur Barrierefreiheit von Webinhalten, kurz WCAG Sie enthalten klare Regeln für die erforderlichen Kontraststufen Und es ist wichtig zu beachten, dass dies nicht nur eine Empfehlung ist. Es ist eine gesetzliche Verpflichtung. Die WCAG misst den Kontrast anhand des Helligkeitsunterschieds, und dieser reicht von Licht, also eins zu eins, das weiß auf weiß ist, und 21 zu eins, das schwarz und weiß ist, einen hohen Kontrast hinweist Und das funktioniert nach einem Bewertungssystem. Eine Doppel-A-Konformität ist also der Mindestkontrast, den Sie benötigen. Für Typografie ist dieses Verhältnis auf 4,5 zu eins für größere Schriften und drei zu eins für kleinere Schriften festgelegt größere Schriften und drei zu eins für , wobei Groß ziemlich locker definiert ist, angefangen bei etwa 18 Pixeln oder kleineren, fett gedruckten Feldern, je nach Schrifttyp Da das etwas unklar ist, würde ich immer versuchen, für alle verwendeten Fonds mindestens 4,5 zu eins zu Im Idealfall würden Sie sich sogar für ein Dreifach-A entscheiden. Daher streben Sie für Standardfonds ein Verhältnis von 7 zu eins und für größere Schriften 4,5 zu eins an. Schauen wir uns also ein Beispiel an. Hier habe ich einen hellgrauen Hintergrund und verwende eine rote Typografie Das Ergebnis für das Kontrastverhältnis ist in diesem Fall zwei zu eins, was unter dem empfohlenen Schwellenwert von 4,5 zu eins liegt Wenn ich dagegen diese dunkelgraue Typografie auf demselben Hintergrund verwende, erhalte ich ein Kontrastverhältnis von 12 zu eins Das heißt, ich erfülle sogar die Triple-A-Standards. Es ist auch wichtig, Schriftstärke und Schriftgröße zu berücksichtigen, da kleinere und hellere Schriften im Vergleich zu größeren und fetteren Schriften einen höheren Kontrast erfordern im Vergleich zu größeren und fetteren Schriften einen höheren Kontrast Um sicherzustellen, dass Sie den richtigen Kontrast erzielen, würde ich Ihnen empfehlen, immer einen Kontrastprüfer zu verwenden Sie können entweder in Ihrer UI-Software nach einem Plug-in zur Kontrastprüfung suchen oder ein Online-Tool wie Web Aim verwenden Diese Kontrastprüfer funktionieren also ziemlich gleich egal ob Sie ein Plug-In oder ein externes Tool verwenden Im Grunde genommen nehmen Sie Ihre Vordergrundfarbe und Ihre Hintergrundfarbe oder umgekehrt, und dann fügen Sie sie einfach hinzu und Sie erhalten ein Verhältnis Nun, das ist das Verhältnis , das Sie notieren und mit dem benötigten Verhältnis vergleichen werden. Im Allgemeinen zeigen Ihnen die Kontrastprüfer bereits, ob es erfolgreich ist oder nicht. Wenn ich jetzt zum Beispiel meine Farbe ändere, kann ich sehen, wie sie anfängt, sich durchzusetzen. Das könnte der Text oder die Hintergrundfarbe sein. Ich empfehle generell, einen Überblick über all Ihre Farben zu haben einen Überblick über all Ihre Farben und die Textfarben von den allgemeinen Markenfarben zu trennen, auch wenn Sie möglicherweise dieselben Werte verwenden. Auf diese Weise können Sie Ihre Textfarbe mit jeder anderen Farbe vergleichen und klare Regeln dafür festlegen , welche Farben kombiniert werden können und welche nicht. neben dem Standardtext auch darauf, Systemfarben wie Benachrichtigungen und Bestätigungen zu berücksichtigen Systemfarben wie Benachrichtigungen und Bestätigungen Und es ist auch eine gute Idee, eine klare Interaktionsfarbe zu definieren Das wäre deine Highlight-Farbe für Buttons, Links, also alles , was anklickbar ist 19. 17 Responsive Typografie mit Haltepunkten: Erstellung einer responsiven Typografie mit Breakpoints. Was sind also Breakpoints? Es sind bestimmte Punkte oder besser gesagt Schwellenwerte oder es treten Änderungen Auf diese Weise können Websites ihr Layout und ihren Stil an unterschiedliche Bildschirmgrößen anpassen und ihren Stil an unterschiedliche Bildschirmgrößen Um Breakpoints in CSS zu erstellen, verwenden wir eine sogenannte Medienabfrage Die Medienabfrageregel ist eine Möglichkeit, bestimmte Stile nur dann auf eine Webseite anzuwenden bestimmte Stile nur dann auf eine Webseite , wenn bestimmte Bedingungen erfüllt sind In diesem Fall ist die Bedingung eine Mindestbreite von 768 Pixeln. Alles, was sich innerhalb der geschweiften Klammern befindet, wird nur angewendet, wenn das Darstellungsfenster eine Größe von 768 oder mehr hat Schauen wir uns das in CSS an. Sie können hier also sehen, dass ich eine Überschrift und etwas Text sowie zwei Bilder habe. In unserem HTML-Code ist das ein H, die Überschrift, der Text ist P, und dann haben wir hier unsere Bilder mit dem Image-Tag. Jetzt können Sie im CSS sehen, dass ich den Text so eingestellt habe, dass er die Größe eines RM hat, dann etwas größer für die Überschrift, und dass ich die Bilder so eingestellt habe, dass den gesamten verfügbaren Platz einnehmen. Das sind also meine Basisstile. ich jetzt nach unten scrolle, können Sie sehen, dass ich eine sofortige Abfrage hinzugefügt habe. Wenn ich 400 erreicht habe, machen wir es hier unten einfach größer. Sie können die Größe sehen, also können Sie sehen, wenn ich 400 drücke, dann ändert sich das im Layout. Was hier passiert, ist, dass alles innerhalb der Klammern aktiv wird. Ich habe eine neue Hintergrundfarbe, die H-Farbe ist größer und die Bilder verändern die Raumbelegung. Wenn ich noch größer werde, kannst du sehen, wie die zweite Medienabfrage zuschlägt. Sie können es also hier unten sehen. Auch hier habe ich eine Hintergrundfarbe hinzugefügt, damit diese sichtbar wird, und ich ändere auch die H-Farbe, um sie noch größer zu machen. Deshalb sind Breakpoints in der Regel die Technik der Wahl, wenn es darum geht, die Typografie an unterschiedliche Bildschirmgrößen anzupassen Theoretisch könnten wir Breakpoints für jeden Text einzeln festlegen für jeden In den meisten Fällen haben Sie jedoch wahrscheinlich einen vordefinierten Satz von Breakpoints für Ihre Typografie-Skala Das bedeutet, dass das Textlayout entsprechend angepasst wird, wenn das Viewpoart eine bestimmte Größe erreicht Textlayout Diese Breakpoints können durch ein Framework wie Bootstrap bereitgestellt werden , oder Sie können sie freier wählen, insbesondere wenn Sie einen modernen CSS-Layoutansatz verwenden Sie sind möglicherweise bereits für andere Bereiche Ihres Designs vorhanden, z. B. für die Änderung des Gesamtlayouts den meisten Fällen ist es also sinnvoll, dieselben Breakpoints zu verwenden in einem neuen Team beginnen, sollten Sie unbedingt in der Dokumentation oder im Styleguide Wenn Sie in einem neuen Team beginnen, sollten Sie unbedingt in der Dokumentation oder im Styleguide nach bestimmten numerischen Werten suchen Und wenn Sie für die Einrichtung von Grund auf verantwortlich sind, sollten Sie zuerst mit Ihrem Entwicklungsteam sprechen, um zu erfahren, was es benötigt und was es empfiehlt. Sobald wir also unsere individuellen Grenzwerte kennen, der nächste Schritt darin, unsere Skala auf alle Größen auszudehnen Es gibt verschiedene Ansätze, um damit umzugehen. Lassen Sie uns den ersten Ansatz untersuchen, bei dem individuelle Anpassungen vorgenommen werden würden. In der Regel beginnen wir damit , unsere Typskala von der kleinsten Größe aus einzurichten . Wenn wir einen Grenzwert erreichen, können wir prüfen, ob Änderungen erforderlich sind Oft funktioniert ein Haupttext mit einer Größe von 16 in allen Größen einwandfrei, aber die Hauptüberschriften müssen möglicherweise angepasst Sie können natürlich auch Ihre gesamte Skala an jeden beliebigen Breakpoint anpassen Ihre gesamte Skala an jeden beliebigen Breakpoint Unsere zweite Option ist die Erweiterung mithilfe unseres modularen Systems, also der Skalierung mit Verhältnissen Wir können unsere RAM-Werte konsistent halten, aber wir passen einfach an, was ein RAM an jedem Breakpoint bedeuten würde Auf unserem kleinen Bildschirm könnte ein RAM beispielsweise 16 Pixeln entsprechen, dann 18 Pixeln für unseren mittleren Bildschirm und 20 Pixeln für unseren großen Bildschirm Und dann behalten wir einfach unser allgemeines System bei, weil wir die Basisgröße mit einem ausgewählten Verhältnis multiplizieren Alle anderen Größen passen sich also automatisch an. Während also 1,5 RAM auf meinem mittleren Bildschirm normalerweise 24 Pixel sind, 1,5 RAM 27, da es jetzt 18 mal 1,5 ist. Und bei großen Zahlen rechnen wir 20 mal 1,5, also sind es 30 Pixel. Es ist wichtig, dies ohne feste Pixel im Code einzurichten , um sicherzustellen, dass Benutzervoreinstellungen unterstützt Mach dir keine Sorgen. Es gibt verschiedene Möglichkeiten, dies zu erreichen. Nichts ist zu kompliziert. Erwähnenswert ist jedoch, dass wir es beim Design mit einem neuen Satz von Pixelwerten zu tun haben werden , die voneinander unabhängig sind. Im Code bleiben dies relative Einheiten. Das Einrichten von Breakpoints für Typografie ist in der Regel eine gute Lösung innerhalb eines strukturierten Designsystems Es ist einfach zu skalieren, organisiert und es ist wirklich einfach, teamübergreifend zu kommunizieren 20. 18 Flüssige Typografie mit CSS Clamp(): Fluide Topographie mit CLAMP. Um die Fluidtopographie in CLAMP zu verstehen, müssen wir uns zunächst mit Viewport-Einheiten vertraut machen Es gibt einige davon, aber die, die uns interessiert , ist die Breite des Viewports, geschrieben I Magister Breite des Darstellungsfensters, wobei ein VW 1% der Breite des Darstellungsfensters entspricht Schauen wir uns ein Beispiel an. Nehmen wir an, unser Viewport hat eine Breite von 1.000 Pixeln und unsere Textgröße ist auf zwei Viewport-Breiten eingestellt Das sind also 2% von 1.000, also 20 Pixel. nun die Breite eines Viewports ändert, nehmen wir an, wir ändern die Größe des Browsers auf eine Breite von 500 Pixeln, dann würden unsere beiden Viewport-Breiten nun zu einer Textgröße von zehn Pixeln führen Auf diese Weise können wir also eine flüssige Typografie erstellen. Wir haben jedoch das Problem, dass der Text irgendwann zu klein zum Lesen oder zu groß für unser Design sein wird Lesen oder zu groß für unser Design Hier bietet sich CSS CLM an. Es ist nicht die einzige Möglichkeit, damit umzugehen, aber ich mag es sehr, da es natives CSS verwendet Mit CLAMP können wir einen Mindest- und einen Höchstwert für unseren Text sowie eine Wachstumsrate zwischen diesen beiden Schwellenwerten festlegen In meinem Beispiel ist der Text also mindestens 1,5 RM groß, was 32 Pixeln entspricht, und nicht größer als drei RM, was 48 Pixeln Dazwischen wird er mit einer Skalierungsrate von 5% der aktuellen Breite des Darstellungsfensters skaliert von 5% der aktuellen Breite des Darstellungsfensters Auf diese Weise passt sich unser Text dynamisch an unterschiedliche Ansichtsfenstergrößen Beachten Sie, dass dies unabhängig von Breakpoints ist. Es würde einfach aktiviert werden, sobald 5% der Breite des Viewboards größer als eine Mindestgröße Nun, Klammer scheint die Lösung für all Ihre Hoffnungen und Träume zu sein, und sie ist fantastisch Es ist jedoch wirklich ein Bereich, in dem Designer und Entwickler sich zusammensetzen und im Browser arbeiten müssen zusammensetzen und im Browser arbeiten , um diese Details richtig zu machen. In Ihrer Designdatei wird das nicht passieren. Es beinhaltet auch einige Überlegungen zur Barrierefreiheit sowie die Implementierung technischer Ausweichmöglichkeiten Im Allgemeinen kann dies also sehr sinnvoll sein, wenn Sie an einem kreativen Einzelprojekt mit vielen Anpassungen und Liebe zum Detail arbeiten einem kreativen Einzelprojekt mit vielen Anpassungen und Liebe zum Detail dies also sehr sinnvoll sein Wenn Sie jedoch an einem Designsystem arbeiten, ist dies möglicherweise etwas übertrieben, und Sie möchten sich möglicherweise nur an die Standardbruchpunkte halten nur an die Standardbruchpunkte Übrigens könnten Sie die Klammer immer noch verwenden, sagen wir, für einen auffälligen Heldenabschnitt innerhalb eines starreren Systems Neben der Breite des Viewports möchte ich auch auf eine neue Entwicklung hinweisen , Container-Abfragen Ohne zu tief in Container-Abfragen einzutauchen, sei darauf hingewiesen, dass sich Medienabfragen zwar auf den Viewport konzentrieren, Container-Abfragen es uns jedoch ermöglichen, die Größe des übergeordneten Containers als Ziel festzulegen und entsprechend anzupassen Auch Container-Abfragen haben ihre eigenen Einheiten, die den Viewport-Einheiten ähneln, aber sie sind stattdessen mit dem übergeordneten Container verknüpft Wir können also immer noch Clamp verwenden, aber anstatt die Viewport-Breite für die Skalierung zu verwenden, verwenden wir jetzt die Breite der Container-Abfrage Das bedeutet, dass sich unsere technische Größe an den verfügbaren Speicherplatz anpasst, was ziemlich aufregend ist Wenn es keinen Container gibt, fällt er übrigens einfach auf die Breite des Viewports zurück Implementierung erfordert jedoch einen erfahrenen Frontend-Entwickler mit Liebe zum Detail natürlich etwas mehr Zeit und Budget Es geht also nicht um einfach skalierbare Designsysteme. Aber es ist für Designer immer noch wertvoll, es zu wissen, und es könnte in Zukunft sehr relevant werden. 21. 19 Responsive Typografie in Figma mit Stilen: Umgang mit responsiver Typografie in Figma. Derzeit gibt es zwei Möglichkeiten, dies zu tun. Wir können entweder für jeden Breakpoint einen Stil einrichten oder dies automatisieren, indem wir Style-Variablen und Modi verwenden Um dem nachzugehen, besuchen Sie bitte figma.com Farsh Moon Learning Hier finden Sie die beiden verschiedenen Typskalen mit den unterschiedlichen Aufbauten , die ich Ihnen zeigen werde Schauen wir uns zunächst den traditionellen Ansatz an, individuelle Stile pro Breakpoint einzurichten Ich gehe also so vor, dass ich zuerst alle meine Stile für meinen Standard einrichte Hier können Sie also sehen, dass ich die Namen meiner verschiedenen Stile habe, und dann habe ich etwas Text erstellt und diesen Text in einen Stil umgewandelt. Wenn wir uns also den Gesamtaufbau unserer Stile ansehen, können Sie sehen, dass ich für jeden Stil einen Ordner habe, also Überschrift X L, und dann können Sie sehen, dass ich im Inneren einen Stil für die Basis habe. Also das wäre dieser hier. Dann einer für M, das wäre dieser hier und L. Sie könnten das auch andersherum erstellen und einen Ordner pro Bildschirmgröße und dann innerhalb der verschiedenen Stile haben einen Ordner pro Bildschirmgröße und . Das liegt an dir. Also wenn wir mal nachschauen, haben wir auch drei Stile für L. Sie können also sehen, dass das unsere Überschrift L ist . Und dann behalten wir in Überschrift M die gleiche Größe von Standard bis Größe M und ändern dann nur bei L. Sie können also sehen ich nur die erstellt habe, bei der die Änderung passiert. Andernfalls würden wir unsere Basis verwenden. Das ist also auch der Grund, warum ich diese Basis nenne und nicht Größe S oder so. Sie können den Stil nur erstellen, wenn Sie ihn benötigen, oder Sie können hier auch einfach Standardstile einrichten. Nehmen wir an, wir könnten in unserer Standardgröße auch die Basisgrößen M und L erstellen, und selbst wenn sie identisch sind, können wir sie einfach auf dasselbe einstellen. Manchmal ist das sinnvoll, denn wenn Sie beim Erstellen später beschließen, Ihre Textgröße zu ändern, dann ist alles bereits eingerichtet. Also wirklich ein Salz wert. Und für unser Setup mit dem Verhältnis würde es im Grunde genauso funktionieren . Und hier siehst du, dass ich wirklich für jeden Breakpoint einen Stil brauche für jeden Breakpoint einen Stil Wenn wir uns also dieses Setup ansehen, dann sind es dieselben Ordner, und Sie können sehen, dass ich wirklich für jeden Stil drei Stile in Figma für jeden Breakpoint benötige Sie müssen das alles nicht selbst herausfinden. Gehen Sie einfach zu typescie.com und wechseln Sie dann von RM Und in diesem Fall würden Sie die Körpergröße ändern Das würde dir die Werte für 18 und dann in meinem Beispiel für 20 geben, und dann kannst du einfach die Pixelwerte hierher kopieren. Wenn Sie sie dann verwenden möchten, haben Sie nur einen Bildschirm pro Breakpoint, und Sie können sehen, dass das, was ich hier gemacht habe anders ist als die Verwendung von Min - und Max-Werten. Sie können also sehen, dass sie dadurch gesperrt werden wenn die Größe auf den Mindest- und Maximalwert geändert Damit das funktioniert, benötigen Sie einen Rahmen für das automatische Layout. Und dann wende ich den Stil auf den richtigen Breakpoint an. Also hier seht ihr, ich habe meine Headline-Basis angewendet. Also mein X L, aber der Basisstil, und hier habe ich das gleiche X L, aber die Größe M, und dann auf dem letzten Bildschirm das L. Wir verwenden auch das X L, das L. Wir verwenden auch aber eine Ablenkung für den L-Bildschirm Also hast du vielleicht mehr Breakpoints und dann wird es ziemlich unübersichtlich Normalerweise habe ich diese Art von Einrichtung irgendwo anderen Seite versteckt, z. B. auf einer Spielplatz-Seite, auf ich verschiedene Größen ausprobieren kann, und dann zeige ich einfach meine Handy - und Desktop-Größe für das gesamte Eine Sache, auf die ich bei diesem Ansatz hinweisen möchte, was ziemlich knifflig ist, ist, dass Sie, wenn Sie Komponenten haben , mit denen Sie hoffentlich Ihr gesamtes Design eingerichtet haben, wahrscheinlich eine Komponente pro Breakpoint einrichten müssten eine Komponente pro Breakpoint einrichten Sie können hier also sehen, dass ich hier meine Basis habe, und dann habe ich hier meine Größe M und dann hier meine Größe L. Nun, wir könnten das auch überschreiben, sodass Sie in die Komponente gehen und es überschreiben könnten die Komponente gehen und es überschreiben Aber das wird wirklich chaotisch und es ist eine potenzielle Fehlerquelle Das ist wirklich ein Nachteil für dieses Setup. 22. 20 Figma-Typografie mit Variablen und Modi automatisieren: Hinzufügen von Variablen und Modi zu Stilen, um die Änderung der Textgröße auf verschiedenen Bildschirmgrößen zu automatisieren Deshalb möchte ich Ihnen einen anderen Weg zeigen, wie Sie damit umgehen können, und zwar die Automatisierung der Größe mit Stilen, Variablen und Modi Also beginnen wir mit der gleichen Grundkonfiguration. Wir richten unsere Standardgrößen und erstellen Stile für sie. Hier können Sie also sehen, dass dies auch als unsere Überschrift X L eingerichtet ist auch als unsere Überschrift X L eingerichtet . Sie können hier also sehen , dass ich die gleichen Stile habe, aber nur einen Stil habe. Also habe ich auch keine Unterordner erstellt. Und wenn du mal nachschaust, dann haben sie alle den gleichen Stil, aber sie haben unterschiedliche Größen Das funktioniert also, wenn wir unsere lokalen Variablen öffnen, ich habe eine Typografie-Sammlung und schauen wir uns zuerst die Standardwerte an Das sind alle Standardwerte. Sie können 16, 16, 16 usw. sehen. Dann sind unsere Schlagzeilen größer. Ich kann auch meine Schriftfamilie hinzufügen, ich kann auch Stärke und Abstand hinzufügen. Ich konzentriere mich vorerst nur auf die Textgröße. Dann habe ich zwei weitere Modi erstellt, einen für Größe M und einen für Größe L. Sie können Modi erstellen, indem Sie auf die Plus-Schaltfläche klicken, aber dafür benötigen Sie einen Pro-Plan oder mehr Figma Und dann ändere ich hier die Werte. Das ist wieder in Pixeln eingerichtet, und ich kann neue Werte für meinen M-Modus und meinen Größe-L-Modus einrichten . Nun, was ich in meiner Übersicht gemacht habe ist, dass das alles kleine Rahmen sind, und dann findest du hier, sobald du ein Element hast, das einen Modus hat , für den Figma dir den kleinen Modusschalter gibt und du kannst sehen, dass den kleinen Modusschalter gibt und du kannst ich diesen hier geändert habe, und jetzt erhalte ich die Größen für, und hier erhalte ich die Größen für L. Und es tauscht diese Textgröße automatisch aus als in den Modi angegeben Wenn ich zur Standardeinstellung zurückspringe, können Sie sehen, dass ich wieder die kleinen Größen erhalte. Deshalb habe ich in meinem Design nur meine Basis eingerichtet, und dann können Sie hier sehen, dass alles immer noch den gleichen Stil verwendet. Aber ich habe den Modus des übergeordneten Rahmens geändert, sodass du es hier von Größe M aus sehen kannst. Wenn ich zur Standardgröße zurückkehre , würde alles auf die kleinste Größe umgestellt. Und auf diese Weise benötige ich auch nur eine Komponente, weil diese nur den allgemeinen Stil verwendet. Aber da diese Komponente auf automatisch gesetzt ist, muss alles, was Sie auf den übergeordneten Frame legen , ihre automatische Einstellung beibehalten, und es würde daher den vom übergeordneten Frame festgelegten Stil erben den vom übergeordneten Frame festgelegten Stil Hier können Sie sehen, dass, obwohl dies eine Größe hat, wenn wir in den tauben Modus wechseln, wir sehen können, dass die Textgröße hier bei 30 liegt, und wenn wir zurückgehen und das vergleichen, dann können wir sehen, dass 30 die Größe für die Überschrift auf unserem Bildschirm L ist . Das ist also wirklich eine großartige Möglichkeit, damit umzugehen. Sie müssen sich jedoch darüber im Klaren sein, dass Sie alle einen Pro-Plan oder höher haben müssen , um damit fertig zu werden Es erfordert auch einige gute Figma-Kenntnisse und ist auch etwas komplizierter , wenn Ihr Designsystem wächst Sie müssen also verschiedene Bibliotheken aufrufen und viele verschiedene Dinge ändern 23. 21 Beispiele aus dem echten Leben: Es gibt viele verschiedene Methoden und Herangehensweisen, mit denen Sie den Umgang mit Elementen wie Abstandskomponenten und Typografie einrichten und dokumentieren können Umgang mit Elementen wie Abstandskomponenten und Typografie einrichten und dokumentieren wie Abstandskomponenten und Typografie einrichten und Es ist immer eine gute Idee, sich nach Inspiration umzuschauen. Sie jedoch daran, dass dies wirklich davon abhängt, welche Art von Projekt Sie anstreben, Ihrem Team und Ihrem Budget. Es geht also wirklich darum, Ideen zu bekommen und auszuwählen, was für Ihr spezifisches Projekt richtig ist. Zwei meiner Lieblings-Designsysteme zur Inspiration sind das Uber-Designsystem namens Base. Es bietet wirklich einen umfassenden Leitfaden zu ihrer Philosophie und Umsetzung. Sie können sich also wirklich umschauen und sehen, wie sie die Dinge machen. Ein anderes, das ich wirklich mag, ist das Punktdesign. Es ist nicht so detailliert wie das UBA-Designsystem. Es ist eher eine allgemeine Vorstellung davon , wie sie mit ihrem Design umgehen, aber es gibt immer noch wirklich schöne Beispiele, die man sich ansehen kann. Ich empfehle jedoch generell zwei Orte, an denen Sie viel Inspiration finden können. Der erste ist der Showcase mit Nullhöhe. Falls Sie Zero Height nicht kennen, ist es eine großartige Softwareplattform, die den Dokumentationsprozess zwischen Design- und Entwicklungsteams erleichtert den Dokumentationsprozess zwischen . Hier findest du einen guten Überblick über verschiedene Unternehmen, die ein offenes Designsystem ohne Höhe aufbauen . Du kannst dich einfach durch sie klicken, Du kannst dich einfach durch sie klicken um Ideen zu bekommen und sie zu vergleichen. Ein weiterer Ort, den ich wirklich mag, ist Storybook. Es ist eher auf Entwickler ausgerichtet, aber Sie finden hier auch einen Showcase-Bereich, Sie auch diese Beispiele durchgehen können. Es könnte auch eine gute Idee sein, sie mit Ihrem Entwicklungsteam durchzugehen sie mit Ihrem Entwicklungsteam um sich verschiedene Ideen anzusehen Genau wie bei Zero Height können Sie sie durchsuchen und auch die verschiedenen Bereiche wie Typografie, Abstand, Komponenten usw. finden die verschiedenen Bereiche wie Typografie, Abstand, Komponenten usw. Sie können sie jedoch aus einer eher entwicklerorientierten Perspektive verstehen . Okay. 24. Vielen Dank: Gut gemacht für den Abschluss dieses Kurses. Fühlen Sie sich frei, uns bei moon learning dot io zu kontaktieren, wir sind immer daran interessiert, Ihr Feedback zu hören. Sie würden auch als großen Gefallen tun, wenn Sie nur eine Minute nehmen und eine Bewertung hier hinterlassen könnten . Wenn Sie diesen Kurs genossen haben und auch sicherstellen, dass Sie einen Blick auf unsere zusätzlichen Kurse. Bei Moody Learning Punkt. Wir decken alle Themen ab, von den Grundlagen des UX UI Designs bis hin zu Figma und sogar einige Code-Grundlagen. Besuchen Sie unsere Website bei Moody Learning dot IO, wo Sie sich auch für unseren Newsletter anmelden können.