Figma Masterclass für Einsteiger: Gestalten Sie Ihre erste App- und Website-Benutzeroberfläche

1. Willkommen zur Figma Masterclass für Anfänger!: Willkommen zur Figma-Meisterklasse für Anfänger. Wenn Sie schon immer eine Website oder eine mobile App entwerfen wollten , aber nicht genau wussten, wo Sie anfangen sollten, dann ist dies der richtige Kurs für Sie Hallo, mein Name ist Ahmed l Hassan und ich bin ein UIUX-Designer mit mehr als fünf Jahren Erfahrung in der Entwicklung digitaler Produkte, Benutzeroberflächen Im Laufe der Jahre habe ich alles entworfen, von den einfachsten App-Konzepten bis hin zu kompletten Designsystemen Und ich werde Sie durch genau denselben anfängerfreundlichen Arbeitsablauf führen genau denselben anfängerfreundlichen Arbeitsablauf , den ich mir zu Beginn gewünscht hätte . In diesem Kurs werden wir ein komplettes UI-Design von Grund auf neu erstellen . Dabei werden wir Schritt für Schritt gemeinsam die Grundlagen von Figma erlernen Schritt gemeinsam die Grundlagen von Figma Wir werden uns zunächst mit der grundlegenden Oberfläche von Figma vertraut machen der grundlegenden Oberfläche von und dann unseren ersten Bildschirm erstellen Dann lernen wir, wie man die grundlegendsten Elemente wie Text und Formen verwendet . Wir werden etwas über Farben, Typografie, Abstände und viele Grundlagen von Figma lernen Typografie, Abstände und viele Grundlagen von Figma Laufe der Zeit werden wir mehr über komplexere Tools wie automatische Layouts und Komponenten erfahren mehr über komplexere Tools wie automatische Layouts und , die uns wirklich dabei helfen unser Design gleichzeitig skalierbar und organisiert zu halten Sie werden auch viel mehr über das Prototyping und das Verbinden verschiedener Bildschirme und das Erstellen einfacher Animationen lernen Verbinden verschiedener Bildschirme , Dinge, die Ihr Design wirklich funktionell und interaktiv machen Ihr Design wirklich funktionell und interaktiv Am Ende dieses Kurses haben Sie Ihre eigene UI-Designoberfläche erstellt und gleichzeitig werden Sie den grundlegenden Arbeitsablauf verstanden haben, werden Sie den grundlegenden Arbeitsablauf verstanden haben der von den Designern Figma verwendet wird ob Sie selbst Designer werden möchten oder einfach nur Ihre kreativen Fähigkeiten verbessern möchten, oder ob Sie einfach nur ein modernes und leistungsstarkes Design-Tool erlernen möchten . Dieser Kurs ist der perfekte Ausgangspunkt. Lassen Sie uns also anfangen. 2. Einführung: Was Sie in diesem Kurs lernen und entwickeln werden: Hallo und willkommen zur Figma-Meisterklasse für Anfänger. Ein Kurs, in dem Sie die Grundlagen und Bausteine erlernen , die Sie benötigen, um mit Figma in die Welt des Designs einzusteigen mit Figma in die Welt des Designs einzusteigen Figma ist heutzutage ein wunderbares und aufstrebendes und auch sehr grundlegendes Designprogramm aufstrebendes und auch sehr grundlegendes Designprogramm in diesem Bereich, ich sage, aufrüttelnd, als ob es brandneu wäre, aber es gibt es schon eine Weile und es hat seinen Platz in der Designwelt eingenommen, und es ist derzeit eines der führenden Unternehmen und führenden Designprogramme , die viele Designer verwenden, besonders wenn es um den Bereich geht von Produktdesign oder UIUX-Design. Ähm, aber es expandiert auch, oder? Also, weißt du, willkommen zum Kurs. Egal, ob Sie ein Anfänger sind, ein absoluter Anfänger sind oder ob Sie bereits einige Kenntnisse über Figma haben oder nicht unbedingt Figma, aber vielleicht andere Designprogramme wie Adobe-Programme , dies ist der richtige Kurs für Ich werde Sie so einfach wie möglich durch diesen Kurs führen, Ihnen aber auch Tipps und Tricks geben, um weiterzukommen Lernen Sie nicht nur die Grundlagen, sondern kommen Sie ein bisschen voran und werden Sie ein bisschen professioneller Designer und verfügen über eine gute Grundlage Was werden Sie in diesem Kurs lernen? Es gibt ein paar Dinge, die Sie lernen werden. Das Erste sind die Grundlagen des Designs. Wir werden also etwas über die Grundlagen des Designs lernen, wie man die grundlegendsten Designelemente, Rahmen, Objekte, Formen sowie die Verwendung von Stiftwerkzeugen und so weiter erstellt und verstehen, wie Sie diese verwenden können, um verschiedene Komponenten zu erstellen und so weiter Wir verstehen nicht nur Farben, Typografie und diese grundlegenden Grundlagen des Designs diese grundlegenden Grundlagen des Designs. Wir werden sie durchgehen Wenn Sie bereits etwas Hintergrundwissen haben, wird dies nur ein kleiner Rückblick sein. Wir werden all das nutzen und darauf aufbauen und anfangen, Benutzeroberflächenbildschirme zu erstellen. Das sind also Benutzeroberflächen , die wir erstellen werden, um diese Elemente zu verwenden, was wir bisher gelernt haben, was wir bisher gebaut haben, um etwas Größeres zu bauen. Das geht von Zellen über Organismen bis hin zu kompletten Körpern. Dies ist einer der ersten Schritte. Von dort aus werden wir uns mit der Prototypenentwicklung befassen. Nun zur Art, über Prototyping nachzudenken, falls Sie damit nicht vertraut sind, es ist im Grunde das, was man Animationen und Funktionen nennen könnte Animationen und Funktionen nennen Einen Button zu entwerfen, das ist Design. Aber dass die Schaltfläche anklickbar und nutzbar ist und eine nette kleine Animation hat, eine nette kleine Animation hat wenn man mit der Maus darauf fährt oder darauf klickt, das ist Prototyping, und das werden wir auch lernen Dann ist eines der letzten Dinge , die Sie lernen werden, Ihre Arbeit zu teilen, denn das ist schließlich einer der wichtigsten Schritte und einer der letzten Schritte in Nachdem Sie all das getan haben, möchten Sie Ihre Arbeit teilen , sei es mit Kunden, mit Benutzern oder auch mit Ihren Kollegen, das gehört dazu. Deine Arbeit zu teilen und zu verstehen, wie du sie für die Zusammenarbeit mit Kollegen nutzen kannst , das ist etwas ganz Wichtiges, und das werden wir auch lernen Nun, eine zweite Frage ist, was werden Sie damit bauen Dies ist eine Frage, die Sie bisher hätten klären sollen. Ich meine, diesen Kurs zu belegen. Warum bist du hergekommen? Was versuchst du zu erreichen? Oder was willst du lernen, wie man baut und vielleicht baut hier, du kannst dir ein paar Missverständnisse einfallen lassen Wenn wir hier bauen sagen, meinen wir den Entwurfsprozess Wir meinen nicht, ein echtes Produkt zu bauen. Wir meinen nicht, tatsächlich eine Website zu erstellen, sie zu programmieren, sondern zu entwerfen, wie sie aussehen und wie sie funktionieren würde. Also, was wirst du mit diesem Kurs bauen oder bauen können? Websites, das ist eine Sache. Lage zu sein, Websites zu erstellen, etwas, das Sie In der Lage zu sein, Websites zu erstellen, etwas, das Sie sich für jede Website vorstellen können, das ist etwas , das Sie tun können. Du willst das neue Facebook machen, das neue Instagram, du willst das neue Google machen. Das ist etwas, das Sie innerhalb dieses Kurses oder nachdem Sie in diesem Kurs gelernt haben, Wireframes erstellen und Prototypen erstellen oder nachdem Sie in diesem Kurs gelernt Eine weitere Sache sind mobile Apps , die für Telefone, für Tablets oder für jedes Produkt bestimmt sein können , an das Sie denken Sie können Apps erstellen oder diese Apps über Figma entwerfen. Eine andere Sache ist Grafikdesign. Dies ist so etwas wie ein Anwendungsfall , der immer häufiger auf FigMA zu sehen ist . Viele Leute verwenden Figma für Grafikdesign, sei es für die Erstellung von Postern oder die Erstellung von Bildern, Markenidentitäten oder vielleicht Social-Media-Inhalten Das können Sie jetzt mit Figma machen. Das Tolle an Figma ist, dass es sich ständig erweitert Es wächst mit den Designern. persönlich habe das Gefühl, dass andere Designprogramme vielleicht Ich persönlich habe das Gefühl, dass andere Designprogramme vielleicht nicht besonders gut abgeschnitten haben. Oft war es einfach so, als ob es jedes Jahr eine neue Version eines beliebigen XYZ-Designprogramms gibt, und es war einfach fast dasselbe Sie haben nur ein paar Funktionen für fortgeschrittene Benutzer hinzugefügt , aber das Programm hat sich nicht wirklich verändert. Es bot nichts Neues, es hat das Design nicht revolutioniert Aber Figma wächst und verändert sich weiter. Und Sie sehen ein paar Dinge, die ich hervorgehoben habe, ich meine, die ich hier aufgeschrieben habe, aber unscharf nur um Ihnen das Gefühl zu geben, dass es noch viel mehr Anwendungsfälle gibt , die Sie lernen werden und die Sie mit Figma erstellen können Wir werden im Rahmen dieses Kurses nicht auf alle eingehen, da es sich um im Rahmen dieses Kurses nicht auf alle eingehen, einen Anfängerkurs handelt Aber nur um dir einen kleinen Einblick zu geben, ich meine, halb verschwommen zu sehen ist wie Präsentationen Mit Figma können Sie Präsentationen erstellen. Kann tatsächlich Websites erstellen. Ohne Programmierung können Sie mit FIGMA eine Website veröffentlichen Dies sind jedoch andere Tools innerhalb von Figma, über die wir in diesem Bereich nicht sprechen werden Denken Sie daran, Figma ist ein ganzes Universum für sich. Sie werden ständig erweitert und fügen KI-Funktionen, Plugins usw. hinzu. Deshalb ist es toll , dass du jetzt anfängst. Darum geht es in diesem Kurs. Hier wirst du lernen und lass uns anfangen. 3. Erste Schritte mit Figma: Hallöchen. Dies ist also die erste Lektion, in Figma untersucht und verstanden wird, wie Sie Ihren Arbeitsplatz einrichten können Ich gehe also davon aus, dass Sie die App heruntergeladen oder zumindest die Webversion nur zu Ihrer Information geöffnet haben die App heruntergeladen oder zumindest die Webversion nur zu Ihrer Information geöffnet die Webversion nur zu Ihrer Information Sie müssen die App nicht herunterladen. Sie können die Website einfach öffnen und von dort aus in Ihrem Browser verwenden. Ich gehe davon aus, dass Sie sich auch angemeldet haben. Ich denke nicht, dass ich Sie durch diesen Prozess führen sollte , aber es sollte ziemlich einfach sein. Nun, da Sie Ihre Figma bereits installiert und eingerichtet haben und gerade dabei sind, sollte sie so aussehen Vielleicht hast du eine Light-Version. Vielleicht ist das der Dunkelmodus, aber es ist im Grunde dasselbe. Du hast eine Menge Dinge im Gange. Er soll dich wissen lassen, es gibt Gründe, Gemeinschaft. Lassen Sie sich also nicht von all diesen Elementen ablenken und klicken Sie auf Erstellen und dann auf Design Nun, Sie sehen das vielleicht anders, Sie könnten sie als unterschiedliche Dienste betrachten Klicken Sie also einfach auf Design, und es öffnet sich ein neuer Tab für Sie. Diese neue Registerkarte ist im Grunde eine neue Projektdatei , eine Projektdatei kann mehrere Seiten enthalten. Im Moment befinden wir uns in dieser Datei. Im Moment hat es keinen Titel und ich werde die verschiedenen Elemente hier auf dem Bildschirm mit Ihnen nacheinander durchgehen die verschiedenen Elemente hier auf dem Bildschirm mit Ihnen nacheinander Das Erste, was wir uns ansehen werden, ist die linke Pfanne. Jetzt haben wir hier zuallererst das Logo Figma Wenn Sie darauf klicken, haben Sie diese regulären Registerkarten, die Standardregister der Datei- und Bearbeitungsansicht Diese bieten Ihnen viel mehr Optionen zum Bearbeiten von Dingen sowie zum Einrichten der Datei, Einrichten einiger Dinge, zum Exportieren usw., zum Ändern Ihrer Einstellungen. Aber diese sind ziemlich versteckt, weil du sie nicht so oft benutzen musst, also sind sie hier unter diesem Figma-Logo versteckt . Dann hast du den Titel Sie können weitermachen und Ihrem Projekt einen Namen geben Projekt X, zum Beispiel, es sagt Ihnen, dass es sich um ein Teamprojekt handelt, sodass Sie auch den Namen des Teamprojekts ändern können, und es heißt, dass es so ist, also haben wir hier diese Optionen, und darunter haben wir zwei verschiedene Tabs. Wir haben Datei und Ressourcen. Bei Assets handelt es sich nun um Design-Assets, die Sie sich ausleihen können. Aber das ist etwas weiter fortgeschritten. Aber nehmen wir an, Sie haben hier diese Bibliotheken. Sie haben also zum Beispiel IOS-Designelemente, die Sie sich hier ausleihen und der Seite hinzufügen können hier ausleihen und der Seite hinzufügen Aber jetzt bleiben wir bei der Datei. Jetzt haben Sie unter Datei Seiten. Hier sehen Sie also Seite Nummer eins und dort steht, dass noch zwei freie Seiten übrig sind. Dies ist der Fall, wenn Sie die kostenlose Version haben wie ich es für dieses Konto habe. Und du kannst eine weitere Seite hinzufügen. Jetzt könntest du sagen, was ist der Sinn von Seiten? Ich meine, weißt du, schreiben wir hier ein Buch? Nein, darum geht es überhaupt nicht. Es sind ganz andere Dokumente hier. Wenn wir also zu Seite eins gehen und ein Rechteck erstellen und Sie zu Seite zwei gehen, ist dieses Rechteck nirgends zu finden. Okay? Also behalte das einfach im Hinterkopf. Seiten sind verschiedene Dokumente innerhalb desselben Projekts. Das ist wie eine Datei oder Sie können sagen, ein Ordner, richtig, und er enthält mehrere Seiten. Machen wir also weiter, klicken Sie mit der rechten Maustaste und löschen Sie diese Seite. Und dann haben wir Schichten. Mit Ebenen können Sie jetzt einfach die Ebenen, die Objekte, die Gruppen, die Rahmen, alle Arten von Elementen sehen Gruppen, die Rahmen, , die Sie auf Ihrer Leinwand haben. Wenn wir hier ein weiteres Rechteck erstellen, können wir Rechteck eins und zwei sehen. Wenn wir ein Rechteck mit einer anderen Form erstellen, können Sie die Form, die auch hier gezeigt wird, ein wenig erkennen. Es zeigt nicht die Farbe, aber es zeigt die allgemeine Form , nur um Ihnen eine Vorstellung zu geben. Das dient also dazu , Ihnen einen Überblick darüber zu geben , was in Ihrer Datei passiert. Sie können auch nach Dingen darin suchen. Sie können also nach anderem Text suchen oder nach Namen von Dateien usw. suchen. Sie können auch ersetzen, Sie können wählen, wonach Sie genau suchen, ein Bild , eine Form usw. Es gibt viele Optionen und Sie können dieses Menü oder diesen Bereich hier auch reduzieren , damit Sie mehr Platz haben, um sich ein Projekt anzusehen. Aber ich würde empfehlen , dass du es hier belässt. Sie können es minimieren oder erweitern, wenn Sie beispielsweise einen größeren Bildschirm haben, und das können Sie sich leisten. Verschaffen Sie sich einfach einen allgemeinen Überblick darüber, was vor sich geht. In deiner Designdatei. Sie können die Ebenen alle hier sehen. Das ist wirklich nützlich. Dann haben wir hier unten eine Werkzeugleiste. Sie gehen vielleicht oft davon aus oder erwarten , dass sich die Werkzeugleiste dort oben oder vielleicht links oder so ähnlich befindet. Aber nein, auf Figma ist sie hier unten, und um ehrlich zu sein, kann man nicht viel damit anfangen Du kannst es nicht bewegen, du kannst nicht viel daran ändern. Viele Leute halten das für einschränkend, aber um ehrlich zu sein, finde ich, dass es einfacher ist besser. Ich möchte meine Werkzeuge nicht überall hin und her werfen können, sondern sie lieber an einem Ort haben und ich weiß, dass sie immer da sein werden. Wir werden später separat über die Tools sprechen. Aber schauen wir uns vorerst das rechte Bedienfeld an. Und hier haben wir Design. Unter Design haben Sie also Design und Prototyp. Das sind zwei verschiedene Ansichten. Wie ich bereits sagte, bezieht sich der Prototyp eher auf Animationen und darauf, wie Sie das Projekt zeigen. Wenn Sie es also einem Kunden zeigen möchten, wie es aussehen würde, und dann haben Sie ein Design. Design bezieht sich, ich meine, wenn man nichts auswählt, kann man die Seite ändern. Also die Farbe des Hintergrunds, du kannst ihn weiß machen oder du kannst ihn dunkel machen. Es liegt an dir. Sie können auch den Variablenstil ändern, aber das sind Dinge, über die wir noch nicht gesprochen haben, und sie sind etwas fortgeschrittener, oder? Also geh nicht einfach da hin. Wenn Sie jedoch auf ein Objekt klicken, zeigt Ihnen dieses Rechteck die Eigenschaften an Von der Position aus siehst du also die Xs und Ys, du hast die Drehung sowie ein paar Schnellausrichtungstasten und Sie können das Objekt spiegeln, umdrehen und so weiter. Sie haben auch ein Layout, das bezieht sich also auf die Größe, die Höhe, Sie können es ändern, die Breite, das Aussehen, die Deckkraft, abgerundeten Ecken, Sie haben Fläche, Kontur, Effekte und Export Falls Sie das als Bild als PDF exportieren möchten, können Sie das auch tun. Hier gibt es viele Optionen. Und du fragst mich vielleicht, was ist dieser kleine Knopf hier oder da oder was auch immer? Wir werden zu gegebener Zeit über sie sprechen. Aber ja, Sie sollten sich ein allgemeines Bild von Ihrer Akte machen. Wo ist was und wie verwende ich sie? Das versuche ich dir jetzt zu geben. Wie bereits erwähnt, befindet sich auf der linken Seite Ihre Datei und Ihre Ebenen. Hier hast du deine Werkzeugleiste. Wo Sie verschiedene Tools auswählen können. Sie können auch eine Tastenkombination verwenden. Hier steht also Rechteck R. Sie können zum Beispiel einfach R drücken, um es zu bekommen. Sie können V drücken, um das normale Verschiebewerkzeug aufzurufen, und so weiter. Auf der rechten Seite finden Sie die Konstruktionsspezifikationen oder Eigenschaften des Objekts, das Sie auswählen. Es gibt eine sehr, sehr wichtige Taste, die genau hier ist, das ist die Play-Taste. Wenn Sie auf diese Schaltfläche klicken , können Sie aus der Sicht des Benutzers sehen, woran Sie gerade arbeiten. Aber um das zu tun, benötigen Sie einen Rahmen. Lassen Sie uns in der nächsten Lektion darüber sprechen, was Frames sind. 4. Einrichten Ihres ersten Bildschirms: Frames, Frames und Frames. Was sind eigentlich Frames? Rahmen sind also deine Leinwand. Sie sind das Werkzeug oder das Material, sagen wir, auf dem Sie malen. Es ist nicht der Pinsel, es ist nicht die Farbpalette, aber es ist Ihr Fenster zum Benutzer, oder? Das ist das Endprodukt und das, was den Benutzern am Ende geliefert wird. Das ist ein Rahmen. Man kann nicht auf Luft zeichnen, aber man kann auf eine Wand zeichnen. Aber in diesem Sinne ist die Wand deine Leinwand und genau das sind Rahmen für Figma Genau hier wählst du das Rahmenwerkzeug und du kannst einfach einen beliebigen Rahmen beliebiger Größe erstellen beliebigen Rahmen beliebiger Größe und schon hast du einen Rahmen Das ist der Bildschirm. Das ist der Bildschirm. Es könnte ein Computerbildschirm sein, ein Telefonbildschirm, was auch immer es ist. Wenn Sie es gedrückt halten, darauf klicken und zum Abspielen wechseln, öffnen Sie in Figma einen neuen Tab , auf dem Sie sehen können, wie dieser Rahmen aussieht Rahmen sind einzigartig, weil du Dinge innerhalb von Frames platzieren kannst Sie können Rechtecke einfügen, sie einfärben oder kopieren, einfügen, an einer anderen Stelle platzieren und Sie können sehen, wie es aussieht Das ist der Bildschirm, den du gerade erstellst und den du dir ansehen kannst Nun gibt es ein paar Dinge zu beachten. Sie können Frames innerhalb von Frames haben. Erstelle hier einen Rahmen, gib ihm eine Farbe, gestalte ihn. Das ist also ein Frame innerhalb eines Frames. Es sieht aus wie ein normales Rechteck, ist aber eigentlich ein Rahmen. Aber der äußere Rahmen ist die Leinwand, und sie wird zu einem Behälter innerhalb einer Leinwand innerhalb einer Leinwand. Wir werden besprechen, warum Sie das vielleicht tun möchten und was der Unterschied zwischen einem Rechteck und einem Rahmen ist. Aber lassen Sie uns zunächst verstehen, was Frames sind und wie man sie zur Erstellung von Bildschirmen verwendet. Okay. Eine Sache , die Sie jetzt verstehen sollten, ist, dass Sie Rahmen in verschiedenen Größen erstellen können, und FigMa hilft Ihnen dabei bereits Wenn Sie also auf das Rahmenwerkzeug klicken und zum rechten Bereich wechseln, werden Sie verschiedene Rahmen sehen Es gibt also einen Rahmen eines iPhones, oder? iPhone 17, 15, P max, was auch immer Sie wollen, verschiedene Größen sowie Android. Sie haben Tablets, Sie haben Desktops, MacBooks, Fernseher. Was auch immer Sie erstellen möchten, Sie können einen Rahmen daraus erstellen also einfach auf ein MacBook Air klicken, können wir es erstellen und es zeigt Ihnen die tatsächliche Größe an. Das ist die Dimension eines MacBook Air. Wenn wir darauf klicken und dann auf Play klicken, werden wir sehen, was sich in diesem MacBook befindet wie es aussieht. So erstellt man im Grunde einen Bildschirm. Sie können einen Rahmen für ein iPhone oder sogar einen Rahmen für ein Fernsehgerät oder eine Apple Watch erstellen. All das ist möglich. Eine Sache, die Sie als Extra tun können. Wenn Sie diesen Rahmen erstellen, wählen Sie alles ab. Wählen Sie nichts aus, klicken Sie in der Wildnis, nur hier, und gehen Sie dann zum Prototyp Figma ermöglicht es uns, einen Rahmen eines Geräts zu zeigen. Da wir uns für MacBook Air entschieden haben, können Sie das MacBook Air hier als Gerät auswählen Manchmal macht es das automatisch für dich. Es wird ein Bild des MacBook hinzugefügt, um Ihr Design so zu zeigen, als ob es sich um einen echten Mac handelt. Das ist eine wirklich nette Sache, weil es sehr immersiv ist und dem Benutzer das Erlebnis vermittelt oder das Gefühl vermittelt, dass er dem Benutzer das Erlebnis vermittelt oder das tatsächlich ein MacBook verwendet Dies ist eine tatsächliche Website , die auf einem Laptop angezeigt wird. Vergleichen Sie das jetzt damit, dass sie auf nichts, auf keinem Gerät angezeigt wird. Es sieht sehr trocken aus. Das ist eine Sache, die Sie tun können die ich persönlich empfehlen kann. Aber die ganze Idee dieser Lektion ist, dass Rahmen deine Leinwand sind. Sie können nicht einfach in freier Wildbahn entwerfen. Du brauchst einen Rahmen, eine Leinwand und deine Farbe darauf. Alles, was sich außerhalb dieses Rahmens befindet, wenn ich hierher komme und ein Rechteck erstelle und wir es hier platzieren, wird es nicht angezeigt , weil es darüber liegt, aber es ist nicht innerhalb des Rahmens. Wenn ich es hier hinstelle, ist es auch nicht sichtbar. Es ist einfach so, dass da nichts ist. Aber wenn ich das ziehe und es hierher lege, ist es jetzt innerhalb des Rahmens. Es ist sichtbar und das kannst du hier sehen. Sie können sehen, dass der Rahmen Dinge enthalten kann Sobald Sie die Außenseite entfernen, befindet sich das Rechteck jetzt außerhalb. Obwohl es oben ist, können Sie es hier sehen , aber es ist nicht sichtbar. So können Sie Rahmen als Leinwand verwenden. 5. Hinzufügen von Text und Grundelementen: Hallo. In dieser Lektion werden wir Formen, Textfelder, Vektoren und mehr erstellen oder lernen, wie man sie erstellt. Lassen Sie uns zunächst Werkzeugleiste ein wenig kennenlernen . Nun haben wir uns bereits mit dem Verschieben-Tool befasst, und dies ist das Standardwerkzeug, das Sie verwenden sollten , wenn Sie Dinge auswählen und so weiter Halten Sie das also immer griffbereit und dann haben Sie das Rahmenwerkzeug Dies ist ein Tool, mit dem wir auch vertraut waren und dessen Verwendung wir gelernt haben, also im Grunde genommen Rahmen zu erstellen, und dann haben wir dieses rechteckige Werkzeug. Und jeder von ihnen hat seine eigene Abkürzung. Sie können also auf R klicken, um dies auszuwählen. Sie können auf V klicken, um den Zug auszuwählen, sodass Sie mit diesen Buchstaben einfach zwischen ihnen wechseln können. Okay? Du musst es dir nur merken. Dann haben Sie dieses quadratische oder rechteckige Werkzeug Sie können es einfach so erstellen und Sie können ein Rechteck erstellen. So einfach ist das. Sie können dasselbe mit dem Linienwerkzeug tun. Richtig? Und Sie haben ein Ellipsenwerkzeug, ein Pfeilwerkzeug und viele verschiedene Dinge Nun, eine Sache, die Sie wissen sollten und die sehr wichtig ist, ist, dass Sie die Umschalttaste gedrückt halten während Sie eine Form erstellen Sie sie im Grunde gerade machen können Dadurch werden die Abmessungen gleich. Also 154 mal 154 sind die Dimensionen. Auf diese Weise bleibt es einfach die gleiche exakte Größe. Das Gleiche gilt, wenn Sie ein Rechteck erstellen möchten. Auf diese Weise wird es also eher ein Quadrat als ein Rechteck. Das ist also sehr praktisch. Eine andere Sache ist, wenn Sie so etwas wie eine Linie erstellen, Umschalttaste gedrückt halten, damit sie gerade ist. Wenn ich die Verschiebung entferne, schau, was passiert, ich kann sie in vielen verschiedenen Graden und Graden erzeugen . Aber wenn ich die Umschalttaste gedrückt halte, wird es gerade nach rechts und links, oder es kann nach oben und unten gehen oder es kann diagonal sein. Also wir und runter, okay? Also das ist eine Sache, die man beachten sollte, es ist sehr praktisch, weil man die meiste Zeit die Dinge klar und sauber halten möchte. Aber wenn nicht, liegt es ganz bei dir. Sie können also auch die anderen Tools ausprobieren und Dinge mit ihnen erstellen, aber sie funktionieren meistens mit ähnlichen Prinzipien, okay? Und dann haben wir das Stiftwerkzeug. Nun, die Art und Weise, wie das Stiftwerkzeug ist, ist auch ziemlich einfach. Du klickst also einmal und dann erstellst du einen Punkt, okay? Also klicken Sie, Sie haben einen Punkt, und dann erstellen Sie einen weiteren Punkt. Und wenn Sie die Taste gedrückt halten, können Sie im Grunde eine Kurve erstellen. Sie können es gekrümmt machen. Siehst du? Einfach so habe ich diese Kurve erstellt. Jetzt kann ich damit eine sehr schöne Form oder so etwas erstellen , indem ich herumspiele Also nur um dir zu zeigen, was ich meine, ich versuche nur, diese Form mit drei D zu erstellen Ich bin mir nicht sicher, um welche Form es sich handelt, aber es sieht aus wie eine Badewanne. Ja. Einfach so kannst du verschiedene Formen erstellen, mit unterschiedlichen Linien und so weiter. Jetzt können Sie diese bearbeiten, Sie können sie ändern, Sie können sie austauschen. Wenn Sie zum Design wechseln, können Sie natürlich auch den Strich ändern, um die Linien zu vergrößern, und das können Sie mit allen machen. Sobald Sie also eine Linie oder einen Vektor wie diesen ausgewählt haben, können Sie hierher kommen und den Strich sehen. Jetzt ist es soweit, du kannst das Gewicht bestimmen. Du kannst es schwerer machen, damit es dicker wird. Es gibt andere Einstellungen, mit denen Sie die Farbe ändern können , und das Gleiche gilt für diese Formen Sie können auch die Füllung ändern, eine andere Farbe wählen, ihr eine andere Deckkraft geben und so weiter Denn wie bereits erwähnt, hilft Ihnen dieser Bereich auf der rechten Seite dabei , die Eigenschaften Ihrer Formen oder anderer Elemente wie Rahmen auszuwählen und zu ändern die Eigenschaften Ihrer Formen oder anderer Elemente wie Rahmen Sie können einen Strich hinzufügen , Sie können ihn schwarz machen, Sie können ihn rot machen und Sie können auch Effekte hinzufügen, aber das ist etwas fortgeschrittener. Aber auf diese Weise können Sie im Wesentlichen verschiedene Formen erstellen. Mit diesen Formen versuchen Sie, Ihre Benutzeroberfläche zu erstellen. Was wir auch haben, ist ein Textwerkzeug. Mit dem Textwerkzeug gibt es zwei Möglichkeiten, Text zu erstellen. Sie können also einfach auf eine beliebige Stelle klicken und mit der Eingabe beginnen. Du kannst Hallo sagen. Welt, und dann tippe einfach so lange du willst. Was passieren wird, ist, dass es so lange dauern wird , wie du willst. Es wird nicht in eine zweite Zeile gehen, weil es keine definierte Form hat. Ich meine, Sie können diesen Umriss sehen, aber er dehnt sich ständig aus. Es wird je nach Größe erweitert und verkleinert, basierend auf der Textmenge, die Sie haben. Es gibt auch eine andere Möglichkeit: Erstellen Sie eine Form, halten Sie sie gedrückt, klicken Sie auf Halten und verlassen Sie sie dann, dann können Sie Hallo Welt sagen. Und wenn Sie dann viele Einsen eingeben, werden Sie sehen, dass sie bis zur anderen Zeile reichen. Es gibt also eine Pause, und das ist im Grunde ein Unterschied zwischen diesen beiden verschiedenen Arten, es zu tun. Wenn Sie die Form kennen, die Sie erstellen möchten, also wenn Sie sagen: Hey, ich möchte hier ein Textfeld haben, können Sie es auf diese Weise erstellen, natürlich können wir die Einstellungen später ändern, aber am wichtigsten ist, dass Sie es am Anfang so einrichten , wie Sie es möchten, und dann können Sie es später anpassen. Aber lass uns hier schreiben, ich meine, Hallo Welt. Wir können das hervorheben und dann in diesem kleinen Abschnitt hier die Typografie ändern Wir können die Schrift ändern, etwas Lustiges wählen, die Schriftgröße ändern Ist es normal oder wenn es eine fettgedruckte Version gibt , können wir das auch wählen. Lassen Sie mich Ihnen zeigen, dass es diese Versionen gibt , aus denen wir wählen können. Wir können den Buchstabenabstand ändern, zum Beispiel können wir sie näher beieinander oder weiter voneinander entfernen. Wenn es mehrere Zeilen gibt, machen wir eine weitere Zeile. Wir können den Abstand zwischen ihnen auch auf Zeilenabstand umstellen , oder wir können Auto schreiben und dann wird es automatisch. Dann können wir den Wert wieder auf Null setzen, um einen normalen Wert zu erreichen. Wir können auch die Absatzausrichtung ändern, von der Ausrichtung zur Mitte hin oder von rechts nach links. Wir können auch in Bezug auf das Textfeld wählen, es weiter unten oder in der Mitte liegt oder ob es horizontal und vertikal ist. Beides können Sie einrichten und ändern. Ich würde Ihnen auf jeden Fall empfehlen , diese Optionen zu erkunden und versuchen, sie selbst herauszufinden , um zu verstehen, wie Sie Objekte, Formen und Textfelder manipulieren können Objekte, Formen und , um etwas zu finden, das Sie möchten. Okay? Nimm dir einfach ein paar Minuten Zeit, um zu versuchen, es zu verstehen und zu verstehen, okay? Wie ich bereits erwähnt habe, ist das Schöne daran, dass die meisten Elemente dieselben Einstellungen haben Egal, ob es sich um ein Textelement ein Rechteck oder ein Quadrat handelt, sie sind größtenteils identisch. Nur Textobjekte, sie haben den Abschnitt Typografie Aber alles andere ist dasselbe. Sie haben Füllung, Sie haben Kontur, Sie haben Wirkung, Sie haben Layout. Sie können die Größe erhöhen oder ändern. Sie können auch die Positionierung ändern und so weiter. Jetzt, wo wir das haben, haben wir verstanden, wie wir verschiedene Formen erstellen können. Wir können Linien erstellen. Wir können Textfelder erstellen. Aber es gibt ein paar Dinge, die du weißt, mehr. Eines ganz schnell, Lines. Linien sind großartig. Linien sind nett. Aber eine Sache, die Sie wissen sollten ist, wenn Sie die Breite erhöhen, können Sie sehen, dass diese Linie sehr quadratisch oder rechteckig ist . Sie hat auch scharfe Kanten. Wir können das ändern, indem die Kanten rund machen. Das ist eine Sache, die du tun kannst. Eine andere Sache ist, dass Sie ein Ende zu einem Pfeil oder zu einem Dreieckspfeil oder zu einem umgekehrten Dreieck- oder Kreispfeil und so weiter und so fort drehen Dreieckspfeil oder zu einem umgekehrten Dreieck- oder können. Das ist eine coole Sache , die Sie beachten sollten ist, dass Sie auch mit diesen Einstellungen herumspielen können, insbesondere wenn es um Linien geht. Sie sind sehr vielseitig und so weiter. Jetzt haben wir gelernt, wie man Objekte erstellt und wie man die Eigenschaften ändert. In der nächsten Lektion werden wir etwas mehr darüber sprechen, wie wir verschiedene Beziehungen zu diesen Objekten haben können und wie wir mit Gruppen und Rahmen arbeiten können. Wir sehen uns in der nächsten Lektion. 6. Rahmen vs. Gruppen vs. Formen: Also Gruppen und Frames, was sind sie und wie können wir sie verwenden? Als Designer werden Sie also oft auf eine Situation stoßen, in der Sie ein paar Elemente zusammenfügen möchten Sie möchten, dass sie zusammengehalten werden und zusammenpassen. Du weißt schon, du willst nicht, dass sie getrennt sind, sondern eine einzige Form bilden. Und nur um Ihnen ein Beispiel dafür zu geben, wir haben diese Wanne hier. Wir können es wieder normal machen und wir haben diese Leitungen. Das Problem ist jedoch, dass diese Linien alle getrennt sind. Was wir in der Designwelt normalerweise tun , ist, sie zu gruppieren um sie in derselben Form, derselben Gruppe zuzuordnen. Auf diese Weise wissen wir, wie wir sie zusammennehmen und zusammenbringen müssen und so weiter. Der Weg, das zu tun, besteht darin, all diese Elemente gedrückt zu halten, zu ziehen und auszuwählen. Jetzt ziehen Sie Ihre Auswahl und Sie können diese Auswahl von hier aus sehen Sie können dies auch von hier aus tun, Taste gedrückt halten und dann nach unten gehen, die Umschalttaste gedrückt halten und klicken Es wird alles zwischen diesem und dem auswählen. Dann können Sie auf Control G klicken oder mit der rechten Maustaste klicken, rechten Maustaste klicken und dann haben Sie die Gruppenauswahl. Und einfach so, jetzt hast du Gruppe Nummer eins. Jetzt können Sie natürlich darüber oder darüber hinaus eine weitere Gruppe erstellen . Aber ich meine, es wird nicht viel bewirken, dir nicht viel helfen. Nun, das ist eine Möglichkeit, es zu tun. Das ist eine Gruppe. Das Schöne an einer Gruppe ist, dass sie sich zusammenbewegt. Wenn also die Dimensionen, alle Linien, zusammenkommen, bewegen sie sich zusammen. Aber manchmal ist das nicht so toll , weil es ein sehr verzerrtes Aussehen geben kann Vielleicht ist es nicht das, was du willst. Eine Alternative dazu, ich bin einfach zurückgegangen und habe es rückgängig gemacht Jetzt sind es nur noch separate Vektoren Klicken Sie mit der rechten Maustaste und wählen Sie die Rahmenauswahl Das Interessante an einem Rahmen ist, dass er die Dinge nicht ausdehnt. Wenn Sie ihn bewegen, öffnet er sich einfach und er bewegt sich vielleicht mit, dehnt ihn aber nicht aus. Wie Sie sehen, dehnt es sich nicht aus, es sei denn, Sie gehen in tiefere Umgebungen vor, aber das ist nicht das, was wir jetzt tun. Ein Unterschied zwischen Frames und Gruppen besteht darin, dass sie unterschiedlich funktionieren. Die Objekte in ihnen bewegen sich auf unterschiedliche Weise. Eine Sache mit Frames ist, dass Sie viel Platz haben können, der nicht belegt ist. Bei Gruppen enthält es jedoch nur das eigentliche Element. Wenn wir das jetzt gruppieren, werde ich es gruppieren, anstatt es zu rahmen. Sie können sehen, dass es keinen leeren Raum gibt. Das kommt direkt an die Grenze. Wenn ich es also ausdehne, wird es die ganze Sache ausdehnen. Aber manchmal möchte man ein bisschen leeren Raum lassen und so weiter. Das ist also ein Unterschied. Nun zu einer anderen Frage, was ist der Unterschied zwischen einem Rahmen und einem Rechteck. Lassen Sie mich hier einen Rahmen erstellen, okay? Ich kann ihn auch hier platzieren. Lass es mich einfach hier hinstellen und ihm eine andere Farbe geben, ihm Rot geben, ihm einen Strich geben. Wie Sie sehen können, sind sie nicht sehr unterschiedlich. Sie sehen überhaupt nicht anders aus. Sie sehen fast identisch aus. Deshalb müssen wir uns fragen, was ist der Unterschied? Der Unterschied besteht darin, dass Frames Dinge in sich enthalten können. Um Ihnen ein Beispiel zu geben: Ich kann diesen Kreis platzieren und ihn innerhalb dieses Rahmens platzieren, indem ich ihn hineinziehe Wenn wir uns nun die Ebenen, die Ellipse, ansehen, befindet sich der Kreis innerhalb des Rahmens und Sie können sehen, dass er abgeschnitten wird, wenn er den Rahmen verlässt Wenn wir ihn halten, ziehen und nach draußen ziehen, verlässt er den Rahmen Das ist eine Sache , die Frames können. Versuchen Sie, es in ein Quadrat in einem Rechteck zu platzieren , es funktioniert nicht. Funktioniert nicht auf die gleiche Weise, und das ist ein wesentlicher Unterschied. Form erstelle, musst du dich fragen, ob ich, wenn ich ein Rechteck erstelle, möchte ich, dass es nur ein Rechteck ist, oder möchte ich etwas hineinlegen? Möchte ich, dass es andere Formen und Textfelder und so weiter enthält und Textfelder und so weiter In diesem Fall sollten Sie vielleicht einen Rahmen erstellen. Ich verstehe, dass das etwas schwer zu verstehen ist, aber ich denke, mit etwas Übung wird es etwas leichter zu verstehen Um das zusammenzufassen: Gruppen eignen sich hervorragend, wenn Sie mehrere Elemente zu einer einzigen Form gruppieren möchten , vor allem, wenn Sie möchten, dass daraus eine eigene Form wird, die dehnbar ist, die in der Größe veränderbar ist, und Rahmen eignen sich gut, um Dinge in ihnen zu enthalten , im Gegensatz zu Rechtecken oder anderen Formen, die keine Dinge enthalten oder Elemente enthalten können Das ist ein wesentlicher Unterschied. Wir sehen uns in der nächsten Lektion. 7. Erstellen von Rahmen: Wir haben also über Formen gesprochen. Wir haben über Rahmen und Gruppen und die Unterschiede zwischen ihnen gesprochen . Aber jetzt kommen wir zur Sache. Lassen Sie uns versuchen, mit diesen Elementen, die wir kennengelernt haben, eine nette kleine Benutzeroberfläche zu erstellen . Ich werde mich also fragen, ich möchte jetzt etwas erstellen, aber wird es auch andere Dinge enthalten? Was werde ich kreieren? Nun, ich möchte eine Karte erstellen und ich möchte, dass diese Karte andere Dinge enthält. Ich werde einen Rahmen verwenden. Ich denke darüber nach, eine Fitness-App zu erstellen , die Ihnen ein Dashboard zeigt und Ihnen auch andere Informationen anzeigt. Stellen Sie sich das wie Apple Fitness vor, eine App zu haben, die Ihnen sagt, wie viele Schritte Sie gemacht haben, wie viele Kalorien Sie verbrannt haben und so weiter. Und wir werden versuchen, es anders zu gestalten, aber es wird mehr oder weniger dieselben Prinzipien haben und das ist völlig in aber es wird mehr oder weniger dieselben Prinzipien haben und das ist Ordnung, denn der Ordnung, denn Fokus liegt hier auf dem Lernen und wir können vom Kopieren lernen , indem wir versuchen, andere gute Produkte nachzuahmen und uns von ihnen inspirieren andere gute Produkte nachzuahmen und uns von ihnen inspirieren Jetzt habe ich das Frame-Tool. Ich werde hier einen Rahmen erstellen und ihn so rechteckig machen, und ich werde ihm ein bisschen Farbe geben, sehr leichte Farbe, okay, großartig. Und dann gebe ich ihm 16. Das ist der Radius, der Eckenradius, okay? Jetzt gebe ich ihm 16, also hat er diese schönen kleinen runden Ecken. Dann füge ich hier Text hinzu und schreibe Schritte. Okay? Halte es einfach. Nichts zu ausgefallenes. Sie können eine andere Schriftart wählen. um das Gewicht geht, verwende ich normalerweise lieber ein Medium es um das Gewicht geht, verwende ich normalerweise lieber ein Medium als ein normales Format , weil es etwas besser lesbar ist. Okay? Stellen wir jetzt sicher, dass der Text lesbar ist. 12 ist okay, 14 ist besser. Also ja, das ist eine Sache, die man beachten sollte. Und dann werden wir weitermachen und etwas erstellen , das uns zeigt, was diese Schritte sind. Ich werde Rechtecke verwenden, weil, wie gesagt, wenn ich mich frage, möchte ich, dass das noch andere Dinge enthält? Nein. Ich werde dieses Rechteck erstellen und ihm auch einen Radius von 16 geben , das macht es vollständig rund, und dann mache ich es blau oder bläulich Jetzt ist es blau, und dann kann ich mit Strg C und Strg V kopieren und einfügen und es hierher bringen, die Höhe ändern Ich kann es auch einfach hinhalten und es dann ziehen und dann ziehen. Es wird es kopieren. Es wird ein Duplikat erstellen. Jetzt möchte ich die ganze Woche zeigen. Wir haben eins, zwei, drei, vier, fünf, sechs, sieben. Okay? Jetzt kannst du sehen der Abstand zwischen ihnen sechs beträgt, heißt es. Jetzt können wir sie behalten. Wählen Sie Ich halte sie alle, indem Sie auf Shift klicken, okay? Klicken Sie also auf Shift, halten Sie Shift gedrückt und klicken Sie dann jeweils auf sie. Wenn ich das mache, haben sie im Grunde alle mehr Breite. Ich bin mir nicht sicher , ob ich das will, weil es jetzt zu klobig ist Aber was ich tun kann, ist, diesen Abstand beizubehalten und etwas mehr Abstand zwischen ihnen hinzuzufügen Nun, das sieht ungefähr richtig aus, würde ich sagen, und dann werde ich versuchen , sie ein wenig variieren zu lassen. Dann könnte ich die aktuelle machen, ich habe keine andere Farbe oder so. Um zu zeigen, dass das jetzt berechnet wird oder dass es aktuell ist, oder so ähnlich. Ich bin mir nicht sicher. Das ist eine sehr, sehr vereinfachte Benutzeroberfläche, die die Schritte zeigt, oder? Aber es fehlt etwas. Ich meine, wie viele Schritte hatte ich an diesem Tag? Das können wir machen. Vielleicht können wir es hier rechts zeigen, sodass wir sagen können, ich weiß nicht, 8.600 Und wir können auch die Farben wechseln. Ich meine, ich kann das etwas dunkelgrauer machen und dieser Zahl etwas mehr Bedeutung geben. Ich kann das tun, indem ich es auch fett mache. Vielleicht könnte ich blau machen oder auch nicht. Aber das ist eine nette kleine Benutzeroberfläche und einfach so haben wir eine Karte gemacht und wie Sie sehen können, ist es ein Rahmen, der Rahmen hat eine Farbe und er enthält diese anderen Elemente. Du kannst es hier sehen. Bild Nummer zwei, es hat all diese Formen zusammen. Es hat die Textfelder und so weiter. Auf diese Weise können Sie einen sehr einfachen Rahmen erstellen und mit diesem Rahmen Elemente hinzufügen. Ich hoffe, das hat für Sie Sinn gemacht, aber probieren Sie es selbst aus und sehen Sie, was Sie sich einfallen lassen können. 8. Effekte: Also habe ich ein bisschen mit dem Element herumgespielt , das wir hier haben, aber es fehlt etwas und ich kann es nicht genau sagen, aber vielleicht können wir sehen, was wir tun können , wenn es um Effekte geht. Deshalb werde ich Ihnen heute ein bisschen zeigen, wie Sie mit ein paar Effekten herumspielen können , wenn es um Figma geht Was Sie tun werden, ist auf den Rahmen oder das Objekt zu klicken , dem Sie den Effekt hinzufügen möchten Hier haben wir also viele Objekte, aber wir wollen es auf einen allgemeinen Rahmen anwenden. Also werde ich hier zu den Effekten gehen. Ich klicke auf Plus. Dadurch wird sofort ein Schlagschatten hinzugefügt. Nun, Schlagschatten ist interessant, weil er bereits einige Werte hat. Aber wenn Sie hier klicken, können Sie diese Werte ändern. Sie können die Höhe des Schattens in Bezug auf X und Y ändern . Vertikal und horizontal, wird er verschoben oder etwas entfernt oder weiter nach rechts, egal in welche Richtung er fallen soll, je nach Lichtquelle? Vertikal und horizontal, wird er verschoben oder etwas entfernt oder weiter nach rechts, egal in welche Richtung er fallen soll , je nach Lichtquelle Und dann können Sie auch die Unschärfe hinzufügen. Jetzt verwende ich wirklich gerne viel Unschärfe, vielleicht 24, vielleicht 16, vielleicht sogar Dann hast du dich auch verbreitet. Spread verteilt einfach den ganzen Schatten. würde ich nicht empfehlen, das ehrlich zu sein, würde ich nicht empfehlen, das zu verwenden. Lass es uns so machen. Ich werde 16 hinzufügen und die Farbe etwas schwächer machen , also vielleicht 15% Dann mache ich den Hintergrund komplett weiß. Und dann sieht es jetzt so aus. Es sieht viel sauberer aus, viel moderner. Und der Schatten ist sehr unauffällig, er ist sehr subtil. Er ist nicht sehr sichtbar und das ist genau so. Wir wollen es nicht machen. Sie konzentrieren sich zu sehr auf die Farbe der Karte, sondern auf den Inhalt. Okay? Das ist also ein Effekt , den Sie anwenden können, und Sie können damit herumspielen bis Sie den richtigen Wert gefunden haben. Ich meine, du kannst das Y machen, du kannst es auch 16 machen. Du kannst dafür sorgen, dass es so stark runtergeht , oder du kannst es acht machen. Du kannst die Unschärfe 36 machen und dann hast du hier viel Schatten, und es fühlt sich an, als wäre der Hintergrund grau, aber das ist es nicht wirklich Hier gibt es einfach viel Schatten. Aber das ist eine Sache, die du tun kannst. Es gibt auch andere Effekte. Wenn ich einen Effekt hinzufüge, ist er automatisch Schlagschatten, aber es gibt auch einen inneren Schatten, und er hat dieselben Dinge, dieselben Spezifikationen, die Sie ändern können. Jetzt sieht es so aus, als ob diese Karte in die Leinwand eingebettet ist, in die Wand. Es fühlt sich so an. Das ist eine Sache, die du ausprobieren kannst. Das ist Ebenenunschärfe. Dadurch wird die gesamte Ebene verwischt Es gibt Hintergrundunschärfe, das macht den Hintergrund unscharf, wenn es etwas gibt, aber dafür brauchst du etwas für den Hintergrund Es gibt Geräusche, Texturglas und so weiter. Probieren Sie sie aus und sehen Sie, was funktioniert. Aber um ehrlich zu sein, würde ich sagen dass bei Figma der am häufigsten verwendete Effekt Schlagschatten ist , der am häufigsten verwendete Effekt Schlagschatten ist denn wenn es um Web geht, stehen Schatten für stilisierte Ebenen sehr zentral und sie sind auch sehr einfach zu implementieren Auf diese Weise können Sie Ihre Elemente im Grunde ein wenig schöner aussehen lassen 9. Layout, Ausrichtung und Abstand: Nachdem wir nun unsere Designelemente erstellt und mit der Gestaltung dieses hübschen kleinen Bildschirms begonnen haben , ist es an der Zeit, etwas genauer zu werden. Als Designer, weißt du, sind wir Künstler. Es ist unsere Aufgabe, etwas Schönes zu schaffen, und wir sind mittendrin. Wir versuchen das zu tun. Aber es ist auch unsere Pflicht, genau zu sein, wenn es um Messungen geht. Wir sind nicht dazu bestimmt, Dinge willkürlich zu erschaffen. Wir sollen nicht einfach Dinge erschaffen und einfach, äh, die Abstände in den Abständen erraten Es ist sehr wichtig für uns, exakt zu sein, wenn es um Abstände geht, wenn es darum geht, Dinge auszurichten Wir können nicht zulassen, dass die Dinge auch nur um ein kleines Pixel abweichen, weil das für uns als Designer sehr schlecht aussehen kann Es kann für die Benutzer, die sich unser Design ansehen, sehr beunruhigend sein. Aus diesem Grund müssen wir Maßnahmen ergreifen, um sicherzustellen, dass unsere Designs richtig ausgerichtet sind und nicht einmal pixelweise abweichen. Jetzt gibt es mehrere Möglichkeiten, dies zu tun. Eine Möglichkeit, dies zu tun , sind sogenannte Grids. Wenn Sie also auf den Rahmen klicken, den Sie haben, den gesamten Rahmen, können Sie hierher kommen, navigieren, und Sie können hier bis zur Layoutanleitung navigieren Und wenn Sie auf das Plus klicken, wird ein Raster erstellt. Es ist so, als ob das Notizbuch der Mittelschule, das du hattest, alles in kleine Quadrate zusammenfasst. Jetzt gibt es verschiedene Dinge, die Sie erstellen können. Sie können auch Spalten oder Zeilen erstellen. Es hängt wirklich davon ab, was Sie versuchen zu tun. Ich persönlich würde Ihnen empfehlen , mit Spalten zu arbeiten , da sie normalerweise standardmäßiger sind und einfacher zu bearbeiten sind. Es wird deinen Bildschirm in Spalten aufteilen, aber du kannst die Einstellungen dafür einrichten. Sie können also einen Rand einrichten und sagen, ich möchte nicht, dass der Bildschirm genau hier am Rand liegt. Ich möchte, dass sich der Inhalt etwas in der Mitte in der Mitte befindet. Ich gebe ihm 24 oder du kannst sagen 16 Ränder. Sagen wir 16. Dann können Sie entscheiden, wie viele Spalten Sie haben möchten. Lass uns mit vier gehen. Ich denke, vier ist eine gute Zahl und dann ist da noch die Gosse. Die Dachrinne ist der Abstand zwischen ihnen zwischen diesen Säulen Sie können sie sehr klein oder sehr groß machen , je nachdem , welchen Abstand Sie zwischen ihnen haben möchten Lass uns die Dachrinne jetzt nur zehn machen. Und dann können wir übrigens auch die Farbe ändern , wenn du willst Ich finde es oft schöner als Rot, weil Rot so alarmierend ist Ich mache es schwarz und ich mache es zu 10% oder 5%, nur damit ich es sehen kann, aber es ist nicht Dann können wir weitermachen und damit beginnen, unsere Elemente auszurichten. Das Schöne ist, du weißt, dass das nicht mehr nach links gehen sollte Das ist von hier aus perfekt. Auf der rechten Seite braucht es ein wenig Arbeit. Wir können versuchen, die Größe so von Hand zu ändern. Ich werde diese Elemente ein wenig von Hand verschieben Und dann werde ich all diese auswählen und den Abstand verringern Jetzt sieht es viel ordentlicher aus. Wenn wir zum zweiten kommen, ist er jetzt auch aus. Ich werde das einfach kopieren , indem ich Alt und Shift gedrückt halte, und ich werde es hier ausrichten. Ich werde nur die Werte von hier kopieren und auch die Farben. Dass ich es hier löschen werde. Das ist eine Möglichkeit, es zu tun. Wie Sie jetzt sehen können, kann es ein wenig störend für das Auge sein, wenn wir dieses Gitter ausschalten . Sie können sehen, dass sie jetzt besser ausgerichtet sind. Das ist eine Möglichkeit, das zu tun, und ich finde, das macht sehr viel Sinn. Es beinhaltet viel, mit dem eigenen Auge zu schauen und zu raten oder nicht wirklich zu raten, sondern nur mit dem eigenen Auge zu urteilen Aber das ist etwas , das Sie als Designer oft tun werden als Designer oft Eine andere Möglichkeit, dies zu tun , besteht darin, es mit einem Lineal zu tun. Nun, Sie haben es wahrscheinlich hier oben bemerkt, wir haben diese Zahlen, und alles, was Sie tun müssen, ist gedrückt halten und ziehen. Du ziehst einfach so, wie du ziehst, und dann bekommst du dieses Lineal. Wenn Sie es hier platzieren, können Sie versuchen, es einzurichten, Sie können es an den Kanten ausrichten und sicherstellen, dass alles richtig ausgerichtet ist. Jetzt mache ich es von dieser Seite aus, horizontal, weil es sinnvoller ist. Auf diese Weise können wir sicherstellen, dass diese beiden Elemente auf derselben Ebene befinden. Sie können dasselbe mit dem Text machen, nur für den Fall, dass etwas schief geht, und Sie können einfach sicherstellen, dass von allen Seiten alles in Ordnung ist. Und ja, das ist also eine Möglichkeit, es zu tun. Sie können es auch vertikal machen Wenn Sie also jetzt andere Elemente erstellen, müssen Sie nur sicherstellen, dass sie innerhalb dieser Grenzen Das ist eine andere Methode, aber diese ist besser weil Sie ein bisschen mehr Kontrolle haben Man kann das kleine Ding kontrollieren, man kann sagen, was ist mit diesen Säulen, denen da drinnen Was ist mit diesem? Ist es richtig ausgerichtet oder nicht? Das ist ein anderer Weg, es zu tun, und es gibt noch einen dritten. Ein dritter Weg. Okay. Die dritte Möglichkeit ist also, innerhalb der Formen nachzuschauen. Also wenn ich diese auswähle, zum Beispiel diese beiden Formen, wenn ich sie gedrückt halte, wenn ich sie auswähle, indem ich die Umschalttaste gedrückt halte und auf beide klicke. Sie können sehen, dass ich hier sofort einen Abstand sehe, ich kann den Abstand hier erhöhen. Das ist eine Sache , die Sie tun können, um sicherzustellen, dass alles in Ordnung ist Das Gleiche haben wir bereits mit diesen Spalten gemacht . Du kannst das auch so machen. Sie können sie auswählen und sicherstellen, dass der Abstand richtig ist oder nicht. Das ist eine Sache , die Sie tun können, um die Dinge besser auszurichten, um Ihnen auch eine andere Möglichkeit zu bieten, eine weitere Funktion. Nehmen wir an, wir kopieren das, fügen es hier ein und fügen es dort ein. Aber jetzt können Sie sehen, dass der Abstand etwas abweicht. Anstatt Spalten, Zeilen und Lineale zu erstellen, können wir sie alle auswählen Ich wähle diese drei aus und dann bekommen wir hier diesen Button. Siehst du es? Hier. Normalerweise ist es in der unteren rechten Ecke. Wenn Sie darauf klicken, passt Figma den Abstand an und von dort aus können Sie den Abstand so weit erhöhen, wie Sie möchten Wir hatten dort zehn, du kannst hier auch zehn machen, wenn du willst. Es liegt ganz bei dir. Aber ja, das ist eine Sache , die du tun kannst. Eine andere Möglichkeit, Dinge auch direkt an den Objekten selbst auszurichten . Sie klicken auf das Objekt , das Sie ausrichten möchten , und können dann diese Positionen wählen. Du kannst sagen, ich möchte, dass es zentriert ist. Ich möchte, dass es links vom Rahmen, rechts , oben, mittig , unten usw. ausgerichtet , oben, mittig , ist. Das Tolle ist, dass du auch, ich meine, sagen wir mal, das ist ein bisschen abwegig. Sie können auch mehrere Elemente auswählen und sie so ausrichten, dass sie zusammen zentriert sind. Horizontal sind sie jetzt zentriert, oder Sie können sagen, ich möchte, dass sie vertikal zentriert sind. Jetzt liegen sie übereinander und so weiter und so fort. Das sind wirklich nette Dinge , die sich als nützlich erweisen , damit Sie Ihre Objekte ausrichten können. Denn wie ich bereits erwähnt habe, ist dies ein wesentlicher Bestandteil des Designs. Wir befinden uns in der Mitte zwischen Künstlern und Architekten, oder? Wir bauen keine Gebäude, die in Bezug auf Zahlen, Technik und so weiter sehr exakt sind . Wir bauen etwas, das exakte Zahlen haben sollte. Nicht zu viel. Es ist nicht so ernst. Wir bauen keinen Wolkenkratzer, aber wir machen eine Website und sie sollte eine gewisse Genauigkeit haben Aber gleichzeitig haben wir eine künstlerische Rolle. Wir sollten künstlerisch sein, wir sollten kreativ sein. Wir haben etwas mehr Freiheit als Architekten. Wir sind nicht an die Physik gebunden, wir sind an andere Designrichtlinien gebunden. Aber auch hier sollten wir mittendrin sein, nicht zu künstlerisch, nicht zu exakt, sondern ein nettes kleines Gleichgewicht dazwischen haben. Dies sind also nur einige Möglichkeiten, wie Sie Ihre Objekte manipulieren können , um sie aneinander auszurichten. Also haben wir untersucht , wie das mit Hilfe von Anleitungen funktioniert. Wir ordnen Hilfslinien in Spalten mit Rastern usw. an. Wir haben untersucht, wie man das mit Linealen macht und ja, was man sagen könnte, das sind Lineallinien und Und das kannst du auch über diese Hilfsschaltflächen hier tun über diese Hilfsschaltflächen Sie helfen Ihnen dabei, die Dinge aufeinander abzustimmen. Sie müssen nur herausfinden, wie Sie es machen wollen. Oder wie wir schon erwähnt haben, wenn du mehrere Dinge auswählst, die nicht ausgerichtet sind bekommst du auch ein Hier, wenn du mehrere Objekte ausrichten willst, kannst du sie einfach auswählen, um sie zu mögen und dann bekommst du hier einen netten kleinen Button, auf den du klicken kannst und dann ist es einfach so ausgerichtet. Mach weiter und teste das aus und sieh, wie genau du sein kannst. Wir sehen uns in der nächsten Lektion. 10. Farben: Hallo. In dieser Lektion werden wir über Farben sprechen. Wenn es jetzt um Farben geht, wird es etwas schwierig. Für die meisten Designer ist es kein sehr einfaches Thema oder keine einfache Aufgabe , weil wir alle unsere eigenen Herangehensweisen haben, wenn es um Farben geht , darüber, wie wir die Farben auswählen und wie wir sicherstellen , dass sie miteinander harmonieren und wie wir sie tatsächlich im Design verwenden, wie sie zum Beispiel stattfinden. Denn oft haben wir einen Plan, und wenn wir dann den Plan tatsächlich umsetzen und die Farben verwenden, ist es nicht genau so, wie geplant Lassen Sie mich erklären, was ich meine, indem ich mich direkt damit beschäftige. Wenn es nun um Farben in einem Design in einer App oder Website oder was auch immer geht , haben Sie normalerweise eine Reihe von Farben , die im gesamten Design einheitlich bleiben. Also, ich habe diese Quadrate hier gemacht , nur um dir zu zeigen, was ich meine. Wir können zum Beispiel sechs Farben auswählen, die die Hauptfarben sind , die wir verwenden werden. Füllen wir also die gewünschten Farben aus. Nun, das Wichtigste zuerst: Ich fange gerne mit Schwarz und Weiß an, weil die meisten Designs, zumindest die modernen, normalerweise einen weißen Hintergrund haben es sei denn, Sie verwenden ein dunkles Design, aber ja, normalerweise einen weißen Hintergrund, und Sie verwenden etwas Schwarz. Was wir tun können, ist, dass wir entweder Weiß oder Sie Weißweiß wählen können , je nachdem, was Sie tun. Aber ich werde Weiß einfach direkt heraussuchen und ihm einen Rand geben , damit es sichtbar ist. Okay? Also das ist unser Weiß , das wir verwenden werden, und dann können wir auch Schwarz haben. Jetzt können wir entweder reines Schwarz verwenden oder manchmal können Sie ein sehr schwarzes dunkles Grau verwenden. Weißt du, es ist nicht sichtbar oder es ist nicht erkennbar, dass es nicht vollständig schwarz ist Aber manchmal ist es nett, das zu tun , um den Kontrast zu mildern , denn zwischen Weiß und Schwarz besteht Wenn Sie also weiße oder schwarze Farben auswählen , können Sie diesen starken Kontrast reduzieren Das ist es, was ich hier für diesen 252525 anstrebe. Was ich dann gerne hätte, ist auch etwas Grau. Es gibt verschiedene Grautöne, die ich verwende. Normalerweise gibt es Dunkelgrau, das dunkel genug ist , um lesbar zu sein. Und dann zum Beispiel dieses Grau. Ich nehme das hier, kopiere den Hex-Code und füge ihn ein. Das ist dunkel genug, sodass es lesbar ist. Aber dann können wir hier auch ein Grau verwenden , wie diese Linien. Es muss nicht sichtbar sein. Es ist dieser. Es muss also nicht sichtbar sein. Es ist nicht so sichtbar, aber es ist kein wesentliches Element , sodass es sichtbar sein muss. Macht das Sinn? In gewisser Weise ist es toll, das zu haben. Wenn du es sehen kannst, kannst du es sehen. Wenn Sie es nicht sehen, verlieren Sie keine echten Informationen. Um ehrlich zu sein, können wir sie jetzt nachbestellen . Ich werde sie einfach neu anordnen , damit es mehr Sinn macht Lass mich sehen. Ich werde das einfach hier hinstellen und die aufnehmen. Da haben wir's. Ich denke, das ist gut genug. Du siehst aus Weiß und dann aus Hellgrau, Dunkelgrau und dann aus Schwarz. Dann können wir, um ehrlich zu sein, noch eine Farbe hinzufügen. Dann haben wir diese Farben. Jetzt sind dies normalerweise primär, sekundär und tertiär. Normalerweise beginnen die Leute damit , um ehrlich zu sein. Aber im Grunde ist die Idee, dass immer, wenn Sie eine App oder eine Markenidentität haben, Farben haben, die sich wiederholen , und diese Farben wiederholen sich einige von ihnen häufiger als andere. Ich könnte hier zum Beispiel Rot für ein Ausrufezeichen verwenden , und es ist wie Rot, um zu zeigen, dass ein Risiko besteht, dass es ein Problem gibt Das heißt aber nicht, dass ich auf dem gesamten Bildschirm Rot verwenden werde gesamten Bildschirm Rot verwenden Das Gleiche hier, ich habe Blau, ich habe Orange. Das heißt nicht, dass ich sie die ganze Zeit wiederverwenden werde sie die ganze Zeit Aber um ehrlich zu sein, ist es gut, sicherzustellen , dass die Farben, die Sie verwenden, wiederholt werden Nehmen wir an, Blau und Orange, vielleicht könnten es sich dabei um essentielle Farben handeln, die wir in unserem Design verwenden. Wenn es um Fitness-Apps geht, gibt es normalerweise nicht nur eine Farbe, die sich wiederholt, sondern macht das in der Regel Sinn Zum Beispiel können wir hier das Blau nehmen. Ich klicke auf I, ich öffne das Pipette-Werkzeug und dann können wir dieses Orange nehmen Jetzt habe ich dieses Blau und Orange. Was wir tun könnten, ist, dass wir das Blau auch für die Tasten verwenden können und wir können das Orange auch für die Tasten verwenden. Das funktioniert auch, und wir können uns eine andere Farbe aussuchen. Eine der ersten Farben. Es könnte also eine Art Rot sein , wir könnten versuchen, es so weicher zu machen Wir könnten uns etwas anderes aussuchen. Normalerweise ist Gelb etwas schwieriger zu lesen oder generell schwerer zu erkennen. Ich würde es oft vermeiden oder ich würde es dunkel machen, aber wenn man es einmal dunkel macht, nimmt es diese schmutzige Farbe an. Ist das Khakifarbe oder so. Aber es wird nicht sehr oft verwendet, zumindest nicht in modernen Designs Wir können Grün haben, aber es passt nicht genau zu diesen Farben. Dies ist ein Ort, an dem Sie als Designer selbst urteilen müssen. Es gibt Theorien darüber, wie das geht, aber Sie können es auch selbst tun. Wir können uns ein dunkles Blau aussuchen , das zu diesen Werken passt. Wir könnten eine violette oder rosafarbene Farbe nehmen. Ja. Das sind unsere Optionen , mit denen wir nicht weiterkommen. Ich habe das Gefühl, dass ich eher zum Rot tendiere, weil wir dann die Auswahl an sehr einfachen Farben haben , die immer noch zusammenarbeiten Ich meine, es ist eine Fitness-App, es muss also nichts Verrücktes sein Nun, eine Farbe, die oft verwendet wird, dieses Neongrün, wird oft tatsächlich für Fitness-Apps verwendet. Das ist etwas, wofür wir uns auch entscheiden können. Aber ich würde das nicht als meine Grundfarbe wählen, und ich würde versuchen, sie ein wenig anzupassen. Das gefällt uns. Ich bin mir nicht sicher. Du musst sicherstellen, dass es auch auf weißem Hintergrund gut aussieht . Das ist sehr wichtig. Dann würde ich hier höher schalten und diesen zu unserem primären, diesen zu unserem sekundären und diesen zu unserem tertiären machen diesen zu unserem sekundären und diesen zu unserem tertiären Aber ich bin immer noch nicht ganz davon überzeugt, um ehrlich zu sein. Ich habe das Gefühl , dass ich den Ton ausprobieren möchte. Jetzt geht es eher in Richtung Gelb. Okay. Ich denke, das ist gut genug, okay? Jetzt haben wir also diese Palette. Es muss nicht die beste Palette aller Zeiten sein, aber es ist eine Palette, an die wir uns halten können. Jetzt haben wir eine allgemeine Farbpalette und werden versuchen, sie in unser Design zu integrieren. In den nächsten Lektionen, denen wir verschiedene Komponenten und Elemente erstellen, werde ich versuchen, sie stärker einzubeziehen, und Sie werden sehen, wie es aussieht, als verschiedene Komponenten und Elemente erstellen, werde ich versuchen, sie stärker einzubeziehen , und Sie werden sehen, wie es aussieht könnten wir zurückgehen und sie überprüfen und Farben, die wir haben, neu anordnen oder ändern , nur um sicherzugehen , dass alles in Ordnung ist Eine Sache, die Sie auch tun können, und das ist optional ist, dass Sie für jede Farbe einen Farbton auswählen können Also hier hast du zum Beispiel das Blau. Wir können ein dunkleres Blau auswählen nur um sicherzugehen, dass wir es als Effekt, als Hover-Effekt oder etwas Ähnliches verwenden können als Hover-Effekt oder etwas Ähnliches Ich meine, wir haben schon das Hellblau, oder? Wir könnten also auch das leichte Blau als verschiedene Töne von dem haben , was wir haben. Wenn man so etwas macht, man irgendwie professioneller. Sie haben ein besseres System, weil Sie dann für alles ein Backup haben. Falls Sie also eine dunklere Version benötigen, haben Sie dieses Setup bereits. Und das Gleiche gilt für Orange, es gibt eine dunklere Version. Sie können es sogar etwas roter machen. Ich finde es immer schöner , den Farbton auch ein bisschen zu ändern Wir können das dreckig aussehen lassen, aber wenn du es mehr in Richtung Orange, Gelb nimmst, ist es vielleicht besser, vielleicht mehr in Richtung Grün. Siehst du? Jetzt haben wir hellere Versionen der Farben sowie dunklere Versionen, nur für den Fall, dass wir sie brauchen. Richtig? Aber das sind die Hauptfarben und das sind die Unterfarben, nur für den Fall, dass wir sie für bestimmte Effekte benötigen. Okay? So können Sie also Ihre Farbpalette auswählen. Wie ich bereits erwähnt habe, gibt es verschiedene Möglichkeiten, dies zu tun, um sicherzustellen, dass Ihre Farben zusammenarbeiten, aber das ist eher theoretisch. Und um ehrlich zu sein, als Designer mit der Zeit und Erfahrung in der Lage sein, sollten Sie als Designer mit der Zeit und Erfahrung in der Lage sein, ein Auge für diese Farben zu haben und zu verstehen, wann sie zusammenpassen und wann nicht. Hinweis: Nur weil wir diese Farben ausgewählt haben, heißt das nicht, dass wir sie übereinander oder direkt nebeneinander platzieren müssen . Das muss nicht so sein. Es könnten verschiedene Elemente und verschiedene Orte sein und so weiter. Behalte das einfach im Hinterkopf. Jetzt haben wir die Farben fertig und müssen die Typografie wie in der Schrift auswählen die Typografie wie in und das werden wir in der nächsten Lektion tun 11. Typografie: Jetzt ist es an der Zeit, Typografie auszuwählen , um die richtigen Schriftarten für unser Jetzt werde ich, wie immer, etwas Einfacheres machen Das könnte ein viel komplexeres Problem sein, aber wir werden jetzt versuchen, es langsam anzugehen Lassen Sie uns also als Erstes hier etwas eingeben und eine Überschrift oder etwas Ähnliches schreiben. Und dann werden wir das kopieren und Untertitel schreiben. Sie können eine Schriftart für Ihre gesamte App verwenden, oder Sie könnten zwei verschiedene Schriftarten verwenden, eine für die Schlagzeilen und eine für die Untertitel Also für die Überschriften sind sie normalerweise größer, also könnten es 24 sein, es könnte fett sein, und dann könntest du das als etwas Kleineres haben , vielleicht 16, nur nicht fett, mittel oder normal, okay? Im Moment verwenden wir Enter und es ist total cool, bei Inter als Typografie zu bleiben Aber vielleicht möchtest du verschiedene Optionen ausprobieren. Jetzt gibt es natürlich einige grundlegende Optionen wie Montserrat Das ist meine Anlaufstelle, um ehrlich zu sein. Ich mag es wirklich. Es gibt auch eine Eisenbahn. Jetzt können Sie sehen, dass jeder eine andere Atmosphäre oder Atmosphäre hat eine andere Atmosphäre oder Atmosphäre Ich werde nur ein bisschen zurückgehen, damit Sie einige von ihnen erkennen können, dieser ist anders geneigt Das E, Sie finden das D hat eine kleine Ähnlichkeit mit der Eisenbahn Ein Buchstabe ist eigentlich ein bisschen Flair nach rechts. Manche von ihnen sehen kleiner aus , manche sind dicker. Sie können hier sehen, dass sich die Dicke hier ändert. Sie ist unterschiedlich. Von hier nach hier ist es anders. Hier wird es dicker. Die Linie wird dicker, während Montserrat während des Ganzen eine fast ungleiche Breite beibehält während Kleine kleine Unterschiede können es beeinflussen, können es beeinflussen. Sie können viele verschiedene Schriftarten haben. Wenn es Auswirkungen gibt. Du könntest als Schrift Wirkung haben. Sie könnten sich einfach verschiedene Schriftarten ansehen. Einige von ihnen sind schwieriger, größer und jede Schrift hat eine Konnotation, sagen wir mal, oder? Diese Schrift ist also etwas, das Sie in einer App wahrscheinlich nicht erwarten würden , oder? Das Gleiche gilt für diesen. Ich meine, vielleicht könnte es tatsächlich davon abhängen, welche Art von App, vielleicht eine Notiz-App, vielleicht eine kleine App, aber keine Sport-App. Also hier, du machst Fitness, du wirst diese Schrift nicht sehen. Ich meine, aus einem Grund ist das eine Schrift für etwas anderes, vielleicht zum Diktieren, zum Schreiben von Büchern, für so etwas, aber nicht gerade für Fitness Außerdem ist es etwas schwieriger zu lesen. Das sind also zwei Dinge, auf die Sie achten müssen. Passt es zum Thema, oder? Passt der Stil richtig zur Idee der App? Die zweite Sache, ist es lesbar? Ist es etwas , das du lesen und richtig verstehen kannst ? Dieser ist cool, aber zum Beispiel nicht sehr praktisch. Wenn ich dieses Wort mit acht Buchstaben schreibe, nimmt es dann den ganzen Raum ein? Das ergibt keinen Sinn. Also versuche etwas zu finden , das in der Mitte ist. Es ist nicht zu verspielt, aber auch nicht zu schick. Nicht zu kursiv, nicht zu handgeschrieben, etwas in der Mitte Wie ich schon sagte, gehen wir gerade die Schriften nacheinander durch Aber normalerweise hat jeder Designer Schriften getestet und ausprobiert, bewährte Schriften, versucht hat und mit denen er Erfolg hatte, und sie passen ziemlich gut zu den meisten Themen. Okay? Also können wir zum Beispiel versuchen, Wirkung zu zeigen, und vielleicht könnten wir alles in Großbuchstaben schreiben. Vielleicht schauen wir uns an , wie das aussieht. Also können wir es ausprobieren und hier zum Beispiel Statistiken schreiben. Mal sehen, wie das aussieht, nur um ein Gefühl zu bekommen. Im Moment ist es bei 24 und es sieht ein bisschen zu groß aus. Was ist, wenn wir die Farbe wechseln? Es sieht immer noch zu groß aus. Es passt nicht zu dem Thema , das wir hier haben. Ich persönlich würde es nicht annehmen. Schauen wir uns jetzt an, wie so etwas wie Eisenbahn aussehen würde. Lass uns sehen. Ich bin hier. Okay. Nicht gerade mein Stil. Ich meine, weil es ein Großbuchstabe ist. Was ist, wenn wir deine Statistiken schreiben? Das sieht eher danach aus, um ehrlich zu sein. Das sieht ein bisschen netter aus. Vergleichen wir es mit Montserrat. Ich habe das Gefühl, dass die Eisenbahn hier viel mehr Charakter hat. Nehmen wir zum Beispiel Geist an. In diesem Fall habe ich das Gefühl, Geist etwas standardisierter ist, er ist nicht zu auffällig, nicht zu ausgefallen. Es passt also, aber mal sehen, ist es so anders als Inter? Ja, ich meine, um ehrlich zu sein, ist es nicht so anders. Ja, wir können weitersuchen. Wir können uns etwas Schöneres aussuchen. Okay, diese Schrift ist wirklich interessant, weil ich das Gefühl habe, dass diese Art von Serifenschriften immer beliebter wird und sie nicht gerade zur Atmosphäre passen, aber sie führen zu einem Bruch im Stil, aber eine, die interessant ist und meiner Meinung nach funktioniert, ich funktioniert einfach Also würde ich mich für diese entscheiden wollen , auch wenn ich das Gefühl habe, dass sie nicht zu 100% passt, aber lass uns sie ausprobieren Warum nicht? Können wir es ändern, später austauschen? Kein Problem. Nehmen wir es einfach und schreiben es hier. DM-Serifenanzeige, DM-Anzeige, und schreiben wir es einfach mit normalen Buchstaben Dann die andere Schrift, wir könnten vielleicht Railway nehmen, um ehrlich zu sein, sie testen, oder wir könnten einfach Geist oder Inter nehmen , um ehrlich zu sein, Inter ist sehr Standard Also können wir es vorerst einfach nehmen und nicht zu viel darüber nachdenken. Also das sind alles Inter, und dann haben wir DM Serif. Und einfach so, wir haben deine Statistiken und du kannst sehen, ich meine, es ist ziemlich interessant Wir können versuchen, sie auch als Leibeigene anzeigen zu lassen, und sie sehen nett aus, aber nicht so nett, um ehrlich zu sein, also können wir das rückgängig machen Also nur für die großen Überschriften, für Überschriften wie diese, können wir das verwenden, aber für den kleineren Text können wir es bei Inter belassen Einfach so haben wir uns eine Schrift ausgesucht. Wie Sie sehen können, ist es nicht so komplex. Sie müssen nicht über 1 Million verschiedene Fälle entscheiden. Dazu gibt es jedoch noch einen weiteren Schritt, nämlich die Definition der verschiedenen Ebenen oder Hierarchien von Schriften. Sie müssen das nicht zu sehr für sich selbst komplizieren , sondern es geht nur darum, konsistent zu bleiben Hier haben wir zum Beispiel deine Statistiken. Wenn Sie hier einen weiteren Abschnitt hinzufügen möchten und Ihre Aktivitäten, Ihre Aktivitäten angeben , oder Sie können es einfach Aktivitäten nennen. Halte es einfach. Dann mach das nicht 36, denn wie ergibt das dann Sinn? Warum ist das eine andere Größe? Weil die Größe bedeutet, dass dies ein anderes Maß an Bedeutung hat, oder? Also ja, wenn du das tust und wenn du davor eine Schrift hast, zum Beispiel sagt, ich bin mir nicht sicher. Du kannst deine Statistiken oder deine Gesundheit heute sagen und dann kannst du das nennen. Dann beinhaltet dieser alles. Es enthält all diese verschiedenen Abschnitte. Also ja, dieser, du könntest 32 oder 36 draus machen. Das ergibt mehr Sinn. Es geht darum, eine Hierarchie zu haben. Ich möchte das nicht übertreiben, denn das ist ein Anfängerkurs Aber die Idee ist einfach, verschiedene Level. Also, wenn das eine große Überschrift ist, alles andere enthält, kannst du das 32 machen und dann ist das ein kleinerer Bereich, nur Statistiken, dann kannst du diese 24 machen und dann einen anderen Bereich von gleicher Bedeutung, dann wäre das auch 24 und so weiter und so fort. Machen Sie es sich nicht selbst kompliziert, aber so sollten Sie generell mit Typografie arbeiten Danke fürs Zuhören Wir sehen uns in der nächsten Lektion 12. Einführung in Auto Layout: Seit der letzten Lektion habe ich hier und da ein paar Änderungen vorgenommen Ich habe diese Karte hinzugefügt , um eine Zusammenfassung anzuzeigen. Das ist ein Standard , den die meisten Fitness-Apps bieten. Und ja, ich habe nur ein bisschen rumgespielt die Typografie-Hierarchie erstellt Aber in dieser Lektion möchte ich über eine sehr wichtige Funktion von Figma sprechen , eine Funktion, die ich sehr liebe, nämlich automatische Layouts nämlich automatische Layouts Nun, es ist ein bisschen schwierig zu verstehen, wie es funktioniert und sich daran zu gewöhnen, aber es ist sehr hilfreich Jetzt ist das automatische Layout eine Funktion von Figma, die es einfacher macht, Dinge innerhalb eines Layouts horizontal und vertikal zu organisieren innerhalb eines Layouts horizontal und vertikal Anstatt alles selbst in Bezug auf Texte wie diese Texte und so ausrichten zu müssen, macht das Autolayout es einfacher und hilft Ihnen, macht das Autolayout es einfacher dies auf eine andere Art und Weise zu tun Lass es mich erklären. Im Grunde genommen ist ein automatisches Layout etwas, das Sie auf einen Rahmen und nur auf einen Rahmen anwenden können . Der Weg, dies zu tun, besteht also darin , mehrere Dinge auszuwählen. Also werde ich ein automatisches Layout anwenden , zum Beispiel hier, ich habe diese Karten und ich möchte zeigen, diese Karten und ich möchte dass sie sich im selben Abschnitt befinden. Also als Erstes füge ich diese zusammen zu einem automatischen Layout hinzu. Um das zu tun, kann ich Shift A gedrückt halten, was das automatisch macht, oder ich mache das rückgängig. Was Sie tun möchten, ist, mit der rechten Maustaste zu klicken und dann auf Rahmenauswahl zu klicken. Das ist jetzt ein Rahmen. Und dann kommst du und klickst auf diese Schaltfläche , auf der steht „Automatisches Layout umschalten“ Und wenn Sie das tun, wird es automatisch erkennen, um welche Art von Layout es sich handelt Es ist bereits bekannt , dass es horizontal ist. Also hast du diese beiden zusammen und es hat hier ein Auto. Das ist also Auto Spacing. Das heißt, wenn ich den Rahmen ausstrecke, wird er automatisch verschoben , bis er ihn erreicht. Okay? Das ist ein nettes kleines Feature. Wenn Sie möchten, könnten Sie hier eine Zahl angeben, die meiner Meinung nach zum Beispiel zehn ist. Nun, das ist nicht Auto, also ist es nur zehn, oder? Das ist also etwas, das du dir antun kannst und das auf deinem Design basiert. Aber jetzt haben wir das in einem Layout oder einem automatischen Layout , um genauer zu sein. Es ist nicht so einfach zu verstehen. Nun, hier haben Sie den Abstand, den horizontalen Abstand zwischen Objekten, also können Sie ihn einrichten und hier haben Sie die Ausrichtung. Möchten Sie, dass es nach links, zur Mitte oder wo auch immer ausgerichtet wird? Nehmen wir an, wir richten es nach rechts aus. Das heißt, wenn das automatische Layout erweitert wird, bleibt es rechts, oder wir sagen links. Okay, du verstehst es also. Also, das Gleiche, wenn wir es rauf und runter machen , weißt du? Du sagst also im Grunde, wenn es einmal gedehnt ist, wo sollen die Gegenstände im Grunde genommen hingehören. Okay? Und ich werde später erklären, warum das nützlich ist. Ich meine, in diesem Fall ist vielleicht nicht klar, warum das nützlich ist, weil ich meine, es ist schon so, dass wir alles sehr gut aufeinander abgestimmt haben. Also machen wir einfach den Abstand zehn, und dann wähle ich und mache daraus ein automatisches Layout. Aber das wird vertikal sein, weil es rauf und runter geht. Also, wie gesagt, R klicken, Rahmen auswählen und dann ein automatisches Layout hinzufügen. Hier sehen Sie, dass der Abstand 15 beträgt. Wir können schon sagen: Hey, warum ist es 15? Machen wir zehn, damit alle Abstände gleich sind. Das macht unser Leben schon einfacher. Ich meine, wir haben vorher nicht auf diesen Abstand geachtet . Jetzt achten wir darauf. Dann können wir weitermachen und dies auch zum Auto Layout hinzufügen. Wir können das tun, indem wir es einfach hierher ziehen und Sie können hier eine Stelle sehen. Und so wurde es einfach ein Teil davon. Jetzt haben wir dieses ganze Auto-Layout. Wir können später mit dem Abstand herumspielen. Das macht es uns wirklich einfacher, das zu tun, wenn wir wollen. Aber eine andere Sache, die wir damit machen können, ist, dass wir auch mit den Ausrichtungen herumspielen können Ich habe es zum Beispiel in den Mittelpunkt gestellt. Jetzt können wir sehen, wie es aussieht. Ich meine, wenn wir es nach der Mitte ausrichten und wir heute deine Statistiken sehen können, sieht es in der Mitte ziemlich gut aus, aber nehmen wir es zurück. Auto Layout können Sie also solche Dinge tun , um es so zu gestalten, dass Sie es nicht Sie nicht versehentlich etwas verlegen können Siehst du, es ist an denselben Ort gebunden. Sie können die Reihenfolge der Dinge ändern, Sie können sie verschieben. Aber das Schöne ist, dass es keine kleinen Ausrichtungsprobleme gibt , denn was mir oft aufgefallen ist, besonders bei der Arbeit mit Teamkollegen, ist, dass man den Text manchmal versehentlich ein bisschen so verschoben Später, als du gekommen bist, hast du gesehen, dass dein Kollege das vielleicht versehentlich gemacht hat, und dann musstest du es ausrichten und sagen: Hey, wo war das eigentlich? Das ist eine Qual. Deshalb macht Auto Layout das einfacher, weil es alles mit exakten Zahlen bestimmt. Der nächste Schritt hier wäre also , das Ganze zu einem automatischen Layout zu machen. Das mache ich gerne. Jetzt gehen wir hierher und schalten das Autolayout um Das wird das Ganze zu einem automatischen Layout machen Ganze zu einem automatischen Layout Alle Elemente in diesem Frame haben ein automatisches Layout. Und das ist gewissermaßen ein Anfang , weil Sie sehen können dieser ganzen Sache um ein automatisches Layout handelt Es enthält ein automatisches Layout. Dieses automatische Layout enthält auch ein automatisches Layout. Dies ist der größere und dann dieser und dann dieser. So arbeitet die FINMA. Und wenn Sie wirklich effizient arbeiten, arbeiten Sie mit vielen automatischen Layouts ineinander Aber warte mal, ich möchte dir etwas Interessantes zeigen. Jetzt haben wir den ganzen Rahmen zu einem automatischen Layout gemacht, oder? Hier gibt es einige interessantere Einstellungen, bei denen es sich im Grunde um das Padding handelt. So nennen wir es, oder? Hier können Sie die Polsterung von links, von oben, die obere Polsterung, die rechte Polsterung und die untere Polsterung Es sagt dir im Grunde diese Entfernung genau hier, das Das Coole daran ist, dass hier alles um 24 oder 16 von den Seiten ferngehalten hier alles um 24 oder 16 von den Seiten ferngehalten können wir jederzeit ändern. Wir können 24 sagen. Wir machen es knapp oder Marge oder so. Das kannst du immer ändern. Du hast hier 60 Polster, wir könnten 100 draus machen. Machen Sie 60. Nun, diese Polsterung an der Unterseite brauchen wir eigentlich nicht, weil wir sie bereits nach oben ausgerichtet haben, oder? Also diese ganze Sache wird nach oben ausgerichtet. Wir können es so nach unten oder in der Mitte bis zur Mitte ausrichten oder in der Mitte bis zur Mitte oder, wie wir es zuvor hatten, oben links ausrichten. Das ist der beste Weg, es zu tun. Ich meine, wenn du eine App wie diese machst , oder es liegt an dir. Es liegt ganz bei Ihnen, aber für unsere Zwecke ist das der richtige Weg, und Sie sehen, diese Polsterung funktioniert gut, 16 von rechts, 16 von links und 60 von oben Mal sehen, wie das aussieht. Perfekt. Achten Sie also darauf , dass sich hinter der Kamera nichts bewegt und überlappt , da Apps das normalerweise nicht tun Es gibt jedoch ein Problem , nämlich die Abstände. Also ich schätze, Figma hat 21 alleine gemacht und gedacht, weißt du, weil es versucht, den Raum abzuschätzen , bevor du ein automatisches Layout daraus Aber wir werden weitermachen und es zum Beispiel schaffen, ich weiß es nicht 16. Nun, eine wichtige Sache ist , sicherzustellen, dass der Abstand innerhalb eines Bereichs wie diesem zehn beträgt. Das bedeutet, dass der Abstand zwischen anderen Elementen zwischen anderen Bereichen mehr als zehn betragen sollte. Der Grund dafür ist zu verstehen , dass dies ein völlig anderer Bereich ist als dieser , der ein völlig anderer Bereich ist als dieser. Auch wenn es für das Auge ein kleiner Unterschied ist, erklärt es die ganze Idee. Jetzt haben wir Auto Layout innerhalb von Auto-Layouts. Jetzt haben wir gesehen, wie automatische Layouts in Bezug auf die gesamte Leinwand funktionieren. Wie wäre es, ein Element als automatisches Layout zu erstellen ? Lass es uns ausprobieren. Ich möchte eine Karte machen, nicht für Aktivitäten, aber danach, sagen wir, lassen Sie uns hier einen anderen Titel machen und sagen wir, lesen Sie mehr. Oder könnte für dich interessant sein oder so. Jetzt klicke ich auf F und dann werde ich direkt hier an dieser Stelle etwas erstellen. Ich gebe ihm 16 Radius Carnoadius und dann färbe ich es mit dieser Farbe hier, es sollte im Grunde ein Element sein, das den Leuten sagt, mehr zu lesen, hier ist ein Artikel, was es sollte im Grunde ein Element sein, das den Leuten sagt, mehr zu lesen, hier ist ein Artikel, hier ist ein Artikel Ich werde einen Artikel aufschreiben. Ich werde diesen Text und dieses Textfeld kopieren und hier einfügen, und ich werde die besten Lauftipps für 2026 oder so etwas schreiben besten Lauftipps für 2026 oder so etwas Und dann werde ich Alt gedrückt halten und es nach unten ziehen. Ich habe es im Grunde dupliziert und ich werde es zwischen und 16 machen und dann werde ich Read Me schreiben Okay. Du kannst es auch 14 oder so machen. Wir haben diese Art von Karte, und ich möchte auch ein lizenzfreies Bild auswählen Also suche ich hier einfach nach etwas, vielleicht etwas mit einem Menschen drauf, das gut sein könnte Lass uns ein schönes Bild von jemandem auswählen. Ich meine, vielleicht dieses oder jenes Bild. Warum nicht? Sie können das herunterladen oder manchmal mache ich gerne , dass wir auf das Bild klicken und es kopieren. So kann man manchmal Bilder zu Figma bringen, aber das Problem ist, dass sie manchmal von sehr schlechter Qualität sind Ich werde das löschen und das Bild einfach kostenlos herunterladen Jetzt, wo ich es heruntergeladen habe, werde ich es einfach per Drag & Drop in Figma So mache ich das im Grunde immer. Jetzt haben wir hier ein riesiges Bild mit guter Qualität. Dann werden Sie dieses Bild hier hineinbringen wollen . Aber bevor wir das tun, bevor wir das eingeben, machen wir daraus ein automatisches Layout. Im Moment ist es ein Rahmen, und wir werden einfach auf Automatisches Layout klicken. Und FIMA ist intelligent, weil es Dinge organisiert, aber auch Platz entfernt, der nicht genutzt wird Also hat es herausgefunden, dass das die Objekte sind, die wir wollen, und es hat keinen Abstand zwischen ihnen hinzugefügt, aber wir können vielleicht acht platzieren, oder tatsächlich, wir brauchen nicht so viel Abstand Also werden wir weitermachen und es so ausdehnen , wie wir wollen. Das ist die Größe , die ich möchte, und ich werde sie so ausrichten , dass sie unten links ausgerichtet ist. Dann möchte ich dieses Bild hier platzieren. Eine Möglichkeit, es zu tun, besteht darin es einfach hierher zu ziehen und es dort abzulegen, und es wird Teil des automatischen Layouts sein. Aber eine coole Sache an Figma wenn es um den Import von Bildern und Videos geht , ist, dass Bilder tatsächlich Füllungen sind, genau wie Farben Du kannst diese Füllung also kopieren und einfach hier einfügen, oder? Was passiert, ist, dass Sie das Bild als Füllung darüber haben . Aber wenn du darauf klickst, kannst du auch hier klicken und es zuschneiden Es füllt das Bild jetzt aus, aber das Bild wird nicht gut angezeigt . Ich kann es nicht sehen. Ich werde es zuschneiden und dann werde ich das Bild einfach so verschieben, und ich werde Größe ändern oder es einfach so lassen Okay. Jetzt haben wir das Bild im Hintergrund, nicht perfekt platziert, aber es ist gut. Aber wir wollen, dass es lesbar ist. Ich meine, im Moment können wir nichts lesen , können nicht viel lesen. Eine Sache, die wir dagegen tun Wir können diese Farbe hierher bringen und dann auf dieses kleine Tröpfchen klicken, auf diesem Symbol als Mischmodus bezeichnet wird, und dann können Sie diese Modi auswählen, mit denen Sie ändern können, wie sich die Farben mischen Ich werde versuchen, etwas Nettes und gleichzeitig Künstlerisches zu wählen Nettes und gleichzeitig Künstlerisches zu Aber das ruiniert sein Gesicht nicht. Ich finde Multiplizieren wirklich nett, aber es verursacht immer noch Probleme mit der Lesbarkeit Ich werde einfach diesen Typen nehmen, seine Größe ändern und ihn hier auf der rechten Seite platzieren Einfach so, er ist aus dem Weg. Sieht aus wie ein netter kleiner künstlerischer Wachmann, aber ich möchte noch einen Schritt weiter gehen. Mir gefällt nicht, wie das hier ist. Ich werde noch einen hinzufügen und daraus einen Farbverlauf machen. Das sind normale Füllungen und das ist eine Verlaufsfüllung. Ich werde den Farbverlauf hier drehen und diese Punkte hierher bringen. Dann werde ich sie hier mit derselben Farbe einfärben. Ich glaube, es ist dieser, kopiert und eingefügt. Wir werden diesen Punkt hier transparent machen und dann diesen Punkt zu 100% oder sogar das Gegenteil Ich werde es hier einfach rückgängig machen. Dann gebe ich dem eine 100% ige Opazität. Und einfach so, jetzt haben wir einen Schicksalseffekt, was wirklich toll ist, um ehrlich zu sein Es sieht okay aus. Es sieht gut aus. Auf diese Weise haben wir unsere kleine Karte und sie sagt den Leuten, besten Lauftipps, mehr dazu. Wenn wir uns jemals dazu entschließen sollten, das Lesen von mehr Informationen oben drauf zu setzen , können wir das tun. Es ist ein automatisches Layout. Stellen Sie nur sicher, dass die Werte , die Sie in Bezug auf die Polsterung haben, nicht zufällig sind Im Moment sind sie ein bisschen zufällig. Weißt du, von rechts und links sind es 14, von oben und unten sind es 20 Jahre? Ich bin mir nicht sicher. Wir können das 16 und 16 oder so machen oder so oder 24, 24. Es liegt ganz bei dir, aber ich werde einfach 16, 16 daraus machen und los geht's. So sieht es aus. Sehr simpel Ich würde allerdings sagen, dass dieser Bereich hier etwas leer ist Also vielleicht könnten wir etwas hinzufügen, und ich bin mir nicht sicher, was es sein würde, aber ich werde das einfach hierher kopieren, es könnte, ich weiß nicht, Nummer eins sein , dann werde ich es einfach vergrößern Dann ist es nur Artikel-Countdown oder so. Nur als Beispiel, ich bin nicht wirklich total verliebt in diese Idee, aber wir können sie ausprobieren, nein Vielleicht ist sie zu groß. Ja, es ist wie bei Netflix, wie es Nummer eins, Film Nummer eins, Film Nummer zwei ausgewählt hat . Ich bin mir nicht sicher, ob Hashtag dem gerecht wird. Vielleicht könnte es so sein. Bei viel Design geht es darum, Dinge auszuprobieren und zu sehen, was funktioniert und was nicht. Also ja, nimm mir das weg. Und ja, ich nenne das vielleicht interessant für dich oder so. Fürs Erste ändere ich es vielleicht später. Eine weitere Sache, stellen Sie einfach sicher, dass die Hierarchie hier Sinn macht , falls Aktivitäten interessant sein könnten. Das ist dieselbe Größe , was keinen Sinn macht. Also vielleicht könntest du es etwas kleiner machen. Und einfach so sieht es ein bisschen schöner aus. Auf diese Weise können Sie automatische Layouts verwenden, um Ihre Designelemente innerhalb des Designs besser zu organisieren und auszurichten Ihre Designelemente innerhalb des Designs Danke fürs Zuhören Wir sehen uns in der nächsten Lektion. 13. Erstellen einfacher Komponenten: Hallo für eine weitere Lektion des Figma-Anfängerkurses. In dieser Lektion werden wir darüber sprechen , was Komponenten sind wie wir sie auf sehr einfache Weise zur Unterstützung unserer Designs verwenden können sehr einfache Weise zur Unterstützung unserer Designs Lassen Sie uns zunächst definieren oder versuchen zu verstehen, was eine Komponente ist. Eine Komponente ist im Grunde ein wiederverwendbares, wiederkehrendes Element in Ihrem Design Und ich weiß, dass ich das vielleicht schon einmal gesagt habe, dass ich die Dinge schon einmal auf diese Weise beschrieben habe Aber eine Komponente ist im Grunde ein Element, ein Designelement. Es könnte ein Knopf sein, es könnte eine Karte sein , wie die Karten, die wir hier gemacht haben, und es ist etwas, das verwendet und wiederverwendet wird Es ist also keine einmalige Sache. Und dieses Ding, das benutzt und wiederverwendet wird, hat eine spezifische Struktur Wenn wir zum Beispiel diese Karte als Beispiel nehmen , haben Sie eine Nummer und dann haben Sie einen Titel, und dann haben Sie eine Karte in Aktion, lesen Sie mehr und dann haben Sie ein Bild Wenn wir eine solche Struktur haben und sie sich auf die gleiche Weise wiederholt, aber nur mit einem anderen Bild, einem anderen Titel, anderen Text, dann daraus etwas machen, das wir als Komponente verwenden können. Das wirklich Schöne an Komponenten, wenn es um Figma geht, ist, dass die Komponenten alle auf das Original zurückgehen Sie sind immer noch irgendwie miteinander verbunden. Lassen Sie mich das anhand von Taten erklären. Lassen Sie uns weitermachen und zunächst Komponente oder eine Schaltfläche erstellen, etwas, das wir als Komponente verwenden können, als Beispiel für eine Komponente und dann sehen wir, wie wir sie verwenden. Ich werde das tun, indem ich ein automatisches Layout mache. Falls Sie diese Lektion noch nicht gemacht haben, gehen Sie zurück und stellen Sie sicher, dass Sie das richtig verstanden haben. Sie haben verstanden, wie das funktioniert, denn wird im Laufe der Lektionen immer wichtiger werden . Okay? Was ich hier hinzufügen ist etwas unter Aktivitäten, weil ich möchte, dass das Ganze dem ganzen Bildschirm komplett wird. Wir haben unsere Statistiken, wir haben eine Zusammenfassung, deine Schritte und dann hast du deine Entfernung, und ich denke, wir müssen den Benutzern zeigen, dass sie in der Lage sein sollten, ihre Zeiten oder ihre Übungen sehr einfach zu speichern. Das ist etwas, womit ich persönlich Probleme habe , weil manche Apps wollen, dass du tatsächlich gehst und klickst, ich werde jetzt laufen, auf Start klicken. Wenn sie wollen, dass ich das mache, dann sollten sie es auf dem ersten Bildschirm sehr deutlich machen . Das, weißt du, da ist ein Button, der mir sagt Hey, willst du laufen? Klicke hier. Hey, willst du spazieren gehen? Ich möchte auch nicht die ganzen kleinen verschiedenen Übungen durchgehen und filtern , falls das Sinn macht. Daher ist es für uns wirklich wichtig, den Benutzern auf dem ersten Bildschirm eine Option dafür zu zeigen . Ich denke also darüber nach, es vielleicht minimalistisch zu halten Vielleicht können wir ein Piktogramm oder ein sogenanntes Symbol verwenden oder ein sogenanntes Symbol Weißt du, besser bekannt als Ikone. Und es ist im Grunde wie eine Zeichnung oder so, genau wie die, die ich hier verwendet habe und die dir zeigen, was gemacht wird. Wenn also jemand rennt, dann, weißt du, du zeigst dieses Laufsymbol. Und wenn jemand, ich weiß nicht, einen Timer benutzt, würdest du ihn benutzen, oder? Aber wir werden uns auf verschiedene Arten von Übungen konzentrieren , okay? Also lass uns damit anfangen. Also werde ich ein Textelement hinzufügen, also kannst du hier klicken oder auf T klicken und dann weitermachen und Run schreiben, richtig? Also werde ich das kopieren, indem ich Alt gedrückt halte. Ich habe hier bereits eine Schrift namens Font Awesome. Falls Sie es also nicht wissen, ich meine, es ist nicht sehr bekannt. Es ist eine Schriftart, die Ihnen im Grunde verschiedene Symbole zeigt. Es ist ein wirklich cooles Konzept. Sie laden es also als Schriftart herunter und ich bin gerade auf der kostenlosen Version, und dann würden Sie zu einer Website gehen , auf der sie alle Schriftarten haben, und Sie müssen nur die Schriftarten kopieren und einfügen oder Sie können sie aufschreiben. Manchmal kann man einfach so etwas schreiben wie ich weiß nicht, Uhr und dann würde es auftauchen. Du könntest Fahrrad schreiben und es würde auftauchen. Das können wir tun. Ich meine , hier könnte es laufen. Zum Beispiel kam es als Piktogramm, oder du könntest einfach auf die Website gehen, einfach eine tolle Schrift wählen und dann würdest du alle Symbole finden , die sie haben Aber da ich mit dieser Schrift vertraut bin, tippe ich einfach jedes Wort ein, das mir in den Sinn kommt, und ich habe normalerweise ein paar Symbole auswendig Wie dem auch sei, genug mit der Prahlerei. Also, wir haben hier Inter, also werde ich einfach diese Schrift einrichten. Ich werde es mittelgroß machen, und das sollte, sagen wir, 14 sein. Jetzt haben wir dies und das und wir wählen beide aus und klicken dann einfach auf Shift und A, entweder das, oder Sie könnten es länger nehmen und Sie könnten weitermachen und auf Automatisches Layout hinzufügen klicken. Wählen Sie beide aus, klicken Sie mit der rechten Maustaste und klicken Sie auf Automatisches Layout hinzufügen. Einfach so wird ein Rahmen erstellt und daraus ein automatisches Layout. Ich kann sehen, dass der Abstand acht beträgt Ich werde daraus vier machen und sie näher zusammenbringen. Und jetzt werden wir den Prozess der Erstellung einer Schaltfläche durchlaufen . Es ist also wahrscheinlich höchstwahrscheinlich ein Button. Der Weg, das zu tun, ist, dass wir einen Hintergrund haben müssen. Ich meine, Knöpfe haben normalerweise ein bestimmtes Aussehen, oder? Sie sehen Karten ähnlich, sind aber viel kleiner. Also, wie machen wir das genau? Nun, der Weg, das zu tun, ist, zumindest in diesem Fall weiterzumachen und eine Füllung hinzuzufügen. Aber wir haben ein Problem, denn jetzt ist die Füllung weiß, der Text ist weiß. Ich werde den Text und das Symbol auswählen und es vorerst schwarz machen. Aber jetzt ist es zu nah an den Rändern. Sie sehen den Text hier, es gibt nicht viel Abstand, und deshalb brauchen wir Polsterung Also werde ich mit der Polsterung experimentieren und vier hinzufügen. Jetzt sieht es ziemlich gut aus, aber lassen Sie mich einige abgerundete Ecken hinzufügen Ich gehe zu Auftritt und schreibe hier 16. Lass mich sehen, wie groß der Radius hier war, 16. Ja, das ist ungefähr richtig. Jetzt haben wir es bei 16 und es sieht aus wie ein netter Knopf, aber ich hätte gerne ein bisschen mehr Polsterung Normalerweise haben wir rechts und links mehr Polsterung mit Ich meine, es ist eine Designentscheidung im Designstil, aber Sie könnten das tun, damit es ein bisschen atmet, besonders bei Text, oder? Und was wir auch tun könnten, wir könnten ihm sogar mehr Platz von oben geben . Es liegt ganz bei uns. Wir können damit experimentieren. Lassen Sie uns weitermachen und uns für ein allgemeines Aussehen entscheiden . Ich werde dem nur etwas Farbe geben. Also werde ich es zum Beispiel blau machen. Jetzt werden wir es Exercise Button nennen. Dies ist speziell für Übungen gedacht, für nichts anderes. Jetzt werde ich daraus eine Komponente machen. Um das zu tun, können Sie entweder mit der rechten Maustaste klicken und auf Komponenten erstellen klicken, oder Sie können hierher kommen und diese Schaltfläche hier haben, Komponenten erstellen. Sie klicken darauf und dann wird es lila. Violett hebt Dinge hervor, bei denen es sich um Komponenten handelt. Aber es gibt eine sehr wichtige Sache zu wissen. Es gibt eine übergeordnete Komponente und es gibt eine untergeordnete Komponente. Wenn Sie mit Programmieren vertraut sind, ist Ihnen dieses Konzept wahrscheinlich vertraut. Im Grunde ist dies eine übergeordnete Komponente , da es sich um das Original handelt. Es ist das Originalstück , das wir gerade erstellt haben. Wir haben es hervorgebracht, wenn du das kopierst und woanders hingehst und es einfügst, Control V. Das ist eine identische Version. Aber wenn Sie bemerkt haben, dass der Titel drüber steht, ist das nicht der Fall, aber das ist nicht der einzige Unterschied. Ich meine, ansonsten sehen sie völlig identisch aus. Aber die Sache ist die, wie Sie sehen können, hier gibt es vier kleine Quadrate. Das ist das Original, die übergeordnete Komponente. Dies ist zwar eine Instanz. Ich denke, das ist der eigentliche Begriff. Es ist eine Instanz oder Sie könnten es eine untergeordnete Komponente nennen. Und hier besteht ein interessanter Zusammenhang , denn genau wie Eltern, nehmen die Kinder die Eigenschaften der Eltern an. Wenn ein Elternteil blaue Augen hat, wird das Kind blaue Augen haben. Wenn der Elternteil neongrüne Augen hat, wird das Kind auch neongrüne Augen haben . Machen wir das rückgängig. Wenn wir die Dinge auf den Kopf stellen, werden sie es beide ändern. Wenn wir zu dem Kind gehen und sagen wir, das Kind trägt Kontaktlinsen oder ich weiß nicht, geht und tut etwas, verändert etwas in seinem Aussehen, oder sagen wir, etwas Erbliches, und nehmen wir an, es ändert die Farbe seiner Augen, wie gesagt, dann setzen sie Brillengläser auf Nun, wenn das passiert, nichts Eltern. Es ist genau dieselbe Logik. Deshalb liebe ich dieses Label oder diesen Namen, dass es die übergeordnete Komponente und die untergeordnete Komponente ist , weil es die Beziehung zwischen diesen Elementen perfekt darstellt Es ist also Kindern oder Instanzen erlaubt, sich bis zu einem gewissen Grad von den Eigenschaften ihrer Eltern zu trennen von den Eigenschaften ihrer Eltern zu trennen Du kannst zu dieser Instanz kommen und das Wort hier ändern und sagen Spaß statt Laufen, du könntest die Farbe ändern. Du kannst auch das Icon ändern. Du könntest Fahrrad schreiben. Deshalb ist Awesome Fanta ziemlich cool weil du einfach Dinge tippen kannst, du kannst die ganze Farbe dieses Dings ändern Du kannst die Polsterung ändern. Es gibt viele Dinge , die Sie ändern können, bis zu einem Punkt, an dem es so aussieht, als ob es nichts miteinander zu tun hat Sie können sogar das Symbol oder den Text oder etwas anderes löschen. Lassen Sie uns das alles rückgängig machen. Aber wenn du so etwas einmal gemacht hast , lass es uns wiederholen Dann kommst du und sagst: Hey, ich möchte, dass das Symbol orange ist Dann lässt sich das nicht auf dein Design übertragen. Der Grund ist, ich meine, dass Sie das Symbol gelöscht haben. Es ist nicht mehr da. Es gibt eine Regel dafür. Es gibt einige Regeln. Die Eigenschaften, die du in den Instanzen änderst, werden nicht mehr von den Eltern getrennt Jetzt, wo wir zum Beispiel die Polsterung ändern, sagen wir: Hey, lass uns die Polsterung ändern Weißt du, es wird sich nicht ändern, oder ? Es wird sich nicht ändern. Aber manche Dinge, zum Beispiel den Radius, den Eckenradius, habe ich einfach geändert. Es ist immer noch verbunden. Und leider gibt es keinen Weg, das herauszufinden. Figma sagt dir nicht, was immer noch mit dem Elternteil verbunden ist und was nicht, oft verwirrend sein kann Aber du musst daran zurückdenken oder logisch darüber nachdenken Zum Beispiel wurde hier das Wort geändert, die Farbe wurde geändert, die Polsterung wurde Sie sind also offensichtlich nicht mehr verbunden. Okay? Behalte das im Hinterkopf, aber das ist nur ein sehr allgemeiner Überblick darüber, wie diese Dinge funktionieren. Ich kann das löschen, kein Problem, aber sobald ich die übergeordnete Komponente lösche, ist das ein Problem. Also versuche das nicht zu tun, okay? Ich meine, es wäre kein großes Problem, aber es ist richtig. Kopiere das, füge es ein, wo du willst, und dann kannst du es kopieren und einfügen. Sie können es kopieren und einfügen. Und genau das werden wir tun. Wir werden verschiedene Versionen davon erstellen, also wir sagen, laufen und Rad fahren oder sagen wir Rad fahren, offizieller ausgedrückt, und dann können wir Rad fahren oder vielleicht Radfahrer, ähm, Radfahrer, Radfahrer schreiben . Fahrrad fahren? Ich bin mir nicht sicher. Deshalb wird es schwierig. Oh, sieh mal, da hast du's. Person, die Fahrrad fährt. Daher wird es manchmal etwas schwierig, diese zu bekommen. Und lass uns noch einen machen. Ich meine, schwimmen, richtig? Schwimmende Person, die schwimmt. Schwimmen. Ja, da haben wir's. Und wir werden schwimmen gehen. Also versuchen wir, es so kurz wie möglich zu halten. Wir wollen es nicht schwimmen lassen. Radfahren, Marathon laufen. Das wäre ein bisschen zu viel für Bildschirme, kleine Telefonbildschirme. Was können wir also tun? Also, damit du rennen kannst, kannst du auch laufen, glaube ich, spazieren gehen. Also laufen. Also diesmal keine Person, die läuft. Und dann könnten wir noch etwas anderes hineinlegen, in Ordnung, wir könnten einfach noch eins hinzufügen, nur damit wir es auffüllen können. Ich kopiere das und sagen wir Fußball vielleicht, hoffentlich. Okay. Fußball Fußball. Ja. In Ordnung. Ich nenne das einfach Football. Es tut mir leid, wenn Amerikaner zuschauen , dann ist es Football. Jedenfalls. Nun, was wir tun können, ich füge sie einfach alle zu einem automatischen Layout hinzu, okay? Einfach Umschalten A und dann gehe ich hierher und stelle es unter Aktivitäten. Jetzt habe ich das und ich merke etwas, dass der Hintergrund bereits weiß ist, obwohl er sich grau anfühlt, aber tatsächlich weiß ist er Wir müssen daran denken , den Schatten hinzuzufügen. Wir können es einfach von den Effekten hier nehmen , wir fügen es hier ein. Jetzt haben wir ein bisschen Schatten, aber er ist zu stark, also werde ich ihn ein bisschen zurückziehen , nur um die Werte ein bisschen zurückzuziehen. Oder wir könnten einfach einen Strich hinzufügen. Wie Sie sehen, ist es wirklich cool, dass ich nur diese eine Instanz bearbeite und sie all diese Dinge zusammen ändert. Das ist unglaublich. Das liebe ich an diesen Komponenten. Schauen wir uns jetzt an, wie es aussieht. Ja, es sieht nicht schlecht aus. Ich persönlich würde, sagen wir, etwas mehr Polsterung hinzufügen. Und der Grund dafür ist, dass ich es den Leuten ermöglichen möchte , auf sie zu klicken, weil wir berücksichtigen müssen, dass Menschen große Finger haben Ich meine, das tun wir alle, auf dem Telefonbildschirm. Aber es gibt auch Leute unter uns, die dicke Finger haben, und das müssen wir als Designer eigentlich berücksichtigen. Ich glaube, es gab so etwas wie die Regel mit den dicken Fingern oder so ähnlich, nämlich die Tatsache, dass man Dinge, Objekte, so groß machen muss Objekte, so groß dass die Leute, wenn sie darauf klicken, sie irgendwo anders klicken und klicken verpassen. Wir können hier dasselbe tun, indem wir etwas mehr Abstand hinzufügen , nur um sicherzustellen, dass die Leute unterscheiden können. Einfach so haben wir verschiedene Arten von Aktivitäten. Ich würde weitermachen und vielleicht sogar die Farben ändern, um ehrlich zu sein, aber nicht auf eine sehr absichtliche Weise, sondern eher ein bisschen zufällig, nur damit sie anders aussehen In gewisser Weise. Oder wir könnten sie einfach in derselben Farbe behalten. Ich meine, das ist einfacher, zumal wir diese Farbe als unsere Hauptfarbe ausgewählt haben. Aber ja, das ist eine Version davon wie wir die Knöpfe machen könnten. Wir könnten sie auch machen, wie wir gerade mit Shadow erwähnt haben. Aber ich würde sagen, wenn du so etwas machen willst, dann sorge dafür, dass der Schatten nicht so verrückt ist. Ich meine, es ist ein bisschen verrückt nach diesen Karten. Aber hier, bei den Karten, sind sie nicht gerade anklickbar, oder du kannst sie anklicken, aber das ist eine andere Geschichte Aber hier besteht die ganze Funktion darin , dass sie anklickbar sein sollten Also wollen wir sie so sichtbar wie möglich machen, okay? Also behalte das einfach im Hinterkopf. Also ja, so können Sie im Grunde Komponenten verwenden, verschiedene Arten von Designelementen in Ihrem gesamten Design erstellen und sicherstellen, dass sie konsistent bleiben. Und das ist eigentlich, weißt du, der ganze Zweck falls ich nicht direkt darüber gesprochen habe. Die ganze Idee von Komponenten ist, dass wir nicht überall unterschiedliche Designs haben wollen . Wir wollen nicht zehn verschiedene Arten von Tasten haben. Stattdessen wollen wir ein einheitliches Designsystem haben. Ein Designsystem ist eine Sammlung von Designelementen oder Komponenten, die verwendet und wiederverwendet werden, und sie sollten alles berücksichtigen Wenn Sie sagen, dass es ein Symbol geben wird, lassen Sie uns eine Option für ein Symbol hinzufügen Wenn es Schatten geben wird, wenn es Umrisse geben wird, weißt du, Striche, was auch immer, dann sollten wir das berücksichtigen . Also mach weiter. Testen Sie es, probieren Sie es aus, versuchen Sie, Ihre eigenen Komponenten herzustellen und sehen Sie, was Sie damit machen können. Es macht wirklich Spaß und macht die Dinge viel einfacher. Und es ist nie zu spät, wenn du denkst: Okay, hey, das ist ein cooles Objekt, das ich habe, du kannst es ziemlich einfach in eine Komponente verwandeln, und dann kannst du es verwenden und wiederverwenden und eine andere Version erstellen. Und was noch cooler daran ist, dass du später , wenn du sagst: Hey, mir gefällt nicht, wie dieses Design aussieht, weitermachen und es einfach einmal austauschen kannst. Sie müssen es nicht auf jedem einzelnen Bildschirm ändern , denn um ehrlich zu sein, kann ich Ihnen als Designer, erfahrener Designer, der schon eine ganze Weile in diesem Bereich gearbeitet hat, eine Sache sagen erfahrener Designer, der schon eine ganze Weile in diesem Bereich gearbeitet , dass Sie oft an einen Punkt kommen, an dem Sie so viele verschiedene Elemente haben und manchmal dieselben Elemente auf allen Bildschirmen. Der Gedanke, zu jedem einzelnen von ihnen zu gehen und sie zu ändern, ist also ihnen zu gehen und sie zu ändern ein kompletter Albtraum Es ist unmöglich, oft haben wir am Ende so viele Änderungen, so viele verschiedene Elemente, so viele verschiedene Elemente die sich leicht voneinander unterscheiden, und die Folge, dass wir nicht sauber anfangen Deshalb würde ich Ihnen raten, sauber anzufangen, zu lernen, wie man Komponenten benutzt und sie verwendet, damit Sie es später nicht bereuen und viel Handarbeit leisten müssen viel Handarbeit leisten müssen Vielen Dank fürs Zuhören, und heute haben wir gerade Komponenten gelernt. Wir sehen uns in der nächsten Lektion. 14. Optimieren des UI-Designs: Willkommen zurück zu einer weiteren Lektion. In dieser Lektion werden wir ein wenig nachdenken. Wir werden uns all die Arbeit ansehen, die wir bisher geleistet haben , und wir werden sie ein wenig kritisieren und sehen, was fehlt Sie wissen schon, die ganze Idee, und das ist eine gute Übung für Sie als Designer . Sie sollten lernen, objektiver auf Ihre Arbeit zurückzublicken . Es ist unmöglich, völlig objektiv zu sein, aber versuchen Sie, es aus einer anderen Perspektive zu betrachten, insbesondere aus der Perspektive eines potenziellen Benutzers, okay? Und kritisieren Sie es und versuchen Sie, selbst Feedback zu finden, etwas, das Sie verwenden können, um Ihr Produkt oder Ihr Design zu verbessern Das werden wir heute üben und dann werden wir es verbessern. In Ordnung. Machen Sie sich jetzt keine Sorgen, wenn Sie das Gefühl haben, dass Ihnen die Ideen nicht in den Sinn kommen. Machen Sie sich keine Sorgen, wenn Sie das Gefühl haben, dass das keinen Sinn macht. Mein Lehrer ist mein Lehrer, das ist absolut unglaublich. Er fängt alles auf, was fehlt. Wie werde ich jemals so sein wie er? Mach dir darüber keine Sorgen. Natürlich habe ich ein paar Jahre in diesem Bereich gearbeitet, also ist es für mich etwas natürlicher, aber das ist etwas, das man einfach üben kann. Zeit immer mehr Kritik übt, kann man einen Punkt erreichen, an dem man diese Dinge sofort erkennen kann Es gibt andere Dinge , bei denen man nicht sagen kann, dass es richtig und falsch ist Es ist einfach eine Frage der Meinung, der subjektiven Meinung. Oder vielleicht müssen wir es testen. Wir müssen viele Tests durchführen, bis wir herausgefunden haben, was der richtige Weg ist , und dafür haben wir weder Zeit noch Geld. Im Moment betrachte ich es als Benutzer und ich überprüfe dieses Dashboard und es gefällt mir vielleicht nicht. Sieht ziemlich nett aus. Es gibt Dinge, bei denen du sagst, statt blau hätte ich lieber lila. Statt Orange hätte ich gerne Blau. Aber wir hatten nicht viel zu bieten. Deshalb haben wir uns diese Farben ausgedacht. Ja, im Moment denken wir allerdings eher unter dem Gesichtspunkt der Benutzerfreundlichkeit. Also, wie sieht der Benutzer das? Was fehlt dem Benutzer? Was könnte potenziell optisch nervig, störend für den Benutzer sein, Beispiel was gut aussieht, nicht so toll für die Augen und so weiter Das Erste, was ich persönlich sagen würde, ist, dass ich ein großer Fan dieser Art bin , mit dem Benutzer zu sprechen und zu sagen: Hey, Ahmed, und dann direkt ihm zu sprechen und ihn direkt beim Namen zu nennen Das ist von App zu App unterschiedlich. Viele Leute benutzen es nicht. Es ist nicht sehr verbreitet. Aber wenn das jemand tut, erwarte ich, dass es einen Bereich gibt, in dem ich zu meinen eigenen persönlichen Daten gehen und Hallo Ahmed sehen kann , wer ist Ahmed Wo kann ich meinen Namen ändern? Was ist, wenn es der falsche Name ist? Oder ich möchte meine Profileinstellungen sehen und so weiter. Oft ist es normalerweise ein Kreis hier oder hier links oder rechts , wo du einfach auf deine eigenen Daten zugreifen, dein Profil öffnen und so weiter kannst dein Profil öffnen und so weiter Das ist eine Sache, die ich hinzufügen würde , die mir bereits fehlt. Eine zweite Sache, übrigens, zögern Sie nicht, innezuhalten und einfach selbst darüber nachzudenken. Ich wollte dir dafür Zeit geben, aber du kannst einfach eine Pause machen und das alleine machen. Die zweite Sache ist, dass der Abstand meiner Meinung nach etwas abweicht. Der Abstand zwischen Ihren heutigen Statistiken und den Karten darunter ist ein bestimmter Abstand. Wenn du dann zwischen Aktivitäten, dem Wort Aktivitäten, dem Titel und den eigentlichen Aktivitäten nachschaust Aktivitäten, dem Wort Aktivitäten, , ist der Abstand noch nicht da. Ich meine, was hier möglicherweise verwirrend sein könnte , ist die Tatsache, dass Sie sich Aktivitäten ansehen und nicht wissen, ob dies zu dem Bereich zuvor gehört. Oder danach. Weil es gleiche Abstände hat, und dann denkt man, deshalb sind Abstände wichtig , weil sie uns unbewusst die Beziehung zwischen verschiedenen Elementen vermitteln, und genau das wird uns gerade nicht gesagt Deshalb merke ich es persönlich mehr. Deshalb ist es gut , auf Ihre Designs zurückzublicken . Vielleicht haben Sie etwas verpasst. Ich würde also entweder den Abstand hier verringern und im Grunde diese beiden Elemente hinzufügen, den Text und all diese Schaltflächen. Ich würde sie zu einem automatischen Layout hinzufügen und den Abstand verringern. Das Gleiche könnte für dich und diese Karte interessant sein, oder ich würde ein Auto-Layout machen. Ich würde sie zusammenfügen, aber ich würde den Abstand zwischen allem anderen vergrößern. Ich mache so oder so ein Auto-Layout. Ich gruppiere diese zusammen oder sagen wir nicht Gruppierung, weil Gruppen unterschiedlich sind Ich füge sie in ein automatisches Layout und vergrößere den Abstand zwischen diesen beiden oder verringere den Abstand zwischen diesen beiden Es wird später mehr Sinn machen. In Ordnung. Das sieht ziemlich cool aus. Jetzt haben wir diese Informationen. Jetzt können wir natürlich den ersten Bildschirm mit viel mehr Informationen füllen , aber ich möchte es für Sie einfach halten. Das baut auf dem Punkt auf hier ein Profilbild haben, auf das Sie klicken können. Das dient der Navigation und das brauchen wir. Auf welcher Seite bin ich? Ist es zu Hause? Ist es ein Armaturenbrett? Ist es eine Zusammenfassung? Was ist? Gibt es noch andere Bildschirme, die ich sehen kann? Das ist eigentlich das Thema der nächsten Lektion, das Hinzufügen eines zweiten Bildschirms, und genau das werden wir tun. Die Frage hier ist, wie kann ich mein Profil ansehen? Hat diese App einen sozialen Teil? Gibt es einen Teil mit Tipps, einen informativen Teil dieser App oder vielleicht gibt es einen Teil mit Freunden, oder vielleicht gibt es einen Teil mit Freunden in dem du dich mit deinen Freunden messen kannst. All dies sind Ideen , die andere Apps haben. Wenn Sie das nicht tun und es nicht einmal berücksichtigen, verpassen Sie bereits etwas. Okay? Also mach weiter so und behalte das im Hinterkopf. Das ist eine Sache, die wir auch tun werden, ist dass wir eine Navbar hinzufügen werden Das nennen wir eine Navigationsleiste in der wir mehrere Schaltflächen haben, vielleicht drei, vier, fünf, liegt an dir und du sagst, hier ist dein Zuhause, das ist Zusammenfassung, das sind Freunde, du es nennen willst, das ist etwas, was wir tun werden Davon abgesehen denke ich, dass es mir gut geht. Ich denke, der Abstand zwischen High Ahmed und deinen Statistiken heute könnte etwas zu groß sein. Ich weiß es nicht Ich fühle mich danach, aber lass uns sehen, wie wir das herausfinden können. Lassen Sie uns zur Sache kommen. Jetzt das Wichtigste zuerst, ich möchte schon mit dem Abstand fertig werden. Ich füge diese bereits in ein automatisches Layout ein und füge sie in ein automatisches Layout ein. Ich sehe, dass der Abstand hier 16 ist, und das ist der Abstand für den gesamten Rahmen. Ich werde sehen, wie viel Abstand wir hier haben. Das sind zehn. Ich werde acht daraus machen, und ich werde das auch acht machen und das auch acht. Mal sehen, wie es jetzt aussieht. Jetzt können Sie hier sehen, dass der Abstand jetzt doppelt so groß ist. Es ist nicht so auffällig. Das ist es, worauf es ankommt. Dein Gehirn hat es schon herausgefunden. Dein Gehirn sagte: Okay, Aktivitäten, die mit diesen Aktivitäten verbunden sind und nichts anderes, das für dich interessant sein könnte , sind mit dieser Karte verbunden, sonst nichts. Dein Gehirn hat das herausgefunden, also musst du nichts dafür tun, okay? Damit sind wir fertig und jetzt kümmern wir uns um die Sache mit dem Profil. Ich denke , das Problem, das ich damit habe , ist, dass dieser Text vielleicht etwas zu hoch ist . Es hat zu viel Höhe. Jetzt senke ich es, um zu sehen, ob es, du weißt schon, näher kommt, nicht so sehr. Alles gut. Ich meine, manchmal muss man bei Abständen eine Sache im Hinterkopf behalten , dass man methodischer vorgehen muss Wie Sie sehen können, haben wir hier konkrete Zahlen angegeben und Dann sieht es hier komisch aus, und vielleicht hätte ein Grafikdesigner gesagt, ja, leg das einfach näher dran Als Bildschirmdesign kann man das nicht machen. Okay? Du kannst nicht einfach weitermachen und sagen, du weißt schon, nur damit es besser aussieht Nein, du musst, du weißt schon, konsequent bleiben. Wenn du 16, 16 gesagt hast, sollte das auch 16 sein, okay? Also weißt du, nimm deine Hände davon. Okay? Lassen Sie uns jetzt weitermachen und unsere Profilschaltfläche erstellen. Jetzt werde ich es erstellen, indem ich einfach auf O klicke, wodurch du das Oval bekommst, schätze ich Halten Sie dann die Umschalttaste gedrückt, vergrößern Sie es einfach, und dann vergleiche ich es gerade es sieht nach einer guten Größe Und dann machen wir uns ein Bild von jemandem. Ordnung. Also habe ich gerade ein Bild bekommen. Ich bin mir nicht sicher, ob das tatsächlich KI ist, aber ich habe gerade ein Bild von einer Person bekommen. Also kopiere ich die Füllung, füge sie hier ein und das ist unser Profilbild, okay? Also füge ich es dem Layout hinzu und wähle diese beiden Elemente aus, das Bild und den Text, das Bild und den Text, halte Shift und A gedrückt, mache aus ihnen quasi ein automatisches Layout, und dann mache ich sie horizontal und mache sie zentriert oder vielleicht sogar tiefer. Und ich werde sie nach links ausrichten. Mal sehen, wie es aussieht , wenn das Bild auf der linken Seite ist, es fühlt sich falsch an, also werde ich es auf die rechte Seite stellen. Aber ich werde den Abstand automatisch einstellen. Wie ich bereits erklärt habe, dadurch beide Elemente auf die andere Seite Es macht den Abstand im Grunde so groß wie möglich. Das ist es, was es tut. Jetzt haben wir dieses Profilbild hier und ich habe das Gefühl, dass es nicht genug ist. Ich gebe ihm einen Schatten, kopiere einfach den Schatten von hier und füge ihn hier ein. Mach es etwas weniger verschwommen. Und bring es näher. Um ehrlich zu sein, ist es nicht so sichtbar. Ich werde es nur noch verschwommener machen. Das sieht ungefähr richtig aus. Oder was Sie tun könnten, ist, Sie könnten es viel kleiner machen. Sie könnten die Unschärfe auch einfach komplett entfernen . Es liegt ganz bei Ihnen und wir könnten es auch viel größer machen Das ist auch eine Option, etwas, das wir tun können. Aber ich werde nur sichergehen, dass sie zusammen zentriert sind. Ordnung. Also jetzt haben wir das. Ich bin immer noch nicht besonders glücklich mit dem Schatten, aber das ist in Ordnung. Wir könnten also versuchen, einen Strich hinzuzufügen , damit er besser aussieht vom Hintergrund unterscheidet. Ich denke, das löst unser Problem ein bisschen. Jetzt machen wir weiter und wir werden unser Navigationselement erstellen Jetzt denke ich darüber nach, etwas Ähnliches wie das zu tun , was wir hier mit diesen Schaltflächen gemacht haben, nichts allzu anderes, ein Symbol hinzuzufügen, etwas Text hinzuzufügen und es einfach zu halten. Und die meisten Navigationsleisten sind einfach so. Okay? Also, ich werde einen Rahmen erstellen, also drücken Sie F und bringen diesen Rahmen und ich werde versuchen, ihn hierher zu passen, okay? Ja, etwas in der Nähe. Dann werde ich es rund machen. Und ich möchte verschiedene Schaltflächen hinzufügen, aber das Erstellen von Schaltflächen kann etwas schwierig sein. Also lass mich das kopieren. Ich habe es gerade kopiert und werde eine Schaltfläche erstellen. Lassen Sie mich diese Elemente hier einfach ausleihen. Ich kopiere sie und füge sie hier und lasse mich sehen, was meine Vision Ich werde sie so platzieren. Und dann werde ich sagen , das ist Zuhause und das ist dein Zuhause, und ich werde es ein bisschen größer machen. Also werde ich das jetzt zu einem automatischen Layout machen , um alles zusammenzubringen. Und das sieht nicht schlecht aus, um ehrlich zu sein. Ich bin mir nicht sicher, ob es zu groß ist, aber lass es uns testen. Ich werde es hier hinzufügen und daraus ein automatisches Layout machen. Ich werde ihm eine andere Farbe geben, nur um es zu sehen. Okay. Ändere die Größe Ich werde die Größe ändern und ihm eine angemessene Polsterung geben. Das ist nur zufällig, also mache ich einfach acht mal 12 oder so . Jetzt nehme ich es raus. Ich mache das zu einer Komponente und sage Navbar-Button. Ich kopiere das jetzt, füge es hier und kopiere es und füge es erneut Ich mache es horizontal und gebe acht Abstände. Mit der Polsterung mache ich auch acht. Und ich mache acht von oben zwei oder vielleicht mal sehen, vielleicht machen wir vier, vier draus Ich werde die Farbe vorerst von hier entfernen. Sie sehen jetzt, dass sie sehr gut verteilt sind , weil wir mit gleichbleibenden Abständen gearbeitet haben Wir haben rundum mit einer gleichmäßigen Polsterung gearbeitet, und jetzt sieht es sehr ausgewogen aus Ich werde daraus eine Komponente machen. Ich werde daraus eine Schnapsbar machen. Ich nehme diesen Schnapsriegel und füge ihn hier hinzu. Und ich werde versuchen, es zu zentrieren. Nun, es gibt eine Methode, die ich dir noch nicht beigebracht habe, aber jetzt bringe ich sie dir bei. Wenn Sie ein automatisches Layout haben, ist alles auf eine bestimmte Weise organisiert Hier haben wir ein automatisches Layout. Alles ist links oben ausgerichtet. Dinge haben 16 Abstände und so weiter. Aber es gibt eine Möglichkeit für Sie, Figma anzuweisen, das automatische Layout zu ignorieren Und zu tun, was immer du willst. Auf diese Weise wählen Sie das Element aus, das Sie aus der ganzen Sache herausnehmen möchten, und dann gehen Sie zu dieser Schaltfläche hier und dort steht: Ignoriere das automatische Layout. Dann können Sie es einfach so verschieben, wie Sie wollen , in jede Richtung und an welcher Stelle, welcher Abstand auch immer, es spielt keine Rolle. Das ist es also, was wir tun. Jetzt haben wir diese Elemente, und um ehrlich zu sein, passen sie nicht auf den ganzen Bildschirm. Wenn etwas nicht stimmt, könnten wir vielleicht noch eins hinzufügen. Vielleicht könnte das unser Problem lösen oder wir könnten viel mehr Abstand zwischen ihnen hinzufügen. Aber das führt zu einem kleinen Problem mit dem Abstand, wie Sie sehen können. Die Polsterung ist hier vier und dann ist der Abstand 16. Vielleicht können wir einfach mit dieser Art von kleiner Navbar arbeiten . Okay? Vorerst können wir damit arbeiten und es später ändern. Ich werde das kopieren und einfügen , damit es so aussieht, als ob es mehr Inhalt gibt. Ich werde nur verschiedene Farben hinzufügen. Lass es so aussehen, als ob wir mehr Inhalte im Hintergrund haben. Nun, hier ist eine Sache, die ich tun möchte, was durchaus üblich ist, nur um es Ihnen als Beispiel zu zeigen, ist, dies mehr im Stil von Apple zu gestalten. Wir halten uns nicht genau an ihren Designstil und so weiter, aber wir versuchen, den Stil ein wenig nachzuahmen, genau das tun viele Apps Wenn sie auf dem Apple-System unter IOS laufen , ahmen sie es Und was ich nachahmen möchte, ist der Glaseffekt, weil wir dieses Figma haben Es ist nicht genau dasselbe, aber es ist ziemlich cool. Der Weg, das zu tun, ist, dass Sie Ihrem Objekt, Ihrer Navbar, die Farbe Weiß geben Und dann gehst du weiter und gehst zu den Effekten. Und statt Schlagschatten können wir auch Schlagschatten machen, um ehrlich zu sein. Lass uns das machen. Warum nicht? Stattdessen werden wir auch Glas machen und das alleine machen, es wird dir diesen wirklich schönen glasigen Effekt geben , der wirklich toll aussieht Es gibt mehr Einstellungen, die sehr komplex sind, aber es ist trotzdem nett , es auszuprobieren Aber um das zu tun, sollten wir auch die Farben besser anpassen. Lassen Sie uns sie vorerst weiß machen und sehen, wie das aussieht. Und natürlich würde ich immer empfehlen, dass Sie, wenn Sie so etwas tun , es mit dem tatsächlichen Produkt vergleichen , das Sie kopieren möchten. In diesem Fall versuchen wir, Apple zu kopieren, also schauen wir uns an, wie sie das machen, und jetzt machen sie es nicht mehr in Weiß. Ich meine, sie machen Schwarz. Die Farbe Schwarz. Für Knöpfe wie diese würden sie also schwarz oder vielleicht nicht genau schwarz sein, aber wir können hier unser anderes Schwarz nehmen und es verwenden. Es ist anpassungsfähig. Wenn der Hintergrund farbig ist, machen sie ihn weiß, wenn nicht, machen sie ihn schwarz. In diesem Fall haben wir einen sehr dunklen Hintergrund, also machen wir ihn einfach weiß. Siehst du, was ich dort gemacht habe? Ich habe nachgesehen, gesehen, was sie gemacht haben und gesagt: Okay, gib mir ein Okay, also lass uns jetzt weitermachen und die verschiedenen Abschnitte erstellen. Nehmen wir an, wir haben ein Zuhause, was heutzutage nicht mehr so aussagekräftig ist, um ehrlich zu sein Du musst zum Beispiel angeben, ist das dein Feed? Ist das deine Zusammenfassung? Was ist das genau? Also lass uns vielleicht einfach hier eine Zusammenfassung schreiben. Aber wenn wir das schreiben, brauchen wir ein nettes kleines Icon. Und ich habe gerade ein Kreisdiagramm geschrieben, das ziemlich gut funktioniert hat. Vorerst. Ich nenne das einfach Zusammenfassung. In Ordnung. Und dann werde ich herkommen. Anstatt zu Hause zu sein, haben wir vielleicht Freunde oder so etwas oder soziale Kontakte. Ich werde Benutzern schreiben und ich werde einfach hier schreiben. Freunde. Profil, wir haben das Profil aktiviert. Wir könnten einen pädagogischen Teil übernehmen. Also vielleicht Hantel. Ja. Und wir könnten hier Training schreiben. Jetzt haben wir es ein bisschen durcheinander gebracht, weil jetzt die Namen oder die Knöpfe alle andere Größen haben als wir normalerweise haben Um ehrlich zu sein, fällt mir auch auf, dass der Text etwas zu groß ist, um ehrlich zu sein Wir können das ändern und vielleicht 12 daraus machen. Was wir tun wollen, ist auch, ihnen allen eine Größe zu geben Ich nehme die Größe der größeren, nämlich 79, also gebe ich ihnen einfach allen 80, also eine Breite von 80. Einfach so, sie sind jetzt etwas gleichberechtigter . Sie sehen netter Aber dieser Unschärfeeffekt ist etwas zu stark, also können wir versuchen, ihn zu korrigieren können wir mehr Zuckerguss machen, Um ehrlich zu sein, können wir mehr Zuckerguss machen, was diesen ganzen Effekt ruiniert Aber wie Sie sehen können, ist es ohne Zuckerguss wirklich Wir machen ein bisschen mehr Zuckerguss. Das lasse ich einfach stehen. Durch das Frosting hat es keinen so durchsichtigen Effekt, und dann kann man die Farben ein bisschen besser sehen Ja, das ist wirklich nett. Wenn wir den vollen Weg gehen wollen, Apple Oops nachzuahmen, dann müssen wir es wirklich rund machen und wir müssen das Ganze etwas kleiner machen Sollte die Icons vielleicht etwas kleiner machen. Und hier haben wir eine Polsterung von acht, also können wir vielleicht vier daraus machen. Mal sehen, wie das aussieht Ich würde sagen, das ist ein bisschen ähnlicher. Mit dem Ganzglaseffekt ist es etwas schwieriger zu sehen. Ich meine, wenn wir das machen, ist es viel schöner. Aber ja, ich meine, im Moment sieht es ein bisschen lesbarer bis viel besser aus, aber vielleicht mache ich das Symbol wieder ein bisschen größer und dann sieht es viel Wir könnten also auch eine nette kleine Suchschaltfläche hinzufügen auch eine nette kleine Suchschaltfläche Also werde ich eine Instanz nehmen, ein untergeordnetes Element dieser Komponente, und ich werde diese löschen. Jetzt gibt es nur noch eine, anstatt dass es mehrere sind, sodass wir das Wort nicht schreiben müssen. Wir werden nur das Symbol haben. Und dann mache ich das 60 mal 60, schätze ich, oder 54 mal 54. Ich nehme das hier und lasse es auch das Autolayout ignorieren und richte es hier aus. Mal sehen, ob die Höhe hier 54 ist, hier sollte sie auch 54 sein. Lass es uns noch einmal überprüfen. Ich glaube, hier gibt es ein kleines Problem mit dem Rendern. In Ordnung, also so sieht es jetzt aus. Also haben wir diese Icons. Wir haben auch ein Symbol für die Suche. Unsere Navbar sieht also ziemlich gut ehrlich zu sein, muss ich sagen, dass sie nicht gerade perfekt für Apple ist, aber sie leistet uns gute Dienste für das Design , das wir hier haben Okay? Der nächste Schritt wird darin bestehen, einen zweiten Bildschirm zu entwerfen, was eine herausfordernde Aufgabe sein wird. Sei nicht zu übermütig, aber wir werden das zusammen durchstehen Hab also auch keine Angst. Wir werden versuchen, einen weiteren Bildschirm zu erstellen. Mit den gleichen Prinzipien, mit den gleichen Ideen , die wir gelernt haben, werden wir einen zweiten Bildschirm erstellen. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 15. Hinzufügen eines zweiten Bildschirms: Hallo zusammen. Heute werden wir einen zweiten Bildschirm für unser Design erstellen. In dieser Lektion werden wir also versuchen zu verstehen, wie wir anhand von Designs, die wir bereits begonnen haben und die wir bereits erstellt haben, auf eine Weise erweitern können Designs, die wir bereits begonnen haben und die wir bereits erstellt haben , die darauf aufbaut und vielleicht neue Elemente einbringt und so weiter. Aber gleichzeitig wollen wir nicht nur diese neuen Dinge einführen, sondern auch die Konsistenz wahren. Und deshalb ist diese Lektion etwas, über das man nachdenken sollte. Aus diesem Grund haben wir darauf geachtet, diese Lektion aufzunehmen. Weil es eine Sache ist, einen Bildschirm zu lesen , und es ist eine großartige Fähigkeit, aber dann weiterzumachen und diesen Bildschirm auf einen anderen zu übertragen und sicherzustellen, dass sie genauso aussehen, als ob sie in derselben App wären, das ist eine Herausforderung. Deshalb werden wir uns heute dieser Herausforderung stellen. Für die Zwecke dieser Lektion werde ich, ich habe mich entschieden, die Trainingsseite zu erstellen. Also werden wir einen zweiten Bildschirm erstellen, und das wird der Trainingsbildschirm sein. Und auf diesem Bildschirm werden wir eine Seite oder einen Bereich der App erstellen , der darauf spezialisiert ist, Menschen beim Training zu helfen. Dazu gehört auch die Bereitstellung von Tutorial-Videos, vielleicht Artikeln, aber wenn es sehr leicht ist, vielleicht ein paar hilfreiche Tools für das Training. Ich bin mir nicht wirklich sicher. Aber lassen Sie es uns einfach halten, denn auch hier es etwas anderes, darüber nachzudenken , was die App haben sollte und welche Features und Funktionen sie haben sollten. Das ist etwas, in das Sie auf jeden Fall Zeit investieren sollten . Aber für die heutigen Zwecke üben wir, wie wir diese Ideen zum Leben erwecken können. Also nicht, wie man auf die Ideen kommt, sondern wie man sie in ein konkretes Design umsetzt. Also lass uns anfangen. Normalerweise könnten Sie jetzt das Rahmenwerkzeug auswählen und einen ganz neuen Rahmen erstellen. Aber ich arbeite gerne an dem , was wir bereits hatten. Also werde ich das hier so nennen , als ob ich mir nicht sicher bin, Fitness-App, und wir haben uns noch nicht für einen Namen oder ein Branding oder so entschieden , und das ist vorerst okay. Ich werde es einfach kopieren und einfügen. FINMA wird hier einfach einen zweiten Bildschirm für mich einrichten und ich kann ihn nennen, ich meine, statt nur Fitness-App könnte ich ihn auch Übersichtsseite nennen Das Ganze ist eine Fitness-App, aber das und das ist eine Trainingsseite. Okay, oder du könntest es Bildschirm nennen, du könntest es nennen, wie du willst. Dann werde ich weitermachen und die Abschnitte entfernen, die für mich nicht interessant oder nicht wirklich brauchbar oder wiederverwendbar sind. Also lass uns sehen. Also, ich will das behalten, ich werde es hier aufstellen. Wir behalten diese erste Zeile oder vielleicht können wir sie sogar löschen. Das konzentriert sich also auf Fitness oder lassen Sie uns das wieder zurückbringen und das nennen wir Fitness oder so ähnlich. Und dann werden wir das entfernen. Wir richten es nach links aus. Hier haben wir Aktivitäten, deine Statistiken werden wir wegnehmen. Vielleicht möchten wir, dass einige der Artikel so Gestalt annehmen, oder ich bin mir nicht sicher, aber lassen Sie uns das im Hinterkopf behalten. Jetzt haben wir ein Problem mit der Tatsache , dass sich diese Tasten nicht anpassen, sie sind nicht farbanpassend. Wir müssen einen Weg finden , um nicht schlecht auszusehen, wenn das passiert. Vielleicht solltest du es einfach gräulich machen. Ich denke, das ist viel besser. Die Füllung hier ist weiß, aber hier ist sie interessanterweise schwarz Ich meine, wir haben es gerade geändert. Wir können das auch schwarz machen. Ja, ich denke, das ist gut genug, um sicherzustellen , dass es bis zu einem gewissen Grad lesbar ist. Eine Sache, die wir sicherstellen wollen, ist, dass wir sicherstellen wollen auch klar ist, bevor wir beginnen, welche Seite wir wählen, welche Seite gerade ausgewählt wird. Um das zu tun, können wir nur herkommen. Wir haben dieses Element, das wir bereits geschaffen haben, oder? Also, das ist eine zusätzliche Funktion oder eine zusätzliche Sache , die Sie lernen müssen. Wenn Sie also eine Komponente erstellen, kann eine Komponente mehrere Variationen davon haben , oder das, was wir Varianz nennen Sie sagen also, das ist die Navbar-Schaltfläche, so sieht sie aus Aber wir müssen auch sicherstellen , dass es eine Version davon gibt , die etwas hervorgehoben ist Wenn Sie sich auf der Übersichtsseite befinden, sollte sie Ihnen sagen, dass Sie sich auf der Übersichtsseite Im Moment sagt es uns nichts. Also werden wir weitermachen und hier auf diese Schaltfläche klicken, die Variante hinzufügen hat, und das wird hier eine weitere Variante hinzufügen. Wir werden also eine Füllung hinzufügen. Wir werden diese Füllung vielleicht zu 5%, vielleicht zu 10% machen. Das werden wir tun. Und wenn wir dann hierher kommen, werden wir diese Zusammenfassung wählen. Und wir werden Variante zwei wählen. Wir können ihm auch einen Namen geben. Jetzt wollen wir sehen, wie das aussieht. In Bezug auf die Polsterung sieht es etwas seltsam aus, und vielleicht sollten wir unsere Polsterung anpassen, um sicherzustellen, dass sie funktioniert Was wir hier also tun könnten ist, anstatt die Polsterung B acht zu haben, wir können sie B vier haben, und dann wäre es Und ja, jetzt haben wir es herausgefunden. Jetzt müssen wir nur noch sicherstellen , dass auch die Größe dieser Schaltfläche geändert wird, sie auf 55 mal 55 stellen und wir werden sie hierher bringen Jetzt lösche ich sie und füge sie einfach wieder hinzu. Mal sehen, wie sie aussehen. Da haben wir's. Jetzt ist das hervorgehoben und wir können mit dem Highlight herumspielen. Ich meine, sollte es heller oder dunkler sein? Nochmals, nur um Ihnen eine Vorstellung zu geben, wir berücksichtigen, wie gesagt, nicht die tatsächlichen Designfarben und so weiter von Apple Wir kopieren es mit dem Glaseffekt, aber alles andere machen wir einfach sehr schnell Ja, darauf müssen Sie sich nicht zu sehr konzentrieren. Wir könnten es also auch so gestalten, dass es, wenn es hervorgehoben ist, auch eine bestimmte Farbe hat. Also hier könnte es zum Beispiel diese Farbe sein. Oder diese Farbe, die wir hatten, aber diese lässt sich, wie Sie sehen, nicht sehr gut mischen. Ich würde diese Farbe wählen, da sie sehr hell ist. Was wir also tun werden , ist hierher zu kommen und wir werden Standard festlegen und diese Seite ist Training. Also werden wir die zweite Variante für das Training wählen. Okay? Und so sieht es aus. Nun, wie ich bereits erwähnt habe, haben wir keine adaptiven Elemente. Wenn man codiert, könnte man sagen, wenn der Hintergrund hell ist, dann sollte das Ganze viel mehr Deckkraft haben, 50% oder so Das würde im Wesentlichen sicherstellen, dass es keine Probleme mit der Sichtbarkeit Aber jetzt, da wir das nicht wirklich programmieren können, wir können diese Logik nicht wirklich anwenden, manchmal hat man am Ende Elemente, die nicht gut lesbar sind. Okay? Also kannst du das entweder manuell machen und sagen, naja, in diesem Fall ist der Hintergrund nicht zu hell, was auch immer, oder du könntest es dem Entwickler überlassen und er kann das entscheiden. Okay? Aber das ist eine Geschichte für einen anderen Tag. Kommen wir nun zurück zum Design. Jetzt ist es viel klarer , dass dies die Zusammenfassung und dies die Trainingsseite ist. Perfekt. Jetzt müssen wir uns also fragen, was erwartet man normalerweise auf einer Trainingsseite? Ich persönlich würde also bis zu einem gewissen Grad erwarten, dass es Schaltflächen gibt, ich sehr schnell etwas auswählen kann, oder? Ich liebe diese kleinen Knöpfe oder Chips oder wie auch immer Sie sie nennen , weil sie sehr einfach zu erreichen sind und Ihnen helfen, auf die Inhalte zuzugreifen , die Sie benötigen. Okay? Aber vielleicht haben wir hier ein Problem, weil in diesem Abschnitt klar war, dass du eine Aktivität startest, und vielleicht könnten wir es sogar mit dem Titel, der Startaktivität oder so etwas klarstellen . Aber hier klingt es eher nach einem Filter. Also sollten wir vielleicht ein bisschen vorsichtig sein , wie wir diese Dinge ausdrücken Ich meine, fängst du eine Aktivität an? Oder filtrierst du, du weißt schon, die Lektionen oder die Videos, die du sehen möchtest? Vielleicht könnten wir das anders machen. Lassen Sie uns hier also eine andere Variante erstellen. Und so haben wir diese Komponente. Wir haben gerade eine weitere Variante davon gemacht. Aber anstatt Schatten und so weiter zu haben, werden wir den Schatten entfernen und wir werden die Füllung entfernen und wir werden den Strich behalten, okay? Wir hatten ein Strichdesign, also werden wir es beibehalten. Und schauen wir uns an, wie es aussieht. Und um das zu tun, müssen wir nur jeden einzelnen Chip auswählen , den wir haben, und dann zu Variante zwei übergehen. Jetzt können Sie den Unterschied sehen Der Hauptunterschied zwischen ihnen besteht darin , dass sie mit Schatten gefüllt waren. Jetzt sind sie eher wie Filterchips. Sie werden hauptsächlich zum Filtern verwendet. Und wir können versuchen, andere Dinge zu tun , um sicherzugehen, dass es so ist, ich bin mir nicht sicher. Verständlich, dass diese nur zum Filtern dienen. Vielleicht könnten wir auch die Farben des Icons ändern. Um es nicht so interaktiv erscheinen zu lassen . Aber das ist nur eine Idee. Okay? Meiner Meinung nach können wir versuchen, diesen Effekt zu erzielen. Jetzt, wo wir das erledigt haben und wir Aktivitäten haben, könnten wir das eigentlich einfach entfernen und es ist selbsterklärend, dass Sie nach diesen filtern können Vielleicht können wir es hier besonders deutlich machen, die Aktivität starten. Okay. Also starte die Aktivität. Du kannst laufen, Rad fahren, schwimmen, was auch immer. Und hier hast du dieselben Aktivitäten, aber sie sind nur getrennt. Aber ich würde sagen, es macht keinen Sinn, dass du versuchst, ein Video über Laufen anzusehen . Ich glaube nicht, dass das eine Sache ist. Was das also besonders deutlich machen würde , ist, tatsächlich die richtigen Kategorien zu finden. Ich würde also sagen, die richtigen Kategorien wären Krafttraining, oder? Wie Gewichte. Und dann könnten wir hier Hantel schreiben Wir könnten Yoga als Einheit schreiben. Schauen wir uns also an, ob sie Yoga haben. Wir suchen nur nach Meditation. Stellen Sie sicher, dass Sie kostenlos filtern. Sie können also eine Person zum Beten haben, aber das passt nicht wirklich zu betenden Händen, so etwas Vielleicht, ähm, entspannen oder entspannen, Spa. Ich bin mir nicht sicher, ob das wirklich symbolisiert, aber sagen wir, betende Hände Aber wie gesagt, das ist die kostenlose Version. Im Moment haben wir also nicht die besten Icons, aber wenn du tatsächlich eine App entwickeln oder designen möchtest oder wenn du in einem Unternehmen arbeitest, würde ich empfehlen, dass du dir das komplette Paket kaufst, das Abonnement, damit du alle Icons bekommen kannst und sie haben eine Menge toller. Okay? Also was kannst du noch tun? Du hast Gewicht? Hast du Yoga? Lass uns sehen. Ich meine, ich schaue auf mein Handy. Lass mich in meiner Fitness-App nachschauen und sehen, was sie dort haben. Oder nennen wir das vielleicht Meditation statt Yoga. Und ich bin mir nicht sicher, was da ist. Sagen wir Cardio und dann lassen wir jemanden laufen. Und lass uns noch eine Sache finden. Ja, sagen wir einfach Yoga, aber dann müssen wir etwas dafür finden. Yoga, Matte, Matratze, Kissen, Stretch. Ich meine, gibt es wirklich nichts, was Yoga symbolisiert? Ich meine, sie haben zum Beispiel jemanden, der meditiert . Das könnte gut sein Das sind also all die Arten von Übungen , die sie haben. Lass uns etwas anderes wählen. Sagen wir einfach, sagen wir einfach Laufen. Okay, hier haben wir es. Wir haben nicht viel verändert, aber am Anfang hatten wir Gewichte und Meditation. Also werden wir das, was noch interessant sein könnte, weißt du, am Ende des Entwurfs notieren . Ich mag es, solche Elemente zu haben weil sie nette Highlights sind, aber sie sind auch zusätzliche Funktionen oder zusätzliche Inhalte, sagen wir mal. Wenn der Nutzer nicht findet, was er sucht, gibt es immer, weißt du, das für dich interessant sein könnte, dich interessieren könnte oder es könnte nur für dich sein, um ehrlich zu sein. Das ist auch eine nette Art zu sagen, es ist, jemandem ein interessantes Thema zu geben und zu sagen: Hey, das könnte etwas für dich sein , etwas, das du tun könntest. Also ja, lassen Sie uns das behalten. Aber wie gesagt, es ist zusätzlicher Inhalt. Ich meine, idealerweise sollte es nach der Person, nach ihren Interessen und nach der Seite gefiltert werden. Hier ist es eine Fitness-Seite. Ich meine, die ganze App ist eine Fitness-App. Mir ist gerade klar geworden, dass es keine Fitness-Seite ist. Es ist eine Trainingsseite. Hier könnten wir Training sagen. Jetzt haben wir diese Art von Schulungen für Sie. Lassen Sie uns nun ein Element oder eine Komponente mit Video erstellen. Klicken Sie auf F und machen Sie eine schöne kleine Box. Lass uns etwas zum Anschauen kreieren. Aber die Sache ist , dass dieses Format, das Sie hier sehen, ein sehr normales Format für Computer ist . Dies ist das Format für Computer. Es ist Landschaft. Aber heutzutage werden viele Apps, vieles vertikal ausgerichtet. Sie werden zu Portraits, und das liegt am Telefon. Das ist eine Sache, die Sie mit Ihren Designs tun könnten , ist sicherzustellen, dass sie vertikal statt horizontal sind , weil das wirklich besser für Telefone optimiert ist. Wir könnten also Folgendes angeben, ich meine, wie viel Eckenradius haben wir? 16? Also könnten wir dem 16 geben. Und ich werde vorerst dieses Bild nehmen, dasselbe Bild, das wir nur als Beispiel hatten. Ich klicke darauf und wähle statt Zuschneiden Ausfüllen. Es wird die Dimensionen für mich herausfinden und alles andere. Okay, jetzt haben wir das hier, richtig? Nun, die Herausforderung wird darin bestehen, es ein bisschen größer zu machen. Die Herausforderung wird darin bestehen, Text zu schreiben, oder? Wenn Sie also etwas Horizontales haben, wird es schwierig sein, Text darauf zu schreiben. Mal sehen, das ist Inter Inter und wir werden 16 daraus machen. Alles unter 16 ist normalerweise schwieriger zu lesen, okay? Also sollten diese Titel sehr, sehr kurz sein. Also mache ich es schwarz, auch wenn wir momentan nicht viel davon sehen können. Wir haben also zwei Möglichkeiten, also können wir entweder auf das eigentliche Bild schreiben oder wir können darunter schreiben. Gründen der besseren Lesbarkeit ist es immer besser, darunter oder daneben zu schreiben darunter oder daneben , weil man nicht weiß, welche Art von Bild kommen wird Stellen Sie also sicher, dass es richtig gemacht wurde, damit Sie alle Möglichkeiten berücksichtigen Weißt du, auf diese Weise weiß ich, dass es schwarzen Text geben wird und darunter weißer Text, also funktioniert es. Also werde ich das zu einer Komponente machen und ich werde Video sagen, okay? Also, jetzt werde ich das kopieren, und das ist es, was ich gerne mache. Ich füge es gerne schon ein und füge es erneut ein. Und dann wähle sie aus und mache sie zum automatischen Layout, indem Umschalttaste in A gedrückt hältst. Dann mache ich sie horizontal und dann kopiere, füge sie ein, kopiere und füge sie ein. Oder wir brauchen es nicht, ich meine, das ist genug. Jetzt können wir sehen, wie es aussieht , und wir können es selbst beurteilen. Hey, vielleicht nimmt das zu viel vom Bildschirm ein, lass uns das ändern. Lassen Sie uns das ein bisschen ändern und schauen wir, was wir tun können. Vielleicht können wir den Abstand zwischen ihnen verringern, oder vielleicht ist das eine schlechte Idee. Nur die Zeit wird es zeigen. Lassen Sie uns jetzt versuchen, einen netten kleinen Titel zu finden, etwas, das minimal ist. Auch hier schaue ich mir eine App an, nur um zu sehen wie Apple das gemacht hat, zum Beispiel, ähm, und ich mache das nicht aus einem bestimmten Grund nur weil mein Telefon ein großes Telefon ist, also ist es einfach einfacher, von dort aus darauf zuzugreifen. Ich sehe, dass sie Stärke bei Kim haben , Stärke bei Jen. Das sind quasi die Trainingseinheiten , die sie haben, oder? Wie, sie sagen HIIT mit Jamie Ray mit Brian. Es ist also wirklich cool , denn wenn man es aus der Perspektive der Benutzererfahrung betrachtet, versucht man wohl, einen mit der Person zu verbinden Es ist also eine menschliche Verbindung. Der einzige Unterschied zwischen dieser oder jener Lektion ist, dass diese mit Brian ist und die andere mit Bakari, zum Beispiel Das ist wirklich cool, aber es macht es ihnen auch leichter, denn weißt du, werden sie HII T eins und zwei und drei schreiben Das macht auch keinen Sinn. Aber lassen Sie uns versuchen, das zu testen und sehen, wie das auf unserer Seite aussehen würde. Also, wenn ich HIIT mit Brian sage, richtig? Zu lang. Der Text ist zu groß, um ehrlich zu sein. Also lass uns 12 draus machen. Und lassen Sie uns überprüfen, wie es aussieht. Also werde ich es auswählen, Play drücken. Okay, da haben wir's. Um ehrlich zu sein, der Text ist nicht zu klein und er ist ziemlich gut. Es ist ziemlich cool. Und ja, wie Sie sehen können, nutzen wir diesen Raum sehr gut, und wir können sogar einen weiteren hinzufügen. Auf diese Weise kannst du einen netten kleinen Teaser hinzufügen. Du kannst sehen, hey, da ist noch etwas anderes für dich. Ich werde dieses Element nur herunterfahren. Das ist genau hier. Dann möchte ich diesen Text nehmen, ihn kopieren, einfügen. Ich bewege mich mit dem Touchpad auf und ab. Damit es verschiedene Dinge durchmacht. Jetzt machen wir es hier, wir stellen es hier hin und wir müssen es Workout nennen. Und ich füge sie beide zu einem automatischen Layout hinzu. Der Abstand hier ist also acht, also mache ich auch hier acht. Also nochmal, genau das gleiche Prinzip, oder? Und hier ist Konsistenz ziemlich wichtig, nämlich zu verstehen, hey, der Abstand zwischen diesem und dem ziemlich wichtig, nämlich zu verstehen, hey, und allem, was auch immer, sollte bis zu einem gewissen Grad gleich sein, nicht völlig gleich sein, aber er sollte konsistent sein. Also hier acht, acht, acht, aber zwischen all diesen verschiedenen Abschnitten bei 16. Stellen Sie also sicher, dass Sie immer noch diese Richtlinien befolgen , die Sie zuvor festgelegt haben. Okay? Also lass uns weitermachen. Jetzt haben wir dieses Setup. Lassen wir den Titel momentan leer oder voreingestellt, also schreiben wir einfach den Videonamen. Dann können wir diese Informationen eingeben. Dann können wir das Yoga mit Matt nennen. Lustig, weil du eine Yogamatte hast und dann können wir HIT mit Brian sagen. Also wir könnten diesen Weg gehen oder wir könnten einen anderen Weg gehen, um ehrlich zu sein, denn jetzt denke ich, dass die Art und Weise, wie Apple es gemacht hat, cool ist, aber hey, wir können etwas Cooleres machen. Lassen Sie mich jetzt ein Brainstorming durchführen, was zu tun ist. Eine Sache, die wir tun können. Ich werde das kopieren und einfügen. Jetzt haben wir also eine zusätzliche Zeile. Also bearbeiten wir alles direkt auf all diese Elemente. Jetzt halte ich Shift und A gedrückt und wähle das aus. Ich habe daraus ein automatisches Layout gemacht, das nur den Text enthält. Jetzt füge ich vier und vier Polsterungen hinzu. Ich werde eine Füllung hinzufügen. Ich werde die Füllung ein bisschen grau machen, oder vielleicht kannst du ihr die Farbe ein bisschen blau geben. Dann gebe ich ihm 24 abgerundete Ecken. Dann werde ich hier reinschreiben, um Tag zu schreiben. Das ist ein Tag dessen, was wir sagen wollen. Lassen Sie mich von links und rechts etwas mehr Polsterung hinzufügen Ich möchte sichergehen , dass es auch einfach in den Text selbst passt Ich möchte nicht, dass es den ganzen Raum einnimmt. Mal sehen, es war mittel, das sollte mittel sein. Okay. Und das sollte wohl halbwegs gewagt sein. Oder wir können, ich weiß es nicht. Ich meine, das ist gewagt, also können wir uns daran halten. Wir können die Dinge fett halten, aber auch viel fett gedruckten Text zu haben, ist ein bisschen fett. Lassen Sie uns alles mittelgroß halten, okay? Lassen Sie uns dann ein Beispiel haben. Anstatt Yoga mit MP zu sagen, könnten wir hier Anfänger sagen, oder? Also, Stufen hinzufügen, vielleicht Stufen hinzufügen oder Ziele hinzufügen, was ist das Ziel? Und wir könnten hier Pro sagen. Sagen wir hier Mitte, ich mag nicht Medium oder Mitte oder so oder ich bin mir nicht sicher. Ich meine, Mitte kann heutzutage auch eine schlechte Bedeutung haben als schlecht. Aber sagen wir mal mittel. Mittlerer Schwierigkeitsgrad, Anfänger-Schwierigkeitsgrad Profi-Schwierigkeitsgrad oder Max oder wie auch immer du es nennen willst, es ist wirklich nicht so wahnsinnig wichtig. Was wir also tun können, wir hätten dieses Tag nehmen und es zu einem eigenen Bestandteil machen können. Das können wir bereits tun. Ich nehme das heraus, mache daraus eine Komponente, nenne es Tag und ich werde drei Varianten davon erstellen. Eine wird beginnen. Einer wird Mega sein, einer wird hart oder professionell sein. Ich meine, anstatt hart zu sagen, werden wir sagen, du bist Profi, das ist Profi-Level. Dann können wir mit den Profis herumspielen : Rot, Mittel ist Gelb, Anfänger ist Grün, vielleicht. Es liegt wirklich an uns. Ich füge das einfach als Standard hinzu, wenn du Anfänger bist und dann, wann immer du es ändern willst, kannst du zwischen Medium, Pro und so weiter wählen . Auch hier kannst du zu den Farben zurückkehren und sagen: Hey, das hat mir nicht wirklich gefallen. Lassen Sie es uns bläulich halten, oder vielleicht kann Rot manchmal als negative Konnotation angesehen werden Wenn Sie es also blau machen, wird es positiver Aber vielleicht können wir all diese Farben auch etwas stärker machen und etwas mehr Sättigung haben nur damit sie klar aussehen. Also lass uns das jetzt überprüfen. Okay, sieht viel besser aus, aber jetzt denke ich, wir könnten es normal machen , nur damit es nicht zu sehr auffällt Und was die Abstände angeht, vielleicht können Sie ein automatisches Layout mit dem Tag erstellen, wie der Titel im Tag, und die vier so gestalten, dass sie meiner Meinung nach näher beieinander liegen könnten Jetzt haben wir Yoga mit Matt Beginner. Alternativ könnten wir jede Yoga-Sitzung einer anderen Sache zuordnen. Also zum Beispiel friedliches Yoga, oder? Und dann kannst du HIIT sagen, du kannst sagen, ähm, schnelles HIIT Du gibst quasi ein bisschen Branding, das ist Yoga, aber das Ziel dieser Yoga-Sitzung ist es, sehr friedlich oder entspannend zu sein Ich meine, Yoga sollte das sowieso sein, aber man könnte sagen, intensives Yoga für Profis, oder? Also hier haben wir P. Welche Art von Übung könnte Hardcore-Laufen sein? Ähm, okay, oder Marathon-Marathon-Lauf, richtig? Also fügen Sie ein bisschen mehr hinzu, Sie fügen etwas Branding hinzu und Sie wecken das Interesse der Leute, weil ich finde, dass das, was Apple getan hat, sehr freundlich, aber nicht verrückt, interessant ist . Also, hier wäre ich wie ein Marathonlauf. Wow. Ja, ich habe das Marathonlauf-Video gesehen Ich habe die Herausforderung gesehen, die sie gemacht haben, und ich habe sie befolgt. Vielleicht ist es wie ein Video, das du auf dein Handy legst und dann rennst du und hörst sie dir an. Es ist, als ob jemand wie ein Freund mit dir rennt oder so. Ich weiß nicht, verschiedene Ideen durcheinander bringen. Aber denken Sie daran, wenn Sie so etwas erstellen, zum Beispiel Tags, erstellen Sie Richtlinien für jeden, der den Inhalt hinzufügen wird Sie werden den Inhalt höchstwahrscheinlich nicht selbst hinzufügen, oder? Das musst du also im Hinterkopf behalten. Wenn du ein solches Design entwirfst, legst du die Grundlage dafür, dass jemand anderes reinkommt und den Inhalt füllt. Wenn Sie das Anfänger-Tag oder das Schwierigkeits-Tag überhaupt nicht enthalten hätten , wäre es wahrscheinlich nicht gemacht worden. Wer auch immer es ausgefüllt hat, hätte gesagt, das ist nicht notwendig und er hätte es auch nicht getan. Aber das wäre negativ für den Benutzer gewesen. Okay. Also eine andere Sache, die mir gerade in den Sinn gekommen ist, ist Zeit. Weißt du, wie viel Zeit habe ich? Wenn ich einen Marathon machen will, bin ich keiner? Sind das 2 Stunden? 5 Stunden, 1 Stunde? Ich weiß es nicht. Also, welche Art von Video werde ich mir jetzt ansehen? Das ist wirklich wichtig hinzuzufügen. Also ich würde sagen, kopiere hier und füge die Dauer hinzu. Also könntest du sagen, du könntest entweder sagen, das sind 20 Minuten oder so, oder du könntest, du weißt schon, die Dauer genauer angeben und sagen, du weißt schon, das ist 1020, oder? So etwas in der Art. So eine Sache. Aber versuchen wir herauszufinden, wie wir das am besten formatieren können. Lassen Sie uns hier eine Farbe auswählen. Vielleicht dieser. Ich möchte hier nichts bearbeiten, also baue ich nicht mit den Komponenten herum, also bearbeite ich alles direkt hier. Okay. Also, jetzt haben wir die Zeit, aber ich denke, es ist vielleicht einfacher, wenn wir 10 Minuten oder so schreiben. Weil es für die Leute schwieriger ist, 1057 zu sagen. Oh, das ist technisch gesehen 11. Nein, 10 Minuten, 11. Also lässt du sie Dinge berechnen. Nein, sag einfach 10 Minuten, weißt du? Und noch besser, wenn es 11 Minuten sind, sag nicht 11 Minuten, sag 10 Minuten. Runden Sie es einfach so auf, dass es wie eine nette kleine Zahl aussieht. Okay? Nochmals, wie gesagt, Sie schaffen hier mehr Wert. Hier gibt es eine Menge Wert. Wer auch immer es ausfüllen will, findet jetzt eine Stelle, an der er den Titel hinzufügen kann. Sie haben einen Ort, an dem sie die Zeit und den Schwierigkeitsgrad hinzufügen können. Was könnte jemand sonst noch brauchen? Ich meine, ich bin mir nicht wirklich sicher. Lassen Sie uns jetzt weitermachen und eine für diese letzte Sache hier hinzufügen . Wir könnten einfach intensives HIIT sagen. HIT und mach daraus ein Profi-Abzeichen. Ich meine, es heißt Badge oder Chip oder wie auch immer du es nennen willst. Dann lass uns versuchen, ein paar Bilder zu finden. Normalerweise gehe ich zu Pexels oder es gibt eine andere Website namens Free Wir könnten zum Beispiel einfach Yoga eingeben. Ich mache einfach die einfachsten Bilder, die ich finden kann. Ich meine, das sieht nicht sehr nach der Lektion aus. Wie Sie sehen, können Sie das jetzt direkt zur Instanz hinzufügen. Ich habe das schon einmal gezeigt, aber du kopierst es einfach als Füllung. Anstatt es hierher zu kopieren, machen Sie diesen Fehler nicht. Wenn du das hier kopierst, funktioniert es nicht immer Kopiere die Füllung und füge sie dann hier ein. Dann kannst du die anderen Füllungen davor löschen. Jetzt das Gleiche mit HIIT, ich bin mir nicht sicher, was es ist, um ehrlich zu sein Ich denke, es ist ein intensives Training mit hoher Intensität oder etwas Ähnliches Aber nehmen wir den Kerl her. Eine weitere Sache, die wichtig ist, wenn Sie das tun, wie Sie sehen können, machen wir die Dinge sehr schnell, aber es wäre auch toll, wenn Sie einen bestimmten Stil für die Person einrichten könnten, die den Inhalt füllen wird. Weißt du, Bilder auszuwählen, die hell sind, zum Beispiel Bilder auszuwählen, die, ich bin mir nicht sicher, ob sie gut beleuchtet und von guter Qualität sind ich bin mir nicht sicher, ob sie gut beleuchtet , und das könnte wirklich viel bewirken. Also werde ich dieses Bild hier ersetzen und ich werde das intensive Bild hier einfügen , weil ihr Training etwas einfacher aussieht, obwohl sie dasselbe machen. Aber er hat sein Hemd ausgezogen und er schwitzt. Ich habe das Gefühl, dass er es wirklich durchmacht und es auch dunkel ist, also möchte ich es hier von der Benutzeroberfläche fernhalten. Der Marathonlauf passt eigentlich, aber lass mich einen besseren machen. Klicken Sie also mit der rechten Maustaste auf Bild kopieren. Das Bild hat zwar nicht die höchste Qualität, aber für mich ist das okay. Da haben wir's. Jetzt haben wir diese Bilder. Es ist ausgefüllt, nicht großartig. Wie gesagt, Sie sollten versuchen, mit gutem Beispiel voranzugehen. Aber hier versuchen wir, das sehr schnell zu machen, aber idealerweise solltest du ein Beispiel dafür geben, welche Art von Bildern hier hinzugefügt werden sollte und welche nicht. Das Letzte, worüber ich sprechen möchte, ist vielleicht das Hinzufügen eines Play-Buttons. Normalerweise mache ich das gerne alleine. Ich halte einfach die Umschalttaste gedrückt und stelle sicher, dass sie den gleichen Winkel haben. Und dann spiele ich ein bisschen damit herum, strecke es aus und fülle es aus. Jetzt können wir das kopieren und herkommen. Das ist der Vorteil, wenn ich dieses Bild nicht als Bild, sondern als Rahmen hinzufüge, weil ich dann Dinge wie einen Play-Button hinzufügen kann . Jetzt nimmt das Hinzufügen einer riesigen Play-Schaltfläche dort viel Platz in Anspruch. Ich würde empfehlen, die Größe , vielleicht ein bisschen eckig zu machen. Heutzutage ist das eher der Stil. Du kannst es vielleicht in einer Ecke hinzufügen, ihm etwas Schatten geben, nur damit es sichtbar ist. Du könntest es auch transparent machen, etwas nicht zu stark. Du könntest es in die Mitte legen. Es liegt wirklich an Ihnen, aber Sie sollten herausfinden, was am besten funktioniert , weil verschiedene Plattformen das unterschiedlich machen. Und das zeigt den Leuten wirklich , dass das kein Bild ist, sondern dass es eher ein Video ist. ehrlich zu sein, könnten wir es also in die Mitte stellen, aber versuchen, nicht zu viel von diesem Raum zu beanspruchen. Okay, was könnten wir also auch hier in diesem Abschnitt tun? Eine Sache, über die ich nachdenke , ist, dass wir vielleicht Artikel oder ähnliches hinzufügen könnten , Tipps, ich bin mir nicht sicher. Vielleicht könnte es um Ernährung gehen. Ich meine, hier ist es Training, aber wir werden über Ernährung sprechen. Ist das eine Ernährungs-App? Ich weiß es nicht. Aber lassen Sie uns den Titel hinzufügen. Wissen für Sie oder Artikel für Sie oder wir könnten einfach sagen, zu Ihrer Information. Das Wichtigste ist, den Ton interessant zu halten. Ich meine, manchmal, weißt du, hier ist es Konversation. Deine Statistiken starten heute die Aktivität für dich. Hier sind die Workouts, es ist ein bisschen formeller und dann hier zu deiner Information Es ist nicht so formell, aber es ist auch ein bisschen gesprächig Aber es ist alles gut. Stellen Sie nur sicher , dass der Ton nicht überall ist. Jetzt werden wir ein anderes Element erstellen, weil wir sicherstellen wollen, dass verstanden wird, dass es sich um einen Artikel und nicht nur um ein Video handelt. Ich werde es einfach erstellen und es nicht horizontal machen , tut mir leid, nicht vertikal, sondern eher horizontal, weil das eher als Video verstanden wird. Das ist ein echtes, das ist ein Tik-Tok-Format und das ist es nicht. Jetzt versuche ich, es hierher zu bringen, um die Größe zu sehen, nur um sicherzugehen, dass die Größe stimmt. Dann könnte ich diese Elemente hierher kopieren. Und ich werde sie einfach herbringen. Setzen Sie diese in ein Auto-Layout und dann das in ein Auto-Layout, und dann könnten wir es auf diese Weise machen und ich werde diese Komponente erstellen und sie Artikel nennen. Das Gleiche, kopiere es. Bringen Sie es hierher, fügen Sie es ein, fügen Sie es erneut ein, machen Sie es zu einem automatischen Layout, machen Sie es horizontal und lassen Sie uns es hinzufügen. Lassen Sie mich diese Menüs und so einfach oben platzieren, damit sie uns nicht nerven Wir geben dem eine andere Farbe, damit es klar ist , und ich werde das weglegen Jetzt können wir daran arbeiten, daraus ein automatisches Layout machen und ihm acht Abstände geben. Jetzt heißt es Videoname, aber es sollte Artikelname heißen. Wir werden den Artikelnamen und die Dauer ändern. Mir wurde hier klar, dass wir die Dauer nicht variiert Machen Sie es also so und dann zu Ihrer Information Hier haben wir mehrere Artikel. Wie Sie sehen können, halten wir es mit den Elementen einfach. Sie müssen nicht alles geben, aber es kommt wirklich auf das Design und den Stil an. Wir haben hier viele Schatten verwendet. Wir könnten versuchen, sie zu integrieren. Wir könnten versuchen, sie in unser Design zu integrieren. Lassen Sie mich sie hier zu diesen hinzufügen, es verleiht dem Ganzen etwas Tiefe verleiht ihm ein schönes Aussehen, um ehrlich zu sein. Aber ich bin nicht ganz überzeugt, aber ich denke, es ist okay, weil wir auf diese Weise einige der Elemente hinzufügen können, die wir bereits hatten, also warum nicht? Hier haben wir mehrere Artikel, sodass wir nur einige Beispiele aufschreiben können. Aber bevor wir das tun, stellen Sie einfach sicher, dass der Abstand ähnlich ist. Hier sind es acht. Wir könnten es hier auch acht machen und dann können wir einfach Proteindiäten aufschreiben. Ich mag es nicht, Mahlzeiten eins zu eins zuzubereiten. Stellen Sie sicher, dass der Text bereits ausgestreckt ist. Also eins zu eins das Essen zubereiten, und wir könnten sagen, 5 Minuten lesen Ich habe diese Informationen gegessen , die viele Leute 5 Minuten lesen Es wird nicht zu viel Zeit in Anspruch nehmen, also mach dir darüber keine Sorgen, okay? Das ist also wirklich cool. Hier bereiten wir das Essen zu. Okay, vielleicht können wir einfach Apps oder Workouts sagen. Okay. Workouts für Bauchmuskeln Fünf Trainingseinheiten oder Bauchmuskeltraining, und dann können wir sagen, das sind 10 Minuten Lesen oder 3 Ich weiß es nicht. Dann können wir hier am Ende Cardio sagen oder Cardio-Tipps von Profis sagen. Ich weiß es nicht Ich meine, die Leute können es sowieso nicht lesen, und dann sagen wir, das ist eine Lesedauer von 10 Minuten, und dann suchen wir uns die Bilder aus. Also können wir uns einfach ein Bild von jemandem aussuchen rennt, damit ich dieses Foto machen kann. Also, da das vertikal ist, musst du sicherstellen, dass es ein bisschen gekürzt wird. Sie müssen sicherstellen , dass der Fokus in der Mitte liegt , damit es gut aussieht, wenn es geschnitten oder seine Größe geändert wird gut aussieht, wenn es geschnitten oder seine Größe geändert Hier haben wir Cardio-Tipps. Ich meine, es ist sowieso nicht sichtbar, also ist es nicht so wichtig Bauchmuskeltraining, sag Bauchmuskeln. Bauchmuskeltraining oder lass uns jemanden sehen, der seine Bauchmuskeln trainiert. Okay. Da haben wir's. Und dann bereiten wir das Essen zu. Keine Vorbereitung. Das sieht richtig gut Sieht auch köstlich aus. Okay. Also nimmst du das, legst es hierher und voila Das sieht wirklich gut aus. Jetzt haben wir also eine gefüllte Seite. Das Letzte, was wir tun könnten, ist, das Bild hier zu ersetzen , das Bild hier weil wir es schon oft benutzt haben. Fügen wir also einen anderen Artikel hinzu. Lass uns einfach eine Arbeit schreiben, also kopiere das, füge es ein und du kannst es hier einfügen. Wir können es zuschneiden, wie wir es zuvor gemacht haben, und ich werde die Größe ändern , während ich die Umschalttaste gedrückt halte, und den Kerl hier platzieren, damit er sichtbar ist . Lösche das Bild Und jetzt werde ich nur sichergehen, dass er hier unten ist. Wie ich schon sagte, es gibt Füllungen. Sie können mehrere Füllungen haben, also stellen Sie sicher, dass sie in der richtigen Reihenfolge angeordnet sind , damit Sie diesen linearen Farbverlauf so einstellen können , wie Sie es möchten. Und was wir hier tun können ist, dass wir die ganze Farbe trotzdem ändern können. Blau und füge einfach den Hex-Code hier ein. Aber das gefällt mir nicht. Mir gefällt nicht, wie es momentan aussieht. Wir können es leicht hart machen, aber vielleicht zu 50%. Dann können wir den ganzen Text weiß machen. Schau, wie gut es jetzt geworden ist, wir haben ein paar Dinge ausgetauscht und jetzt sieht es viel besser aus. Dann könnten wir statt, ich weiß nicht, vielleicht Zahlen eingeben. Aber lassen Sie uns die Zahl auch hier eintragen. Ich würde sagen, der beste Weg oder das Abnehmen durch Gewichtheben. Das klingt gut. Dann werden wir es so ablegen, jetzt haben wir einen zweiten Bildschirm voller Informationen, gefüllt mit Inhalten mit allen Arten von Möglichkeiten. Es ist eine ganz andere Sache. Was wir hier haben, ist ein Armaturenbrett. Es gibt Ihnen einige Informationen. Es schlägt Ihnen einige Inhalte vor. Es ist großartig. Aber hier haben wir noch viel mehr enthalten. Wir wissen schon, Tags, nach denen Sie filtern können. Du kannst dir bestimmte Workouts heraussuchen. Das kannst du zu deiner Information haben. Sie haben auch Inhalte für Sie. Weißt du, es gibt eine Menge Dinge, die wir verbessern können , wenn wir dich nur darüber informieren. Wie zum Beispiel bei allen Trainingseinheiten können wir eine Schaltfläche mit der Aufschrift „ Alle Trainingseinheiten“ oder „Mehr Trainingseinheiten“ haben Alle Trainingseinheiten“ oder „Mehr Trainingseinheiten Das Gleiche gilt für Informationen. könnten wir haben. Wir könnten auch eine Suchfunktion ganz oben haben, wir können 16. Grundlagen des Prototypings: Hallo. In dieser Lektion werden wir über den Prototyping-Teil von Figma sprechen über den Prototyping-Teil von Figma Nun, wir haben viel über die Design-Seite gesprochen , weil sie tatsächlich sehr viele Funktionen, Abläufe und Der Prototyping-Teil kann etwas komplizierter sein, ist aber nicht so umfangreich wie der Designteil Es sollte also einfacher oder schneller zu erklären sein, aber Sie müssen ein bisschen mehr üben , um den Dreh raus zu Wenn wir also über Prototyping sprechen, meinen wir verschiedene Dinge Nun, dieses Design, das wir hier haben wird technisch als Prototyp bezeichnet Man könnte es ein Wireframe oder einen Prototyp nennen. Aber wenn wir über Prototyping sprechen, sprechen wir davon, mit Interaktionen und Mikrointeraktionen zu spielen mit Interaktionen und Wenn Sie also auf eine Schaltfläche klicken oder wenn Sie mit der Maus auf eine Schaltfläche und sie eine andere Form oder eine andere Farbe oder was auch immer hat , wenn Sie auf eine Schaltfläche klicken und Sie zu einer anderen Seite gelangen, all das sind Interaktionen und Mikrointeraktionen, okay? Wenn du scrollst oder so, wenn du nach unten scrollst und nach rechts, links oder was auch immer scrollst, öffnest du ein Video All das sind Interaktionen. Das bedeutet, dass der Prototyp oder das Design kein statisches Bild mehr ist. Im Moment ist es nur ein Bild. Du siehst es, es sieht nett aus. Du hättest das mit einem anderen Programm entwerfen können. Du könntest das ausdrucken und fertig. Aber was uns unterscheidet, ist, dass du vielleicht herumklicken und auf etwas klicken kannst und ein Menü bekommst. Du kannst auf Training klicken und zur Trainingsseite gehen. Genau darüber werden wir heute sprechen. Das Erste, worüber wir sprechen wollen, ist zu wissen, dass Sie auf der rechten Seite die Prototyping-Einstellungen finden, okay? Wenn Sie also auf ein Objekt klicken , erhalten Sie hier einige Prototyping-Optionen Und wir werden hier über drei wichtige Dinge sprechen : Interaktionen , Position und Überlauf Lassen Sie uns also mit Interaktionen beginnen, da dies die am häufigsten verwendete Funktion ist. Lassen Sie uns also darüber sprechen. Wie gesagt, Interaktion ist, wenn Sie auf eine Schaltfläche klicken und sie tut etwas oder Sie bewegen den Mauszeiger darauf oder Sie interagieren mit ihr in welcher Funktion auch immer, und sie tut etwas Okay. Also können wir das nur mit der Speisekarte machen. Okay? Lass uns mit dem Menü beginnen. Wir haben Zusammenfassung, Freunde und Training, und das Einfachste, was Sie tun können sollten, ist , auf Training zu klicken und dann zur Trainingsseite zu gelangen. Wir können das also direkt hier machen, aber ich würde es vorziehen, wenn du es auf der Komponentenseite machst. Es wird also mit jeder einzelnen Seite, jeder einzelnen Instanz verbunden . Sie werden also zu der Komponente oder dem Teil kommen , den Sie interaktiv gestalten möchten. In diesem Fall ist es also diese Napbar-Schaltfläche. Sie können also von hier aus auf Interaktionen klicken , um eine hinzuzufügen Oder Sie könnten einfach mit der Maus darüber fahren und Sie werden diese Schaltflächen finden Ich würde vorschlagen, dass du das tust und dann hältst du es und dann wird es mit einem Pfeil herauskommen Für das Training wirst du es auf diesen Rahmen bringen und du wirst es loslassen. Sobald Sie das getan haben, wird es Informationen und einige Einstellungen für Sie einrichten . Das Erste ist der Auslöser. Das heißt, wenn du auf Tippen klickst, wenn du darauf tippst, wird es eine Aktion geben. Diese Aktion besteht darin , zu einem Ziel zu navigieren, nämlich der Trainingsseite. Weil wir diesen Pfeil hierher gezogen haben, hat er bereits all diese Informationen eingegeben und Sie werden dann nur gefragt, welche Art von Animation Sie möchten In diesem Fall erfolgt es sofort und wir können damit leben. Lass es uns ausprobieren. Mal sehen, ob es tatsächlich geklappt hat. Im Moment werden wir diese Seite öffnen. Also werden wir auf Training klicken. Und wie Sie sehen können, was passiert ist, haben sie uns sofort zur Trainingsseite weitergeleitet. Lassen Sie uns das wiederholen. Training BAM, einfach. Das ist es Wenn du irgendwo anders klickst, macht es nichts. Wenn du auf Nowhere klickst, wird dir angezeigt, welche Elemente interaktiv sind , und in diesem Fall ist es einfach hier. Du klickst hier, du bist da B. Jetzt gibt es andere Optionen, lass uns hierher kommen. Du kannst festlegen, dass der Auslöser gezogen werden kann , wenn du diese Taste ziehst, wenn du den Mauszeiger darauf bewegst oder nur drückst, wenn du eine Taste oder ein Gamepad drückst, wenn du zum Beispiel eine Taste drückst, wenn du den Buchstaben S oder R drückst oder etwas Ähnliches Hier gibt es mehr Optionen, aber ich würde vorschlagen, dass Sie bei diesen ersten bleiben , da sie am häufigsten vorkommen Untap & drag, während du mit dem Mauszeiger darüber fährst, und meistens sind die ersten drei sehr relevant und werden sehr Wenn es um Animationen geht, gibt es verschiedene Eine davon ist Dissolve und Figma gibt dir eine Vorschau darauf, wie es aussieht Wenn du darauf klickst, macht es das. Sie fügen einige weitere Einstellungen hinzu, wenn Sie Animationen einfügen, was einfacher ist. Das bedeutet den Ablauf der Animation, aber das ist etwas fortgeschrittener und die Dauer Das sind jetzt 300 Millisekunden. Da wollen wir uns auch ansehen, wie Dissolve aussieht. Wenn wir also hierher gehen, klicken wir darauf. Wie Sie sehen, ist es eine Art Ausblendung in einer Animation. Es löst sich einfach darin auf. Und dann ist da noch Smart Animate, was wirklich cool ist, weil es sich um viele Dinge kümmert Wenn es einen Text oder ein Objekt gibt , das sich von oben nach unten bewegt, nimmt es ihn mit . Mal sehen, wie es das macht. Wie Sie sehen können, ist diese Karte ausgefallen, weil sie erkannt hat , dass wir dasselbe Element verwenden , und diese Chips sind gestiegen. Siehst du. Aber es ist wirklich schwierig , diese Animation tatsächlich in eine App zu verwandeln. Daher würde ich Ihnen raten, dies nicht zu häufig zu verwenden. Ich meine, in einem solchen Fall, wenn Sie navigieren, ist es wirklich schwierig und es macht auch keinen Sinn Ich meine, warum willst du, dass die Leute sehen, dass dieses Element gesunken ist und diese Chips gestiegen sind Weil es sich technisch gesehen jetzt um unterschiedliche Designelemente handelt. Sie sollten nicht, sie haben nichts damit zu tun, okay? Ich würde Ihnen also nicht empfehlen, dies zu tun, wenn Sie zwischen dem Wechsel von einem Bild zum anderen arbeiten. Es gibt noch eine andere Option, nämlich es gibt andere Animationen, bewegt sich rein, also bewegt es sich so rein, raus, drückt. In diesem Fall würde ich die Push-Animation wirklich empfehlen, würde ich die Push-Animation wirklich empfehlen da Sie von der linken Seite zur rechten Seite gehen . Es wird also verschoben, aber du solltest es so einrichten , dass es die richtige Richtung hat. In diesem Fall ist es links, also läuft es so. Lass es uns jetzt auflisten. Du klickst darauf und es macht dich so. Okay. Also es ist wirklich cool. Es funktioniert wirklich gut und macht logischerweise Sinn. Es lässt die Leute verstehen, dass oh, das ist links, das ist rechts Aber wie Sie sehen können, wird sogar das Menü weggenommen, was nicht ideal ist. Aber deswegen gibt es hier diesen kleinen Button, diese Checkbox. Klicke darauf und es werden passende Ebenen animiert. Das heißt, wenn es eine passende Ebene wie diese gibt, wird sie animiert Es wird Smart Animate dafür machen. Mal sehen, was das hier bedeutet. In diesem Fall klickst du auf Training, wie du sehen kannst, alles wurde verschoben, außer den passenden Ebenen. In diesem Fall ist die passende Ebene genau hier. Ich habe mich nicht verändert. Aber auch wieder diese Karte und diese Chips, was bedauerlich ist, aber es gibt eine Lösung dafür. Bei den Korrekturen gehst du zu den Frames und änderst ihren Namen, denn hier heißt dieser Frame Frame 24 und hier heißt dieser Frame auch 24. Was Sie tun werden, ist, einfach 24 X zu sagen und hier dasselbe für Sie, 25 X, oder Sie könnten ihm eine andere Zahl geben . Jetzt wollen wir mal sehen. Perfekt. Absolut perfekt. Wie Sie sehen können, wurde alles gepusht, wie man Animationen pusht , außer dem Menü. Das ist genau das, was wir wollen. Und ja, einfach so, wir haben eine wirklich nette Interaktion für uns. Jetzt können wir die entgegengesetzte Animation anwenden, und wenn Sie möchten, können Sie sie selbst einrichten oder Sie können sie einfach von hier kopieren, auf dieses Element klicken und es einfügen. Aber anstatt dass der Pfeil hierher kommt, kannst du ihn hierher bringen. Also lass es uns jetzt testen. Okay, es gibt ein Problem. Ich hoffe, du hast es bemerkt und es ist die Richtung. Wir werden einfach die Richtung umkehren und jetzt wollen wir sehen. Perfekt. Das Coole daran ist, dass es jetzt einen logischen Ablauf gibt. Ich meine, am liebsten sollten wir ein Freundespanel in der Mitte haben . Aber im Moment haben wir das noch nicht prototypisiert . Wir haben es nicht entworfen Man geht einfach so von der Zusammenfassung zum Training über. Und vieles macht Sinn. Es ist ein logischer Fluss von links nach rechts, von rechts nach links. Und gleichzeitig bleibt das Menü fest und das ist absolut perfekt. Okay? Das ist also eine Möglichkeit, Dinge zu animieren Es gibt noch andere Dinge zu tun, andere Dinge, die Sie vielleicht tun können, um zu animieren oder Prototypen zu erstellen, wie wir sagen Eines dieser Dinge ist also das Scrollen. Okay? Also, wenn wir zu diesen Seiten kommen, können wir das Scrollen einfach herunterfahren Und wenn Sie dann auf diese Seite gehen, können Sie einfach nach unten scrollen Okay? Also gibt es einen anderen Weg, das zu tun. Wenn du das zurückbringst und sagst, das ist die Größe des iPhones, also möchte ich, dass es genau dieselbe Größe hat, gehst du zum Prototyping-Panel Du wirst die Seite auswählen. Gehen Sie wie beim gesamten Frame zum Prototyping-Bedienfeld und direkt neben dem Scrollverhalten werden Sie einen Überlauf sehen Überlauf bedeutet, dass der Inhalt wie dieser über den Frame fließt. Sie werden zum Beispiel entscheiden, dass es standardmäßig kein Scrollen ist , aber Sie können entscheiden, ob Sie horizontal, vertikal oder in beide Richtungen scrollen möchten vertikal oder Überlegen Sie sich, soll die Person in welche Richtung sie scrollen soll? Nun, vertikal. Wenn du das tust, gehst du runter und aktivierst jetzt das Scrollen Sie können nach unten scrollen. Nicht wirklich hoch. Du kannst es dehnen, aber es scrollt nicht. Aber das Coole daran ist, dass du viele verschiedene Dinge haben kannst, aber sie sind versteckt und dann kannst du nach unten scrollen. Aber das ist eine Möglichkeit und wie gesagt, wenn wir das zurücksetzen, eine einfache Möglichkeit darin, es einfach so lange zu verlängern , wie der Frame ist, und dann können Sie nach unten scrollen. Lassen Sie uns das Gleiche hier üben. Wir mögen hier quasi einen Slider oder ein Karussell, bei dem man nach rechts gehen soll Wir können das Gleiche mit Scrollen machen. Wählen Sie einfach den Rahmen aus , der die Elemente enthält, und Sie haben hier dasselbe, Überlauf, machen Sie ihn einfach horizontal Lassen Sie uns jetzt sehen, ob es funktioniert. Jetzt versuchen wir zu scrollen, aber es funktioniert nicht, und das hat einen Grund, weil diese Überlaufeinstellung nur funktioniert, wenn der Inhalt über den Frame fließt Es wird zu viel, es überschreitet die Grenzen Wie Sie hier sehen können, liegen die Grenzen, der gesamte Inhalt innerhalb der Grenzen. Ich meine, du kannst den Rest nicht sehen, aber es ist in der Box. Die einfache Lösung besteht darin, diese Box zu minimieren, sie zu verkleinern, sodass sie den sichtbaren Rahmen passt. Das wird jetzt als Überlauf betrachtet. Es fließt drüber. Jetzt kannst du nach links in die gewünschte Richtung scrollen. Du kannst das für verschiedene üben. Ich kann das auch hier machen, horizontal und dann verkleinern und dann können wir scrollen. Das Gleiche hier. Das Gleiche hier, horizontal und passen Sie es an. Jetzt ist alles scrollbar. Dann können wir, wie ich bereits erwähnt habe , das Ganze auch größer machen und dann können wir nach unten scrollen Alles, was wir perfekt durchblättern können. Aber es gibt ein Problem. Ein kleines Problem. Nun, das ist etwas fortgeschrittener. Aber wenn Sie feststellen, dass auch das Menü durchgescrollt wird, oder? Und Sie haben wahrscheinlich eine Vorstellung davon , wenn Sie am Telefon sind und es ein Menü gibt, manche Dinge scrollen nicht wirklich nach unten, manche Dinge bleiben unverändert, und das ist es, was Sie normalerweise erwarten würden, nicht dass sie so nach oben gehen Sie sollten am selben Ort bleiben. Es gibt einen einfachen Weg, das zu tun, der einfache Weg ist, zu diesen Elementen genau hier zu kommen und sie dann in einen Rahmen zu setzen. Ich füge sie zusammen und füge sie in ein automatisches Layout ein, indem ich Shift und A gedrückt halte. Ich lasse sie wieder das Layout ignorieren. Weil sie in ihre Schranken gewiesen wurden, aber wir wollen nicht, dass wir sie an ihren Platz zurückbringen. Du gehst einfach zur Position des Prototyps und klickst dann auf „Fixiert“. Lass es uns jetzt testen. Jetzt haben wir es hier und wie Sie sehen können, ist es jetzt repariert. Wenn du rauf und runter gehst, bleibt es an seinem Platz und es hat überall diesen wirklich coolen Glaseffekt. Du entscheidest einfach, wo es sein soll , und reparierst es. Sie sagen, die Position ist festgelegt. Jetzt können wir hier dasselbe tun. Wir werden ein automatisches Layout daraus machen. Und dann werden wir ihm sagen, dass es das automatische Layout ignorieren soll, und dann werden wir es an dieselbe Position bringen. können wir die Y-Position hier kopieren und sie hier einfach hinter Um genau zu sein, können wir die Y-Position hier kopieren und sie hier einfach hinter uns lassen und dann zum Prototyp gehen und das Problem korrigieren. Jetzt ist es durcheinander. Der Grund ist, dass es jetzt wie folgt funktioniert. Mal sehen. Es funktioniert, wenn Sie dorthin gehen, aber wir haben die Animation durcheinander gebracht, und ich werde Ihnen sagen, warum und wie wir das beheben können Okay. Aber jetzt sind beide repariert, was perfekt ist. Aber was jetzt durcheinander geraten ist, ist sie nicht mehr als dieselben Schichten betrachtet werden Sie werden nicht als übereinstimmend angesehen. Und der Grund dafür ist, dass sie jetzt unterschiedliche Namen haben, also musst du wirklich darauf achten. Hier steht 38 und hier ist 37. Eine schnelle Lösung besteht also darin, ihnen einfach den gleichen Namen zu geben, nämlich Frame 37, oder Sie könnten sie Navbar nennen oder was auch immer Sie wollen Und jetzt werden sie von Figma als passende Ebenen identifiziert , das funktioniert perfekt Und wie ich bereits erwähnt habe, kann man durch alles scrollen , alles ist scrollbar Das sind die Mikrointeraktionen, die Animationen, die eine App wirklich immersiv und ansprechend machen eine App wirklich immersiv und ansprechend Stellen Sie also sicher, dass Sie versuchen , das selbst zu üben und zu verstehen Wir wollten die Dinge für Sie nicht zu kompliziert machen denn Prototyping ist nicht leicht zu erlernen Deshalb habe ich es so einfach wie möglich gemacht, aber es gibt viel mehr Einstellungen, viel mehr Möglichkeiten, die Sie selbst lernen können Und sie könnten dein Spiel wirklich auf das nächste Level bringen. Mach weiter, probiere es aus, probiere verschiedene Prototypen, Animationen, Interaktionen aus, was auch immer du hast Danke fürs Zuhören Wir sehen uns in der nächsten Lektion 17. Vorschau Ihres Prototyps: Jetzt haben wir also viel über die Grundlagen des Prototypendesigns, Farben und Typografie und viele verschiedene Dinge gelernt die Grundlagen des Prototypendesigns, Farben und Typografie und viele Aber was wir am Ende des Tages wirklich tun wollen oder was wir tun müssen , ist eine korrekte Vorschau unserer Designs, um sie selbst zu sehen und sie anderen zu zeigen Es gibt viele verschiedene Möglichkeiten, das zu tun, aber sie sind alle einfach, also mach dir keine Sorgen, und ich werde sie dir zeigen. Im Laufe des Kurses haben wir bereits einige dieser Möglichkeiten gesehen, aber ich möchte nur einen kleinen Überblick geben. Der einfachste und schnellste Weg , sich Ihren Prototyp anzusehen und eine Vorschau anzuzeigen, besteht darin, auf den Rahmen zu klicken, den Sie sehen möchten , und dann die Display-Taste zu drücken Auf diese Weise können Sie das Design, das Sie hier haben, präsentieren. Es spielt keine Rolle, für welche Art von Prototyp, welchen Rahmentyp Sie sich entscheiden, es wird es zeigen. Das ist der wichtigste Weg, es zu tun. Es gibt jedoch verschiedene Möglichkeiten, dies zu tun. Nun, eine Sache, die Sie tun können, insbesondere wenn Sie einen größeren Bildschirm haben, können Sie die Vorschauoption wählen. Dadurch wird direkt neben Ihnen ein Telefonbildschirm geöffnet, auf dem Sie das Design während der Bearbeitung sehen können . Ich entwerfe hier und Sie können übrigens die Größe ändern, und Sie können sogar versuchen, sicherzustellen , dass ich mein Telefon gerade in die Realität umsetze Ich lege es neben den Bildschirm, um sicherzugehen , dass das Design passt Jetzt kann ich mir vorstellen, dass das mein Handy ist und ich kann es ausprobieren und sagen, kann ich den Text lesen? Ist es lesbar, sind die Dinge richtig, nett, was auch immer. Und gleichzeitig kann ich Dinge direkt in der Designdatei ändern , was ziemlich cool ist Das ist eine andere Art, es zu tun. Es gibt aber auch etwas, das man Flows nennt. Wenn du auf einen Frame klickst und zur Registerkarte Prototyp gehst, hast du einen sogenannten Flow-Startpunkt. Im Moment betrachtet Figma das als Flow und wird Flow One genannt Es ist ein Ausgangspunkt. Wenn wir zur Vorschau gehen, haben wir hier dieses kleine Panel , das Sie herausnehmen können . Dort steht: Hier sind Ihre Flows. Dies ist der erste Ausgangspunkt, den wir gewählt haben. Hier ist noch einer, aber ich glaube, der wurde versehentlich gemacht oder Figma hat ihn vielleicht falsch identifiziert Das ist höchstwahrscheinlich hier. Die Navbar, wir können sie von hier löschen. Aber um einen Flow zu erstellen, gehst du auf die Seite , die du anzeigen möchtest, und du kannst hier klicken. Sie können einen Flow-Startpunkt haben und ihn zum Beispiel Trainingsseite nennen. Dort erfahren Sie, um welchen Frame es sich handelt. Sie können es einfach ändern, indem Sie hier auswählen , und Sie können ihm auch eine kurze Beschreibung geben. Sie können hier also sagen, dass Benutzer sich informieren und Videos oder Artikel zum Thema Training ansehen können sich informieren und Videos . Okay. Also, wenn du hierher gehst, kannst du darauf klicken, und dann sagt es dir genau gibt dir eine Beschreibung , um es dir zu erklären. Das ist natürlich nicht für Sie gedacht, sondern vielleicht für Teamkollegen oder für Benutzer, die testen, Leute, die dieses Design testen , damit sie es verstehen können Aber ich denke, die besten Tests werden ohne Beschreibung und ohne Angabe von Informationen durchgeführt Beschreibung und ohne Angabe von Informationen Ich meine, du willst, dass die Leute reingehen und das aus erster Hand erleben ohne zusätzliche Anweisungen oder so. Okay? Aber so können Sie diese Flow-Startpunkte erstellen und sie bearbeiten. Und wenn du alles abwählst, findest du deine Flows hier. Du kannst auch die Namen ändern und sagen, naja, das ist ein Dashboard oder eine Übersichtsseite Sie können die Positionen wechseln, und Sie können sie auch direkt in der Vorschau anzeigen, den Flow-Link oder den Frame kopieren. Sie können sehen, welcher Frame das ist? Oh, okay, dieser. Das. In Ordnung. Hier gibt es viele hilfreiche Einstellungen und Optionen denen Sie sich in Ihrem Design zurechtfinden können. Dies sind jedoch die wichtigsten Möglichkeiten, wie Sie Vorschau des hinteren Prototyps anzeigen können. Vergessen Sie natürlich nicht, dass wir darüber gesprochen haben , über die Prototyping-Einstellungen Wir haben es hier als iPhone 17 eingerichtet, aber du kannst den Rahmen wechseln oder du kannst einfach kein Gerät haben Es gibt nur ein Problem, wenn man kein Gerät hat: Es wird die volle Länge angezeigt, einfach so. Das kann ein bisschen unattraktiv sein. Stellen Sie also sicher, dass Sie, wenn Sie dies für Mobiltelefone zeigen , einen Rahmen haben, und es ist sowieso immersiv, es auf diese Weise zu zeigen Aber falls Sie es auf diese Weise zeigen müssen oder wollen, gibt es einige zusätzliche Einstellungen für das Prototyping wenn Sie sich hier in dieser Klicken Sie also einfach auf diese Schaltfläche und Sie erhalten einige verschiedene Einstellungen Es gibt also die tatsächliche Größe. Also das zeigt dir, du weißt schon, mit der Größe oder der vermeintlichen Größe des Rahmens, okay? Es gibt passende Breite und Höhe. Das macht es so, dass Sie den gesamten Rahmen von Anfang bis Ende sehen können . Ich würde das nicht wirklich empfehlen. Was ich empfehlen würde, ist die Passbreite. Also das ist momentan, in diesem Fall, der tatsächlichen Größe sehr ähnlich , aber es würde so zur Breite passen , dass es nicht, du weißt schon, übertrieben Es gibt auch Responsive, aber wenn Sie Ihren Prototyp nicht so entworfen haben, dass er responsiv ist, dann wird er sehr verzerrt aussehen Ich würde das auch nicht empfehlen. Nur wenn Sie Ihr Design responsiv gestaltet haben. Es gibt auch einen Vollbildmodus, und auch das sieht nicht gut aus, aber alles hängt von Ihren Zwecken ab, davon, was Sie tun möchten und wie Ihr Design aussieht, welche Größe es hat und so weiter. Ich würde empfehlen, einfach damit herumzuspielen und zu sehen, was für Sie am besten funktioniert. Für mich funktioniert das momentan ziemlich gut, weil Sie die Navigation sehen können. Sie können ein bisschen darunter sehen, aber nicht zu viel. Aber ich würde die passende Weite für die Nacht nicht empfehlen . Das ist nicht großartig. Dies sind also nur ein paar verschiedene Prototyping-Einstellungen , mit denen Sie eine korrekte Vorschau Ihrer Designs anzeigen können korrekte Vorschau Ihrer Designs , da dies einer der wichtigsten Schritte ist Ich würde sagen, eine Vorschau Ihres Designs anzeigen und es teilen. Das sind wichtige Schritte, denn wenn Sie ein fantastisches, atemberaubendes Design haben und es dann nicht richtig zeigen und die Leute es verzerrt sehen, und die Leute es verzerrt sehen wie wir es gerade gesehen haben, dann wird es nicht sehr gut rüberkommen Ich würde also sagen, stellen Sie sicher, wenn Sie es zeigen, dass Sie gut vorbereitet sind und dass alles so aussieht, als ob es die richtige Größe hat und nicht wie auf diesem Bild ausgestreckt So können Sie also im Grunde eine Vorschau Ihres Prototyps anzeigen. Danke fürs Zuhören Wir sehen uns in der nächsten Lektion. 18. Freigeben und Exportieren: Neben der Vorschau Ihrer Prototypen besteht ein weiterer wichtiger Schritt darin, ein weiterer wichtiger Schritt darin Ihre Arbeit zu teilen und zu exportieren Wie bereits erwähnt, ist dies ein wichtiger Schritt, denn hier können Sie Ihre Arbeit zeigen und sie mit Menschen, Kunden und Kollegen teilen sie mit Menschen, Kunden und Kollegen Es ist also wichtig, dass Sie das richtig machen, Sie den Export richtig machen, Sie wissen schon, Sie geben ihnen einen Link zum Teilen, den sie sich richtig ansehen können und der nicht schlecht oder unbeabsichtigt So kannst du es ganz einfach machen. Fangen wir jetzt mit dem Teilen an, weil es etwas einfacher ist , da Sie rechts einen sehr großen Share-Button haben. Es gibt also zwei verschiedene Arten des Teilens. Sie können ein Projekt zur Bearbeitung teilen, und aus diesem Grund hat Figma normalerweise eine Bearbeitungsdatei und es gibt einen Bearbeitungs-Tab, wie Sie dieses Symbol hier sehen können, und dann haben Sie einen Tab wie Sie dieses Symbol hier sehen können, zum Anzeigen oder Vorschauen Wenn Sie also hier auf Teilen klicken, teilen Sie die Datei als Designdatei Seien Sie also vorsichtig, weil Sie vielleicht denken Sie würden sie dem Kunden zur Ansicht geben, aber dann wird er diese ganze komplizierte Ansicht sehen . Sie werden überwältigt sein und Dinge sehen, die sie vielleicht nicht sehen sollten Okay. Dieser Link hier dient also dazu, ihn mit Leuten zu teilen , um die Datei anzusehen oder vielleicht sogar Mitwirkende zu werden oder Kommentare abzugeben Sie können die Einstellungen hier sehen, also wer Zugriff hat. Also nur die Eingeladenen. Oder wer auch immer, sei vorsichtig wenn du diese Einstellungen änderst. Sie können es so einrichten, dass jeder im Team Project und Sie die Personen sehen können, die Zugriff haben, zum Beispiel hier, ich habe Zugriff. Dann zeigen sie dir auch einige andere praktische Optionen wie Dvmodlink kopieren. Du kannst jemandem einfach einen DevMDLink schicken Das heißt, wenn jemand ein Entwickler ist, sieht er nur die Dinge, die für ihn relevant sind Sie sehen nicht all diese Designoptionen. Sie können auch den Prototyping-Link oder den Prototyp-Link kopieren oder den Prototyp-Link Dies ist für sie, um eine Vorschau zu und Sie können es in der Community veröffentlichen und den Einbettungscode abrufen, aber diese sind etwas fortgeschrittener Aber hier ist alles, was du brauchst. Sie können den Link von hier kopieren, Zugriff ändern oder Dvmodlink oder Prototyp-Tinte kopieren Eine andere Sache, die Sie tun können, ist, zur Registerkarte Vorschau zu wechseln, und das ist es, was ich gerne mache weil ich hier keine Fehler machen kann Du klickst einfach auf Prototyp teilen. Es heißt nicht teilen wie hier. Es ist speziell der Share-Prototyp. Hier kannst du entscheiden, okay, Link kopieren und sind es nur die Eingeladenen oder ist es jemand mit einem Link? Und hier kannst du wirklich keine Fehler machen. Geben Sie an, wie Sie ein Projekt teilen können , aber Sie müssen bedenken, dass Sie hier keine Datei teilen, Sie teilen sie nicht in Form einer Datei, sondern als Weblink. es sich um einen webbasierten Link handelt, Da es sich um einen webbasierten Link handelt, müssen sie über Internet verfügen. Sie benötigen einen Browser , über den sie im Internet surfen können. Ich meine, lassen Sie uns sehen, wie das aussieht Ich werde den Prototyp teilen und ich werde ihn jedem machen. Sie können auch ein Passwort haben, ein Passwort dafür einrichten, den Link kopieren und dann einfügen und dann haben Sie Zugriff. Ich denke, es wird funktionieren , weil ich bereits als ich selbst angemeldet bin , also habe ich Zugriff darauf und sehe es mir mit den Einstellungen an , die gespeichert wurden. Vergewissern Sie sich, dass die Einstellungen, die Sie hatten, korrekt waren und dass Sie im richtigen Flow sind. Jetzt sind wir mit dem Teilen oder genauer gesagt mit dem Teilen eines Links fertig . Lassen Sie uns nun über den Export sprechen. Jetzt gibt es verschiedene Möglichkeiten zum Exportieren. Jetzt können Sie entweder ein Element oder einen ganzen Frame exportieren . Jetzt gibt es verschiedene Möglichkeiten , Ihre Arbeit zu exportieren. Jetzt können Sie entweder ein einzelnes Element exportieren, oder Sie können ein Vollbild exportieren, oder Sie können das gesamte Projekt mit allen Bildschirmen exportieren. Lassen Sie mich Ihnen sagen, wie das funktioniert. Es ist supereinfach. Sie gehen zur Registerkarte Design und klicken dann auf einen Rahmen, wenn Sie nach unten gehen Am Ende sehen Sie Export. Wenn Sie darauf klicken, werden Ihnen einige Optionen angezeigt. Sie können von PNG zu JPEG, SVG oder PDF wechseln. Sie können eine beliebige davon auswählen. Was cool ist, ist, wenn Sie darauf klicken, wählen Sie PNG, Sie können auch die Skala wählen. Möchtest du, dass es exakt dieselbe Größe oder möchtest du, dass es doppelt so groß ist? Sie können sehen, dass die Größe hier 402 mal 963 ist. Sie können einen Punkt X, zwei X, vier X und all diese verschiedenen Optionen ermöglichen es Ihnen im Grunde, es viel größer zu machen , denn manchmal, wenn Sie etwas als Bild exportieren, ist die Qualität nicht genau da, sie ist nicht so gut Du exportierst sicherheitshalber 1,5, zwei X, drei X, nur um sicherzugehen, dass die Qualität großartig ist. Und wenn du so etwas wie ein Design, ein Logo oder so etwas hast , dann möchtest du es vielleicht exportieren, du kannst es vergrößern. Sie können das Design mitbringen und es einfach viel größer machen, oder Sie können es einfach von hier aus exportieren , als wäre es ein viel größeres Design. Okay? Wie gesagt, dies sind die Dateitypen , als die Sie es exportieren können. Und mit PDF haben Sie nichts. Bei PDF haben Sie also keine Skalierungsoption. Sie können hier auch mehr Optionen haben , wenn Sie sich mit diesen Einstellungen auskennen, aber ich würde sagen, das ist Ihnen momentan etwas zu komplex. Gehen Sie einfach zur Seite mit der Exportzusammenfassung und Sie können es einfach so einfügen Und dann können Sie einfach auf Okay klicken, und dann wird es exportiert Sie können auch mehrere Exporteinstellungen vornehmen. Man könnte sagen, ich will das als PNG, aber auch als JPEG, ein X, ich will das auch als PDF. Und was noch cooler daran ist, dass du mehrere Frames wählen kannst. Sie können sogar verschiedene Elemente auswählen. Sie können alles auswählen, jede Ebene, und sie exportieren. Und Sie können sagen, ich möchte all das als JPEX exportieren. Wenn Sie dann hier klicken, heißt es Fünf Ebenen exportieren. Also wird es es für dich tun. Sie können jeden Dateityp, jede Art von Frame, jede Art von Gruppe, Frame, was auch immer es ist, es ist möglich und Sie können sie zusammen exportieren jede Art von Gruppe, Frame, was auch immer es ist, es ist . Ich mag diese Funktion sehr, weil sie die Dinge einfacher macht. Sie müssen die Dinge nicht jedes Mal von Hand erledigen. Es ist nur einfach für dich gemacht. Auf diese Weise können Sie wissen, insbesondere anhand der Ebenen, dass Sie Ebenen separat oder getrennt als Rahmen exportieren können. Aber hier gibt es auch eine Exportfunktion. Wenn Sie also hierher kommen, können Sie das gesamte Projekt exportieren. Also lasst uns versuchen, das zu tun und es mit Export Project zu machen. Also können wir die Einstellungen ändern, wie gesagt, und es gibt dir hier eine nette kleine Vorschau. Das Negative daran ist, alles exportiert wird, auch diese kleinen Details die vielleicht nicht so wichtig sind. Sie sehen also hier, wenn Sie auf Exportieren klicken, dass einer von einem ausgewählten ausgewählt ist. Also, sind Sie sicher, dass Sie das exportieren wollen und ich möchte es exportieren. Es wird eine Weile dauern, aber irgendwann wird es klappen. So würde es aussehen. Es exportiert das Ganze als eine Leinwand als eine Seite, was offensichtlich nicht ideal ist. Ich bin mir nicht sicher, was der Anwendungsfall dafür ist, warum Sie das tun möchten, aber es ist nicht ideal. Niemand kann sich das ansehen und sagen: Oh, ja, das ist eine coole App, weil sie nicht wie eine App aussieht. Ich würde dir nicht empfehlen, das zu tun. Ich würde das von hier entfernen. Es gibt eine andere Möglichkeit , dies zu tun, indem Sie hier durchgehen und zur Datei gehen. Und exportiere Frames als PDF. Das ist jetzt eine viel bessere Option , da nur die Frames benötigt werden. Nun, so sieht es aus. Es hat nur die Frames exportiert, aber es hat sie separat exportiert statt einer ganzen Leinwand, aber sie haben trotzdem die Komponenten und so weiter exportiert . waren also Das waren also die wichtigsten Möglichkeiten, wie Sie Ihre Frames exportieren können. Jetzt gibt es natürlich auch andere fortgeschrittenere Möglichkeiten , wie Sie dies tun können. Einfach ist immer besser. Versuchen Sie also, diesen Prozess für sich selbst und für andere nicht zu kompliziert diesen Prozess für sich selbst und für andere Stellen Sie einfach sicher, dass Sie Ihre Designs so exportieren , dass sie gut aussehen und leicht zu sehen sind, und das ist alles Vielen Dank fürs Zuhören Wir sehen uns beim nächsten Mal. 19. Klassenprojekt : Erstellen Sie Ihr eigenes UI-Design in Figma: Und jetzt ist es an der Zeit, dass Sie Ihr eigenes UI-Design erstellen Ihr eigenes UI-Design Für dieses Klassenprojekt werden Sie gebeten, eine sehr einfache Benutzeroberfläche Figma zu erstellen eine sehr einfache Benutzeroberfläche Figma indem Sie die Techniken verwenden, die Sie in diesem Kurs gelernt haben Sie können eine mobile App, eine Landingpage oder eine beliebige einfache Oberfläche erstellen eine Landingpage oder eine beliebige einfache Oberfläche Beginnen wir damit, zuerst einen Rahmen und eine Struktur zu erstellen und dann etwas Text und einige Farben hinzuzufügen und dann einige Schaltflächen zu erstellen. Achten Sie darauf, dass Sie auf die Abstände und das allgemeine Layout achten , um sicherzustellen, dass das Design modern und sauber aussieht. Verwenden Sie als Nächstes das automatische Layout und die Komponenten, um Ihre Designdatei etwas besser und effizienter zu organisieren , und stellen Sie sicher, dass Sie mindestens zwei miteinander verbundene Bildschirme erstellen , damit Sie einen Prototyp mit einigen grundlegenden Funktionen erstellen können. Sobald Ihr Projekt abgeschlossen ist, Sie Ihre Bildschirme als PDF exportieren, oder Sie können die Exportlinks einfach teilen. Stellen Sie einfach sicher, dass sie in den Einstellungen öffentlich sichtbar sind , und teilen Sie sie in der Projektgalerie Sie können auch eine kurze Erklärung hinzufügen um über Ihr Design zu sprechen, zu erklären, was Sie getan haben, und vielleicht einige Ihrer Entwurfsoptionen zu verteidigen In diesem Projekt dreht sich alles darum den Anfänger-Workflow Figma zu üben, von der Idee bis zur Umsetzung und Erstellung eines interaktiven Prototyps daraus Also mach weiter, probiere Dinge aus, experimentiere. Hab keine Angst davor, Mist zu bauen und hab Spaß damit. 20. Wir gratulieren!Was kommt als Nächstes?: Herzlichen Glückwunsch zum Abschluss des Kurses. Sie haben jetzt die Grundlagen von Figma gelernt, von der Navigation in der Benutzeroberfläche und der Erstellung grundlegender Layouts bis hin zur Erstellung von Komponenten und interaktiven Prototypen Das ist schon ein großer Schritt in die Welt des UI- und UX-Designs Das Wichtigste, was jetzt zu tun ist, ist weiter zu üben. Versuchen Sie, Benutzeroberflächen neu zu erstellen, die Ihnen gefallen, mit verschiedenen Layouts und Stilen zu experimentieren und einfach Designs zu erstellen, und einfach Designs zu erstellen um weiter an Ihren Fähigkeiten zu arbeiten haben Sie noch nicht getan. Laden Sie bitte Ihre eigenen Projekte in die Projektgalerie hoch, damit ich sehen kann, was Sie vorhaben Ich würde wirklich gerne sehen, was ihr euch ausgedacht habt. Wie immer, wenn Ihnen dieser Kurs gefallen hat, Sie uns gerne eine Bewertung hinterlassen. Es hilft uns wirklich, uns zu verbessern und noch bessere Kurse für dich zu erstellen. Nochmals vielen Dank für Ihre Teilnahme und wir sehen uns im nächsten Kurs.