Lernen Sie Figma: Entwerfen einer Web-App Benutzeroberfläche

1. Einführung: Willkommen beim Webdesign-Kurs mit Sigma und diesem Kurs lernen wir, wie man eine einfache Web-Anwendung für den Wäscheservice Delivery Service entwirft . Wenn Sie einen früheren Kurs absolviert haben, haben wir auch dafür eine mobile Version ausgearbeitet. Und so werden wir in diesem Kurs an der Webanwendung arbeiten, da sie hoch ist. Mein Name ist Nina, und ich bin deine Lehrerin für diesen Kurs. In den letzten 10 Jahren habe ich sowohl mobile als auch Web-Verpflichtungen für Start-ups in meinen eigenen und anderen Kundenprojekten entwickelt und entwickelt. Am Ende dieses Kurses haben Sie gelernt, eine schöne Web-Dashboard-Anwendung für Unternehmen oder Kunden zu entwerfen , oder vielleicht sogar für Ihre eigenen Produkte. Was wir entworfen haben. Die drei Seiten Markup, wo sonst lernen, wie Vorlagen in Sigma importiert werden. Wie man Bilder maskiert für unsere Bilder verwendet, wird lernen, wie Komponenten uns dabei helfen können, den Designprozess viel schneller zu gestalten. Wird auch lernen, wie Auto-Layout zu verwenden, die wir verwenden können, um schöne, intuitive Designs zu erstellen , die wir wirklich schnell replizieren können, sogar verwendete Microsoft-Inhalte. Rio Stecken Sie direkt in Sigma ein, um einige Beispieldaten für unser Projekt zu generieren. Last but not least, werden lernen, wie wir mehrere Versionen unseres Projekts erstellen und Versionsverlauf direkt in Sigma verwenden können, um alle verschiedenen Versionen unserer Designs durchsuchen zu können. Also, wenn Sie bereit sind zu lernen, wie Sie eine schöne, einfache Gummianwendung mit Sigma entwerfen , springen Sie direkt hinein und ich sehe Sie in diesem Kurs. 2. Project: Alles klar. Bisher haben wir ein Mock Up für eine mobile App erstellt. Ein komplettes Markup mit sieben Seiten. Ah, und jetzt haben unsere Kunden uns ein neues Projekt gegeben, an dem wir arbeiten können, und dieses Mal sieht es so aus, als ob es eine Webanwendung sein wird. Ah, damit ihre Wäschereien tatsächlich ihre Serviceanfragen von den Kunden durchsuchen. Und dann können sie von dort aus diese Anfragen annehmen oder ablehnen und dann ihren Status ändern. Oder das letzte Markup ermöglichte es Kunden für diese saubere Känguru-Firma tatsächlich in der Lage zu sein eine Anfrage zu senden, ihre Wäsche abholen zu lassen, in den Wäschereiladen zu bringen und dann frisch und sauber an sie zu liefern. Und so sieht es so aus, als ob sie jetzt eine Art Dashboard oder Web-Dashboard für ihre Wäschereien in der Lage sein, zu verwenden, was völlig sinnvoll ist. Und natürlich wollen wir eine Web-App erstellen, die reaktionsschnell ist. Also, wenn der Client oder die Wäscherei öffnet es auf ihrem mobilen Gerät, es sieht immer noch gut aus. Um, wir müssen uns das Farbschema einfallen lassen, also haben wir bereits ein Farbschema für die letzten Projekte entwickelt, dass wir unser Farbschema anwenden und es auch unsere Mittel für das Projekt. Und natürlich können wir das Logo auch für dieses Projekt verwenden. Im Moment sind wir nur wirklich an den Seiten interessiert, die für den Moment benötigt werden. Also wollen wir uns registrieren, Schrägstrich einloggen Seite und dann registrieren. Optionen werden per E-Mail Reisepass und die Unterzeichnung mit Google sein, ähnlich wie unsere mobile App. Wir möchten, dass ein Dashboard ihre Einnahmen und Statistiken von oben zu sehen macht Sinn. Also das ist wieder für die Wäschereien zu sehen, wie viel Geld sie durch Clean Känguru gemacht haben und dann sagen sie, dass eine Grafik hier wäre schön. Also werden wir voran gehen und ihnen eine Grafik finden, die so niedrig verwendet werden soll. Und schließlich lohnt es sich, alle ihre Service-Anfrage mit der Option anzuzeigen, ihren Status jeder Anfrage zu ändern , um dem Kunden informiert eso zu geben. Wenn Sie sich in unserem mobilen App-Design erinnern, hatten wir einen kleinen Status auf die Dienste und das zeigte, welchen Schritt dort Wäscherei-Service war . Das wird vom Laden kontrolliert, wie der Wäschereiladen hier, um durch diese Seite zu gehen und den Status jeder Bestellung oder jeder Anfrage zu ändern, die eingeht . Also ja, ziemlich einfach und unkompliziert. Nun, Anwendung Anmeldeseite, eine Dashboard-Seite und einen Service, den ich anfordere Seite. Jetzt, da wir viele Konzepte und Werkzeuge kennen, auf die wir in Fig MMA zugreifen können, denke ich, dass die Gestaltung dieser drei Seiten super einfach sein wird. Und in der nächsten Lektion springen wir rein und beginnen mit der Einrichtung einer Vorlage. Ah, und von dort aus. 3. Beginne mit einer Vorlage: In Ordnung, also denke ich, wir sind bereit, mit unserem neuen Projekt hier anzufangen. Eine Sache, die ich erwähnen werde, ist, dass wir nicht so viel Zeit damit verbringen werden, sehr spezifische Details in diesem Projekt zu durchlaufen , nur weil wir so ziemlich alles in den letzten Abschnitten behandelt haben . Also werden wir diesen Abschnitt wirklich verbringen, um zusammenzustellen Mockup für Rob Anwendung Super schnell eso, um ohne zu helfen. Was ich getan habe, ist, dass ich eine kleine Template-Datei zusammengestellt habe, auf eine Reihe von anderen Vorlagen verwendet haben , die Sie aus diesen Vorlagen einen Punkt Txt finden können. Also dieser erste Link hier ist ein Link zu Material Designs Fig MMA Vorlage können sie diese eine kostenlose Version verwenden . Es enthält also eine Reihe von Elementen und Designs, die Sie dieses kostenlose Charts für Fig MMA verwenden können . Ah, dass Sie auch gehen und verwenden können, und das gibt Ihnen schön aussehende Diagramme innerhalb Ihrer Figur heraus Designs. Also habe ich bereits voran gegangen und diese heruntergeladen und dann in dieses saubere Känguru-Web-Template gelegt, das Sie verwenden können. Und es hat auch eine Menge Sachen darin, dass wir eso erkunden werden, um dies zu Ihrem Projekt oder Ihrer Feige MMA hinzuzufügen . Zuerst werde ich zu meinem sauberen Känguru-Team hier gehen, weil ich das in einem Projekt in hier. Wenn Sie dieses Team nicht haben, in dem Sie diesen Schritt nicht befolgt haben, können Sie diese Datei auch einfach in Ihren Entwurfsordner ablegen, und das wird gut funktionieren. Also werde ich voran gehen und gehen Sie hier rüber zu einem neuen Projekt auf Lassen Sie uns einfach dieses Projekt Web-App nennen oder lassen Sie uns Wäscherei-Shop Web-App machen. Lassen Sie uns Projekt erstellen und dann gehen wir voran und wählen Sie Sind sauber Känguru weint. Fügen Sie einfach die Datei hier nicht ein, sobald sie erfolgreich importiert wurde. Ich werde voran gehen und einfach doppelklicken, um es hier zu öffnen und lassen Sie uns wirklich schnell ein paar Dinge hier drinnen durchgehen . Hier sind also vier Seiten eingerichtet. Die 1. 1 hat unsere drei wichtigsten Frames, die versuchten, Um zu entwerfen, die vierte Seite hier hat die Anforderungen, die wir in der letzten Lektion übergegangen sind. Eso haben Sie Zugriff auf, dass hier niedrig ist und Dies sind die drei Seiten, die versucht wurden, in unserer Web-Markups Seite hier zu entwerfen, dann haben wir Stile. Also habe ich vorangegangen und tatsächlich einige Stile für meinen Text erstellt, sowie das Farbschema, das wir in der letzten Lektion oder in den letzten Abschnitten verwenden. Und eigentlich habe ich sie auch zu den lokalen Stilen hinzugefügt. Sobald Sie diese Datei importieren, haben Sie Zugriff auf die gleichen Farbstile, die wir in den vorherigen Abschnitten hinzugefügt haben, sowie einige Textilien mit unserem Rubicam Carla Fund. nun Wenn Sienundie letzten Abschnitte nicht befolgt haben, gehen Sie weiter und stellen Sie sicher, dass Sie diese Gelder auf Ihrem lokalen Computer installieren. Und dann, wenn Sie das Fig Mo Web nach oben laufen, gehen Sie zu Google und suchen Sie nach Fig MMA Font Installer und dann laden Sie das herunter, so dass Sie diese Schriftarten auf Ihrer Feige verwenden können, meine Web-App als auch. Andernfalls, wenn Sie unter diesem Stopp sind, können Sie einfach diese Schriftarten installieren und dann wieder hier rüber gehen, und dann sollte es gut funktionieren. Ich habe auch eine Komponentenseite hier, wo ich wieder platziert wurden. Ich habe Materialdesigns, Figment-Templates verwendet , um eine Menge davon zu generieren. Ressource ist, so haben wir eine Reihe von Karten hier, die wir verwenden können. Wir haben hier ein kleines Diagramm aus der Diagrammvorlage, von der ich Ihnen vorhin erzählt habe. Ähm, ein Haufen Buttons, Drop-Downs , Textfelder, sogar und dann irgendwie stieg hier für Informationen und so. Ah, und auch ein kleines Navigations-Dashboard. Nun der Grund, der diese erstellt hat und euch mit ihnen versorgt hat, so dass wir durch Zusammenstellen gehen oder super schnell verspotten können . Um, wir haben bereits viele dieser Konzepte gelernt, einschließlich wie Komponenten erstellt werden und wie Komponenten wiederverwendet und geändert werden können und wie Instanzen aus Komponenten erstellt und verwendet werden. Wenn Sie diese Lektionen noch nicht gewaschen haben, gehen Sie zu den letzten Abschnitten und gehen Sie über Komponenten. Wenn Sie diese Lektionen noch nicht gewaschen haben, Oder wenn Sie vergessen haben, wie sie funktionieren, Ich ermutige Sie, wieder über diese Lektionen gehen so niedrig auf nur irgendwie kommen auf die Geschwindigkeit mit , dass. Ja, nun, verwenden Sie eine Menge dieser Komponenten hier, nur um unseren Konstruktionsprozess viel schneller und effizienter zu gestalten. Eine coole Sache, die wir nicht zu viel bekommen, By the way, ist, dass in Ihrem Assets Sie ein kleines Team-Bibliothek-Symbol hier finden. - Ja. Wenn Sie mit einem Team zusammengearbeitet haben, können Sie diese Komponenten, die Sie hier für Ihr gesamtes Team haben, veröffentlichen . Und jetzt, wenn Sie das auswählen, wenn Sie nicht über die Vollversion verfügen, wird es Ihnen sagen, dass Sie einen professionellen Plan benötigen, um diese Funktion zu nutzen. Sie können den Stil auch einfach veröffentlichen, sodass Sie zwischen Ihrem Team, wenn sie an mehreren Projekten arbeiten, dieselben Stile verwenden können. Wenn ich also darauf klicke, wird die gesamte Team-Känguru-App Zugriff auf diese Stile für die Schriftart haben. Und die Farbe ist gut s Oh, Sie können auf jeden Fall veröffentlichen diese Stile zwischen Ihren Teams und verwenden Sie sie auf dem kostenlosen Plan. Aber wenn Sie auch Zugriff auf all diese Komponenten zwischen mehreren verschiedenen Projekten oder mehreren verschiedenen Dateien innerhalb Ihres Teams haben möchten, nutzen Sie definitiv das Teambibliotheksjahr. Und natürlich können Sie alle diese Komponenten verwenden, indem Sie einfach auf die Assets tippen, und Sie haben Zugriff auf sie genau hier als auch. Dies sind nur allgemeine Komponenten, die keine Kategorie haben. Diese Luftknöpfe, Container sehen Karten, also werden wir definitiv diese und unsere Mock Ups hier verwenden. Also gehen wir zurück zu Rep Mock Ups und dann wird im nächsten Hören beginnen, unsere Login-Seite von dort zu entwerfen . 4. Anmeldeseite: Alles klar. Also, ohne weiteres, lasst uns in die Gestaltung unserer Lugging Seite hier springen. Ich werde nur set verwenden und in die Seite genau hier zoomen. Also, was ich hier tun möchte, möchte ich voran gehen und das in diesen Rahmen in zwei Teile auf der rechten Seite aufteilen. Ich werde ein kleines Bild drauf haben. Dann auf der linken Seite werden wir unser Protokoll und Panel haben, was ziemlich einfach und unkompliziert sein wird. Erste Dinge zuerst. Gehen wir voran und verwenden Layout-Raster, damit wir genau sehen können, was wir tun. Lassen Sie uns voran und klicken Sie auf den Rahmen, und dann habe ich bereits ein Layout Körnung s eingerichtet, so dass wir einfach die Sichtbarkeit aktivieren und das hier verwenden können . Sie sollten dieses Jahr sehen, weil dies Teil der Vorlage ist. Aber wenn Sie nicht einfach ein Layoutraster mit einem Spaltentyp von Anzahl 12 hinzufügen. Ich sagte, der Papst, eine Stadt der Farbe auf 3%, so ist es einfacher, alles andere zu sehen. Ähm, der Typ wird gestreckt und dann sind die Ränder 60 auf den Seiten auf der Rinne 10 zwischen den Spalten hier, also wenn Sie das eingeschaltet haben, gehen wir voran und erstellen Sie ein Rechteck für vielleicht gleich hier drüben. Lassen Sie uns einfach voran und stellen Sie sicher, dass dies eine Linie richtig ist. Und jetzt benutzen wir einen wirklich coolen Stecker namens Unspool Asche. Also lassen Sie uns den Kopf über, um Plug Ins zu verwalten, um das zu installieren. Wenn Sie es nicht haben, gehen Sie einfach, um alle PlugIns zu durchsuchen. Sobald dies geladen ist,werden Sie feststellen, dass dies die erste Option hier sein könnte. Sobald dies geladen ist, Oder wenn du dieses Video ansiehst, könnte es woanders sein. So können Sie einfach in der Suchleiste auf Splash suchen. Hier ist gut, habe es bereits installiert, also werde ich es nicht installieren. Aber Sie können auf diese Schaltfläche klicken, um es zu installieren und lassen Sie uns zurück zu unserer Datei hier und dann verwendet Plug in auf Schrägstrich. Nun, wenn Sie sich erinnern, haben wir unspool ash auf unserer vorherigen Anmeldeseite verwendet, die wir in unserer mobilen App erstellt haben. Nun, dies ist wieder eine kostenlose Stock Bild-Ressource, die Sie verwenden können und so sind Plug in hilft Ihnen Bilder viel einfacher in Ihre Projekte einfügen. S so sicher sein, zuerst wählen Sie Ihr Rechteck hier und dann den Kopf auf über zu suchen Lassen Sie uns vielleicht Wäscherei Geschäft, sehen, was kommt. Cool. Also haben wir eine Reihe von Optionen. Ich werde es einfach halten und mit dieser 1. 1 hier gehen. Ich finde, es sieht ziemlich schön aus. Cool. Gehen Sie einfach voran und schließen Sie das hier, Äh, und jetzt gehen wir weiter und erstellen Sie einfach eine kleine Trennwand zwischen diesen beiden Abschnitten. Also erstelle ich eine Linie und verwende Shift, um sicherzustellen, dass sie gerade ist und dann eine Strichfarbe ausgeschaltet wird. Gehen wir zu unseren Stilen und wählen Sie unsere Lassen Sie uns die sekundäre Farbe hier tun, die Orange lassen Sie uns die Breite machen, vielleicht fünf Pixel oder die Dicke Jahr. Und dann lassen Sie uns einfach weitermachen und das auf die Rechte bringen. Also ist es genau zwischen unseren verschiedenen Abschnitten hier. Vielleicht können wir es bis zu acht Pixel anstoßen oder sechs Pixel machen. Das sieht gut aus. Also, jetzt werde ich einfach meine Layout-Klasse für den Rahmen hier ausschalten. Ah, und so lassen Sie uns voran und erstellen Sie hier einen Rahmen für unser Protokoll und Panel und denken Sie daran, dass Sie immer Frames innerhalb von Frames erstellen können, nur um die Dinge besser organisiert zu halten. Gehen Sie einfach vor und zeichnen Sie hier einen Rahmen. Stellen Sie einfach sicher, dass es hier zu diesem ganzen Abschnitt passt. Und dann können wir sogar ein Layout einrichten. Großartig im Inneren von hier. Lasst uns das tun. Collins hat vier Colons mit einer Marge von 60. Ich habe sie von 10 bekommen. Machen Sie 5% hier nur, dass wir die Dinge richtig ausrichten können. Lassen Sie uns zuerst voran und fügen Sie oben oder Logo hinzu. Also lasst uns zu unserer Ressource wechseln Ist, dass Sie von der letzten Lektion heruntergeladen haben sollen . Uh, geh zum Logo und lass uns weitermachen und diesen Känguru-Farb-SPG direkt hier hineinziehen. Und dann, während Ault verschiebe, werde ich voran gehen und die Größe ändern, während ich seine Position auf Let's Do 76 von 76 halte. Sollte funktionieren. Gehen Sie einfach voran und legen Sie es hier drüben und vielleicht halten Sie einen Abstand von 60 von oben ist niedrig. Lassen Sie uns T verwenden, um einen Logo-Text als auch hier zu erstellen, und dann gehen Sie voran und weisen Sie einen Stil oder ein Textil der Überschrift eins und wählen Sie dann ah, Farbstil oder Füllstil des primären Blau. Hier, lasst uns voran gehen und diese einfach ausrichten, indem wir sie zusammen auswählen. Und dann gehen wir weiter und gruppieren sie auch zusammen. Mit Befehl G werde ich das in Logo umbenennen. Lassen Sie uns voran und fügen Sie eine Beschreibung hinzu. Text hier ist Zeile, also wird er verwendet T aber dieses Mal werden wir tatsächlich einen Begrenzungsrahmen für den Text hier drüben zeichnen. Nur es überläuft nicht, es sei denn, Sie melden sich an, um Ihre Einnahmen zu sehen und außer Wäschereianfragen von Kunden. Ich denke, das ist gut. Lassen Sie uns voran gehen und entlinkt diesen Stil und tun Überschrift, dass sieht gut aus. Und jetzt gehen wir weiter und fügen ein paar Schaltflächen und Felder in das Jahr. Lasst uns weitermachen und unser Vermögen auswählen. Stechen Sie hier rüber und öffnen Sie die Komponenten hier. Lassen Sie uns die Google-Signierung fahren, aber hier und dann lassen Sie uns gehen und ziehen Sie ein Textfeld sind eigentlich zwei von ihnen hier , eine für E-Mail, eine für Passwort, und dann müssen wir auch ah aktiviert aber in als Zeile für unser Login. Und dann gibt es hier auch eine Trennwand. Also werden wir nur die zwei verschiedenen Arten von Loggins mit diesem Teiler trennen. Also gehen Sie vor und gezogen, dass hier niedrig ist und lassen Sie uns voran und zoomen Sie einfach hier und ich bin richtig ausgerichtet diese als auch und ändern Sie sie perfekt. Sie signieren mit Google Button, um zuerst hier zu sein, und dann lassen Sie uns den Teiler hier haben. Lassen Sie uns die horizontalen Zentren ausrichten verwenden, aber hier, nur um sicherzustellen, dass es richtig ausgerichtet ist, verschieben Sie diese ein wenig nach unten und halten Sie dann vielleicht einen Abstand von 30 Pixel hier, 30 Pixel mit den Textfeldern auf Textfelder können vielleicht 15 Pixel voneinander sein, wo wir sogar 10 tun können. Und lassen Sie uns voran und setzen Sie einfach unsere, aber auch hier hinein ziehen Sie es den ganzen Weg hinüber. Lassen Sie es uns ein wenig runter bringen, weil wir auch ein vergessenes Passwort setzen wollen. Aber hier drin ja, wir können das tun, indem wir nur Tee kochen und dann eingeben für bekommen Passwort. Fragezeichen. Wenn es nicht automatisch gab Ihnen die Tasten. Carla. 14 Punkt Ah, Textil. hier Gehen Siehierweiter und lösen Sie die Zelle ab, und wählen Sie dann aus. Ähm, aber in Carla 14 Punkte. Gehen wir weiter und richten Sie es hier aus. 2 20 Pixel von hier. Okay, das sieht gut aus. Lassen Sie uns voran und duplizieren Sie auch diesen vergessenen Pass-Button. Legen Sie es hier unten und dann Nutzungsbedingungen und Datenschutzrichtlinien für Links hier zu tun. Ich werde das Ende auswählen und tatsächlich den Befehl verwenden. Sei hier um sich zu entfalten. Es wird über Windows hinaus gesteuert werden. Lassen Sie uns voran und einfach so gehen und horizontale Linie machen und dann den Abstand beibehalten. Lass uns 40 von unten machen. Lassen Sie uns voran und wählen Sie diesen Rahmen hier und einfach ausblenden oder Layout Raster, nur um zu sehen, was wir haben. Ich finde, das sieht ziemlich gut aus. Lassen Sie uns voran und benennen Sie einfach ein paar Sachen hier um oder ändern Sie die Konfiguration einer Reihe von Komponenten hier drin. Äh, ich werde hier reinspringen und das in eine E-Mail umwandeln. Lassen Sie uns dieses in Passwort ändern. Und jetzt, wenn wir auswählen oder Ebenen-Panel, sollten wir in der Lage sein, einfach hier zu springen. Und dann lassen Sie uns unser Glück Rahmen hier verstecken, so dass wir nur die E-Mail zeigen und dann das Gegenteil im besten Feld tun und die Post verstecken. Perfekt. Wir haben E-Mail und Passwort, und jetzt wollen wir nur den Namen dieser Schaltfläche ändern, um sich anzumelden. Lass uns weitermachen und nur ein Multi. Wählen Sie diese beiden Schaltflächen ist Gesetz und Ändern. Die gefüllte zu unserem dunklen oder Text dunkle Farbe Stil auch hier. Perfekt. Ich denke, wir haben jetzt und jetzt einen netten Login in Frieden. Ich hoffe, Sie fangen an, die Leistung von wiederverwendbaren Komponenten zu sehen und wie schnell wir eine Seite wie diese zusammenstellen können , die bei anderen Designs Stunden gedauert haben könnte. Software ist perfekt. In unserem nächsten Video werden wir auf unsere Dashboard-Seite springen und hier ein nettes Dashboard für unsere Wäschereien erstellen . 5. Bildmasken: Alles klar. Bisher haben wir Bilder auf Formen angewendet, indem wir sie einfach in die Form oder über die Form ziehen . Aber wir haben nicht wirklich erforscht, wie Bildmasken funktionieren. In dieser Lektion werde ich Ihnen einen alternativen Weg zeigen. Aufgenommene Bilder in Ihr Projekt. Also sagen wir hier drüben, anstatt mein Bild von meinem Hintergrundbild hier drüben in diesem Rechteck zu haben, will ich es innen haben, vielleicht in einer Lippen oder einem Kreis oder vielleicht mehreren Kreisen. Ähm, es liegt wirklich an dir. Bild-Masken. Wirklich? Geben Sie uns die Option zwei, bitte. Bilder innerhalb eines anderen Shapes oder mehrerer Shapes auf. Ich zeige Ihnen genau, wie das funktionieren wird. Um zu demonstrieren. Ich werde hier über meiner Form einen Kreis kreieren. Ich denke, so etwas würde funktionieren. Und jetzt möchte ich dieses Bild innerhalb des Kreises platzieren und alles außerhalb des Kreises schneiden , so dass das Bild im Wesentlichen innerhalb des Kreises zeigt , und es verbirgt nur alles andere draußen. Also werde ich im Ebenen-Panel voran gehen, meinen Kreis unter mein Bild hier ziehen, dann werde ich sie beide zusammen auswählen und die Option als Maske verwenden. Und wie Sie hier sehen können, haben wir ein Bild Masken angewendet, so dass das Bild ist einfach Maske. Damit lassen Sie uns hier so gestalten, dass Sie Ihren Kreis hier ändern können. Wenn Sie möchten, verschieben Sie es, um auszuwählen, wo Sie Ihren Kreis haben möchten, oder sogar, wenn Sie mehrere Kreise möchten . Nehmen wir an, um diese Maske darzustellen, können Sie einfach voran gehen und Ihren Kreis so duplizieren. Ich habe nur drei Mal dupliziert, also lasst uns voran gehen und sie alle zusammen auswählen und dann Gewerkschaftsauswahl hier drüben machen. Und jetzt, wenn ich wieder eine Maske erstelle, indem ich sicherstelle, dass meine Union-Form unter dem Bild hier ist und dann beide auswähle und USA's Mask oder Control Befehl em trage, gehen wir weiter und machen dasselbe. Also, jetzt haben wir unser Bild in dieser Art von Einzigartigkeit platziert. Ich benutze drei Kreise Form oder wie auch immer Sie es hier nennen wollen, also fühlen Sie sich frei, um damit herum zu spielen und zu sehen, wie Sie Ihr Bild in Ihren Projekten präsentieren möchten. Moment werde ich diese Vereinigung löschen und das Bild einfach außerhalb meiner Gruppe ziehen . Und jetzt bin ich zurück zu dem, was ich vorher hatte. So ist die Bildmeisterschaft cool. 6. Dashboard-Seite: In Ordnung. Mit unserer Login-Seite können wir nun auf unsere zweite Seite hier gehen, die Dashboard-Seite. Ähm, also wollen wir hier ein paar Sachen einbinden, wie zum Beispiel die Einnahmen für den Wäschereiladen, ähm, wie Bella. Vielleicht zeigen Sie ihnen eine Liste von einigen ihrer Kunden und wie viele Artikel sie haben oder oder Hominy Wäschereibestellungen. Sie erfreuten sich. Und solche Dinge könnten wir definitiv ein paar andere Sachen wie ihre Bewertungen hinzufügen. Zur gleichen Zeit möchte ich diese Seite einfach nur für die Einfachheit dieses Abschnitts hier halten. Wir wollen nicht zu viel im Detail gehen, aber fühlen Sie sich frei, dies selbst zu tun, wenn Sie mehr zu diesem Dashboard-Patienten hinzufügen möchten. Also, wenn wir jetzt zu unserem Asset-Tab wechseln, um, das erste, was wir tun wollen, ist, zu Komponenten zu gehen, und dann sollten Sie in der Lage sein, diese Navigationskomponente hier zu finden. Und gehen wir weiter und ziehen Sie einfach eine Instanz. Und hier und lassen Sie uns einfach voran und richten Sie es auf der linken Seite aus. Mal sehen, ob ich das richtig verstanden habe. Perfekt links oben. Es sieht gut aus jetzt standardmäßig haben bereits die Hintergrundfarbe dieser Rahmen auf diese Farbe hier geändert . Also, wenn Ihre nicht auf diese Farben eingestellt ist, gehen Sie voran und setzen Sie es hier. Dies ist nur ein bisschen Stylings oder Hintergrund ist in schlichtem Weiß, und es fügt ein wenig Kontrast zwischen verschiedenen Elementen hinzu, wie meine Navigation hier im Hintergrund. Also, mit dem hier hinzugefügten Navigationsbereich, ähm, die Dashboard-Option wurde bereits in diesem ausgewählt, so dass wir hier keine Änderungen vornehmen müssen. Also lassen Sie uns voran und beginnen Sie einfach, unsere Dashboard-Seite hier zu erstellen. Also, als erstes, was ich tun möchte, ist es wie Tee und das richtige Dashboard, nur um ihnen zu sagen, dass wir auf der Dashboard-Seite sind. Und dann lasst uns weitermachen und dieses Textil losbinden und eine Überschrift hinzufügen. Lassen Sie uns die Phil in Text dunkle Farbe Stil ändern. Lass uns einfach voran gehen und vielleicht das nach oben bewegen und es irgendwo hier ausrichten und vielleicht den Abstand von scharfsinnigen 50 Pixeln von hier halten. Also in unseren Komponenten haben wir auch Container, also lasst uns voran gehen und einen großen Container auf unseren Rahmen ziehen. Lassen Sie uns voran und ziehen Sie auch einen kleinen Behälter. Wir werden diesen großen Container verwenden, um zu halten, oder vielleicht Einnahmendiagramme und solche Sachen. Und dann dieses, um vielleicht einige der letzten Kunden für diesen Wäschereiladen hier zu zeigen. Also lassen Sie uns voran und nur eine Linie tut es. Hey, hier. Das ist ein Abstand von 50 und dann untereinander. Lassen Sie uns den Abstand von 30 beibehalten. Vielleicht. Ich finde, das ist wieder ziemlich gut. Sie können hier definitiv Layout-Körnungen verwenden, um Ihre Arbeit ein wenig einfacher zu machen, wenn Sie Sachen füttern. Aber jetzt werde ich mich darauf konzentrieren, nur dieses Design zu kreieren. Perfekt. Also jetzt gehen wir voran und greifen auch einige Ansichtskarten von hier. Um, lassen Sie uns die erste Option hier machen, wo Sie sie hier mit dem Abstand von 30 Pixeln von oben platzieren, nur als Erinnerung, dass der Abstand zwischen verschiedenen Elementen mit Ault zeigt. Wenn Sie also alle für die Optionstaste gedrückt halten, können Sie sehen, was, während Sie ein Objekt oder eine Form ausgewählt haben, Sie können den Abstand mit jedem Objekt sehen, über das Sie den Mauszeiger bewegen. Nur eine kleine Erinnerung für den Fall, dass du vergessen hast, wie man das macht. Es ist sehr praktisch. Cool. Also gehen wir weiter und fügen Sie hier eine weitere hinzu. Vielleicht ein Ausgewählter jetzt. Und tun Sie Abstand von 30 wieder zwischen diesem und wieder, wie wir lernen Und ux Konsistenz ist der Schlüssel . Wir wollen nicht ah hinzufügen, Abstand, der im Vergleich zu allem anderen aussieht. Deshalb verwenden wir hier einen konsistenten Abstand. Lassen Sie uns voran und verwenden Ault und ziehen Sie eine andere Instanz dieser UN-ausgewählten oder nicht ausgewählten Option der Ansichtskarte hier als auch. Und dann noch einmal, werde ich nur überprüfen, ob alles perfekt ausgerichtet ist. Lassen Sie uns hier von oben nach unten arbeiten. Ähm, als erstes möchte ich diesen Titel in einen perfekten Umsatz ändern. Und dann gehen Sie weiter und ändern Sie diesen Dropdown-Text, um vielleicht monatlich zu machen. Von hier aus kann der Benutzer vielleicht auswählen, in welchem Begriff er seine Diagramme sehen möchte oder was Lengthy. Willst du ihre Diagrammdaten durchsuchen und ... und dann werde ich aus meinen Komponenten ein Balkendiagramm auswählen, um es direkt hier zu platzieren . Gehen wir voran und verwenden Sie Shift hier, um die Größe einfach gleichmäßig zu ändern. Ich werde das Kommando halten und das einfach ein bisschen perfekter erweitern. Also haben wir einen Abstand von 24 Pixeln von jeder Seite, so sieht schön und zentriert aus. Also lasst uns zuerst gehen. Und hier und ändern Sie diese Einnahmen, um vielleicht den Monat widerzuspiegeln, den wir betrachten. Also lassen Sie uns nur ein Beispiel Oktober 2019 machen. Das sieht gut aus. Und es sieht so aus, als hätten wir hier eine Reihe von Filtern für das Diagramm. Also brauchen wir dieses hier oben nicht wirklich, damit wir es einfach von hier löschen können. Haben Sie alles darüber wäre schön, wenn Sie die Gesamteinnahmen für diesen Monat zeigen können, vielleicht hier oben. Gehen wir also weiter und gehen Sie hier zur Master-Komponente. Und dann fügen wir hier einen Text hinzu. Vielleicht in einem Dollar-Betrag in einem do setzen 000 Was ist unverknüpft oder löst den Stil hier und ändern Sie es auf diesem Überschrift? Gehen Sie weiter und ändern Sie einfach die Füllfarbe auf unsere Technologie. Beginnen Sie hier und bewegen Sie sich. Es könnte hier drüben sein, und natürlich können wir die Show benutzen und sich verstecken. Wenn Sie den Filter anstelle des Dollarzeichens hier anzeigen möchten. Aber vorerst werde ich das da lassen. Gehen wir zurück zu unserer Web-Markups Seite, und jetzt haben wir, dass erscheint Ball. Also lassen Sie uns voran und bearbeiten Sie dies einfach und fügen Sie eine Beispielnummer ein, die gut aussieht. Lassen Sie uns voran und optimieren diese Zahlen hier unten ist, na ja, eso, wenn Sie bemerken, dass wir eine Reihe von Symbolen hier, die übereinander geschichtet sind, gehen wir zu diesem 1. 1 und klicken Sie auf Symbole. Also, wenn Sie die Icons Gruppe hier gefunden haben, gehen Sie vor und öffnen Sie sie und Sie sollten drei Symbole hier sehen. Ah, die 1. 1 steht für die Sterne oder wie viele Bewertungen sie haben. In diesem hier wollen wir Leute machen, also wollenwir das hier wie gezeigt lassen, und dann die anderen als verborgen. In diesem hier wollen wir Leute machen, also wollen wir das hier wie gezeigt lassen, Und dann werden wir es tun. Wir werden einfach verlassen, das 20 Kunden gewonnen hat. Ähm, und dann gehen wir hier rüber zur 2. 1 Es ist wie die Symbole hier drin. Und dann lassen Sie uns gehen und verstecken das Symbol der Leute hin und wieder lassen Sie uns dieses auch verstecken , also haben wir nur die mittlere hier und es kann hier sein, statt 1 28 wir können zeigen, dass ihre Gesamteinnahmen nur in einer Zufallszahl hier gesetzt wurde vielleicht 41 k und tun Gesamtumsatz. Das sieht gut aus. Lass uns hier rüber gehen. Also hier drinnen, lasst uns gehen und einfach die 1. 1 verlassen und die letzten beiden verstecken, die uns dieses Sterne-iPhone hier zeigen sollten, und ich vielleicht tun wir es. Lass uns 4,5 machen. Lassen Sie uns eine durchschnittliche Bewertung wie diese machen. Ich denke, das sieht gut aus, wenn Sie Befehl verwenden und scrollen, um dort zu vergrößern. Perfekt. Auf diese Weise hat der Client hier drüben mehrere Optionen. Sie können auf verschiedene Registerkarten gehen, um ihre Bewertungen im Laufe der Zeit zu sehen, vielleicht sehen Sie ihre Anzahl der Kunden im Laufe der Zeit. Und so behandelt das die Seite, auf der wir hier sind, oder die Statistiken, die wir hier in Bezug auf ihr Dashboard zeigen. Jetzt gehen wir weiter und fügen hier etwas hinzu. Gehen wir voran und verdoppeln Sie uns schnell und ändern Sie dies auf die jüngsten Kunden. Lassen Sie uns hier und jetzt hineinzoomen, wenn Sie Asset-Komponenten durchlaufen, habe ich hier zwei verschiedene Arten von Avatar-Listen erstellt. Also sind es Schuhe der 2. 1 genau hier, was der einfachere ist. Und lassen Sie uns einfach voran gehen und, ähm, in einem Abstand von 24 hier drinnen und dann die Größe ändern, um diesen Abstand anzupassen. Okay, Austin, das sieht gut aus. Also, mit einer hier erstellt, lasst uns voran gehen und Ault verwenden, um eine weitere Kopie hierher zu ziehen und zu tun. Es kann ein Abstand von 12 zwischen jedem Element sein. Und jetzt, wenn Sie tatsächlich Befehl de Haufen von Malen treffen, wird es weitergehen und die nächsten Elemente in diesem Abstand ebenfalls duplizieren. Ich denke, das ist gut hier. Die zukünftige Lektion wird also zurückkommen und diese tatsächlich mit richtigen Beispieldaten füllen, damit sie nicht so einfach aussehen. Aber vorerst, wenn ich verkleinere, denke ich, ich habe so ziemlich alles, was ich zu meinem Dashboard hier hinzufügen wollte. Um, wieder, wir haben eine Menge leeren Platz hier, also wenn Sie es mit ein paar anderen Sachen füllen wollen, für ein paar Ideen, die mir in den Sinn kommen , könnten Sie ihnen ihre durchschnittlichen Einnahmen pro Bestellung oder ihre Durchlaufzeit, Es gibt also eine Reihe von Dingen, die Sie hier hinzufügen können, um es besser aussehen zu lassen. Aber vorerst denke ich, dass wir das hier machen, nur um die Dinge einfach zu halten. Und in unserer nächsten Lektion werden wir auf die Anfrageseite zurückkommen, wo wir die Liste der Wäschereianfragen von den Kunden haben , und dann werden wir das mit einem wirklich coolen Konzept entwerfen, das total aus als auch. 7. Auto-Layout: In Ordnung, also denke ich, wir sind bereit, auf unsere letzte Seite zu gehen. Ah, die Anforderungsseite. Das ist also, wo der Wäschereiladen oder wer sich aus dem Wäschereiladen eingeloggt ist seine Liste der Anfragen zu sehen, egal ob es sich um diejenigen handelt, die eine Genehmigung benötigen, oder diejenigen, die derzeit gewaschen oder getrocknet werden oder was auch immer Fall ist. Also werden wir einige ähnliche Komponenten von dieser Seite haben. Also, wenn wir voran gehen und diese einfach über eso kopieren, werden wir die Navigation hier haben, so dass wir die eine Wand halten Shift auswählen. Lasst uns diesen Titel hier mögen. Und dann lassen Sie uns genau wie in dieser Ansicht auch mit Befehl. Sehen Sie, wir können hier zu unserem Anforderungsrahmen gehen und dann Befehl V Perfect tun. Lassen Sie uns voran und benennen Sie dies auf Anfrage um. Lassen Sie uns hier hineinzoomen und gehen Sie in unsere Anfrage Registerkarte hier, oder die Auswahl direkt hier. Und lassen Sie uns voran gehen und unhygienische Rechteck von hier und dann verstecken Sie das Rechteck von der anderen und lassen Sie uns voran gehen und wählen Sie den Text hier losgelöst Stil und tun Text dunklen Stil . Lasst uns wie das Symbol hier. Freistehender Stil und tun Sie diesen Text mittlere Farbe. Und dann lassen Sie uns hier reingehen und das Gegenteil tun. Ändern Sie diese auch, auch, die Primärfarbe hier und dann tun Sie diese auch eine primäre Farbe Stil perfekt. Also haben wir gerade die Auswahl von diesem auf diese umgestellt. Hier. Sie könnten dies einen Schritt weiter machen und tatsächlich eine Komponente für jede ausgewählt werden oder auf ausgewählt und die Dinge ein wenig weiter und unsere Master-Komponenten nehmen, oder machen Sie die Anpassungen hier in jedem Fall perfekt. Also, jetzt, wo wir das haben, gehen wir zu unserem Container hier und lassen Sie uns voran gehen und es hier mit dem Anforderungstext ausrichten , und ich werde einfach weitermachen und es größer machen, so dass es fast den gesamten Bildschirm passt. Mal sehen, wie es uns mit Abständen geht. Halten Sie den Befehl, machen Sie es hier ein bisschen größer, und lassen Sie uns voran und ändern Sie das einfach auf diese Höhe, und ich denke, es sieht gut aus. Also lasst uns hier in den Text gehen und die Ausrichtung ändern, um links auszurichten. Lassen Sie uns voran und ändern Sie den Text in eine Wartungsanfrage, so dass dies im Wesentlichen die Anfragen, die der Wäschereiladen akzeptieren oder ablehnen muss. Eigentlich können wir das vielleicht kleiner machen, also haben wir ein paar Anfragen als hier. Und dann haben wir eine Reihe von anderen Optionen für vielleicht akzeptierte Anfrage auf und so weiter. Jetzt möchte ich dir ein wirklich cooles Konzept zeigen, das Odelay hier draußen heißt. Es ist relativ neu mit Fig MMA, aber es ist super nützlich, und diese kleine Animation zeigt tatsächlich ein wirklich gutes Beispiel dafür. Im Wesentlichen ermöglicht es Ihnen, intelligente Frames zu erstellen, die sich die Größe basierend auf dem Inhalt ändern, der sich darin befindet . Das könnte also gut für eine Reihe von Dingen sein, wie zum Beispiel wieder Knöpfe. Während der Eingabe ändern sich die Schaltflächen entsprechend dem Text. Oder zum Beispiel, wenn Sie eine Reihe ähnlicher Elemente haben, die in einen Rahmen gehen, können Sie das automatische Layout verwenden, um die Dinge einfach so zu verschieben, wenn Sie mehr über das automatische Layout lesen möchten, gehen Sie voran und schauen Sie sich diesen Artikel an. Aber ich werde es auch hier anwenden, um Ihnen zu zeigen, wie es funktioniert. , jetzt Also, jetztgehen wir zu unserem Vermögenswert, der hier drüben liegt, wo wir eine Liste unserer Komponenten haben. Und dann ziehen wir diese Avatar-Liste direkt hierher, und ich werde einfach die Größe ändern. Sie die Größe neu positionieren. Also passt es zu unserem Abstand auf. Ich denke, das ist gut. Nun, wenn ich das duplizieren und hier mehrere Zeilen dieser Instanz erstellen möchte, kann ich dies natürlichtun, indem natürlich Befehl D verwende oder wie wir es hier in dieser Tabelle getan haben. Aber wir können auch die Auto-Layout-Funktion verwenden war Die Sache ist super cool. Lassen Sie uns also voran gehen und versuchen Sie das automatische Layout. Gehen wir zurück zu unseren Ebenen hier auf Lasst uns voran gehen und benutzen Ault, um das hier und jetzt zu duplizieren . Lassen Sie uns voran und verwenden Sie Shift, um beide Instanzen hier und dann auszuwählen Jetzt werden Sie sehen, dass Sie eine Option haben , die früh hier aufgerufen wird. Wenn Sie fortfahren und auf das Pluszeichen klicken, wird etwas Cooles passieren. Diese beiden Elemente gelangen nun zu einem automatischen Layout-Frame hier. Nun, eine Sache, die ich tun werde, ist, dass ich diesen Quip-Inhalt auf deaktivieren werde. Ich werde Ihnen sagen, warum in einer Sekunde Also hier, ich sehe, dass alles normal aussieht, aber wenn ich tatsächlich voran gehe und den Inhalt beschnitt, so dass jeder Schatten außerhalb dieses Begrenzungsrahmens abgeschnitten wird. Wenn diese Option hier aktiviert ist, lassen Sie uns voran und schalten Sie sie vorerst aus. Und jetzt ist dies ein automatischer Layout-Rahmen. Also haben wir Zugriff auf ein paar Sachen, Ähm, auf der rechten Seite hier. Aber lassen Sie uns voran und erstellen Sie zuerst ein paar weitere Zeilen. Und der einfachste Weg, dies zu tun, ist, klicken Sie einfach auf eines der Elemente hier und tun Sie Befehl D, und wie Sie automatisch sehen können, werden die Dinge nach unten gesetzt. Ähm, Sie können Ihren anderen Layout-Rahmen hier und auf der rechten Seite auswählen. Hier haben Sie einige Optionen, also werden wir sie durchgehen. Also zuerst möchte ich Ihnen diese vertikale Option zeigen. Ah, stellen Sie sich vor, Sie zeigen diese Liste in horizontaler Weise. Stattdessen können Sie wirklich einfach auf horizontal umschalten, und diese Liste wird horizontal statt vertikal angezeigt. Aber wenn Sie vertikal wählen, wird es so angezeigt, was wir wollen. Du kannst das behandeln. Sie können das horizontale Klopfen hier behandeln, also wenn Sie mehr Abstand wollen, um links und rechts. Das kannst du von hier aus behandeln. Also, eigentlich, wenn du 24 hier machst, können wir einfach voran gehen und diesen Rahmen nach rechts hier verschieben. Perfekt. Und das wird Ihre vertikale Polsterung sein. Wenn Sie also oben und unten in diesem gesamten Auto-Layout-Rahmen einen Raum hinzufügen , können Sie dies hier tun. Also, wenn Sie Padding von hatten, sagen wir 24 Also, jetzt zwischen dem ersten Element hier und dem letzten Element, wird es immer ein 24 Pixel klopfen. Und dann ist dies der Abstand zwischen den Elementen, denn ursprünglich, als wir dies zu einem automatischen Rahmen gemacht haben , war das der Abstand dazwischen. Also hat das einfach aufrechterhalten. Aber wir können dies definitiv twittern und, ähm, weiter gehen und es erhöhen, wenn Sie mehr Abstand wollen oder verringern Sie es, wenn Sie weniger Abstand wollen. Ähm, ich denke, wir können hier 18 machen und es wird gut aussehen. Ehrfürchtig. Darüber hinaus können wir hier das gleiche Styling zu unserem Hintergrund hinzufügen, Also lasst uns weitermachen. Fügen Sie eine Füllung Weiß hinzu. Jetzt können wir Clip-Inhalte machen, weil wir diese Muster hinzugefügt haben und ich gehe voran und füge einen Randradius aus. Vier. Lassen Sie uns voran und fügen Sie eine Strichfarbe hinzu. Also, jetzt für einen Schlaganfall, gehen wir voran und ändern Sie den Sculler und verwenden Sie dieses Pipettenwerkzeug hier, um die gleiche Farbe wie unsere als die Grenze dieses anderen Containers auszuwählen . Hier. Jetzt ist der Phil weiß, was wir wollen. Ein Schlaganfall ist das, was wir wollen. Wir können den Strich auf der Außenseite machen und lassen Sie uns auch zu diesem anderen Container gehen und Kontrolle verwenden . Sehen Sie auf diesem Text und dann gehen Sie vor und wählen Sie meine völlig aus Rahmen und tun Befehl V, und jetzt bemerken Sie, dass es am unteren Rand des Rahmens hier platziert. Aber wenn Sie voran gehen und es in einer beliebigen Position platzieren wollen, die Sie mögen, können Sie das tun. Also, wenn Sie es wollen, zum Beispiel, unterscheiden Sie zwischen diesen beiden nehmen, legen Sie es hier oder Sie können es an der Spitze platzieren, wie wir wollten. Lassen Sie uns voran und löschen Sie diesen anderen Container, den wir haben. Gehen wir weiter und ich ziehe das nach oben perfekt. Und jetzt, wenn wir weiter duplizieren und hinzufügen mehr Elemente oder ganzen Rahmen hier wird sehr schön wachsen , oder es wird schrumpfen, wenn Sie beginnen, Elemente aus ihm so zu löschen. Wenn wir also fremd hier lassen, dann lassen Sie uns voran und duplizieren diesen völlig ausgestellten Rahmen, Ault benutzen und ihn hier runter ziehen. Machen wir einen Abstand von vielleicht 30 dazwischen. Lasst uns weitermachen und jetzt auch das ändern . Aktive Anfragen, bei denen wir den akzeptierten Wäscheservice hier zeigen können. Cool. Also ist es für uns geordnet. Ich hoffe, Sie können jetzt sehen, warum es so nützlich ist. Und damit, denke ich, wir haben so ziemlich unser Mock hier oben abgeschlossen. Wenn ich den ganzen Weg hinauszoomen, haben wir alle drei Seiten, die wir brauchen. Jetzt gehen wir voran und an einigen Beispieldaten, weil es jetzt sehr einfach aussieht. Gehen wir weiter und machen Sie das in der nächsten Lektion. 8. Musterdaten: In Ordnung, also mit unserem Mock up ziemlich fertig hier, was wir tun wollen, ist, gehen Sie voran und fügen Sie einige Beispieldaten zu diesem jüngsten Kunden tippen Sie hier drüben , oder den Container hier drüben und auch unsere Anfragen hier drüben. Ein wirklich nützliches Plug in, wenn es darum geht, Sample-Daten zu Ihren Designs hinzuzufügen, heißt Content Trio. Nun, wenn Sie über über gehen, um Plug Ins zu verwalten, gehen Sie zu durchsuchen alle Plug Ins, Sie sollten in der Lage sein, Inhalte real hier zu finden. Oder Sie können es auch hier suchen. Dieser Plug Ins von Microsoft, was super cool ist. Sie können innerhalb der Veranstaltung gehen und mehr darüber lesen. Aber im Wesentlichen hilft es uns bei einigen Testdaten oder bei einigen Beispieldaten sehr einfach in unsere Entwürfe. Also haben wir eine Reihe von Optionen wie Namen, Telefonnummern. Adresse ist auf einer Reihe von anderen Daten, die wir einfach in unser Design hinzufügen können. Es sieht also echt aus. Also gehen Sie vor und installieren Sie es, wenn Sie es nicht bereits installiert haben und gehen Sie zu unserem Projekt hier und jetzt, lassen Sie uns in unser Dashboard Stück hier zoomen. Also hörte ich, einige Beispieldaten hinzufügen, die erste Bedeutung, um den Text Brennstoffe auszuwählen. Sie möchten Daten zu s hinzufügen. Also lassen Sie uns voran gehen und zu unserem Ebenen-Panel auf. Klicken Sie dann in die Avatar-Liste und wählen Sie hier das Vornamenfeld oder den Vornamentext und dann tun Sie das gleiche hier unten, während Sie den Befehl gedrückt halten. Gehen Sie einfach in die nächste hier und tun Sie das weiter für Ihre Rose. Und ich glaube, das sind alle sechs hier drüben. Also lasst uns weitermachen und Plug Ins machen. Und so Lebensinhalt Riel. Und wenn sich der Plug in öffnet, können wir voran gehen und Namen verwenden. Aber bevor wir das tun, lassen Sie uns einfach nur Vornamen machen. Tippen Sie also auf die drei Punkte hier und deaktivieren Sie dann die letzten Dinge hier drüben. Gehen wir zurück, und dann können wir voran gehen und einfach darauf klicken, um sich zu bewerben. Und genau so haben wir eine Reihe von zufälligen Vornamen für uns hier generiert, um keine Avatare für jeden unserer Avatare hier hinzuzufügen , wie Sie sehen können, wenn Sie klicken, wird Ihnen sagen, dass Sie ein Bild Lee benötigen oder zuerst, Das sind also alles, eigentlich nur Vektorsymbole. Aber wir brauchen stattdessen ein Bild. Was wir also tun können, ist, dass wir hier mit dieser Option zu unserer Master-Komponente zurückkehren können. Lass uns den ganzen Weg hierher gehen. Lassen Sie uns wie dieses Beispielprofilbild, das wir von hier oben in unserer Navigation tippen oder eine Navigations-Sidebar haben , und ich werde uns gehen und diesen Avatar durch ein Bild ersetzen, und dann lassen Sie uns einfach voran gehen und die gleiche Größe anwenden. Das ist also 40 mal 40. Also werde ich behaupten, dass 40 mal 40 und dann die Portionen hier sind, na ja, perfekt, und wir können sogar voran gehen und diese Schicht verstecken. Wir brauchen es nicht wirklich da drin, bis wir ein Bild anwenden wollen. Und jetzt gehen wir voran und kopieren Sie dies einfach mit Befehl C und wenden Sie es an hier ist niedrig für wählen Sie diesen Avatar und tun Befehl V. Und nur um sicherzustellen, dass das Wort perfekt. Gehen wir nun zurück zu unseren Web-Mock Ups, und jetzt haben wir auch hier eine Bildebene. Also lassen Sie uns voran und öffnen Sie unseren Stecker wieder für die Jagd für Sie, und lassen Sie uns voran und wählen Sie diesen Rahmen hier. Nun gehen wir weiter und gehen in diesen Rahmen hier und wählen Sie das Bild aus. Und jetzt gehen wir voran und zeigen tatsächlich das Bild für diese 1. 1 hier und lassen Sie uns voran und unhygienisches E-Bild aus der ersten Reihe hier gehen . Also lassen Sie uns jetzt voran und wenden zufällige Avatar an unseren jüngsten Kunden. Hier s so lassen Sie uns voran und wählen Sie das Bild. Stellen Sie sicher, dass Sie gehen und wählen Sie tatsächliche Bild und nicht den Rahmen, und dann tun Sie Avatar hier oben und wählen Sie Male Perfect. Und dann, wenn Sie jetzt zum nächsten gehen, stellen Sie sicher, dass Sie den Avatar erneut auswählen. Wählen Sie das Bild, und dann, basierend auf dem Geschlecht hier, können wir unangemessenes Bild wählen. Und dann gehen wir weiter und rennen. Versteck das auch. Perfekt. Gehen wir in diesen Avatar auf Verstecken Sie das Bild, wählen Sie Bild und tun Mail hier. Denken Sie nun daran, dass Ihre Namen hier anders sein könnten, also gehen Sie weiter und auf die Bilder. Die Avatar-Bilder entsprechend. Und lassen Sie uns einfach voran und wiederholen Sie das den ganzen Weg durch. Also muss ich duplizieren, damit ich einfach voran gehen und erneut klicken kann, um ein anderes Bild zu erhalten. Perfekt. Jetzt fängt das an zu schauen, Riel. Jetzt haben wir nur die Befehle hier drüben. Also, was Sie dafür tun können, wie Sie voran gehen und doppelklicken Sie in den Text hier. Also wählen Sie diesen Text hier, gehen Sie zum Text und wir können einfach Zahlen machen. Aber lasst uns das hier ändern. Wir wollen, dass wir keine Dezimalstellen machen wollen. Und vielleicht wollen wir einen Zahlenbereich in den Zelten machen, damit es realistischer ist. Gehen wir zurück und fügen dann Zahlen hinzu. Perfekt. Also, wenn wir das jetzt für alle tun wollen, können wir einfach weitermachen. Und wie wir es vorher getan haben, wählen Sie mit unseren Vornamen hier jeden Text für die Bestellungen aus. Gehen Sie voran und wählen Sie Zahlen, doppelt generieren Zufallszahlen überall. Und dann können wir eins nach dem anderen hier bei Bestellungen gehen, den Textaufträgen. Und dann, um die Dinge leichter zu machen, können wir einfach weitermachen und was? Wählen wir einfach die Bestellungen hier und bei ihrer Verwendung mit Copy and Paste aus? Jetzt können Sie feststellen, dass das Textfeld hier in Bezug auf die Höhe super klein ist, also könnten wir definitiv zurückgehen und das ändern, um es ein wenig mehr Höhe zu geben, so dass es einfacher ist, mit zu arbeiten. Aber ich denke, das funktioniert hier vorerst. Lassen Sie uns voran und schließen Sie dies jetzt, wenn ich nur ein wenig verkleinere, ich denke, das sieht viel besser aus mit echten Daten hier hinzugefügt. jetzt Gehen wirjetztweiter und machen das Gleiche für eine Anforderungsseite. Aber dieses Mal werde ich einfach vorwärts gehen. Ich denke, mittlerweile bekommst du die Idee, weil es wirklich der gleiche Prozess ist. Eine Sache, die ich sagen möchte, ist, dass eine große Abkürzung hier Befehl und Shift sein würde. Wie zusammen Befehl können wir einzelne Elemente innerhalb einer Komponente oder innerhalb von auswählen, ah Gruppe hier, und Verschiebung ermöglicht es uns, mehrere auszuwählen. Das ist also sehr praktisch. Ich empfehle das definitiv, um diesen Prozess ein wenig schneller zu machen. Alles klar, jetzt denke ich, ich habe einige Beispieldaten, und hier sieht das gut aus. Ich möchte einige coole Dinge über das automatische Layout erwähnen. Sie können hier auf jeden Fall ein Element auswählen und verschieben. Also, wenn Sie möchten, zum Beispiel, diese spezifische Straße die 3. 1 hier sein. Sie können das tun, oder Sie verschieben es nach unten, also ist es viel einfacher, Dinge jetzt zu bewegen, wenn ich hier auf diese Seite gehe, wir haben nicht ganz hier draußen benutzt, aber wir können etwas Ähnliches tun. Wenn er mehrere Gegenstände zusammenhält, können wir Dinge tun, wie etwa die Erhöhung des Abstands. Wenn wir hier über diese rosa Linie schweben und nach oben und unten ziehen, können wir sie auch mit diesem kleinen Kreis austauschen, der es auch ein wenig einfacher macht, Dinge zu bewegen . Und das ist, wenn Sie nicht ganz auf diesen Rahmen angewendet haben. Eine andere Sache, über die ich völlig erwähnen möchte, ist, dass Sie es nicht mit Einschränkung verwenden können . Sie sind völlig andere Konzepte, und Sie können sie nicht zusammen verwenden. Und jetzt kommt das zu dem Schluss, unser Web verspottet hier oben. Das wäre wirklich schönes Jahr, wenn unsere Aufschläge auch mit dem mobilen Jahr funktionieren würden. Wenn es also reaktionsschnell war und es auf einem mobilen Gerät funktioniert, wäre das wirklich ideal für den Kunden und seine Kunden. Als Übung überlasse ich Ihnen das, um auch eine mobile Version zu entwerfen. Wenn Sie möchten, aber als Ressource, werde ich die Vollversion verlassen, einschließlich einer mobilen Version, und könnte definitiv diese Ressource herunterladen und überprüfen Sie es auch. 9. Version: Wie ich schon am Anfang des Kurses erwähnt habe,ist eines der schönen Dinge über Stigma, dass es automatisch Ihre Arbeit spart. Wie ich schon am Anfang des Kurses erwähnt habe, So gibt es wirklich keine Notwendigkeit, Befehl zu drücken, speichern oder steuern sicher, um Ihre Arbeit zu speichern. Eine andere coole Sache daran ist, dass Stigma automatisch eine Art Timeline für Ihre Datei hier als auch erstellt . Eine Reihe von anderen Anwendungen tun dies auch wie Google Sheets und sogar Seiten auf dem Mac. Wenn Sie also hier zu Ihrem Dateinamen gehen und auf den kleinen Pfeil klicken und dann voran gehen und Show Overs in der Geschichte hier und dann hier drüben auswählen, werden Sie alle automatischen Speicherungen sehen, die diese Figment über die Zeitachse gemacht hat. Also, das ist mein neuestes alles zu sparen. Aber wenn ich auf einen anderen klicke, kann ich sehen, dass dies direkt vor dem Hinzufügen meiner Beispieldaten ist. Und dann, wenn ich gehe, kann ich noch sehen, dass dies direkt bevor ich die Anfragen hinzugefügt habe. Seite s. Das ist also wirklich schön, denn falls Sie einige Änderungen vornehmen möchten oder Sie zu einer bestimmten Version zurückkehren möchten , die Sie hatten, können Sie voran gehen und klicken Sie auf die drei Punkte hier und entweder diese Version benannt, so dass Sie kommen Sie zurück oder stellen Sie diese Version wieder her, so dass diese Version die aktuelle Version wird. Falls Sie die seitdem vorgenommenen Änderungen loswerden möchten, können Sie den Link sogar kopieren und den Kunden oder Teams diese Version Ihres Designs anzeigen. Eine Sache, die Sie beachten sollten, ist, dass die kostenlose Version nur 30 Tage Versionsgeschichte gibt . Ich gehe einfach zurück zu diesem hier, was die neueste ist. Und Sie können auch eine Version manuell hinzufügen, indem Sie hier oben gehen und Ihnen den Titel geben, so dass ich nicht einmal beschreiben kann, was sich hier geändert hat und dann weiter gehen und speichern. Und dann würde das dieser aktuellen Version den Namen hier drüben so ziemlich cool geben. Wenn Sie hier den Verlauf Ihrer Datei durchsuchen möchten und ich nur den Escapee benutze, kann ich einfach voran gehen und aus diesem Versionsverlauf herauskommen. Und das ist sehr praktisch und sehr nützlich auf. Eine der coolen Sache daran ist, dass Sie immer zur Datei und sicher zur Versionsgeschichte gehen können , wo das auch die Änderungen speichern, die Sie bis jetzt als neue Version, Geschichte sowie ziemlich cool gemacht haben Geschichte sowie . 10. Was kommt als Nächstes?: Alles klar, herzlichen Glückwunsch zum Abschluss des Webdesign-Kurses mit Sigma. Während des Kurses lernen wir, wie man eine schöne, einfache Web-Anwendung für unseren Kunden, Clean Känguru und dort Wäschereien entwirft. Und was also? Sex für dich. Whoa, es gibt ein paar Dinge, die du von hier aus erledigen kannst. Die erste 1 wird sein, einen Prototyp für Ihre Webanwendung zu erstellen, die Sie entwickelt haben. Jetzt habe ich auch einen Prototyping-Kurs hier auf Skill-Anteil. Wenn Sie also daran interessiert sind, zu lernen, wie Sie einen echten Prototyp aus Markierungen wie diesen erstellen , können Sie sich das definitiv ansehen. Eine andere Sache, die Sie tun könnten, ist eine mobile, freundliche Version unseres Wetters zu entwerfen . Wenn Sie sich erinnern, gebe ich Ihnen das als Übung. Also zögern Sie nicht, diesen Schritt zu tun, wenn Sie möchten. Ansonsten ist in der Ressource für diesen Kurs, Sie auch in der Lage, meine Version der fertigen Mock ups zu finden, die auch eine Seite enthält, die eine mobile freundliche Version für die Designs als auch zeigt. Also zögern Sie nicht, sich darauf zu beziehen, während Sie Ihre eigene mobile Version entworfen haben. Auch, wenn Sie an Marketing interessiert sind. Fühlen Sie sich frei, einige Marketing-Material für ein sauberes Känguru zu begrüßen. Dies wird eine gute Gelegenheit sein, unser Wetter zu präsentieren. Oder, wenn Sie das Handy nehmen, Sie sind Ihre X-Kurse. Nun, Sie werden in der Lage sein, einige Marketing-Inhalte zu erstellen sauber zeichnen und was sie tun was ihre Anwendung tut und wie kann das Leben der Menschen verändern. Jetzt werde ich in Zukunft einen Kurs für adäquates Marketingmaterial für Ihre Kunden machen . Wenn Sie also freiberuflich arbeiten oder in einem Unternehmen oder in Ihrem eigenen Unternehmen arbeiten undMarketingmaterial erstellen möchten,sind Marketingmaterial erstellen möchten, diese Gerichte perfekt für Sie, also halten Sie Ausschau nach diesem Kurs, denken Sie daran, wie immer, können Sie mich bei hallo clever bei gmail dot com kontaktieren. Ich würde gerne alle Fragen beantworten oder Feedback zu Designs geben, die Sie erstellt haben , so zögern Sie nicht, uns jetzt zu kontaktieren. Mit dem besagten, herzlichen Glückwunsch wieder zum Abschluss dieses Kurses. Ich freue mich darauf, Sie in einer Zukunft zu sehen