So entwerfen Sie eine responsive Preistabelle in Figma | UI Pattern Series

1. Willkommen im Kurs: Wenn Sie Ihre Fähigkeiten in Bezug auf Typografie, Layout und Farbe verbessern möchten , ohne ein umfangreiches Projekt in Angriff zu nehmen, dann ist dieser Kurs genau das Richtige für Sie Jeder, ich bin Adi, und in diesem kurzen Kurs werden wir eine ansprechende Preistabelle in Figma entwerfen Es ist schnell, zielgerichtet und jeder Schritt ist umsetzbar Sie erfahren genau, wie Sie ein Layout strukturieren, Typografie auswählen und skalieren, mit gleichbleibenden Abständen arbeiten und ein einfaches, effektives Farbschema erstellen Und weil wir nur einen Teil einer Website entwerfen, ist es einfach, alles nachzuvollziehen. Außerdem habe ich eine Startdatei mit den kurzen Anweisungen und gebrauchsfertigen Frames vorbereitet , sodass Sie direkt loslegen können. Dieser Kurs ist Teil meiner UI Pattern Series kurze praktische Übungen, die sich jeweils auf ein Muster konzentrieren. So können Sie Ihre Fähigkeiten verbessern und wichtige Grundlagen üben ohne sich im Rahmen einer vollständigen Website zu verlieren Öffnen Sie also Figma, holen Sie sich die Starter-Datei und lassen Sie uns loslegen 2. Grundlayout und Typografie: Dies ist eine Kopie der Starterdatei. Lass mich dir zeigen, was wir haben. Zuallererst Anweisungen. Wir müssen auf der ansprechende Preistabelle Grundlage der Kursbeschreibung unsere eigene, und drei Preispläne enthalten. Die Namen der Tarife, Preise, Kurzbeschreibungen und Funktionslisten. Wir müssen den beliebtesten Plan hervorheben. Wir benötigen für jeden Plan eine klare CTA-Schaltfläche und wir müssen Desktop- und Mobil-Layouts erstellen Jetzt haben wir auch einige Projektressourcen. Wir entwerfen diese Preistabelle für ein SAS-Startup namens Task Flow. Wir haben die drei Tarife Basic Pro und Enterprise, und wir müssen den Pro-Plan hervorheben. Wir haben zunächst einige Markenfarben. In Bezug auf die Typografie müssen wir eine saubere San-Serif-Schrift verwenden, und wir haben auch den Text oder den Textinhalt für Oh, fangen wir eigentlich genau hier an. Ich hole mir die Kopie für den Basic-Plan und gehe zu meinem Desktop-Layout. Hier werden wir anfangen. Ich werde das einfügen und den Text nach Bedarf aufteilen Also nehme ich den Text, schneide ihn von hier aus, erstelle ein weiteres Textelement, und ich nehme diese Beschreibung, schneide ihn von hier aus, erstelle ein weiteres Textelement und dann hole ich mir den Plannamen Hier eingefügt, und alles, was uns hier bleibt , ist eine Liste unserer Tariffunktionen Lassen Sie uns diese jetzt ein wenig arrangieren. Wir hätten im Grunde den Namen des Plans, dann den Preis und dann die Beschreibung hier und dann die Funktionen des Plans. Das ist ein ziemlich normales Layout. Und am Ende werden wir die CL zur Aktion hinzufügen. Und wenn wir auf das Briefing zurückblicken, können Sie sehen, dass der Text der CTA-Schaltfläche „ Erste Schritte“ sein sollte Also lass uns das kopieren und einfügen. Jetzt haben wir also den gesamten Textinhalt vorbereitet. Wir werden dafür Auto Layout verwenden weil es viel, viel einfacher ist. Wählen Sie alles aus. Shift A. Dadurch wird alles zu einem Auto-Layout-Frame hinzugefügt, und dann fange ich an, Elemente zu gruppieren je nachdem, wo sie hingehören Zum Beispiel sollten der Preis pro Monat und diese Beschreibung wahrscheinlich zusammen gruppiert werden Also nochmal Shift A, um sie zu ihrem eigenen Auto-Layout-Frame hinzuzufügen. Dann denke ich , dass ich auch diese Elemente trennen werde . Also werde ich jedes einzelne davon ausschneiden, ein neues Textelement erstellen und ich werde hier keine Liste verwenden. Lass uns das einfach noch zweimal duplizieren . Lass uns das kopieren, einfügen, kopieren, einfügen. Lass uns die einfach entfernen. Und schließlich ist das letzte Element, das hier noch übrig bleibt, der E-Mail-Support. Und lassen Sie uns auch das aufräumen. Wählen Sie nun diesen, diesen und diesen Shift A aus, um sie zu ihrem eigenen Auto-Layout-Frame hinzuzufügen. Lassen Sie uns vorerst einfach einen zufälligen Abstand wie diesen einrichten. Der nächste Schritt besteht darin , eine Typskala auf das Ganze anzuwenden. Und eine Typskala ist im Grunde ein typografisches System, bei dem jede Schriftgröße auf der vorherigen Schriftgröße multipliziert mit einem bestimmten Verhältnis basiert der vorherigen Schriftgröße multipliziert mit einem bestimmten Auf diese Weise können Sie sozusagen sehr natürlich aussehende Schriftgrößen erstellen sehr natürlich aussehende Schriftgrößen Sie können das also auf verschiedene Arten tun. Meine bevorzugte Methode ist die Verwendung eines Plugins. Also werde ich Strg oder Befehl K drücken , um die Aktionen aufzurufen. Ich gehe zu Plug-ins und Widgets und lasse mich hier hinein zoomen und suche nach Typenskala. Und ich werde einfach auf eines davon klicken. Der erste funktioniert meiner Meinung nach ganz gut. Ich werde das speichern und ich werde es ausführen. Und ich werde 16 Pixel als Basisschriftgröße wählen. Und bei der Skala werde ich mich für 1,333 entscheiden, was auch als perfekte vierte Skala bekannt ist Und das ist quasi die Typskala, die wir uns ansehen. Also werde ich einfach auf Generieren klicken und ich werde das einfach so aufrufen. Jetzt können Sie sehen, dass wir hier die 16 Pixel haben, und dann ist die nächste Schriftgröße auf der Skala 21, dann 28 und dann 38 und so weiter und so fort. Und es geht auch auf Stufen darunter, wo wir 12 und neun Pixel für wirklich, wirklich kleinen Text haben. Das ist eine großartige Möglichkeit, die Schriftgrößen festzulegen , falls Sie sich nicht sicher sind Wenn Sie nicht wissen, welche Schriftgrößen Sie verwenden sollen, verwenden Sie grundsätzlich immer eine Schriftskala. Okay. Lassen Sie uns nun diese oder diese Skala auf unsere Designelemente anwenden. Wir beginnen mit dem größten, was der Preis sein sollte. Und wenn wir wieder nach oben scrollen, gehe ich nicht zum allerersten Element, weil es zu groß ist. Versuchen wir es mit 51 Pixeln , weil das ungefähr die richtige Größe hat. Also stellen wir hier 51 Pixel ein, 150% Zeilenhöhe. Das sieht soweit ziemlich gut aus. Nächstes für diese kleine Beschreibung Gehen wir als Nächstes für diese kleine Beschreibung einen Schritt höher als die Standardschriftgröße vor. Die Standardeinstellung ist 16, wir verwenden 21. Also wähle das aus. Wir werden genau dort 21 einstellen. Das sieht ziemlich gut aus. Stellen wir 16 Pixel ein. Zu den Funktionen, weil diese eher einem Haupttext ähneln, wie einem normalen Haupttext. Für den Namen des Plans verwenden wir auch 21 Pixel. Es hat also dieselbe Größe wie diese Beschreibung. Und dann die Schaltfläche hier haben wir 16 Pixel, aber wir werden sie fett formatieren, weil ich möchte, dass die Schaltfläche ein bisschen mehr hervorsticht. Okay, wir haben also das grundlegende Layout fertiggestellt. Wir haben die Schriftskala angewendet, aber wir müssen auch eine Schrift wählen, oder? Weil standardmäßig Inter verwendet wird, aber Inter ist eine großartige Schrift, aber sie wird oft verwendet, oder? Es gibt also viele großartige Optionen. Und eine großartige Quelle für Schriften , die ich ständig verwende, ist Google Fonts Sie sind kostenlos. Im Grunde gibt es eine riesige Auswahl, und sie sind in Figma vorinstalliert Und wenn wir auf unsere Projektbeschreibung unter Typografie zurückblicken , können wir sehen, dass der Vorschlag darin besteht, eine saubere serifenlose Schrift zu verwenden Gehen wir also zu Google Fonts und wir werden in der Seitenleiste nach unten scrollen , wo San Serif steht, und ich wähle einfach Und das zeigt mir einfach alle Sanerif-Schriften Hier drin kannst du Inter sehen. Die, die standardmäßig da war, Monstera, ist eine weitere großartige Variante Und Sie können einfach eines davon auswählen es in Ihrem Design testen Ich persönlich werde mich für DM-Söhne entscheiden. Ich liebe diese Schrift wirklich. Sie ist sehr lesbar. Es eignet sich hervorragend für Fließtext, und es hat nur, du weißt schon, ein bisschen Charakter, sodass es nicht zu langweilig aussieht Also DmsNSF Google Fonts, ich werde jedes einzelne Textelement hier auswählen und ich werde es hier schnell in DM-Sons ändern Und so sieht es aus der Nähe aus . Wunderschöne, wunderschöne Schrift Okay, nachdem das erledigt ist, der nächste Schritt darin, an den Farben zu arbeiten Das kommt in der nächsten Lektion zur Sprache. 3. Anwenden von Farben: Lassen Sie uns schnell eine Farbpalette für unser Projekt erstellen. Und auf der Grundlage des Briefings, falls Sie sich erinnern, sagte uns der Brief, dass, hey, wir haben einige Markenfarben, die Sie wählen können. Es gibt eine Primärfarbe, die wie eine Indigofarbe aussieht, und es gibt einen Akzent , der einem warmen Orange ähnelt Jetzt habe ich diese Farben genau hier, und das allererste, was ich tun möchte, ist, eine graue Farbe zu kreieren, die auf meiner Primärfarbe basiert Ich kann das ganz einfach machen, indem ich das dupliziere und den Farbwähler öffne Und ich wähle den HSL-Farbmodus, um eine dunklere, weniger gesättigte Version meiner Markenfarbe zu erzeugen , und das ist dann die graue Grundfarbe Also hier ist, wie ich das mache. Ich wechsle zunächst von Hex, was wahrscheinlich der Standardmodus in Ihrem Farbwähler ist , zu HSL Dies steht für Farbton, Sättigung und Helligkeit. Es ist im Grunde eine andere Art, eine Farbe darzustellen. Das erste Feld hier steht für den Farbton. Das ist die Sättigung, das ist die Helligkeit. Ich möchte also den gleichen Farbton beibehalten , aber die Sättigung verringern Entfernen Sie also viele dieser Produktinformationen und verringern Sie auch die Helligkeit. Also die Sättigung, ich werde sie bis hier auf etwa 16 reduzieren bis hier auf etwa 16 Es ist also eher grau, aber es hat immer noch ein bisschen von dieser Farbe im Inneren. Und ich werde es auch dunkler machen. Statt 63 werde ich es auf etwa 32 reduzieren , oder? Dadurch habe ich eine dunklere, weniger gesättigte Version meiner Primärfarbe erhalten. Lassen Sie uns nun einige Farbtöne und Schattierungen für diese Farben erstellen, speziell für die Primär- und Graufarben Und ein Farbton ist im Grunde eine hellere Version der Farbe. Ein Farbton ist eine dunklere Version der Farbe. Es ist, als würde man Weiß oder Schwarz mit dieser Farbe mischen. Und es gibt verschiedene Möglichkeiten, Dosen und Farben zu kreieren. Ich persönlich bevorzuge es, ein Figma-Plugin zu verwenden, und es gibt auch eine Reihe von Plugins Diejenigen, die ich in letzter Zeit verwendet habe heißen Hu Hu Tins and Shades Sie können hier also das Aktionsfenster öffnen und zu Plug-ins und Widgets gehen und nach Hue Hue suchen Wenn Sie also darauf klicken, können Sie im Grunde eine Farbe auswählen. Ich probiere einfach meine Primärfarbe aus und lasse den Rest standardmäßig stehen und klicke auf Farben generieren, richtig? Das wird mir hier also ein paar schöne Farben erzeugen. Und ich werde den Stecker wieder einschalten. Aber dieses Mal werde ich die graue Farbe probieren. Und es generiert wieder. Und ich kann einfach das Plug-In-Fenster schließen. Lass uns diese kopieren und in meinen Bereich einfügen , oder? Jetzt habe ich meine Farbpalette. Wenn ich zu irgendeinem Zeitpunkt Farbtöne und Schattierungen für die Akzentfarbe erstellen muss , kann ich das genauso einfach tun, aber im Moment ist das nicht notwendig Nun, da ich einige Farben habe, mit denen ich arbeiten kann, fangen wir mit dem Hintergrund Und lass uns etwas anderes machen. Lassen Sie uns dieses Mal einen Dunkelmodus machen. Okay? Also wähle ich den Desktop und drücke I, und ich probiere diese sehr dunkle Farbe aus. Und statt einer Volltonfarbe verwenden wir einen Farbverlauf. Also werde ich hier zur Füllfarbe zurückkehren. Und ich werde auf einen Farbverlauf klicken. Ich werde Radio wählen und ich wollte, sagen wir, von diesem Punkt aus nach außen strahlen , okay Und ich werde hier die Farben vertauschen, sodass es von einer helleren zu einer dunkleren Farbe wechselt Und für die hellere Farbe probieren wir einfach vielleicht diese aus. Okay, ich denke , das ist gut genug. Es muss kein großer Unterschied im Kontrast sein, gerade genug, damit wir wissen , dass wir dort einen Gradienten haben. Okay. Lass uns jetzt an diesen Karten arbeiten. Beginnen wir damit, ihnen eine Hintergrundfarbe hinzuzufügen. Fügen wir also eine Füllung hinzu und probieren wir diese dunkle Farbe gleich hier aus. Lassen Sie uns vielleicht 60% dieser Farbe verwenden , nur um ihr einen etwas dunkleren Hintergrund zu geben , sodass wir sie immer noch irgendwie mit dem Hintergrund mischen können. Lassen Sie uns auch eine Rahmenfarbe hinzufügen, klicken Sie auf Kontur. Ich werde die Grenze nach außen setzen. Und lass uns sehen. Wir werden auch eine graue Farbe verwenden. Lassen Sie uns also vielleicht diesen probieren. Okay, klicken Sie nach draußen, sehen Sie, wie es aussieht, und das sieht für mich ziemlich gut aus. Es ist immer noch vom Hintergrund zu unterscheiden und fügt der Karte einen kleinen Akzentrahmen hinzu Als Nächstes fügen wir diesem Feld etwas Polsterung hinzu. Da wir Auto Layout verwenden, ist es wirklich einfach. Wir fügen einfach 40 Pixel nach links und rechts und dann 80 Pixel nach oben und unten hinzu. Und lassen Sie uns auch einen Randradius von 40 hinzufügen , um das Ganze etwas runder zu machen. Lassen Sie uns nun diese Textelemente einfärben , weil wir sie gerade kaum sehen können. Wählen Sie also die Karte aus. Und, weißt du, anstatt hier Schwarz zu verwenden, könnten wir es auf Weiß umstellen. Aber ich finde, das ist zu kontrastreich. Ich verwende also gerne ein anderes Grau, aber eines, das sehr, sehr hell ist. Also werde ich einfach diesen sehr hellen Farbton wählen. Und das macht den Text sichtbar. Es hat einen tollen Kontrast, fügt sich aber auch ein bisschen mehr in den Hintergrund ein. Und lassen Sie uns den Text hier auswählen, und dafür werde ich eine dunklere Farbe verwenden. Also lass uns einfach probieren, vielleicht schauen wir uns diesen an. Das ist zu dunkel. Gehen wir zwei Schritte nach oben. Das sieht ziemlich gut aus. Und ich glaube, das behalte ich. Und was sonst? Lass uns den Button erstellen, oder? Die Schaltfläche sollte eigentlich die primäre Markenfarbe verwenden . Also wählen wir den Text aus. Wir verwenden Shift A, um ihn zu seinem eigenen Auto-Layout-Frame hinzuzufügen, und wir verwenden einen Abstand von 32 Pixeln Horizontaler Abstand von 16 Pixeln, vertikal, wir richten den Text in der Mitte Wir stellen sicher, dass die Füllung hier oder die Breite so eingestellt ist , dass sie den Container füllt, sodass, wenn ich die Größe meiner Karte ändere, auch die Größe der Schaltfläche angepasst wird. Wählen wir den Text darin aus, und wir stellen die Breite hier so ein, dass er sich an den Inhalt Und lassen Sie mich Ihnen hier nur das Gesamtbild zeigen. Und jetzt nehmen wir diesen Knopf. Drücken Sie Ich probiere die Primärfarbe und wir fügen einfach einen Randradius von 100 hinzu. Es ist also wie eine Pillenform. Also, dank Auto Layout, ändert die Größe der Schaltfläche zusammen mit der Karte Cool. Lassen Sie uns das auch etwas verschönern und der Feature-Liste hier einige Symbole hinzufügen. Und eines meiner bevorzugten Icon-Sets, das ebenfalls kostenlos ist, sind Phosphor-Symbole Sie können es auf phosphor icons.com herunterladen. Und wenn wir auf Explore-Symbole klicken, können wir vielleicht nach einem Häkchen suchen, und ich wähle Check-Kreis Und ganz unten haben wir die Möglichkeit, eine SVG-Datei entweder herunterzuladen oder zu kopieren. Also lasst uns das SVG kopieren. Wir springen zurück zu Figma und wählen hier eines der Textelemente Wir fügen das ein und setzen seine Größe auf 16. Bis 16. Und wir müssen auch Farbe darauf auftragen. Also werde ich hier tatsächlich die Farbe aus diesem Text verwenden , sie kopieren, in das Symbol einfügen, das Symbol und den Text auswählen, auf den wir sie anwenden. Shift A, um es zu einem eigenen Auto-Layout-Frame hinzuzufügen. Und dann stellen wir hier im Inspektor die Richtung auf horizontal und die Ausrichtung auf die Mitte ein, und dann wählen wir einfach den Text aus und dann wählen wir einfach und verschieben ihn nach rechts. Jetzt müssen Sie nur noch dasselbe Layout auf die anderen vier Funktionen anwenden . Und das mache ich am liebsten, indem einfach den ersten dupliziere, also Strg - oder Befehls-D, und dann einfach den Text auswähle, kopiere ihn und füge ihn ein. Kopieren, einfügen. Und kopiere es, füge es so und dann kann ich sie auswählen, löschen. Und jetzt ist mein Layout fertig. Zum Schluss noch ein Detail Ich wähle die Karte aus und setze den Abstand zwischen den Elementen auf 40, okay? Aber ich möchte, dass der Button, der CTA, weiter unten platziert wird Und ich möchte auch, dass das unten auf der Karte bleibt wenn ich die Größe der Karte vertikal ändere. Also, wie machen wir das? Ganz einfach. Wir wählen diese drei Elemente aus, wenn Sie A verschieben würden , um sie zu ihrem eigenen Auto-Layout-Frame hinzuzufügen. Und jetzt setzen wir auf der Hauptkarte den Abstand auf Auto. Das heißt, wenn ich jetzt die Größe dieser Karte ändere, bleiben diese Elemente oben, während die Karte unten fest bleibt Und bevor wir diese Lektion abschließen, noch zwei weitere Änderungen Wählen wir diesen Rahmen aus , der den Preis und die Beschreibung enthält. Und wir müssen nur sicherstellen, dass der Abstand hier stimmt. Wir werden es einfach so auf vier Pixel einstellen. Und zum Schluss noch der Name des Plans, lassen Sie uns dem eine andere Farbe geben. Lassen Sie uns diese Axonfarbe genau hier verwenden. Jetzt ist der Name des Plans besser sichtbar. Und für den Rest der Elemente verwenden wir die primären und auch die Grautöne, die wir zuvor erstellt haben Okay. Nachdem das erledigt ist, der nächste Schritt darin, einfach die anderen beiden Karten zu erstellen. Das kommt in der nächsten Lektion zur Sprache. 4. Fertigstellen des Layouts: Lassen Sie uns das Layout vervollständigen, indem wir zuerst die anderen beiden Karten erstellen. Also ändere ich die Größe ein wenig, verschiebe es hierher und drücke oder befehlen D, um es zu duplizieren, und ich verschiebe es einfach nach rechts, mache das noch einmal, erstelle die dritte und wähle jetzt alle drei Shift A, um sie zu ihrem eigenen Auto-Layout-Frame hinzuzufügen, und ich setze den Abstand hier einfach auf 40 Pixel Okay. Lassen Sie uns nun den Inhalt für jede Karte aktualisieren. Also haben wir den Grundkurs gemacht. Lass uns den Pro machen. Der Pro kostet also 19$ pro Monat. Und lassen Sie mich einfach den Text dort kopieren. Ich werde hier Pro 19 ersetzen. Drücken Sie Shift R, um den Text zu ersetzen. Und dann lassen Sie uns auch diese bearbeiten. Wir haben unbegrenzt viele Projekte. Wir haben 100 Gigs Speicherplatz. Wir verfügen über fortschrittliche Analytik. Wir haben vorrangigen E-Mail-Support und wir haben Tools für die Teamzusammenarbeit. Lassen Sie uns diesen Text kopieren und dann gehen wir hier rein und duplizieren einfach eines dieser Elemente und wählen Strg+Umschalt-R, um den Text zu ersetzen, oder den Befehl Shift R, wenn Sie auf einem AMAC sind, und dann machen wir dasselbe für Enterprise Die Enterprise kostet 49 pro Monat. Es ist für große Organisationen, und wir haben unbegrenzt viele Projekte, 1 Terabyte Speicherplatz Wir haben maßgeschneiderte Analysen. Wir haben einen engagierten Kundenbetreuer und wir haben rund um die Uhr telefonischen Support. Wunderbar. Jetzt gibt es noch eine Sache zu tun, und das ist, den mittleren, den Profi-Plan, hervorzuheben und ein beliebtestes Abzeichen oder so etwas hinzuzufügen . Es gibt also viele Möglichkeiten, wie wir diesen Plan hervorheben können. Wir können ihm einen viel helleren, buntereren Hintergrund geben oder wir können ihm ein farbiges Abzeichen hinzufügen . Wir können es größer machen. Für diese Anwendung werde ich Folgendes tun. Ich wähle den Hauptrahmen aus und klicke mit der rechten Maustaste darauf, und ich gehe zur Frame-Auswahl, richtig? Dadurch wird es in einen eigenen Rahmen eingepackt. das erledigt ist, werde ich Auto Layout hinzufügen. Wir können das tun, indem wir in den Inspektor gehen und auf Autolayout verwenden klicken. Lassen Sie mich das jetzt tatsächlich einbringen, damit Sie es ein bisschen besser sehen können. Für das automatische Layout gebe ich ihm auf allen Seiten einen Abstand von vier Pixeln Ich werde es auch füllen. Und diese Füllfarbe wird eine der Variationen der Primärfarbe sein. Lassen Sie uns also zuerst die Grundfarbe auswählen. Es ist okay. Es fällt definitiv auf, aber ich finde, es ist ein bisschen zu hell. Also werden wir es abschwächen. Ich werde genau hier diese Farbe wählen, die dritte von unten. Außerdem wähle ich die Hauptkarte aus, die sich darin befindet, und ich werde die Farbopazität um 60-80 erhöhen . Alles klar? Weil ich den Hintergrund sehen will, aber nicht zu viel davon. Okay. Und jetzt wähle ich die gesamte Karte und gebe ihr den gleichen Eckradius von 40 Pixeln. Es sieht also so aus. Und dann wähle ich es aus und zoome es einfach heran, und zoome es einfach heran damit Sie sehen können, was wir tun. Und ich klicke auf diese individuelle Abstandsschaltfläche und stelle sie oben auf 64 Pixel Und das fügt hier im Grunde einen oberen Bereich hinzu, in dem wir unseren beliebtesten Text platzieren können. Okay. Also lass uns das jetzt machen. Ich klicke in T, um Text zu erhalten, und gebe dann einfach Am beliebtesten ein. Und ich möchte, dass dieser Text frei schwebt. Also gehe ich genau hier oben hin , wo Position steht, und ich drücke auf Automatisches Layout ignorieren. Okay. Und sobald ich das getan habe, befindet sich der Text immer noch in meinem Auto-Layout-Rahmen, aber jetzt kann ich ihn an eine beliebige Stelle verschieben. den Text Lassen Sie uns den Text fett formatieren und alles in Großbuchstaben So wie das. Und weil wir es in Großbuchstaben umwandeln, vergrößern wir den Buchstabenabstand ein wenig Ich denke, 6% sind genug, und ich möchte es kleiner machen Um zu bestimmen, welche Schriftgröße ich haben möchte, kann ich zu meiner Schriftskala zurückkehren, oder? Wir können sehen, dass Schriften, die auf der Skala kleiner als 16 Pixel sind , entweder 12 oder neun sein sollten. Versuchen wir es also mit 12. Und lassen Sie uns auf 100% zoomen und sehen, wie das aussieht, und ich denke, das funktioniert gut. Wenn das bei Ihnen nicht funktioniert, können Sie es natürlich erhöhen oder noch weiter verringern. Die Typenskala dient als Richtlinie. Du musst es nicht hundertprozentig respektieren. Also lass uns das nehmen. Richten wir es auf die Mitte und bewegen es gewissermaßen nach oben oder unten. Nur um es in der Mitte dieses Bereichs zu platzieren, und ich werde es auch auswählen und an der Mitte ausrichten . Wenn wir es also ändern, bleibt es an dieser Position. Und so haben wir uns entschieden, diesen mittleren Plan hervorzuheben. Bevor wir zum Abschluss kommen, hier ein kurzer Tipp, und das ist ein Profi-Tipp für Sie. Beachten Sie, dass diese beiden Ecken ein bisschen seltsam aussehen. Und das liegt daran, dass sie genau den gleichen Eckenradius haben . Aber etwas, das ich vor einiger Zeit aufgegriffen habe , war, dass, wenn man zum Beispiel verschachtelte Ecken wie diese hat, die an der Außenseite einen größeren Eckenradius haben sollte als die an der Innenseite, damit sie richtig aussehen Also lass uns das auswählen. Und statt 40 Pixeln, was dem Eckenradius der Innenseite entspricht, werden wir 40 Pixel plus den Abstand zwischen den beiden verwenden , der in unserem Fall vier Pixel beträgt. Also werde ich 44 Pixel einstellen. Dadurch sehen die Ecken jetzt viel natürlicher aus, und dadurch sieht das Ganze ein bisschen besser aus. Es ist ein winziges Detail, aber Details sind wichtig. Also das hier ist das Design der Preistabelle für den Desktop. Aber was ist mit dem Handy? Denn wenn wir das auf einen mobilen Bildschirm kopieren würden, würde es nicht wirklich gut aussehen. Lassen Sie uns die Änderung also in der nächsten Lektion vornehmen. 5. Anpassen des Layouts für Mobilgeräte: Bevor wir den mobilen Bildschirm erstellen, nehmen wir nur eine winzige, winzige Anpassung an der Typografie Ich wähle alle drei Preise und ändere ihre Schriftstärke von normal auf fett Ich denke nur, das ist ein bisschen ausgewogener und lenkt die Aufmerksamkeit ein bisschen besser auf diesen Bereich. Okay. Jetzt, mobiler Bildschirm. Hier habe ich einen Rahmen , der 428 Pixel breit ist. Wenn Sie für Mobilgeräte entwerfen, können Sie das natürlich , Sie wissen schon, verkleinern oder vergrößern, je nachdem, für welche Geräte Sie entwerfen Aber als Erstes wähle ich meinen Desktop aus, klicke mit der rechten Maustaste auf Kopieren und Einfügen, Eigenschaften kopieren und dann auf Eigenschaften kopieren und einfügen. Damit wurde im Grunde der Hintergrund kopiert. Als Nächstes wähle ich das aus. Ich gehe zum Handy. Ich werde das einfügen. Und natürlich ist es zu groß für den Bildschirm. Statt eines horizontalen Layouts müssen wir also ein vertikales Layout erstellen. Also werde ich im Auto oder im Inspektor das automatische Layout auf vertikal ändern. Lassen Sie uns diese einfach hierher verschieben und den Bildschirm des Mobiltelefons vergrößern. So wie es ist. Und lassen Sie uns diese einfach zurückziehen, weil sie ihre Einschränkungen hatten. In die Mitte stellen. Setzen wir sie auf die linke obere Ecke zurück. Lassen Sie uns das auf 40 Pixel erhöhen. Und lassen Sie uns tatsächlich den mobilen Bildschirm auswählen und ihm Auto Layout hinzufügen. Stellen wir es auf vertikal ein, wählen das aus und heben die Gruppierung Und wenn der mobile Bildschirm ausgewählt ist, legen wir auch dort einen Abstand von 40 Pixeln fest Und dann wähle ich alle drei Preistabellenkarten aus und setze sie zusammen, um Behälter zu füllen Also jedes Mal, wenn ich die Größe meines Handybildschirms ändere, ändern sich diese Und wir können gerade sehen, dass wir hier ein kleines Problem haben , bei dem der Lachs seine Größe nicht ändert, aber das ist eine schnelle Lösung. Wählen Sie ihn aus und ändern Sie im Inspektor seine Breite von fest auf Füllbehälter, einfach so Da wir es mit einem mobilen Bildschirm zu tun haben, Immobilien wirklich wichtig Lassen Sie uns das Ganze also etwas kompakter gestalten. Wählen wir das und das aus. Und statt der vertikalen Polsterung mit 80 Pixeln stellen wir sie auf 40 um Und lassen Sie uns auch den Abstand zwischen diesen auf 40 setzen und wir werden diesen Abstand auch auf 40 setzen und wir werden die Höhe jedes dieser Elemente so einstellen , dass sie sich an den Inhalt anpassen. Sie sind also nur so groß wie der Inhalt darin. Wir werden hier dasselbe tun. Ändern Sie dies auf 40, ändern Sie den Abstand hier auf 40 und wir stellen die Höhe so ein, dass sie sich an den Inhalt anpasst Und die letzte Änderung hier, ändere diesen Wert auf 40 und die Höhe auf umarmen Und das ist unsere mobile Version der Preistabelle. Es ist jetzt vertikal statt horizontal und es ist ein bisschen kompakter. Und da haben wir eine ansprechende Preistabelle, die aus einem kurzen Briefing erstellt und sowohl für Desktop- als auch für Mobilgeräte angepasst ist. Glauben Sie, dass diese schnellen, fokussierten Übungen wirklich gut sind Ihre Fähigkeiten zu erweitern, weil Sie Typografie, Abstände, Größen und Farben üben und das alles ohne den Druck eines kompletten Projekts konsistent halten alles ohne den Druck eines kompletten Projekts konsistent den Druck eines kompletten Projekts Wenn Sie sich die Videos also nur angesehen, aber nicht mitverfolgt haben , empfehle ich Ihnen dringend, das Kursprojekt zu machen Und deine Aufgabe ist einfach. Öffnen Sie die Starterdatei. In der Beschreibung finden Sie Links und Ihre eigene, ansprechende Preistabelle erstellen. Sie können dem Briefing genau folgen oder es nach Ihren Wünschen anpassen Das liegt ganz bei dir. Und wenn du fertig bist, mach weiter und teile dein Design in der Klassenprojektgalerie. Ich würde mich freuen, Ihre Meinung dazu zu sehen, und Sie können sich auch von dem inspirieren lassen , was andere Schüler geschaffen haben. Und wenn dir das gefällt, schau dir meine anderen Designkurse an, indem du mein Profil oder die Links in der Klassenbeschreibung für meine persönlichen Empfehlungen besuchst oder die Links in der Klassenbeschreibung . Okay, danke beim Zuschauen, viel Spaß beim Entwerfen und wir sehen uns im nächsten Kurs. Tschüss fürs Erste.