UI/UX Grundlagen für die Gestaltung der Website in Figma 2022

1. Einführung: Hallo und willkommen in deinen Zellen. Der beste Ort, um UI-UX-Design und Prototyp zu lernen. In diesem Kurs werden wir eine reale Website erstellen, deren Prototyp in Figma mit neuesten Funktionen und Designästhetik ist. Mein Name ist, sie hat seltsam und ich bin UX-Designerin. Mein Co-Instruktor ist Show Hagar und er ist ein UI-Designer. Und wir haben mehr als zehn Jahre Erfahrung in der Designbranche. In diesem Kurs zeigen wir Ihnen, wie Sie in Figma eine Website von Grund auf neu erstellen Der Kurs ist in vier Abschnitte unterteilt. Schnittpunkt, Figma, Übersichtsbereich, UI, UX-Bereich und Prototypbereich. Im Einführungsabschnitt sehen wir einen kleinen Überblick über diesen Kurs und wie Sie die Übungsdateien im Figma-Übersichtsabschnitt verlieren können Übungsdateien im , um zu sehen, was Figma ist und wie Sie seine Funktionen verwenden können. Und im UI- und UX-Bereich beginnen wir mit der Erstellung und Strukturierung unserer Website für die Lieferung von Lebensmitteln. Und am Ende verbinden wir alle Frames miteinander. Es sieht also aus wie eine echte Website. Und zuletzt werden wir sehen, wie wir unsere Website mit anderen Teammitgliedern oder Stakeholdern teilen können. Wir haben Ihnen kurzerhand viel zu zeigen . Lass uns anfangen. 2. Verwendung der Übungsdateien: In diesem Video zeigen wir Ihnen, wie Sie mit den Übungsdateien beginnen können. Die Übungsdateien für diese Vorlesung sind in dieser Vorlesung enthalten . Definiert, dass wir die Sigma-Assets-Datei hochgeladen haben. Es enthält alle im Kurs verwendeten Assets. Bitte laden Sie diese Datei herunter, damit wir unsere Reise fortsetzen können , indem wir eine reale Website in Figma erstellen. Diese Übungsdatei enthält keine Figma-Datei für Papa. Folgen Sie uns einfach durch diesen Kurs. Ihr könnt also verstehen, wie ihr euer eigenes Figma-Projekt erstellen könnt. Das ist alles für dieses Video. Wir sehen uns im nächsten Modul. 3. Was ist Figma?: Sigma ist eine browserbasierte UI-UX-Designanwendung und hauptsächlich ein webbasiertes Prototyping-Tool mit zusätzlichen Offline-Funktionen, die durch Desktop-Anwendungen für macOS und Windows ermöglicht werden. Es ist derzeit das führende Interface-Design-Tool der Branche. Hier ist die Frage, es gibt viele andere Tools wie Adobe XD, Sketch, Marble und viele andere, als warum wir Figma verwenden? Die Antwort ist, dass für andere Software eine Lizenz erforderlich ist und wir sie kaufen müssen. Sigma ist dagegen frei verfügbar. Und Sie können einfach auf die Website Sigma.com gehen , sich anmelden und Figma überall und jederzeit nutzen. Weil es sich um eine webbasierte Anwendung handelt. Obwohl die Dextro-Version auch verfügbar ist. Aber es kommt darauf an. Sie, entweder Sie möchten es online oder offline verwenden. Figma ist sehr einfach zu erlernen. Und wenn Sie es versuchen, können Sie Figma in nur zwei Tagen lernen. Und innerhalb von sieben bis zehn Tagen kannst du Figma meistern. Das Beste an Sigma ist, angenommen, Sie reisen ein anderes Land und haben Ihren Laptop nicht dabei. Sie können ganz einfach auf Ihre Figma-Dateien zugreifen, indem Sie sich über einen anderen Laptop beim Figma-Webportal anmelden sich über einen anderen Laptop beim Figma-Webportal und problemlos auf alle Ihre Kämpfe zugreifen. Jetzt denke ich, dass ihr ein bisschen Wissen über Sigma habt. sehen uns im nächsten Video, in dem wir sehen werden, wie man online ein Figma-Konto erstellt. 4. Registrieren Sie sich für Figma: Um sich bei Figma anzumelden, gehen Sie einfach auf figma.com und klicken Sie auf Hier registrieren. Geben Sie einfach Ihre E-Mail-Adresse und Passwort ein und klicken Sie auf Konto erstellen. Sie können sich auch mit Ihrem Google-Konto anmelden. Nachdem Sie auf Registrieren geklickt haben, Sie nach meinem Namen und meiner Arbeit gefragt, geben Sie einige Daten ein. Und wenn Sie der Meeting-Liste von Figma beitreten möchten, können Sie dieses Kontrollkästchen aktivieren. Im Moment lebe ich es. Bearbeiten Sie dies und klicken Sie anschließend auf Konto erstellen. Jetzt ist unser Figma-Konto erstellt. Es ist Zeit, ein Team zu meiner Figma hinzuzufügen. Ich werde dir das Exalts-Team schreiben. Denken Sie daran, dass ein Team viele Mitglieder hat , sodass Sie problemlos mit ihnen zusammenarbeiten können. Das besprechen wir später. Jetzt klicken Sie einfach auf Weiter. Du kannst es auch später machen. Derzeit gibt es zwei Pläne für Figma. Wählen Sie den Plan, der zu Ihnen passt. Aber wenn Sie ein Anfänger sind, schlage ich vor, dass Sie den Starterplan wählen. Und jetzt ist unser Figma-Konto erfolgreich eingerichtet. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 5. Einrichten von Schriftarten in figma: In diesem Video werden wir lokale Schriftarten in unserer Figma aktivieren. Andernfalls haben Sie keine große Auswahl, wenn Sie mit vorhandenen Schriftarten arbeiten . Und auch wenn Sie Dinge wie Skizzendateien importieren, funktioniert der Text möglicherweise nicht und sieht möglicherweise nicht richtig aus. Wenn Sie in Figma auf der Website sind, sind Sie bereits angemeldet. Gehen Sie in die obere linke Ecke , wo sich die vielen Möglichkeiten befinden, und gehen Sie zu Einstellungen. Hier unten können Sie sehen, dass wir einige lokale Schriftarten haben , die derzeit nicht standardmäßig aktiviert sind . Klicken Sie auf Installer herunterladen , um die lokalen Schriftarten zu aktivieren. Das wird je nach Betriebssystem heruntergeladen . Es wird eine kleine Datei heruntergeladen. Was Sie tun werden, ist, das im Wesentlichen zu öffnen und zu installieren. Ich sehe, dass ich das Paket genau hier habe. Also lass uns das installieren. Und Sie werden jetzt sehen, dass lokale Schriftarten aktiviert sind. Ich habe jetzt viele Schriftarten in meiner Figma verfügbar. Andernfalls arbeiten Sie mit weniger Schriftarten. Jetzt können Sie zu den letzten Jahren zurückkehren und die ganze Gewalt sehen. Im nächsten Schritt werden wir den Figma-Arbeitsbereich verstehen. Wir sehen uns also im nächsten Video. 6. Den Arbeitsbereich verstehen: Willkommen zurück. In diesem Video werden wir den Arbeitsbereich oder Figma verstehen. Das ist unsere Homepage. Standardmäßig. Figma gibt uns drei Projekte. Sie können es behalten oder löschen. Es basiert vollständig auf Ihrer Wahl. Als nächstes haben wir hier oben rechts zwei Möglichkeiten. Diese Importoption wird verwendet, um verschiedene Figma-Projekte direkt in Figma zu importieren. Sie können Ihre Skizzendateien auch importieren, Sie können Ihre Skizzendateien auch importieren indem Sie auf dieses Importsymbol klicken. Wir haben ein Plus-Symbol. Klicken Sie einfach auf dieses Symbol , um eine neue Datei zu erstellen. Hier oben links haben wir eine Werkzeugleiste. Es enthält verschiedene Werkzeuge wie Rechteck, Ellipse, Stiftwerkzeug. Mit diesen Werkzeugen können Sie verschiedene Formen zeichnen. Darunter befindet sich die Registerkarte „Ebenen“. Hier siehst du alle deine Ebenen. nächste Registerkarte ist der Asset-Stempel. Hier können Sie alle Ihre Assets, die Sie während des Projekts verwenden, speichern und später mit Ihren Teammitgliedern teilen. In der Mitte haben wir unsere Leinwand, wir unsere Kunsttafeln erstellen und mit ihnen arbeiten können. Denken Sie daran, dass Kunsttafeln in Figma jetzt Rahmen genannt werden. In den kommenden Lektionen, in denen ich Rahmen sage, bedeutet das, dass ich über Art Boards spreche. Danach haben wir auf der rechten Seite unser Eigenschaften-Panel. Hier. Sie können die Eigenschaften verschiedener Elemente ändern. Derzeit macht es nichts. Aber wenn ich hier auf der Leinwand ein Rechteck zeichne, werden Sie sehen, dass alle Eigenschaften dieses Rechtecks jetzt sichtbar sind. Als nächstes oben rechts haben wir einen Teilen-Button, um dieses Projekt mit anderen Teammitgliedern oder Kunden zu teilen . Wir haben auch eine Wiedergabetaste , um eine Vorschau unseres Designs und eine Zoom-Schaltfläche, um die Kunsttafel zu vergrößern oder zu verkleinern. Und das bringt uns zum Ende dieses Videos. Wir sehen uns im nächsten Video. Wir werden sehen, wie wir unsere erste Datei in Figma einrichten. 7. Einrichten einer ersten Datei in figma: Willkommen zurück. In diesem Video richten wir unsere erste Datei in Figma ein, um eine Datei einzurichten. Erstellen Sie zunächst eine neue Datei. Und hier oben in der Mitte, benannte das erste Projekt in dein Teamprojekt um. Benennen Sie danach diese Datei ohne Titel die BFF Town-Website um. Indem du darauf klickst. Sigma-Projekte werden in Frames erstellt. Um einen Rahmen zu erstellen, drücken Sie einfach die F-Taste auf Ihrer Tastatur, oder klicken Sie hier oben links und wählen Sie Rahmen. Danach. Hier auf der rechten Seite haben wir viele Optionen für Frames. Wir können auch verschiedene Apps für Telefone, Tablets, Web- und Social-Media-Posts erstellen . Aber für diesen Kurs werden wir mit dem Webscreen arbeiten. Also müssen wir Web 1920 mal 1080 Frame wählen. Also klicken Sie einfach darauf. Und jetzt ist unser Rahmen erstellt und so können Sie eine Datei in Figma einrichten. sehen uns im nächsten Video, in dem wir sehen werden, wie wir mit der Erstellung unserer Website beginnen können. 8. Homepage UI: Willkommen zurück. In diesem Video beginnen wir der Erstellung der ersten Seite unserer Website , der Homepage. Erstellen Sie also zunächst einen Rahmen von 1920 x 1080, indem Sie die F-Taste auf Ihrer Tastatur drücken. Jetzt richten wir unser Website-Raster ein. Website-Raster ist eine visuelle Struktur , die verwendet wird, um Komponenten eines Webseitendesigns wie Topographie, Bilder, Videos und andere Elemente zu organisieren wie Topographie, Bilder, . Traditionell wird eine Gitterstruktur verwendet, um den Entwurfsraum gleichmäßig in eine Reihe vertikaler Stützen zu unterteilen . Um ein Raster zu erstellen, wählen Sie einfach den Rahmen aus und klicken Sie auf die Rasteroption. Ändern Sie von hier aus die Ausrichtung in Spalten. Und die Zählung, rechts, 12. Spalten mit einem Rand von 375 von links und rechts. Und die Rinne von 30 Pixeln. Rinne ist im Grunde der Innenraum zwischen den Säulen. Danach fügen wir Lineale hinzu. Drücken Sie also einfach Shift R der Tastatur und fügen Sie zwei Lineale hinzu, eines auf der linken Seite und eines auf der rechten Seite. Diese Herrscher werden uns bei der Strukturierung unserer Website helfen . Fügen Sie danach ein Rechteck von ca. 120 Pixeln hinzu. Jetzt füge ich das Logo und die Navigationsleiste hinzu. Kopieren Sie einfach das Logo aus Übungsdateien und fügen Sie es hier ein. Ändern Sie es auf etwa 150 und platzieren Sie es richtig hier. Drücken Sie nun die T-Taste und schreiben Sie nach Hause über Menü und Kontakt in der Navigationsleiste. Die Schriftart, die wir in diesem Projekt verwenden, ist offen um die Textebene mit einem Innenabstand von 40 Pixeln in der Mitte zu platzieren . Fügen Sie nun unter dieser Registerkarte Start einen Basiswert von zwei Pixeln hinzu und ändern die Farbe der Textzeile in diese rote Farbe. Fügen Sie danach Textebenen hinzu und benennen die ersten beiden Ordnungsakte und die zweite 20800 dreifache um, verdreifachen Sie sich, um nun ein Rechteck von etwa 40 mal 40 hinzuzufügen. Ändern Sie den Wasserradius 28 und seine Farbe auf unser Team, gelbe Farbe. Und platziere es hier. Erstellen Sie eine Kopie davon und verschieben Sie sie mit einem Innenabstand von zehn Pixeln nach rechts . Jetzt fügen wir hier Icons hinzu. Kopieren Sie einfach das Korbsymbol und das Benutzersymbol aus den Übungsdateien und legen Sie sie hier ab. Ändern Sie hier den Abstand zwischen diesem ersten Rechteck und diesem Text auf 30 Pixel und richten Sie die gesamte Navigationsleiste richtig aus. Jetzt lass uns hier runter gehen. Wir werden unser Website-Banner hinzufügen. Zeichnen Sie dafür ein Rechteck von etwa 1920 mal 830. Ändern Sie die Farbe in Schwarz und fügen Sie eine radiale Unschärfe dieser Farbe über diesem Rechteck hinzu. Diese radiale Unschärfe erzeugt einen schönen Spotlight-Effekt. Jetzt füge ich Bilder über diesem Rechteck hinzu. Kopieren Sie also die Bilder aus Übungsdateien und platzieren Sie sie wahrscheinlich hier. Drücken Sie danach die T-Taste und schreiben Sie die besten Burger der Stadt, was der Titeltext ist. Platziere es richtig. Jetzt fügen wir hier eine Call-to-Action-Schaltfläche hinzu. Zeichnen Sie dazu ein Rechteck um 20 mal 58. Ändern Sie den Eckenradius auf zehn. Platziere es unter dem Text. Schnappen Sie sich nun das Textwerkzeug und schreiben Sie, lesen Sie mehr und richten Sie es an dieser Schaltfläche richtig aus. Jetzt lass uns hier runter gehen. Zeichne ein Rechteck von etwa 1920 mal 540. Ändere seine Farbe in diese rote Farbe. Fügen Sie danach ein Bild über diesem Rechteck hinzu. Nehmen Sie also das Bild aus der Übungsdatei und legen Sie es über dieses Rechteck. Und dann ändere die Opazität auf etwa 10%. Schnappen Sie sich nun den obigen Titeltext, bewegen Sie ihn nach unten und ändern Sie die Schriftart auf 50 Pixel und benennen Sie ihn erneut um. Schnappen Sie sich eine Kopie dieses Textes, bewegen Sie ihn nach unten und ändern Sie diesen Text in Absatzdummy-Text. Mit dem oberen Rand von zehn Pixeln. danach auf der rechten Seite ein Rechteck von etwa 365 mal 375 und platzieren Sie es hier. Ändern Sie die Farbe in unsere Themenfarbe. Jetzt einfach ein wichtiges Bild aus Übungsdatei und platziere es hier richtig. Gehen wir hier runter. Zeichne einfach ein Rechteck von etwa 1920 mal 1287. Ändert die Farbe in diese helle Farbe. Nehmen Sie danach diesen obigen Text bewegen Sie ihn mit einem oberen Rand von 100 Pixeln nach unten. Benennen Sie es in beliebte Artikel um und ändern Sie seine Farbe in diese rote Farbe. Zeichnen Sie danach ein Rechteck von etwa 270 bis 70. Ändern Sie den Grenzradius auf zehn. Und dann drücken Sie die T-Taste und den rechten Produktnamen. Erstellen Sie eine Kopie davon und verschieben Sie sie mit einem oberen Rand von fünf Pixeln nach unten und benennen Sie sie in Preis um. Kopieren Sie jetzt einfach das aktuelle Element aus der oberen Leiste. Verschieben Sie es vor diesem Text nach unten und skalieren Sie es auf etwa 40 mal 40. Richtet sie richtig aus. Machen Sie jetzt sieben Kopien davon und ordnen Sie sie entsprechend an. Importieren Sie danach Bilder aus den Übungsdateien und platzieren Sie sie entsprechend über diesen Rechtecken. Schnappen Sie sich jetzt einfach den obigen Überschriftentext. Verschieben Sie es mit einer oberen Marge von 150 nach unten und benennen Sie es in Best Deals um. Importieren Sie danach das bessere Bild aus den Übungsdateien und platzieren Sie es hier mit dem oberen Rand von 100 Pixeln. Nehmen Sie jetzt wieder diesen Artikeltext, verschieben Sie ihn nach unten und benennen Sie ihn in Kundenrezensionen um. Kopieren Sie danach das Texturbild aus den Übungsdateien und platzieren Sie es hinter dem Text der Kundenrezensionen. Zeichne hier einfach einen Kreis von etwa 155 mal 155. Fügen Sie danach ein Benutzerbild hinzu. Sie können diese Erweiterung verwenden , um Benutzerbilder zu importieren. Nun bitte dieses Benutzerbild mit einem oberen Rand von 50 Pixeln. Platzieren Sie jetzt einfach diesen Dummy-Bewertungstext und haben dieses Benutzerbild und diese Sternebewertungen ebenfalls vorgenommen. Kopieren Sie die Sterne aus den Übungsdateien. Gehen wir nun zu unserem Fußzeilenbereich. Zeichne also ein Rechteck von etwa 1920 mal 360. Ändern Sie die Farbe in unsere Themenfarbe. Kopieren Sie dann die Navigationslinks aus der Navigationsleiste und platzieren Sie sie hier. Importieren Sie jetzt einfach Social Media Icons aus den Übungsdateien und platzieren Sie sie hier. Richtet sie richtig aus. Und schließlich geben Sie diesen Copyright-Text ein. Die Telefone sollten 13 sein, normal. Und damit ist unser erster Bildschirm fertig. 9. Informationsseite: Willkommen zurück. In diesem Video erstellen wir die Seite „Über uns“. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn mit einem Innenraum von 200 Pixeln nach rechts . Und benenne es in Über uns um. Löschen Sie danach dieses Burgerbild und diese Schaltfläche, verkleinern Sie diesen Schieberegler auf etwa 1920 mal 250. Benennen Sie diesen Text danach in Über uns um. Die Schrift sollte 50 sein. Mittig ausrichten. Erstellen Sie eine Kopie dieses Textes und verschieben Sie ihn nach unten. Ändern Sie die Schriftart in 18 und schreiben Sie Breadcrumbs für diese Website. Danach verschiebe diesen zweiten Abschnitt nach oben. Ändern Sie den Titeltext in unsere Geschichte. Und die Absatztexte zu einem Dummy-Text. Ändern Sie diese Rechteckhöhe auf 730. Ersetzen Sie danach dieses Bild durch dieses Bild aus den Übungsdateien. Gehen wir hier runter. Zeichne ein Rechteck um 1920 mal 668. Fügen Sie danach einen Titeltext und benennen Sie ihn in unsere Dienste um. Platzieren Sie es mit einem oberen Rand von 100. Zeichne jetzt einfach drei Rechtecke von 360 mal 280. Ändern Sie ihre Körperbereiche auf zehn. Kopieren Sie das Symbol aus den Übungsdateien und platzieren Sie sie über diesen Rechtecken. Nehmen Sie danach eine Textebene und platzieren Sie sie über diesem ersten Rechteck. Ändern Sie die Schriftart in 24 und benennen Sie sie in Quality Food um. Erstellen Sie zwei Kopien dieses Textes und verschieben Sie sie in das zweite dritte Rechteck. Ändern Sie den zweiten Text in Originalrezepte. Und der dritte, zu schnelle Lieferung. Gehen wir nun hier runter und zeichnen ein Rechteck von etwa 1920 mal 729. Fügen Sie den Titel Meet Our Team hinzu. Schnapp dir jetzt einfach das Rechteckwerkzeug. Zeichnen Sie ein Rechteck von etwa 270 mal 270 mit den Randbereichen. Mit einem Randradius von zehn Pixeln. Drücken Sie bitte die T-Taste und den rechten Benutzernamen und die Bezeichnung. Diese Textebenen haben einen oberen Rand von 30 Pixeln. Erstellen Sie nun drei Kopien dieser Texte, Ebenen und Rechtecke und verschieben Sie sie mit gleichem Abstand nach rechts. Importieren Sie jetzt Kochbilder und benennen Sie ihre Bezeichnungen und Namen um. Von hier aus beschleunige ich den Prozess. Bewegen Sie zum Schluss diesen Fuß oder nach oben, und unser Bildschirm ist jetzt fertig. Wir sehen uns im nächsten Video. 10. Menüseite: Willkommen zurück. In diesem Video erstellen wir einen Menübildschirm. Kopieren Sie zunächst den vorherigen Bildschirm und verschieben Sie ihn mit einem Innenabstand von 200 Pixeln nach rechts. Und benennen Sie es in Menübildschirm um. Und ändere auch die Semmelbrösel. Löschen Sie jetzt einfach alles und zeichnen ein Rechteck von etwa 1920 mal 360 und ändern Sie seine Farbe in diese graue Farbe. Und danach füge einen Kreis von ungefähr einer fünfzig, einer fünfzig hinzu. Drücken Sie die T-Taste und schreiben Sie Deals. Erstellen Sie jetzt sieben Kopien davon und ordnen Sie sie ordnungsgemäß an. Fügen Sie danach Bilder von Menüpunkten über diesen Kreisen hinzu. Also kopiere die Bilder aus den Übungsdateien und bitte sie hier richtig. Danach gehen wir hier runter und fügen ein besseres Bild hinzu. Kopieren Sie das Bannerbild vom Startbildschirm und platzieren Sie es hier richtig. Danach gehen wir nach unten und fügen ein beliebtes Elementmenü hinzu. Kopieren Sie das also vom Startbildschirm und platzieren Sie es hier mit einem oberen Rand von 100 Pixeln. Danach werden wir dieses beliebte Elementmenü wiederverwenden und ihren Namen und ihre Bilder umbenennen. Es ist ein langwieriger Prozess. Also beschleunige ich das Video. Jetzt. Ich habe das gesamte Menü hinzugefügt. Jetzt ist unser Bildschirm fertig. Wir haben die gesamte Speisekarte hier hinzugefügt. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 11. Menüseite 1: Willkommen zurück. In diesem Video erstellen wir einen Menübildschirm. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn mit einem Innenabstand von 200 nach rechts. Und benennen Sie es in Menübildschirm eins um. Zeichne jetzt einfach ein Rechteck um 1920 mal 873 und kopiere das Pizzabild vom vorherigen Bildschirm und ändere es auf 530 mal 530 mit einem oberen Rand von 100 Pixeln. Fügen Sie danach einen Titel, Benutzerbewertung, Sterne, einen Preis und eine Beschreibung zum Produkt hinzu. Kopieren Sie nun die Sterne aus den Übungsdateien und platzieren Sie sie hier. Jetzt fügen wir Größe und Menge hinzu. Drücken Sie also die T-Taste und die rechte Seite, S, M, L. Drücken Sie also die T-Taste und die richtige Größe. Klein, mittel und groß. Zeichne einen Kreis von etwa 60 mal 60 und platziere ihn hinter dem kleinen. Kopieren Sie den Kreis und platzieren Sie ihn auch hinter mittlerem und großem Text. Ändern Sie diese Kreisfarbe von groß in gelb. Jetzt werden wir die Menge dafür hinzufügen. Zeichne zwei Rechtecke. Zwei sollten 47 mal 511 sein und 84 mal 51. Die Farbe des linken Endes und des rechten Rechtecks sollte grau sein, und das mittlere Rechteck sollte weiß sein. Fügen Sie jetzt einfach die Zählersymbole und die Menge hier hinzu. Danach schnappen Sie sich den Button von der Homepage und platzieren Sie ihn hier. Ändern Sie die Textgröße auf 23 und die Farbe auf Weiß. Jetzt lass uns hier runter gehen. Zeichne ein Rechteck von etwa 290 mal 70. Ändern Sie den Radius der oberen rechten und oberen linken Ecke auf acht und ändern Sie die Farbe in Rot. Drücken Sie nun die T-Taste und die richtigen Produktdetails hier drüben. Richtet sie richtig aus. Schnappen Sie sich eine Kopie dieser Schaltfläche und verschieben Sie sie nach rechts und ersetzen Sie den Text durch Bewertungen. Die Farbe sollte schwarz sein. Und löschen Sie dieses Rechteck , damit diese Registerkarten gleichmäßig ausbalanciert sind. Zeichnen Sie danach eine Linie mit einer Höhe von vier Pixeln unter diese rote Schaltfläche und ändern Sie ihre Farbe ebenfalls in Rot. Zeichnen Sie danach ein Rechteck von etwa 1920 mal 1466. Ändere seine Farbe in ein hellgraues. Fügen Sie nun einen Dummy-Text mit einem oberen Rand von 50 Pixeln hinzu. Kopieren Sie abschließend den Abschnitt „Beliebte Artikel“ von der Homepage und platzieren Sie ihn hier mit einem oberen Rand von 50 Pixeln. Und benannte die Überschrift auch um. könnte dir auch gefallen. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 12. Menüseite 2: Willkommen zurück. In diesem Video werden wir auch einen Menübildschirm erstellen. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn nach rechts. Jetzt habe ich einfach dieses rote Rechteck hierher gekehrt und die Textfarbe der Bewertungen in Weiß geändert. Und dieses Produkt ist farblich bis schwarz. Danach gehen wir nach unten und löschen diesen Detailtext. Und jetzt fügen wir hier Benutzerbewertungen hinzu. Kopieren Sie also die Bewertungssterne aus den Übungsdateien und fügen Sie sie hier mit einem oberen Rand von 50 Pixeln ein. Danach drücken Sie die T-Taste und rechten Kundennamen und das Datum. Ändern Sie den Text des Kundennamens in fett. Drücken Sie erneut die T-Taste und schreiben Sie den vom Benutzer überprüften Dummy-Text. Zeichnen Sie nun eine graue Linie unter dieser Bewertung mit dem oberen Rand von 20 Pixeln. Und schließlich, erstellen Sie eine Kopie dieser Bewertung und verschieben Sie sie nach unten. Und jetzt ist der Bildschirm fertig. Wir sehen uns im nächsten Video. 13. Bildschirm zum Warenkorb hinzufügen: Willkommen zurück. In diesem Video erstellen wir den Bildschirm „In den Warenkorb“. Kopieren Sie zunächst das vorherige Bild und verschieben Sie es nach rechts. Zeichnen Sie dann ein schwarzes Rechteck über den Bildschirm und ändern Sie seine Deckkraft auf fünfundsiebzig Prozent. Beachten Sie, zeichnen Sie ein Rechteck um 682 mal 553. Zeichnen Sie danach ein weiteres Rechteck darüber und ändern Sie den Eckenradius des ersten Rechtecks auf 20. Im zweiten Rechteck oben rechts und oben links auf 20. Fügen Sie danach ein Schließen-Symbol über diesem zweiten Rechteck hinzu. Und jetzt füge ein Häkchensymbol hinzu. Kopieren Sie das Häkchensymbol aus der Übungsdatei, drücken Sie die Taste T und schreiben Sie diesen Text hier. Die Schriftgröße sollte 23 fett und die Farbe sollte weiß sein. Fügen Sie jetzt einfach Produktdetails hinzu. Kopieren Sie die Details aus dem vorherigen Bildschirm und fügen Sie sie hier ein. Und zuletzt fügen Sie zwei Schaltflächen hinzu. Kopieren Sie die Schaltflächen aus dem vorherigen Bildschirm und ändern Sie diesen ersten Schaltflächentext, um mit dem Einkaufen fortzufahren. Die Schaltfläche Weiter, um zur Kasse zu gelangen, und die Farbe wird rot. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 14. Produktdetails Bildschirm: Willkommen zurück. In diesem Video erstellen wir den Bildschirm „Produktdetails“. Kopieren Sie also zuerst den Menübildschirm und verschieben Sie ihn nach rechts. Löschen Sie diesen Textabschnitt. Benennen Sie danach diese Menütexte in Warenkorb um. Und es sind Semmelbrösel nach Hause. Einloggen. Hier in der Navigationsleiste. Fügen Sie einen Mengenkreis über diesem Warenkorbsymbol hinzu. Gehen wir jetzt einfach nach unten und zeichnen ein Rechteck von etwa 565 mal 60 mit einem Randradius von 50. Ändern Sie die Farbe in Hellgrau. Und jetzt drücken Sie die T-Taste und rechts, Sie haben drei Artikel in Ihrer Einkaufskarte. Und danach gehen wir einfach unten und fügen Produktdetails hinzu. Es ist Menge mit dem Schieberegler. Es ist ein Preis und ein Löschsymbol. Fügen Sie eine graue Unterlage mit einem oberen Rand von 20 Pixeln hinzu. Richten Sie alle richtig aus. Wählen Sie jetzt einfach alle aus und duplizieren Sie sie zweimal mit einem Innenabstand von 20 Pixeln. Ändern Sie die Produktdetails des zweiten Drittels. Drücken Sie nun die T-Taste und schreiben Sie Zwischensumme und Versand. Danach bei ihren Werten. Und jetzt zeichne einfach eine Linie darunter mit dem oberen Rand von 20 Pixeln. Fügen Sie nun hier die Gesamtkosten hinzu. Und zum Schluss fügen Sie „Weiter einkaufen“ hinzu und gehen Sie zu den Schaltflächen Kopieren Sie diese Schaltflächen vom vorherigen Bildschirm und fügen Sie sie hier mit dem oberen Rand von 50 Pixeln ein. Bewege dieses Foto jetzt einfach nach oben. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 15. Login-Bildschirm: Willkommen zurück. In diesem Video erstellen wir eine Anmeldeseite. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn nach rechts und ändern Sie seinen Titel und seine Breadcrumbs in Login. Und danach löschen Sie den Körperabschnitt. Verschieben Sie nun dieses Login mit dem oberen Rand von 90 Pixeln nach unten. Ändern Sie die Farbe in Rot und benennen Sie sie um, um sich bei Ihrem Konto anzumelden. Drücken Sie danach die T-Taste und schreiben Sie die E-Mail-Adresse. Zeichne jetzt einfach ein Rechteck von etwa fünf bis 69 55 mit einem Randradius von acht Pixeln. Kopieren Sie diese E-Mail-Adresse und verschieben Sie sie in dieses Rechteck. Benennen Sie es in Platzhaltertext und ändern Sie auch seine Farbe. Wählen Sie nun dieses E-Mail-Feld aus und erstellen Sie eine Kopie davon. Verschieben Sie es mit dem oberen Rand von 25 Pixeln nach unten. Benennen Sie diese E-Mail-Adresse in Passwort und diesen Platzhalter in Sterne um. Erstellen Sie erneut eine Kopie dieses Passworttextes, bewegen Sie ihn nach unten und benennen Sie ihn um, um Ihr Passwort vergessen zu haben. Zeichne danach drei Rechtecke. Der erste sollte 569 mal 55 sein. Zweitens sollte der dritte Wert 269 mal 55 sein. Ändern Sie den Randradius dieser drei Rechtecke auf acht. Die Farbe des ersten Rechtecks wurde in Rot geändert , in Blau in diese Farbe. Drücken Sie nun die T-Taste und schreiben Sie Login auf die erste Taste. Loggen Sie sich mit Facebook auf der zweiten Schaltfläche ein. Und melden Sie sich bei Google auf der dritten Schaltfläche an. Füge jetzt Facebook - und Google-Symbole hinzu Kopieren Sie also die Icons aus den Übungsdateien und platzieren Sie sie hier richtig. Zum Schluss drücken Sie die T-Taste und schreiben Sie Register. Jetzt Text, seine Farbe sollte rot sein. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 16. Bildschirm anmelden: Willkommen zurück. In diesem Video erstellen wir eine Seite mit dem Anmeldebildschirm. Kopieren Sie also zunächst das vorherige Menü und verschieben Sie es nach rechts und ändern Sie seinen Titel bei Breadcrumbs, um sich hier anzumelden. Melden Sie sich in Ihrem Konto an, um sich bei der Kontoregistrierung anzumelden. Danach schnappen Sie sich diese Login mit Facebook- und Google-Schaltflächen , bewegen Sie sie nach oben und ändern Sie ihre Farbe in Hellgrau. Fügen Sie über diesen Feldern FirstName- und LastName-Titel hinzu. Und sie sind auch Platzhalter. Danach haben wir ein E-Mail-Feld. Und dann ändere dieses Passwortfeld in zwei Felder. Das erste sollte ein Passwort sein, und Sekunden sollten das Passwort erneut eingeben. Und jetzt zeichne zwei Rechtecke von etwa 21 mal 21 mit dem Grenzradius von zwei Pixeln. Drücken Sie nun die T-Taste und schreiben Sie, erhalten Sie Angebote und AGB-Texte vor diese Felder. Zuletzt wurde die Anmeldeschaltfläche umbenannt, um sich jetzt zu registrieren. Und damit ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 17. Checkout: Willkommen zurück. In diesem Video erstellen wir eine Checkout-Bildschirmseite. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn nach rechts und ändern Sie seinen Titel und die Breadcrumbs, um es auszuchecken. Erstellen Sie danach zwei Kopien dieses Textes für Kontoeinschränkungen und ändern Sie den ersten Text Rechnungsadresse und den zweiten in die Bestellübersicht. Die dritte Zahlungsmethode. Jetzt füge ich unter Rechnungsadresse einige Felder hinzu. Sie können die Felder aus den vorherigen Bildschirmen kopieren und hier platzieren. Jetzt ändere ich die Feldnamen. Von hier aus beschleunige ich den Prozess. Danach. Fügen Sie unter Audiozusammenfassung das Produktbild, den Produktnamen, die Menge und den Preis hinzu. Fügen Sie außerdem Zwischensumme, Versand und Gesamtkosten hinzu. Gehen wir jetzt runter. unter dieser Zahlungsmethode Fügen Sie unter dieser Zahlungsmethode Optionsfelder, Kredit-Slash, Debitkartendetails, Geschäftsbedingungen, Häkchen und die Schaltfläche Bestellung aufgeben mit roter Farbe hinzu. Richten Sie jetzt alle richtig aus und unser Bildschirm ist fertig. Wir sehen uns im nächsten Video. 18. Bestellen Sie den Bildschirm bestätigen: Willkommen zurück. In diesem Video erstellen wir eine automatisch bestätigte Bildschirmseite. Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn nach rechts und benennen Sie ihn in Auftragsbestätigung um. Ändern Sie auch alle Semmelbrösel. Löschen Sie danach alle diese außer diesem Text der Rechnungsadresse und benennen Sie ihn in Ihre Bestellung um. Fügen Sie danach ein Häkchensymbol hinzu. Richten Sie sie beide zentral aus und ändern Sie die Farbe in Grün. Drücken Sie danach die T-Taste und fügen Sie einen Benutzernamen und eine Bestellbestätigungsnachricht hinzu. Zeichne jetzt einfach zwei Rechtecke von 440 mal 170 mit einem Grenzradius von zehn. Richten Sie sie horizontal mittig aus Ändern Sie die Farben des Rechtecks in Gelb. Und jetzt fügen Sie im ersten Rechteck die Bestellnummer und das Bestelldatum hinzu. zweite Lieferadresse Fügen Sie als zweite Lieferadresse die Details der Lieferadresse hinzu. Und jetzt ist der Bildschirm fertig. Wir sehen uns im nächsten Video. 19. Kontaktieren Sie uns: Willkommen zurück. In diesem Video erstellen wir eine Kontaktseite. also zunächst Kopieren Sie also zunächst den vorherigen Frame und verschieben Sie ihn nach rechts und benennen Sie ihn um, um uns zu kontaktieren. Ändern Sie die Farbe der Kontaktnavigationsleiste auf Rot. Jetzt füge ich hier ein Kontaktformular hinzu. Kopieren Sie dazu die Felder aus den Checkout-Bildschirmen und fügen Sie sie hier ein und benennen Sie sie ebenfalls um. Und auf der rechten Seite fügen Sie Telefonnummer, E-Mail-Adresse und Adresse hinzu. Kopieren Sie das Telefon, die E-Mail-Adresse und die Adresse. Ich kann aus den Übungsdateien schauen und sie hier richtig ablegen. Zum Schluss fügen Sie hier einen Senden-Button hinzu. Kopieren Sie die Belastung aus dem Prüfbildschirm und platzieren Sie sie unter diesem Nachrichtentextfeld und benennen Sie diese zu sendenden Bestelltexte um. Jetzt ist dieser Bildschirm fertig. Wir sehen uns im nächsten Abschnitt. Wir verbinden alle Bildschirme. 20. Prototyp: Willkommen zurück. Dies ist das letzte Video dieses Kurses. In diesem Video schauen wir uns an, wie wir die Frames miteinander verknüpfen können. Es sieht also aus wie eine reale Website und teilt es dann mit anderen Teammitgliedern und Stakeholdern. Hier oben rechts sehen Sie, dass es in drei Räder unterteilt ist. Entwurfsansicht, Prototypansicht und Inspektionsansicht. Diese Prototypansicht wird verwendet , um Verbindungen zwischen Frames herzustellen und die Verbindungen zwischen ihnen durch Interaktion zu definieren . Klicken Sie einfach auf diese Prototyp-Ansicht. Zoomen Sie heran und klicken Sie auf das erste Bild. Verbinden Sie danach diese Navigationsleiste mit relativen Seiten. Und die Animation sollte intelligent sein. Animieren. Verbinden Sie danach diese Schaltfläche „Mehr lesen“ mit etwa einem Bildschirm und lassen Sie die Animation intelligent animieren. Jetzt hier unter beliebten Artikeln, die nur mit einem Produkt verbunden sind, mit dem Detailbildschirm, mit intelligenter Animation. Verbinden Sie dann die Fußzeilennavigation allen Bildschirmen, wie wir sie mit der Navigation in der oberen Leiste verbunden haben . Danach gehen wir zum nächsten Bildschirm über, dem es um unseren Bildschirm geht. Wir haben die Navigation bereits verbunden . Wir müssen also nichts anderes tun. Verlassen Sie einfach den Bildschirm und fahren Sie mit dem nächsten Bildschirm fort, dem Menübildschirm. Verbinden Sie diese Kategorien hier mit jeder Kategorie auf der Seite. Dieser Pizza-Artikel zur Detailseite. Und die Animation sollte intelligent animiert sein. Gehen wir nun zum nächsten Bildschirm über, bei dem es sich um den ersten Menübildschirm handelt. Verbinden Sie hier die Schaltfläche In den Warenkorb mit dem Bildschirm In den Warenkorb. Und danach verbinden Sie diese Registerkarte Reviews mit dem nächsten Bildschirm mit der Animation von smart animate. Gehen Sie auf ähnliche Weise auf dem nächsten Bildschirm, dem Menübildschirm hier, in die gleiche Richtung dem Menübildschirm hier, in die Verbinden Sie diese Schaltfläche In den Warenkorb mit dem Bildschirm In den Warenkorb. Und dieses Produkt detaillierte Textbreite Menübildschirm eins. Danach gehen wir zur nächsten Königin über, dem Bildschirm In den Warenkorb. Verbinden Sie hier das Kleidungssymbol mit dem vorherigen Bildschirm. Und dann verbinden Sie diese Schaltfläche „Weiter einkaufen“ Breite, Menübildschirm. Diese Checkout-Schaltfläche mit dem Bildschirm mit den Details der Einkaufskarte für Produkte Gehen wir nun zum nächsten Bildschirm über, bei dem es sich um den Detailbildschirm für den Produkt-Einkaufswagen handelt. Verbinden Sie hier diese Tasten wie auf dem vorherigen Bildschirm. Aber dieses Mal verbinde das, gehe zur Kasse zu unserem Anmeldebildschirm. nun auf unserem Anmeldebildschirm Verbinden Sie nun auf unserem Anmeldebildschirm diesen Login-Button mit dem Checkout-Bildschirm. Und diese registrierten Texte , um den Bildschirm zu registrieren. In ähnlicher Weise verbinden Sie auf unserem Registrierungsbildschirm diese Registrierungsschaltfläche auch mit dem Checkout-Bildschirm. danach auf unserem Checkout-Bildschirm Verbinden Sie danach auf unserem Checkout-Bildschirm diese Schaltfläche „Bestellung aufgeben“ mit dem Bildschirm „Bestellung aufgeben“. Und schließlich verbinden Sie diesen Kontakt als Bildschirm Senden Schaltfläche mit der Startseite. Schließlich sind alle unsere Frames miteinander verknüpft. Um diese Verknüpfung zu überprüfen, drücken Sie einfach Control a. Und hier sehen Sie das Netzwerk der Interaktionen. Es ist Zeit, unsere Website zu betreiben. Klicken Sie einfach auf diese Vorschau-Schaltfläche. Und jetzt sehen Sie, dass alle unsere Bildschirme miteinander verbunden sind. Und es sieht aus wie eine echte Website. Um es nun mit den anderen Teammitgliedern zu teilen, klicken Sie einfach auf diese Schaltfläche Teilen. Hier. Sie können es zur Designüberprüfung oder einem Entwickler und vielen anderen Optionen zeigen . Ich wähle einfach jeden aus, der den Link bearbeiten kann. Klicken Sie abschließend auf Link kopieren und teilen Sie diesen Link einfach mit Ihren Teammitgliedern oder Stakeholdern. Sie können diese Datei auch teilen, indem Sie ihre E-Mails eingeben. Und das bringt uns zum Ende dieses Kurses. Wir hoffen, dass dir dieser Kurs gefällt. Wenn Sie Fragen zu diesem Kurs haben, Sie sich gerne an uns wenden. Wir sehen uns in einem anderen Kurs von Figma.