Typografie und Font im UI-Design

1. Kurs-Einführung: Schriftarten sind ein wichtiger Bestandteil jedes einzelnen Designs, da sie die Geschichte erzählen und den Benutzer dorthin leiten, wo er klicken muss und wohin er in Ihr Design gehen muss. Die Auswahl einer guten Schriftfamilie und die Auswahl einer guten Schriftfamilie für die Verschwendung ist also wirklich wichtig und wirklich ein Schlüssel, um einen gut lesbaren Designdesigner Alex hier zu haben , um einen gut lesbaren Designdesigner Alex hier . Willkommen in diesem Skillshare-Kurs Schriftarten und Schriftfamilien , Schriftstärken und wie man sie benutzt. Ich bin ein Entwickler digitaler Designprodukte und habe bisher über 500 verschiedene Designprodukte entwickelt. Ich bin auch ein Kursersteller und habe bisher über drei verschiedene Kurse mit über 60.000 eingeschriebenen Studenten erstellt . In diesem Kurs werden wir über verschiedene Schrift- und Schriftfamilien sprechen . Was ist der Unterschied zwischen ihnen? Was sind Serifen und Serifenlose, unterschiedliche Schriftstärken und wie man sie verwendet, verschiedene Schriftarten, Maßstäbe und wie man diese verwendet und wie man eigenen Bot erstellt, um Schriftarten für Ihre Projekte auszuwählen. Und schließlich, wie man Schriften koppelt. Ihr Projekt Abhängig von der Projektkomplexität im Projektthema besteht Ihr Skillshare-Klassenprojekt darin, eine Schriftskala unter Verwendung der von mir bereitgestellten Vorlage zu erstellen . Stellt sicher, dass Sie es auschecken. Und ich habe in dieser Klasse ein spezielles Video über das Klassenprojekt. Schauen Sie sich das an, um weitere Informationen zu erhalten. Zu wissen, wie man Schriftarten in Ihrem Design verwendet , wird Ihnen als Designer wirklich zugute kommen. Und es wird Ihren Benutzern wirklich zugute kommen , weil es ihnen mehr Wert bietet. Sie werden länger dort bleiben, weil es für sie eine angenehmere Erfahrung ist. Ich freue mich darauf, dich in dieser Klasse zu sehen und lass uns einige tolle Schriftkombinationen erstellen. 2. Typefaces VS: Einer der Hauptfehler , den junge Designer machen, ist, dass sie Schriften nennen , was nicht wirklich stimmt. Typeface ist wirklich eine Schriftfamilie. Und die Schriftart ist nur eine Variante innerhalb dieser Familie. Lassen Sie mich Ihnen ein kurzes Beispiel geben. Stellen Sie sich vor, Sie verwenden zum Beispiel die Roboto-Schriftart. Und dann haben Sie innerhalb der anderen Wasserschrift Bolzen, normal, dünn, ultrafett. All dies sind Schriftarten, aber Report selbst ist eine Schriftart. Verschuldete Familien sind die wichtigsten Missverständnisse , die Designer haben. Sie versuchen, die Vorstellung voranzutreiben , dass Schrift alles ist, obwohl sie es wirklich nicht ist. Was Sie haben können verschiedene Arten von Schriftvariationen innerhalb der Einzelfamilie oder eine Flasche ist wirklich ein gutes Beispiel, weil Sie Roboto Regular, Roboto normal haben und dann haben Sie etwas namens Roboto Slab, das komplett Font ist, wirklich fette Linien, und es wird hauptsächlich für den Druck verwendet, aber Sie können es auch in einer Art kühnem Webdesign verwenden. Aber genau das ist der Punkt hier. Versuchen Sie nicht, Schriftarten mit Schriftfamilien zu verwechseln, da Schriftfamilien mehrere verschiedene Schriftarten enthalten können . Und Schriften sind nur Variationen innerhalb dieser Schriftfamilie. Wie gesagt, es kann mehrere Schriftarten innerhalb einer einzelnen Familie geben. Denken Sie also daran und lassen Sie sich nicht verwirren. Sie können die gesamte Familie oder Schriftart innerhalb Ihres Designs verwenden , oder Sie können einfach eine Variante verwenden, z. B. in diesem Beispiel Roboto regular oder Roboto bold. Wir werden in dieser Klasse in ein paar Videos darauf eingehen. Aber darauf wollte ich nur hinweisen. 3. Schriftarten: Wenn ich junge Designer interviewe, wenn ich mit ihnen spreche, wissen sie oft junge Designer interviewe, wenn ich mit ihnen spreche, nicht wirklich, was der Unterschied zwischen Serif und Sans Serif ist, wenn es um Schrift geht Es ist wirklich super einfach. Und ich machte weiter und habe einen wirklich guten Artikel gefunden. Ich werde es in der Klassenressourcendatei verknüpfen. Schauen Sie es sich also an und lesen Sie es selbst, denn wir werden uns nicht zu tief in dieses Video vertiefen, aber ich möchte Ihnen nur schnell zeigen was die Unterschiede zwischen Serifen sind, serifenlos, und wenn jeder von ihnen verwendet wird. Hier haben wir also den Artikel, den ich erwähnt habe und der von Adobe.com stammt, Creative Cloud Design entdecken. Und ich werde den Link zu diesem Artikel hinterlassen, wie ich in den Klassenressourcendateien gesagt habe. Sie können also hier einige Beispiele sehen. Vielleicht scheint das für Sie nicht zu unterscheiden. Vielleicht hast du solche Schriften gesehen. Vielleicht hast du solche Schriften gesehen. Aber was ist wirklich der Unterschied zwischen Serif und Sans Serif? Hier haben wir also den Hinweis im Namen und den Hauptunterschied zwischen diesen Schriftarten. Diese Dinge am Ende des Briefes selbst sind also Brandung. Und Sie können genau hier sehen, wir haben sie nicht im Sand surfen, wenn ich mich nicht irre, das ist Französisch. Also ohne diese Serifen am Ende. Das ist also der Hauptunterschied zwischen Serifen und Sende-Servers. Wenn Sie sie jetzt verwenden können, können Sie sehen, wann Sie Serifenschriften verwenden müssen. Es wird also sehr ausführlich darauf eingegangen, wann und wie man sie benutzt. Sie können sie hier in gedruckter Form sehen. Sie also unbedingt diesen Artikel, um mehr darüber zu erfahren. Und natürlich können Sie weiter herausfinden, wann Sie diese finden können. Aber kurz gesagt, wenn man Serifen und Sensoren verwendet, ist es wirklich super einfach. Es kommt auf das Thema Ihres Designs und auf die Designrichtung Ihres Designs an und darauf die Designrichtung Ihres Designs an , wofür Sie entwerfen. Wenn Sie zum Beispiel mutiges Website-Design entwerfen , vielleicht etwas Neues, etwas Frisches, etwas für die jüngere Generation, werden Sie keine Server verwenden, das sind die Schriftarten mit diesen Dingen. Am Ende jedes Buchstabens werden Sie serifenlose Schriftarten verwenden, da Cera-Schriftarten wirklich etwas Altem zugeschrieben werden . Und wenn Sie zum Beispiel für etwas Altes entwerfen , machen Sie eine Art Oldtimer-Website oder Sie machen eine Art Oldtimer-Ausstellung vielleicht eine Art Oldtimer-Ausstellung oder etwas, das sie gelöst haben. Dann werden Sie die Serifenschriftarten verwenden, bei denen diese Dinge am Ende der Buchstaben stehen. Aber im Allgemeinen gilt als Faustregel, wenn Sie nicht für etwas Traditionelles , Elegantes und Altes entwerfen , dann verwenden Sie diese serifenlosen Schriftarten, weil diese modernere Schriftarten und mehr verfügbare Schriftarten, insbesondere im Webdesign, weil sie online arbeiten und für die Online-Arbeit, Lesbarkeit, Barrierefreiheit, für Skalierbarkeit: Aus all diesen Gründen sind serifenlose Schriftarten viel besser zu verwenden, insbesondere im Website-Design. Aber wie gesagt, Sie können immer noch Tausende verschiedener Serifenschriften finden , wenn Sie sie in Ihrem Webdesign oder App-Design verwenden möchten . All dies hängt von Ihrem Thema ab, wofür Sie entwerfen, wer Ihre Zielgruppe ist und was Sie vermitteln möchten, welche Art von Emotion, welche Art von Erfüllung mit der Schrift du wählst. Sie also einfach an diese Dinge Denken Sie also einfach an diese Dinge, wenn Sie für das Web entwerfen. 4. Font und wie man sie nutzt: Wenn Sie anfangen, eine Schriftfamilie zu verwenden, je nach Familie selbst feststellen, werden Sie je nach Familie selbst feststellen, dass sie viele verschiedene Schriftarten enthält, die mit verschiedenen Namen gekennzeichnet sind wie regular teen bold, extra bold, italic, fett, kursiv und viele, viele mehr, abhängig von der Schriftfamilie selbst. Diese werden Gewichte genannt. Und wie man diese Gewichte in verschiedenen Szenarien verwendet. Darüber werden wir in diesem Video sprechen. Und ich werde Ihnen ein Beispiel zeigen und Ihnen nur eine Vorstellung davon geben , wo Sie sie verwenden können. Also hier ist das Beispiel, und ich bin in Adobe XD, das ist die Designdatei aus einem meiner vorherigen Kurse, und ich verwende sie nur als Beispiel, um Ihnen all diese verschiedenen Schriftstärken und deren Verwendung zu zeigen sie betonen, was Sie in Ihren Designs zeigen möchten . Also, was wir hier in der Heldenabteilung haben, wenn ich es auswähle und genau hier auf die rechte Seite komme . Also lass mich einfach diesen wählen. Da haben wir's. Sie können sehen, dass der Schriftname Open ist. Sans, Größe ist 24 und das Gewicht ist normal. Warum ist es dann normal? Nun, weil ich nur möchte, dass die Leute das zuerst sehen, was offensichtlich größer und ausgeprägter ist und eine andere Farbe hat. Das nennt man Point of Aufmerksamkeit, weil ich ihre Aufmerksamkeit zuerst auf diesen weißen Text lenken möchte, weil ich wollte, dass sie diesen Text zuerst lesen. Deshalb möchte ich, dass es oben und unten anders aussieht als dieser Text , während sie hier in der Mitte sind und dieses Heroin ist Boutique-Hotel lesen. Ich möchte, dass er sieht, dass es oben und unten einen weiteren Text gibt. Und dann möchte ich sie lesen. Ich möchte, dass sie es lesen , weil sie da sind. Wenn ich also den Prototyp hier schnell auf den Markt bringe, kannst du sehen, wie das aussieht. Also hier bin ich in der Heldenabteilung und alles was sie sehen können ist das. Ihr Blick wird also natürlich in die Mitte dieser Seite gezogen , in die Mitte dieses Bildes. Und Sie können lesen, dass dieses Heroin ein Boutique-Hotel nach Schulden ist . Sie können alles sehen, wo es dort noch andere Texte gibt. Willkommen in Helens Boutique-Hotel. Okay, dein Zuhause, weg von zu Hause. Das ist also die Schriftstärke. So benutzt man sie. Und Sie können feststellen, dass diese Schrift anders aussieht. Sie können sehen, dass es Surfen ist, wie wir in einem früheren Video erwähnt haben. Also warum ist das so? Denn das Branding dieses Hotels und dieses Designs erfordert es wirklich. Und deshalb habe ich mich für diese Art von Look entschieden. Wenn ich mich also dafür entscheide, können Sie sehen, dass es Playfair Display 70 heißt, was der Schriftgröße entspricht, die in diesem Fall viel größer ist . Denn ganz zu schweigen von all diesen Dingen, die ich erwähnt habe, sondern um darauf aufmerksam zu machen. Und dann sieht man kalt fett, kursiv ist das Gewicht. Es ist Italica. Es ist also irgendwie zur rechten Seite geneigt und es ist mutig. Es ist ausgeprägter als bei normaler Schrift. So können Sie Ihre Schriftgewichte in vielen verschiedenen Beispielen ausbalancieren . Und wenn wir etwas nach unten scrollen, können Sie noch einmal sehen, hier ist dieselbe Schriftart jetzt in einer anderen Farbe, um den Kontrast zwischen weißem Hintergrund und Schrift selbst zu erzielen . Und Sie können Ihr Zuhause in der Ferne sehen. Also kommen wir vielleicht noch einmal zu diesem Slogan zurück. Dann kannst du hier etwas wirklich Interessantes sehen. Wenn ich also diesen auswähle, kannst du sehen, dass es Open Sans 24 Bolt ist. Und wenn ich diesen auswähle, Open Sans 24 regulär. Und Sie können sehen, indem Sie einfach Bolzen und Normal auswählen und eine andere Farbe wählen, dass ich ihre Richtung in eine andere Richtung lenke und ihre Aufmerksamkeit in eine andere Richtung lenke. In diesem Beispiel können Sie sehen, dass ich diesen Untertitel lesen wollte , weil er wirklich wichtig ist. Ich möchte, dass ihr Verstand nur auf diese drei Dinge achtet. Also Kingsize-Betten, Essen inklusive Zugang zum Strand, weil dies wirklich wichtige Verkaufsargumente für diese spezielle Website sind wirklich wichtige Verkaufsargumente für diese spezielle Website um neue Besucher zu gewinnen. Und wenn sie wollen, können sie natürlich den Text darunter lesen. Deshalb ist dieser mutig und dieser regelmäßig. Dieser hat eine etwas dunklere Farbe als dieser, weil ich möchte, dass ihre Augen zuerst auf diesen Text gerichtet werden. Gleiche Geschichte wie hier und damit hier. Wenn du jetzt ein bisschen scrollst, können wir hier die gleichen Texte sehen. Das Boutique-Hotel Headwinds ist in Ordnung. Und hier haben wir ein Zitat von einem unserer früheren Kunden zu dieser Website oder ein Testimonial, Sie können Jenny aus London sehen, aber dieses ist viel ausgeprägter. Es ist viel größer. Wenn ich es also auswähle und gleich hierher komme, kannst du sehen, dass es Open Sans 36 kursiv ist. Und es hat diese dunklere Farbe als diese, die Open Sans 24 unregelmäßig ist. Also noch einmal möchte ich, dass sie zuerst das Zitat lesen und dann sehen, von wem das Zitat stammt. Der Name spielt in diesem Fall nicht wirklich eine große Rolle. Sie können es für die Layoutübergänge loswerden. Es spielt keine Rolle, worauf es ankommt ist ihre Erfahrung mit diesem Hotel, denn der nächste Kunde, den Sie für Ihr Hotel gewinnen möchten, wird diese Erfahrung zuerst sehen wollen. War mir das egal, ist es Jenny, benutze es, Mark, ist es wer auch immer? Sie kümmern sich nicht wirklich darum, sie kümmern sich wirklich um die Erfahrung. Und dann können Sie den Kontrast darunter mit der Schaltfläche Jetzt buchen sehen , die blau ist und weißen Text enthält. des Kontrasts willen können Sie dies noch einmal , wenn wir etwas nach unten scrollen in diesem Design sehen, wenn wir etwas nach unten scrollen. Und nicht nur dieses Design, sondern jedes einzelne Design, das ich kreiere. Weil ich immer über diese Dinge nachdenke. Was ist wichtiger? Was ist weniger wichtig? Was werden die Leute zuerst sehen? Und wie kann ich das mit meinen Schriften und Schriftstärken unterstreichen ? kannst du genau hier sehen. Bei den Namen des Raums ist die Schrift also viel größer als all diese unten. Und das sieht man an den Funktionen, ja und nein. Natürlich wählen wir dann verschiedene Farben aus, um zu zeigen, welche Funktionen verfügbar sind und welche nicht. Und dann haben wir noch einmal das andere Styling mit dem Link unten. Erfahren Sie mehr, sie können auf diesen Link klicken, es ist anders. Also wenn sie, wie sind, werden sie die Veränderung sehen. Man muss also über all diese Dinge nachdenken. Hier. Sie können die Funktionen sehen. Wir haben also einen privaten Pool, wir haben einen schönen Garten, wir haben einen privaten Parkplatz. All dies ist mit einem bestimmten Zweck super einfach zu lesen. Deshalb habe ich diese Schriftart gewählt, die viel größer ist, die ein bisschen anders ist, nämlich Boulder, hat eine dunklere Farbe als die darunter liegende Schrift. Wieder einmal habe ich Open Sans als Hauptschrift verwendet. Dieses hier und Playfair Display für diese große, fette Schrift. Wenn wir noch einmal etwas nach unten scrollen, können Sie sehen, dass dies erneut passiert. Also besuche Delos, das ist der Titel, und das ist der Text. Wenn ich diesen Text also nicht lesen möchte, kann ich nur Delos besuchen und alles was ich wissen muss. Displays gibt es also etwas zu tun. Und wenn wir noch einmal etwas nach unten scrollen , buchen Sie Ihren Aufenthalt bei uns. Es lädt sie also wirklich ein , ihren Aufenthalt bei diesem Hotel zu buchen. Und wieder einmal können Sie sehen, dass dieser Kontrast genau hier mit dem weißen Hintergrund und diesem dunkelgrauen Text auftritt . Und das letzte Beispiel ist die Anmeldung für Newsletter. Es ruft Sie also wirklich zum Handeln auf, zum Handeln. Und dann ist es das, was du siehst. Melden Sie sich zunächst für einen Newsletter an. Das ist es, was Sie als zweites sehen, und das ist wieder mit einem Zweck , denn ich möchte dies aussprechen Melden Sie sich für einen Newsletter an, denn das ist die Aktion, die er ergreifen soll. Und dann, sobald ich ihre Aufmerksamkeit mit der Anmeldung für den Newsletter habe , melde dich an und erhalte Neuigkeiten und Updates und bla, bla. Das ist wirklich zweitrangig, weil ich möchte, dass sie so lange wie möglich auf diesem Teil der Seite bleiben. diese Weise können Sie Schriftarten, Schriftarten und verschiedene Farben und vielleicht sogar verschiedene Schriftfamilien verwenden , um zu betonen, was Ihre Benutzer auf Ihrer Seite sehen sollen. Sie können dies in viel mehr Details untersuchen. Und abhängig von Ihrem Farbschema für Ihr Projekt kann dies wirklich noch komplexer oder sogar einfacher sein komplexer oder sogar einfacher als das Beispiel, das ich Ihnen gerade gezeigt habe und das nur ein paar Farben enthält. 5. Auswahl von Schriftarten: Wenn es um die Auswahl von Schriftarten für Ihr Projekt geht, gibt es wirklich zwei Hauptüberlegungen. Sie sollten vorhandene Schriftarten und das Hauptthema des Projekts haben und das Hauptthema des Projekts Vorhandene Schriftarten sind offensichtlich die Schriftarten , die Ihr Kunde zuvor verwendet hat. Dann können Sie sich diese Schriftarten ansehen. Sehen Sie sich die gesamte Schriftfamilie an, sehen Sie, was sie enthält, und denken Sie vielleicht darüber nach, wie Sie sie ein bisschen mehr betonen können. Worüber wir in einem früheren Video dieser Klasse gesprochen haben. Wie können Sie sie ein wenig anders verwenden, um einige Hauptmerkmale des Produkts oder einer Dienstleistung zu zeigen einige Hauptmerkmale des Produkts oder , die Ihr Kunde anbietet? Und dann können Sie einen Blick auf die Farben werfen, sehen, wie die zuvor diese Schriftfamilie mit diesen verschiedenen Farben verwendet hat. Vielleicht können Sie diese Farben ändern, wenn Sie dazu in der Lage sind. Vielleicht können Sie einige dunklere Farben hinzufügen, sind einige hellere Farben. Vielleicht können Sie Schattierungen dieser verschiedenen Farben hinzufügen , die sie bereits verwenden, oder neue Farben vollständig in das Projekt einführen , um mehr Leben einzuhauchen und das Projekt geschickter zu gestalten. an dem du gerade arbeitest. Die andere Möglichkeit, dies zu tun, ist mit neuen Schriftarten. Und wenn Sie sich für neue Fonds entscheiden, achten Sie darauf, was ich bereits in einem der vorherigen Videos erwähnt habe. Wird vom Projekt selbst berücksichtigt. Offensichtlich werden Sie diese fetten, hellen, verrückten Schriftarten nicht verwenden . Wenn Sie eine Website für eine Bank erstellen, vielleicht weil die Bank versucht ein Gefühl des Vertrauens, der Sicherheit und der Stabilität zu vermitteln . In einigen Fällen kenne ich den Adel nicht. willst du also achten. Worum geht es in deinem Projekt? Was versucht es den Benutzern selbst zu vermitteln. Daher müssen Sie diese Schriftarten verwenden, die gut mit dem Team des Projekts übereinstimmen . Natürlich, wenn das Projekt in Ordnung ist, nehmen wir an, Sie erstellen eine Website für Comicbuchfirma oder einen Spielzeugladen oder irgendeine Art von kinderbezogenen Inhalten wie Spiele oder Flushes oder Möbel was auch immer es mit Kindern zu tun hat. Aber auch bei Kindern gibt es immer noch einige Einschränkungen , wann Sie bestimmte Schriftarten verwenden können, wie Sie sie verwenden können. Da Vererbung wirklich der Schlüssel ist, insbesondere online, möchten Sie sicherstellen , dass Ihre Schriften am Ende des Tages lesbar sind, unabhängig davon, wer Ihre Zielgruppe ist, egal ob es seriös ist oder verspielt, wenn es farbenfroh und einfarbig ist, möchten Sie immer noch erkennen können , ob es lesbar ist oder nicht. Und wie Sie das tun können, ist es auf verschiedenen Geräten zu testen. Wenn Sie beispielsweise eine Website erstellen, müssen Sie sie auf großen Bildschirmen wie Desktop - und Laptop-Bildschirmen testen , aber Sie müssen auch sicherstellen, dass sie gut funktioniert und lesbar ist kleinere Bildschirme wie Forms. Wenn du etwas wie Webflow verwendest, ist das super einfach. Erstellen Sie einfach eine Responsive Seite aus Ihrem Design und senden Sie sich einfach den Link, senden Sie diesen Link vielleicht an jemanden, der älter ist, der neue vielleicht, und sehen Sie, ob er leicht lesen kann , ob die Farbe Der Kontrast ist gut, wenn die Schriftgewichte gut sind, wenn Ihr Farbrhythmus gut ist. Damit sie es wirklich vorlesen können. Sie können es wirklich verstehen, und sie können sehen, was Sie auf dieser bestimmten Seite vermitteln wollten . Stellen Sie also sicher, dass Sie immer testen und immer im Voraus denken. Mit wem sprichst du? Mit wem sprichst du? Wer ist dein Hauptpublikum? Und ist die Schrift vor diesem Hintergrund mit diesen Farben lesbar ? 6. Schriftart-Paarung: Manchmal möchten Sie in einigen Beispielen verschiedene Schriftfamilien verwenden, wie in dem Beispiel, das ich Ihnen zuvor mit dieser Reisewebsite gezeigt habe. Vielleicht möchten Sie einen anderen Abschnitt dieser Seite oder eine mobile App mit einer bestimmten Schriftfamilie anzeigen . Und dann noch ein Abschnitt, vielleicht möchten Sie, dass sie das Gefühl haben, einen Artikel zu lesen. Daher wirst du keine verrückte , verrückte Schrift verwenden. Sie möchten nur eine normale, einfache alte Schriftart zusammenfassen , die wirklich lesbar, verständlich und für sie sehr einfach zu sehen und zu lesen ist. Daher müssen Sie über das Pairing von Schriftarten Bescheid wissen und wie Sie Geld koppeln können? Nun, es gibt verschiedene Online-Tools , die Ihnen dabei helfen können. Und ich werde einige in diesem speziellen Video zeigen. Also hier sind wir mit der ersten dieser Kältevarianten. Und ich habe bereits ein YouTube-Video erstellt. Ich werde es in den Klassenressourcen verlinken. Sie können einfach klicken und sich das gesamte Video ansehen , in dem ich all diese verschiedenen Tools erkläre. Aber ich gebe dir nur einen kurzen Überblick. In diesem speziellen Video haben Sie Inspiration und Anleitungen, die Ihnen zeigen , wie Sie diese verschiedenen Schriftarten kombinieren können. Wieder einmal kommt es darauf an, was in diesem Video bereits einige Male erwähnt wurde, das Thema Ihres Projekts und das Publikum, mit dem Sie sprechen möchten. Deshalb werden Sie keine verrückten Schriftarten verwenden , wie sie beispielsweise Bankern oder einem seriösen Publikum immer wieder erwähnt werden. Aber Sie können mit Kindern umgekehrt gehen und etwas verspieltere Farben und verspieltere Schriftarten verwenden. Type Inspiration ist also die erste Website und Sie können viele verschiedene Stile auswählen. Sie können Open Sans und Sahne sehen. Bei einigen Texten handelt es sich um die hier verwendeten Schriften. Das sind die Farben. Sie können aus verschiedenen Farben wählen. Hier können Sie Schriftarten für Überschriften Textkörper auswählen. Die Schriftart der Überschrift ist hier oben, die für Kopfzeilen oder Titel verwendet wird. Und die Body-Schriftart ist genau hier, die im Wesentlichen für Absätze und für alle Inhalte verwendet wird , die mehr Text enthalten. Und es ist eher für längere Tarife gedacht. Grundsätzlich sind Titel eher Drüsen, aber man kann ihnen auch jede Drüse sehr schnell nachlesen. Aber Absätze können Sie wirklich Ihre Zeit damit verbringen müssen , sie zu lesen. Und das ist der Hauptpunkt hier. Mit Absätzen können Sie verschiedene Schriftarten und Schriftstärken erkunden . Bei Absätzen möchten Sie jedoch sicherstellen, dass Ihre Schriftart lesbar ist und dass die Farbe einen guten Kontrast zum Hintergrund hat. Und es ist wirklich keine allzu große Belastung für Ihre Augen, diesen Artikel länger zu lesen, besonders wenn es einen längeren Artikel gibt, wenn Sie eine Website zum Beispiel für Nachrichten erstellen, das ist extrem wichtig. Das ist das Hauptproblem, das Sie zuerst und sofort in diesem speziellen Projekt angehen sollten , denn der springende Punkt einer Nachrichtenwebsite ist Leute viel Zeit damit verbringen, diese Artikel zu lesen. Daher möchten Sie eine großartige Schrift haben , die wirklich lesbar ist. Und diese Titel , die wirklich überblickbar sind , weil Sie nicht möchten, dass sie zu sehr auffallen, insbesondere auf solchen Websites, weil Sie möchten, dass sie weiter gelesen werden diese Artikel unten. Erkunden Sie also diese Website. Wie gesagt, ich werde auf das Video verweisen, das ich bereits auf meinem YouTube-Kanal erstellt alles über dieses Zeug. Und ich erkläre das genauer. Und ich werde die Links in diesem Video belassen, also schau es dir unbedingt an. Das Schriftpaar ist ein anderes. Sie können also genau hier sehen, dass wir sensorische Serifenplatten haben. Sie können also sehen, dass es sich um eine Art fette Monospace-Display-Handschrift handelt. Es gibt also eine Reihe dieser verschiedenen Schriftstile , aus denen Sie wählen können. Und Sie können all diese wichtigen Schriftarten und die Hauptschrift sehen . Sie können hier Kombinationen sehen, Sie können mehr Schriftpaarungen sehen. Wählen wir also Display-Schriftarten und es werden Ihnen all diese Display-Schriftarten angezeigt. Du kannst sie erkunden. Dann haben wir das, das sind Schriftpaarungen, dot py people.com. Sie können hier eine Schriftfamilie auswählen. Und nachdem Sie das getan haben, können Sie verschiedene Textstile und den Stil auswählen. Das ist also regelmäßig, das ist fett, diese Platte sekundäre Texte, das sind die Absatztexte, die wir gerade erwähnt haben. Und dann erhalten Sie verfügbare Paarungen. Und schließlich Font Joy, das super, super einfach zu bedienen ist. Also haben wir Generate und es wird eine andere Schriftpaarung generieren. Sie können mehr Kontrast wählen oder Sie können mehr Ähnlichkeit oder ausgewogenen Kontrast wählen. Sie können zwischen Schwarz und Weiß wechseln , um zu sehen, wie es aussehen wird. Vor allem, wenn du einen dunklen Modus auf deiner Website oder deiner App entwirfst, kannst du Schriftpaarungen und verschiedene Textgrößen, unterschiedliche Gewichte usw. sehen . Also hier haben wir Montserrat, das ist genau hier. Hier haben wir diese nachgebildete Varney-Schrift, die genau hier ist. Sie können also H1, H2 und Absatz oder Überschrift eine Überschrift , zwei Absatz oder einen Haupttitel , Untertitel und Absatz sehen. Sanchez ist der Text für den Absatz selbst. Sie können also klicken. Sie gelangen zu den Google-Schriftarten, was bei dieser Sanchez-Schriftart vier ist. Und dann kann ich hier klicken und wählen, ich weiß nicht, vielleicht diesen, nur um zu sehen, wie es aussieht. Wenn es mir nicht gefällt, wird es weitergehen und das ändern. Sagen wir mal, ich mag diese oder diesen nicht wirklich. Vielleicht kann ich mich für etwas Helleres wie dieses entscheiden . Ich kann es hier abschließen. Und es wird diesen Montserrat verriegeln. Ich mag diesen nicht wirklich, also kann ich weitermachen und mehr generieren. Sie können sehen, dass Montserrat verschlossen ist, vielleicht gefällt mir dieser, aber dieser gefällt mir nicht. Wir können zur Sache kommen. Sie können immer noch ganz nach unten scrollen. Und am Ende, wenn Sie die perfekte Schriftkombination gefunden haben, die Sie verwenden möchten, wie ich bereits erwähnt habe, können Sie hier klicken. Sie werden zu den Google-Schriftarten weitergeleitet. Stellen Sie sicher, dass Sie Montserrat in der Montserrat-Schriftfamilie herunterladen , und schneiden Sie sie dann herum. Und Pylon Quinn stellt in diesem speziellen Beispiel sicher, dass sie alle heruntergeladen und auf einer Maschine installiert werden. Sie haben also all diese verschiedenen Schriftstärken, wie ich bereits erwähnt habe, normal fett und vieles mehr. Da hast du es. So einfach ist es, Font Pair zu erstellen. Achten Sie in erster Linie auf Folgendes , auf den Kontrast, auf die Lesbarkeit und auf das Thema auf die Lesbarkeit und auf das Thema , wofür Sie entwerfen . Du sorgst das alles in Ordnung. Dann wird es wirklich einfach zu entwerfen sein und es wird kaum einfach sein, es zu testen. Apropos Testen: Stellen Sie sicher, dass Sie immer mit Ihrem Publikum testen, insbesondere wenn Sie Zugriff darauf haben. Wenn Sie zum Beispiel für Kinder entwerfen, können Sie vielleicht Zugriff auf Kinder haben und sehen, wie sie mit dem Prototyp interagieren, wie sie mit der Website interagieren , mit dem mobile App. Ist es für sie leicht zu verstehen, wo sie sich anklicken müssen, als über diese verschiedenen Elemente Ihres Designs zu stolpern? Vielleicht zieht etwas zu viel Aufmerksamkeit von ihnen auf sich. Oder wenn Sie mit dem älteren Publikum zusammenarbeiten, haben Sie vielleicht, wie ich immer wieder die Banken erwähne, Zugang zu den Leuten, die in der Bank arbeiten. Wenn Sie in diesem speziellen Fall für eine Bank arbeiten, können Sie es vielleicht mit ihnen testen, ihnen eine konkrete Aufgabe geben und sehen, wie einfach es für sie ist, diese Aufgabe zu finden, wie einfach es für sie ist um in Ihrer App zu navigieren und wie einfach es für sie ist, den Text zu lesen Sie auf dieser bestimmten Seite anzeigen möchten. 7. Schriftfarbe: Wenn Sie für das Web oder für mobile Apps entwerfen, möchten Sie eine umfassende Skalierung über Ihre Schriftgrößen und Schriftstärken hinweg haben . Und das kann mit einer Schriftskala erreicht werden. Sie können eine Schriftskala erstellen, sodass Entwickler später leichter verstehen können, welche Schriftgröße für was ist, und genau das können Sie in Ihren Styleguide aufnehmen, nur um sie neben Ihrem zu zeigen Farben, neben Ihren Bildern, Ihren Stilen und vielem mehr. In diesem Video werde ich Ihnen zeigen, wie Sie eine einfache Schriftskala erstellen. Sie müssen diesen Ansatz nicht verwenden. Andere Ansätze finden Sie online. Es gibt buchstäblich Dutzende verschiedener Ansätze online. Finden Sie heraus, welches für Sie, Ihr Projekt und Ihre Skalierungszwecke geeignet ist. Also lass uns anfangen. Hier sind wir in Adobe XD und ich werde Ihnen nur zeigen, wie Sie mit Adobe XD eine schnelle Schriftskalierung erstellen. Wenn Sie Figma Photoshop verwenden, was auch immer Sie dort erstellen können. Aber für diese Zwecke werde ich x D verwenden, weil es mir wirklich gefällt und es jeden Tag benutzt. Also werde ich auf T klicken, um zum Beispiel H1 zu erstellen. Dann werde ich sagen, eine solche Flasche verwenden . Statt normal nehme ich, sagen wir mal, Schwarz. Und ich werde mit einer Größe von 80 gehen. So richtig riesig. Und das wird mein H1 sein. Vielleicht, vielleicht sogar noch größer, vielleicht 88, so etwas. Da haben wir's. Dann drücke ich Control D oder Command D und senke das auf vielleicht etwas wie 64. Da hast du es. Statt Schwarz nehme ich Bolt. Und statt H1 nenne ich es H2. Was also genau hier geschaffen wird, ist eine klare Unterscheidung zwischen Heather. Heidekraut. Heather One ist etwas , das ich in meinen Heldenbildern verwenden werde , zum Beispiel in der Mitte des Designs selbst, in der Mitte dieser Heldenbilder. Im Gegensatz zu dem Beispiel, das ich Ihnen zuvor gezeigt habe. Aber das ist in diesem Fall einfach akzentuierter, größer, mutiger, schwarz, aber dieser ist fett, weil ich ihn vielleicht als Titel meiner Abschnitte verwenden möchte oder so ähnlich. Deshalb ist es fett und nicht schwarz und es ist 6488. Wenn wir also etwas weiter nach unten gehen, können Sie in diesem Fall ein H3 erstellen. Und statt 64 können wir vielleicht 48 für diesen Fall verwenden. Und statt Bolt, eigentlich nein, lasst es uns mutig bleiben. Wenn wir dann etwas runtergehen, können wir so etwas wie H4 erstellen. Und statt 48 können wir vielleicht 40 nehmen, in diesem Fall n. Lass uns diesmal einen regulären verwenden. Sie können also deutlich den Unterschied zwischen diesen erkennen. Also, wenn wir H5 etwas runtergehen und in diesem Fall vielleicht etwas, ich weiß nicht, 24 gebrauchen können . Vielleicht haben wir's los. Vielleicht können wir das als Absatztext oder einige Beispiele oder so etwas verwenden , etwas, das etwas kleiner ist und H6, lass uns mit, ich weiß nicht, 16 vielleicht in meinen Fällen wirklich nicht gehen wollen weiter als 16. Wir haben also H1, H2, H3, H4, H5 und H6. Vielleicht kannst du diesen H6 umbenennen und ihn Absatztexte nennen. Vielleicht kannst du deinen Entwicklern so etwas zeigen und sehen, was sie denken. Und was Sie auch tun können, ist bei jedem dieser Optionen noch einmal auf Control D zu drücken jedem dieser Optionen noch einmal auf Control D und Alphabet einzugeben. Also a, a, B, B, B, C, C, D, D, E und so weiter und so fort. Sie können also das gesamte Alphabet eingeben und die Schriftstärke und die Schriftgröße in diesem speziellen Beispiel über das Alphabet anzeigen Schriftstärke und die Schriftgröße , oder Sie können etwas anderes verwenden wie Ich weiß nicht, Lorem Ipsum Text oder so ähnlich. Ich habe die Tastenkombination hier nicht und ich habe das Plug-In hier nicht installiert. Also lass uns damit weitermachen. Also hat sich Lorem Ipsum ROC getroffen, vielleicht kann ich diesen Text kopieren und dann kann ich dasselbe mit diesem machen. Fügen Sie es einfach ein. Auf diese Weise können Sie Ihrem Kunden und Ihren Entwicklern zeigen, wie ein bestimmter Text in bestimmten Anwendungsfällen aussehen wird . Nehmen wir an, ich habe absichtlich mit dieser speziellen Farbe angefangen. Und warum ich mich dafür entschieden habe ist nur, Ihnen die Hauptunterschiede zwischen diesen Texten aufzuzeigen. Aber in diesem speziellen Fall würde ich absichtlich weitermachen und diese Farbe in etwas viel, viel, viel Dunkleres ändern . Und vielleicht speichern Sie es hier als Farbmuster. Oder ich kann gleich hier meine Farben bearbeiten. Dann kann ich das tun. Werd den hier los. Vielleicht kann ich gleich weitermachen und dieselbe Farbe wählen, aber ein paar Schritte bis zu so etwas gehen dann eine andere Farbe wählen. Und was Sie tun können, ist, Ihren Farbfeldern sofort Namen zu geben . Also dieser ist H2, Farbe. Da hast du es. Dieser ist H1. Und vielleicht können wir noch weiter gehen. Sorry, mal sehen, ob das ein H2 ist. Also kann ich zurückgehen und den H12 benutzen und dann einen Schritt nach oben gehen, so etwas. Speichern Sie es gleich hier, speichern Sie es gleich hier, nennen Sie das Alter drei. Da haben wir's. Und dann endlich, vielleicht möchte ich mich etwas noch Helleres entscheiden. Für diesen vielleicht nicht, aber es liegt alles wirklich an dir. Vielleicht so etwas. Da hast du es. Und ich kann ihm den Namen H4 geben. In diesem speziellen Fall können Sie sehen, dass sie sich sehr ähnlich sind. Aber es gibt den Sinn dieses Videos, aber Ihre Kunden haben vielleicht die Hauptfarbe, sagen wir, das Blau ist ihre Hauptfarbe. In diesem Fall können wir vielleicht mit etwa drei C6 FF gehen. Also wirklich helles und kräftiges Blau, vielleicht ist das ihre Hauptfarbe. Wie können Sie diese Farbe in Ihr Design integrieren? Offensichtlich wirst du es dafür nicht benutzen. Das ist wirklich für Heldensektionen und so, was ich bereits erwähnt habe. Vielleicht verwendest du es für jeweils drei. Also drei sind C6, F, F. Und wie Sie sofort sehen können, sieht es in diesem Beispiel viel besser als in diesem Beispiel. Warum ist das so? Denn wenn Sie es für die größte Textgröße verwenden , die Sie in Ihrem Design haben, wird es nur die Aufmerksamkeit des Benutzers von allem anderen stehlen . Das ist nicht etwas , was du willst. Text ist wirklich dazu da, Dinge zu erklären , die Ihren Benutzern zeigen, was sie als nächstes tun müssen, und um ihnen wirklich zu helfen, das Ziel für ihren Besuch auf Ihrer speziellen Website oder mobilen App zu erreichen . In diesem Fall würde ich also Farbe für Text verwenden , ungefähr so. Und ich würde es nicht für Absatztexte verwenden , da Sie, wie ich bereits erwähnt habe, möchten, dass Ihre Absätze lesbar sind. Sie möchten, dass sie leicht verständlich sind, und Sie möchten, dass Ihre Benutzer problemlos durch Ihr Design navigieren können . Eine letzte Sache , die ich vergessen habe, ist, dass ich diese Farbe speichern möchte. Wir haben es bereits. Da hast du es. Also H5, ich möchte es speichern. Da haben wir's. H5. Und wir werden dieselbe Farbe für den Absatz selbst verwenden . Und eine letzte Sache, die ich tun möchte, ist, alle meine Schriftgrößen auszuwählen und direkt hier zu den Zeichenstilen zu kommen und dort zu klicken. Sie können also sehen, dass es sie sortiert, ungefähr so. Aber was ich tun kann, ist Control oder Command Z zu gehen. Klicke hier, um diesen als ersten zu speichern. Und dann so, und dann so, und geh einfach rauf und rauf und hoch. Da haben wir's. Und natürlich können Sie sie umbenennen. Du kannst gleich hierher kommen und H1 eingeben. Und das kannst du mit all diesen anderen machen. Also H2, H3 und so weiter und so fort. Ich werde dich nicht zu sehr damit belästigen. Aber der springende Punkt hier ist, diese umzubenennen. Wie gesagt, es ist für Entwickler später viel einfacher zu verstehen was Sie vermitteln wollten, wenn Sie dieses Design nicht selbst entwickeln. Also los geht's. So einfach ist es zu bedienen. Und Sie können sehen, wenn Sie es vermasseln wie ich es gerade zuvor getan habe, können Sie einfach Spielhallen in H1 sehen, die genau hier ausgewählt wurden. Oder wenn Sie versehentlich die Farbe geändert haben, können Sie sehen, okay, es ist ein H1-Klick genau dort, und es wird die entsprechende Farbe verwenden. Sie können also sehen, wie super einfach das ist. Und ich werde diese Datei, die ich Ihnen gerade gezeigt habe, als Übungsdatei für Sie bereitstellen die ich Ihnen gerade gezeigt habe, als , damit Sie sie testen können. Stöbern Sie um, nutzen Sie es für sich selbst spielen Sie vielleicht mit diesen verschiedenen Farben herum , die Ihnen gerade gezeigt werden, oder vielleicht ganz verschiedenen Schriftfamilien. Also verwenden wir Roboto in diesem speziellen Fall, vielleicht möchten Sie etwas mit einer Oberfläche im Inneren verwenden , wie die Playfair-Display-Schriftart, die ich zuvor erwähnt habe, oder möchten Sie noch mutiger werden als Roboto? Du kannst das richtig machen. Da. Da haben wir's. Das sind die Schriftmaßstäbe, und so benutzt man sie. Wie gesagt, Sie werden diese Übungsdatei haben, stellen Sie sicher, dass Sie sie ausnutzen und herumspielen, um ein perfektes Ergebnis zu erzielen. Oder wenn Ihnen dieser Acht-Pixel-Ansatz nicht gefällt, wie ich zu Beginn dieses Videos sagte, haben Sie eine Reihe dieser verschiedenen Beispiele online. Erforschen Sie sie selbst und finden Sie heraus, was für Sie am besten funktioniert. 8. Dein Kursprojekt: Ihr Klassenprojekt besteht darin, Ihre eigene Schriftskala zu erstellen, sie als Bild zu speichern und in Ihre Klassenprojekte hochzuladen. So können sowohl ich als auch alle anderen Teilnehmer des Kurses sehen, was Sie erstellt haben. Sie können also diese Vorlage verwenden , die ich in den Klassendokumenten zur Verfügung stellen werde . Sie können es herunterladen und selbst herumspielen. Stellen Sie sicher, dass Sie verschiedene Schriftarten und Schriftfamilien in verschiedenen Farben verwenden Schriftfamilien in verschiedenen Farben , um unterschiedliche Ergebnisse zu erzielen. Und Sie können mit zwei Schriftarten erkunden. Ich würde nicht empfehlen, darüber hinauszugehen, weil es mir nicht wirklich gefällt, wenn Leute mehr als zwei Schriftarten verwenden. Ich denke nicht, dass es wirklich notwendig ist, aber Sie können damit machen, was Sie wollen, oder Sie können füge sogar mehr Größen hinzu. Sie können mit verschiedenen Größen herumspielen und sich das ansehen, was ich hier mit all diesen verschiedenen Farben und Charakterstilen geschaffen habe hier mit all diesen verschiedenen Farben und Charakterstilen geschaffen diesen verschiedenen Farben und Charakterstilen Spielen Sie unbedingt mit ihnen herum um Ihr perfektes Ergebnis zu erzielen. Und dann, wie gesagt, lade es in deine Klassenprojekte hoch. Ich freue mich darauf zu sehen, was ihr erstellen werdet und ich bin gespannt wie ihr diese Vorlage, die ich in Adobe XD erstellt habe, anpassen werdet. 9. Schlussbemerkung: Also los geht's, das war's für diesen Kurs. Ich hoffe wirklich, Sie haben ein besseres Verständnis über Schriftfamilien, über Schriftarten, verschiedene Schriftstärken, wie und wann man sie verwendet, sowie darüber, was Sarah für sensible Menschen ist und wann sie zu verwenden ist diese, sowie schließlich, was ist eine Schriftskala und wie man sie benutzt. Ich hoffe wirklich, dass dir dieser Kurs gefallen hat. Schauen Sie sich unbedingt das PDF mit allen Ressourcen an , die ich erwähnt habe. Schauen Sie sich unbedingt die Übungsdatei und sehen Sie, wie sie aussieht. Stöbern Sie um und spielen Sie selbst herum. Vielen Dank, dass du dir diesen Kurs angesehen hast. Wenn Sie unbedingt meine anderen Klassen lesen möchten, insbesondere in meinen Meisterkursen, bei denen es sich um Kurse handelt, die über 20 Stunden dauern, gehen Sie auf viele verschiedene Details zu all diesen Dingen ein. Vielen Dank fürs Zuschauen. Und schließlich sollten Sie sich meinen YouTube-Kanal ansehen, der die volle Wirkung kostenloser Inhalte bietet, alles über Ihr UX-Design, passive Einkommenstechniken und vieles mehr, alles innerhalb von Adobe XD-Abschluss so viel zum Anschauen dieses hier. Und bis zum nächsten Mal pass auf dich auf.