Figma UI Design: Erstellen Sie Schritt für Schritt eine Landingpage für einen Sneaker Store

1. Einführung: Ähm, hey, willkommen zu einem weiteren tollen Figma-Kurs mit mir, Wie immer freue ich mich, dass du hier bist. In diesem Kurs werden wir nun eine komplette Sneaker-Landingpage in Figma entwerfen , und ich werde dich Schritt für Schritt durch den Prozess führen, genau wie ich es bei einem echten Projekt tun würde ich bereits erwähnt habe, heiße ich Ken und ich bin Webdesigner und Pädagoge. Mein Ziel mit diesem Kurs ist es, Ihnen nicht nur zu zeigen , wie man Dinge gut aussehen lässt, sondern auch, wie man wie ein Designer denkt, wie man eine Webseite strukturiert, wie man Abschnitte erstellt und wie man etwas kreiert, das sich von oben bis unten poliert und modern anfühlt . Wir beginnen mit dem Heldenbereich und gehen dann die Kategorien, Werbeaktionen, Trendprodukte, Anmeldungen und sogar einen Mini-Instagram-Feed durch Werbeaktionen, Trendprodukte, Anmeldungen , bis wir eine vollständige Landingpage erstellt haben , die sauber ist und Ihrem Portfolio hinzugefügt werden kann. Dieses Landingpage-Layout wird auch dein Klassenprojekt sein. Es wird eine großartige Gelegenheit sein, einen echten Figma-Workflow zu üben , Ihren Stil zu zeigen und ein fertiges Werk zu haben, und ein fertiges Werk zu Sie teilen oder auf dem Sie aufbauen können Sie können der Landing Page sogar Ihren eigenen Twist und Kreativität verleihen , um sie einzigartig zu machen Nachdem das geklärt ist, sind Sie bereit , loszulegen? Weil ich es bin. Lass uns gleich eintauchen. 2. Klassenprojektdemo: Deshalb möchte ich Ihnen eine kurze Demo dessen zeigen , was wir im Laufe des Kurses bauen werden. Das wird dein Klassenprojekt sein. Bis wir mit diesem Kurs fertig sind, wirst du mit so etwas enden enden. Also werde ich einfach scrollen, du kannst sehen, dass wir einen schönen Heldenbereich mit zwei Call-to-Action-Buttons haben . Wir haben einen Bereich mit ausgewählten Produkten ausgewählten Kategorien, und der Benutzer kann klicken und zu dieser Kategorie wechseln. Ich habe vergessen, diese Kategorien zu kennzeichnen. Ich habe sie nur von der ersten dupliziert. Aber mach dir keine Sorgen. Wir haben einen ultimativen Rabattbereich. Sie können den Deal mit diesem Aufruf zum Handeln abschließen. Wir haben einen beliebten, heißen und trendigen Kick. Das soll mehr anzeigen sein, damit sie mehr sehen können Sie können auf die Seite mit den heißesten und trendigsten Kicks umgeleitet werden die Seite mit den heißesten und trendigsten Kicks Es gibt eine kurze Einführung in unsere Geschichte, und ich kann hier klicken, um zu lesen Lassen Sie sich hier ein Anmeldeformular für die Mailingliste unterschreiben. Wenn Ihre Fans, Ihre Kunden auf dem Laufenden bleiben möchten , was in Ihrem Geschäft passiert, können sie sich hier anmelden. Dann haben wir einen Instagram-Feed. Personen, die Schuhe tragen, die in Ihrem Geschäft gekauft wurden, können den Shop auf Instagram taggen oder im Instagram-Feed des Shops vorgestellt werden. Und wir haben eine nette Fußzeile, die wir einstellen , weil dieser Shop Handelsvertreter einstellt Es gibt noch eine Erinnerung daran, sich anzumelden. Wie Sie sehen können, ist dies eine nette, einfache, aber robuste Landingpage, eine moderne Landingpage. Und wenn wir mit der Arbeit daran fertig sind, werden Sie die Fähigkeiten erworben haben, jede beliebige Landingpage mit iGMA neu zu erstellen Weil mein Ziel mit diesem Kurs darin besteht, Ihnen einen brauchbaren Arbeitsablauf zu zeigen , Ihnen einen brauchbaren Arbeitsablauf und Ihnen die verschiedenen Tools und Funktionen mit denen Sie die meiste Zeit arbeiten werden Vor diesem Hintergrund denke ich, dass es an der Zeit ist, mit der eigentlichen Gestaltung der Landingpage fortzufahren . Also, wir sehen uns in der nächsten Lektion. 3. Heldenabschnitt: Also hier bin ich in meinem Armaturenbrett. Sie sollten sich an einem Ort wie diesem befinden, und nach der Erstellung Ihres Kontos sollte hier mindestens ein Team automatisch für Sie erstellt werden. Ich habe hier also ein Standardteam und es heißt Ken the Dons Team. Jetzt habe ich im Team von Ken the Don nur noch ein Standard-Teamprojekt. Wenn ich weitere Projekte haben möchte, muss ich zahlen, ich muss auf den kostenpflichtigen Plan umsteigen. Aber ein Projekt ist mehr als genug pro Team. Jetzt können wir in unserem Projekt drei Designdateien erstellen. Also werde ich auf dieses Pluszeichen klicken. Und das wird eine brandneue Designdatei öffnen , die keinen Titel hat Ich werde es eine Sneak-Store-Landingpage nennen. Treten Sie ein oder klicken Sie einfach irgendwo draußen. Und jetzt sind wir hier. Also das Erste, was ich erstellen möchte, ist ein Rahmen oder was ich gerne einen Bildschirm nenne. Wenn ich also dieses Tool hier unten auswähle und es nicht sichtbar ist, und es nicht sichtbar ist klicke einfach auf dieses Drop-down-Menü und wähle es aus dem Drop-down-Menü aus. Wählen Sie einen Rahmen aus Automatisch werden Ihnen verschiedene Vorlagen angezeigt , mit denen wir hier beginnen können. Und weil wir für den Desktop entwerfen, öffne ich die Desktop-Vorlagen und wähle die Desktop-Voreinstellung aus, die 14 x 40 x 1024 ist, 14 x 40 x 1024 ist, und das ist unsere Framegröße oder meine Bildschirmgröße. Lassen Sie uns nun ganz schnell zu unserer Vorschau wechseln. Wir wollen diesen Header erstellen. Wir haben dieses Logo hier. Dann haben wir die Suchleiste und unsere Nervenleiste. Mal sehen, wie man das erstellt. Fangen wir mit dem Logo an. Also werde ich zurück zu unserer Grafik wechseln und auch den Text auswählen. Klicken Sie auf eine beliebige Stelle innerhalb des Rahmens. Auf diese Weise wird die Textebene automatisch zum Frame hinzugefügt, dem Desktop-Frame, den wir zuvor hinzugefügt haben, und genau das sehen Sie hier. Wie Sie sehen können, ist jedes Element eine Ebene. Der Text ist eine Ebene und der Rahmen ist eine Ebene. Der Text befindet sich innerhalb des Rahmens. Also gebe ich Kick ein und wähle Outside aus. Ich werde sie einfach ziehen , solange das noch ausgewählt ist, ich gehe hier zur Schriftgröße und mache es. Lass es uns vielleicht auf diese Größe erhöhen. Lassen Sie uns das auch auf schwarze Schriftstärke ändern, interschwarz. Und ich möchte das auswählen und zur Füllfarbe gehen und ihr eine graue Farbe geben , einfach so Lassen Sie uns diesen Kick weiß machen, gehen wir zu Phil und wählen Weiß aus Machen wir also weiter und fügen das Hintergrundbild hinzu, damit wir zumindest das Logo sehen können . Also werde ich Strg+Shift K drücken, um ein Bild zu importieren. Und ich habe einen Assets-Ordner für Sie vorbereitet. Dieser Assets-Ordner wird unter diesem Videoplayer verfügbar sein. Laden Sie es einfach herunter, wenn Sie mitmachen möchten, es wird all diese Bilder enthalten. Hier ist der Hintergrund, den ich verwendet habe. Jetzt wähle ich dort die Ecke aus und ziehe sie an diese Stelle, lasse los, wähle sie aus , klicke und schicke sie zurück. Da haben wir's. Ich halte die Alt-Taste gedrückt und ziehe es. Um zu vermeiden, dass ich mich auf und ab bewegt, halte ich die Umschalttaste gedrückt, um es auf diese gerade Linie zu beschränken diese gerade Linie , und ich werde es genau dort platzieren Ich werde das auf 16 ändern . Größe 16. Lass es uns wieder normal und ich gebe ihm Farbe. Lass es mich vorerst einfach zu Hause nennen. Oder was haben wir hier? Oder wir haben Ladenkollektionen, Neuankömmlinge. Halten Sie also die Strg-Taste gedrückt und scrollen Sie mit einem Mausrad. Shop, lass mich die Größe einfach ändern. Was ich tun muss, ist, wenn es sich um ein solches Absatz-Lehrbuch handelt, können Sie zu Auto With wechseln, um es automatisch in einen einzeiligen Text umzuwandeln Und jetzt kann ich die Maustaste gedrückt halten und die Umschalttaste drücken, um Sammlungen in einer geraden Linie zu bewegen Sammlungen in einer geraden Linie Was haben wir hier? Neuankömmlinge, Blog-Profil. Profil. Was haben wir hier. Profil, dann haben wir den Kartenkorb. Wir werden sehen, wie wir diesen Korb hinzufügen können. Aber lassen Sie mich vorerst die Strg-Taste gedrückt halten und mit einem Mausrad herauszoomen und jetzt die Leertaste verkleinern. Halten Sie die Umschalttaste gedrückt, um mehrere auszuwählen, und drücken Sie diese beiden. Halten Sie die Umschalttaste gedrückt, um das auszuwählen. Ich denke, sie sind gleichmäßig verteilt. Und jetzt doppelklicke ich auf dieses Bild, damit ich die Größe nur der Seiten ändern kann Größe nur der Seiten ändern kann So wie das. Ich kann es in diese Richtung schieben oder ich kann es so ziehen , weil ich einen schwarzen Bereich für den Text haben möchte. Doppelklicken Sie darauf und los geht's. Also jetzt Strg Shift K, um ein anderes Bild zu importieren. Und ich glaube, der Schuh, den wir für diesen Abschnitt verwendet haben, war, lassen Sie mich sehen, wir haben dieses Paar und diesen Schuh. Also haben wir das. Also, ich werde einfach klicken und ziehen, dann gehe ich zu Alt und ziehe, lass es mich hierher ziehen. Halten Sie dann die Umschalttaste gedrückt, um beide auszuwählen , und lassen Sie uns sie dort platzieren. Wählen Sie dies nun aus und doppelklicken Sie darauf, damit wir es vom Computer hochladen können , um es zu ersetzen. Wir haben dieses Paar Rock Snickers. Und jetzt, wie Sie sehen können, ist es an der Seite abgeschnitten Also werde ich einfach so ziehen und darauf achten, dass wir es nicht zu weit ziehen und die Oberseite abschneiden. Also werde ich auch die obere ziehen. Ich denke, das ist eine gute Größe. Halten Sie die Umschalttaste gedrückt, um die Größe zu ändern, vielleicht bis zu dieser Stelle. Da haben wir's. Lassen Sie uns als Nächstes Sneaker hinzufügen, die Bände sprechen. Also wähle ich das aus, halte die Taste gedrückt und ziehe nach unten. Halte die Umschalttaste gedrückt, um mich in einer geraden Linie zu bewegen Das spricht Bände. Lass uns die Größe vergrößern, vielleicht bis zu dieser Stelle, ziehen und ziehen. Reduzieren wir die Zeilenhöhe. Einfach so. Entdecken Sie als Nächstes die frischesten Ich habe diesen Text irgendwo. Lass mich sehen. Lass es mich einfach hier einfügen. Also werde ich den zweiten Text auswählen. Dann klicken und ziehen Sie nach rechts und fügen Sie es dort ein. Also, das ist zu groß. Ich möchte, dass es Größe 16 hat. Also Größe 16. Es ist nicht schwarz. Es sollte regulär sein und eine Zeilenhöhe von 22 haben. Nein, 24. Lass mich das einfach erweitern. Zieh es nach oben, ändere es in ein Komma. Lassen Sie uns auch den Button erstellen. Diese beiden Buttons, Kollektion und exklusive Drops. Also wechsle ich wieder hierher, halte die Strg-Taste gedrückt und zoome mit einem Mausrad hinein. Ich werde vom Bild- zum Rechteckwerkzeug wechseln und dort ein Feld ziehen und zeichnen. Und ich werde auch den Text auswählen und einfach irgendwo hier klicken. Was steht hier? Sammlung. Sammlungen. Halten Sie die Umschalttaste gedrückt, um Nein auszuwählen Lassen Sie uns zunächst die eine Taste stylen. Also wähle ich das aus und ich möchte ihm hier diese Farbe geben. Also werde ich I auf der Tastatur drücken. Ich wähle das Pipettenwerkzeug und ich wähle ein Pixel aus, das mir gefällt Und jetzt ist das unsere Farbe. Ich möchte die Farbe des Hintergrunds ändern, also drücke ich auf I und jetzt probiere ich ein Pixel aus dem Hintergrund, einfach so. Wähle das aus. Ich möchte beiden Ecken einen Radius von zehn geben. Einfach so. Wählen Sie das aus, halten Sie die Umschalttaste gedrückt, wählen Sie das aus, halten Sie Alt und Shift gedrückt und ziehen Sie. Dann wähle ich das aus, wähle das aus und ändere es in diese weiße Farbe. Hier sollte es um exklusive Drops gehen. Exklusive Drops. Tatsächlich möchte ich diese Ausrichtung so ändern, dass möchte ich diese Ausrichtung so ändern ausgerichtet ist, weil wir schon immer von der Mitte aus ausgerichtet haben wollten. Ich halte die Umschalttaste gedrückt, wähle diese Hintergrundschaltfläche aus und gehe zu Ausrichtung und richte sie an der Mitte aus. Dies ist bereits auf die Mitte ausgerichtet. Wenn ich die Umschalttaste gedrückt halte und beide auswähle, dann gehe ich hierher, es bewegt sich nicht. Also los geht's. Also ich denke, okay, alles was wir jetzt tun müssen ist dies und das auszuwählen und sie vielleicht herumzuschieben, vielleicht bis zu dieser Stelle, aber das hier auswählen. Halten Sie die Umschalttaste gedrückt, wählen Sie die Ecke aus und ziehen Sie sie. Da haben wir's. Wählen Sie das aus und halten Sie die Umschalttaste gedrückt. Ziehen Sie diese beiden und wählen Sie sie aus, um die Alternative auszuwählen. Wenn Sie dies auswählen möchten, können Sie es entweder auswählen dann die Umschalttaste gedrückt halten und jedes Element auswählen, oder Sie können dieses auswählen und dann die Umschalttaste gedrückt halten und dann diesen Bereich auswählen. Dadurch wird der Hintergrund, den Sie ausgewählt haben, abgewählt und ausgewählt , über was Sie sonst noch mit der Maus fahren Damit kann ich das nur leicht nach oben drücken , und los geht's Lassen Sie uns weitermachen und eine Vorschau unserer Kunstwerke ansehen. Link beiseite, da haben wir's. Also das ist unsere Heldenabteilung, und ich bin zufrieden mit dem, was wir haben. Nun, Sie werden feststellen, dass es hier Fehlstellung an der Nervenleiste gibt Das Logo scheint niedriger als die Hauptnervenleiste ausgerichtet zu sein als die Menüelemente Gehen wir also zurück, wählen das Logo aus, wählen den ganzen Text aus, richten alles vertikal zur Mitte aus, einfach so. Alles wird gerade vertikal ausgerichtet sein. Schieben wir sie jetzt so nach oben. Nun, wenn wir das haben, wenn ich das ein wenig erweitere, ergibt sich diese Ausrichtung des Textes innerhalb des Textfeldes. Wenn wir es in der Mitte ausrichten, wird es in die Mitte dieses Textfeldes verschoben. Und das hilft manchmal wirklich. Manchmal möchten Sie vielleicht, dass es in dieser Position ist, und Sie werden es später sehen. Da haben wir es also. Ich kann das auf feste Höhe umstellen. Wo ist es? Automatische Breite, einfach so. Wenn ich hierher zurückkehre, wird es automatisch angepasst. Klicken Sie auch hier. Da haben wir's. So erstellen Sie also unseren Heldenbereich. In der nächsten Lektion sehen wir uns an, wie Sie den Abschnitt mit den empfohlenen Kategorien erstellen. Ja, lass uns sehen, wie man das erstellt. Ja, wir sehen uns in Kürze. Geh nirgendwohin. 4. Abschnitt "Ausgewählte Kategorien": Jetzt ist es an der Zeit, den Abschnitt mit den empfohlenen Kategorien zu erstellen. Wechseln wir also zurück zu unserem Figma-Editor. Wenn ich wieder reingehe, scrolle ich einfach nach unten. Jetzt werden Sie feststellen, dass wir nicht genug Platz haben. Also werde ich die Strg-Taste gedrückt halten und dann den Rahmen auswählen. Halten Sie die Taste gedrückt und scrollen Sie nach außen, um die Ansicht zu verkleinern. Dann wähle ich den unteren Teil aus und ziehe ihn einfach, um Platz zu schaffen Halten Sie die Steuerung gedrückt und vergrößern Sie die Ansicht. Da haben wir's. Also werde ich einfach durchhalten und das in die Länge ziehen. Und ich werde die Füllfarbe ändern. Wie Sie sehen können, ist es gemischt weil es Weiß und Grau gibt. Ich kann also die Farbe ändern, indem ich auf das Pluszeichen klicke, und ich möchte dieses Schwarz einfach so auswählen. Lassen Sie mich sicherstellen, dass es sich in der Mitte des Rahmens befindet. Was haben wir hier. Lassen Sie mich diesen Text von dieser anderen Seite kopieren. Kopiere das. Ziehe das, ändere es auf Größe 16, mache es normal und richte es zur Mitte aus. Ich wähle das aus und mache die gleiche Ausrichtung in der Mitte. Aber dafür doppelklicke ich und füge meinen Text hier ein. Ich habe es gerade von woanders kopiert. Das musst du eintippen. Und jetzt, wo das ausgewählt richte ich es einfach so an der Mitte des Rahmens aus. Das ist bereits ausgerichtet. Wir haben Slick and Fresh, also wähle ich das aus und ziehe Leak and Fresh Und hier steht „ Ausgewählte Kategorien“. Ausgewählte Kategorien. Da haben wir's. Jetzt behindert uns das also. Also wähle ich all diese Dinge hier oben aus und drücke auf die linke Klammer sie nach hinten zu schicken, oder einfach rechts Leck und schicke sie zurück Also das ist jetzt vor diesem Bild. Wählen Sie das aus und ändern Sie die Farbe. Wir haben bereits dieses Grau, und ich werde es auf Größe 24 reduzieren. Ja, ich denke, Größe 24 ist okay. Für den Buchstabenabstand gebe ich ihm 5%. Drücken Sie es nach unten, nur leicht so. Vielleicht wählen Sie sogar die drei aus und drücken Sie sie nach unten. Bis zu dieser Stelle. wieder rein zu kommen, müssen wir so etwas kreieren. Wie Sie sehen können, hatte ich versucht, mit diesem Design zu experimentieren , im Gegensatz zu diesen anderen Designs. Dies waren die ersten Designs. Dann habe ich einige Ideen ausprobiert, aber ich habe sie nicht repliziert Aber lassen Sie uns weitermachen und diesen Typ erstellen. Also wähle ich dieses Rechteckwerkzeug aus und ziehe bei gedrückter Umschalttaste, um sicherzugehen, dass es ein Quadrat ist, und lasse es vielleicht genau dort. Halten Sie die Strg-Taste gedrückt und zoomen Sie mit einem Mausrad, mittleres Mausrad, halten Sie das mittlere Mausrad gedrückt , um so zu schwenken. Und ich wähle das aus gebe ihm einen Randradius von 20. Wählen Sie es aus, kopieren Sie, fügen Sie es ein. Wir haben jetzt zwei Kopien. Die andere Kopie ist oben drauf. Also wähle ich es aus und halte Shift Out gedrückt , um die Größe proportional zu Schalte die Maus vielleicht bis zu dieser Stelle heraus, und ich gebe ihr vielleicht ein etwas dunkleres Grau Also ziehe ich das auf ein dunkles Nein, lass es uns heller machen. Nein, dunkler. Ja. Geben wir ihm einen Eckenradius, der der Hälfte des äußeren Eckradius entspricht. Also zehn, damit es einheitlicher aussieht. Und jetzt möchte ich das etwas nach oben ziehen . Dann ziehe ich das. Dann ziehe ich das einfach und positioniere es irgendwo dort. Jetzt wähle ich das aus und halte die Umschalttaste gedrückt und wähle das aus. Drücke G, um sie zu einer Sache zu gruppieren. Und wenn ich auswähle, kann ich sie alle so ausrichten, dass sie im Verhältnis zueinander in der Mitte ausgerichtet sind. Also einfach so. Also, ich halte einfach durch und ziehe das hin. Und was sagen sie über nachhaltige Kicks. Nachhaltige Tritte. Ich werde es genau dort platzieren. Ich werde auf die rechte Klammer drücken , um es nach vorne zu bringen. Es ist auf die Mitte ausgerichtet. Aber jetzt möchte ich auswählen und die Umschalttaste gedrückt halten, um das auszuwählen , und den Text an der Mitte ausrichten. Wählen Sie Strg Shift G, um Gruppierung aufzuheben, sodass Sie dies und das auswählen und alles ausrichten und den Text an der Mitte ausrichten Jetzt wähle ich das aus und reduziere das Nein, lass es mich bei dieser Größe belassen Halten Sie die Strg-Taste gedrückt und die Maus wird herausgezogen. Jetzt ziehe ich es raus, halte die Umschalttaste gedrückt, um es zu verkleinern oder zu verkleinern, lege es genau hier hin , rechte Klammer. Und da haben wir's. Wie Sie sehen können, hat es keinen Schlagschatten, aber in der Referenz hatte ich etwas Schlagschatten hinzugefügt. Also werde ich zum Effekt übergehen. Wenn ich den Effekt auswähle, wird automatisch ein Schlagschatten hinzugefügt. Es gibt noch andere Effekte, aber die Standardeinstellung ist Schlagschatten. Andere sind hier. Ich denke also, dass die Standardeinstellungen für Schlagschatten für mich in Ordnung sind. Also wähle ich einfach das Bild aus, wähle dann dieses Feld aus, in dem es sich befindet , und richte das Bild in der Mitte aus. Einfach so. Ich glaube, ich werde es etwas dunkler machen. Ja, und versteh das. Code, kopiere, wähle das aus. Gehen Sie hierher, doppelklicken Sie auf Einfügen. Mach das weiß. Wählen Sie das aus und ziehen Sie die Shift-Taste heraus. Drücken Sie dann die Taste D, um zu wiederholen, was Sie gerade getan haben. Steuere D erneut. Ich finde , das ist eine gute Größe. Ich mache Shift D raus, Shift raus und ziehe noch einmal, und los geht's. Wir haben also einen schönen Abschnitt mit ausgewählten Kategorien. Jetzt müssen wir nur noch auf jedes Bild doppelklicken und es durch einen anderen Schuh ersetzen. Sagen wir das und Sie müssen die Größe ändern. Also werde ich die Taste gedrückt halten, um die Shift-Taste gedrückt zu halten , um sie viel kleiner zu machen Und dann ziehe ich das und das an den Seiten , um sicherzustellen, dass alle Seiten der Schuhe sichtbar sind. Ja, das ist okay. Wähle dies und das aus und richte es zur Mitte aus. Doppelklicken Sie darauf, wählen Sie das aus. Jetzt werde ich diesen Teil schnell vorspulen und wir sehen uns, sobald wir das getan haben. Also mach weiter und mach das. Also doppelklicken Sie darauf. Das passt schon. Und da haben wir es. Also habe ich sie gerade aktualisiert. Jetzt müssen Sie diese Kategorien natürlich umbenennen. Lass mich sehen, was die Namen sind. Es scheint, dass ich das Ding nur dupliziert und vergessen habe, ihm die Kategorien zu geben Aber mal sehen. Wir haben Performance-Sneaker. Nun, es scheint, dass das zu groß ist. Also lass uns diese Schrift machen, vielleicht Größe 14. Also Größe 14. Ja, Performance-Sneaker in limitierter Auflage und nachhaltige Schuhe. Lass mich das einfach da hinstellen. Oh nein, lass uns das hinzufügen. Okay, Sie können hier also andere Kategorien haben. Ich lasse das einfach dort oder du kannst es einfach entfernen und einfach die vier Kategorien, die du hattest, belassen Ich glaube, ich wähle das aus und mache es indem ich die Taste gedrückt halte und die Shift-Taste gedrückt halte und die Ecke ziehe Ich möchte es etwas breiter als den Text hier machen und es dann nach oben schieben Lassen Sie uns dann eine Vorschau der Änderungen anzeigen. Schauen wir uns zunächst an, was wir im Original haben. In meinem Original haben mir die Farben meiner Meinung nach besser gefallen als diese Farben, die wir hier haben, sind zu dunkel. Also ich denke, ich werde sie einfach etwas heller machen. Lass uns aufs Feld gehen. Und ja, einfach so, aber jetzt machen wir den Text schwarz. Also geh zurück und wähle Schwarz. Oder du kannst das einfach loswerden. Lassen Sie mich sehen, was passiert, wenn wir das loswerden. Nein, ich glaube sogar, das Problem liegt in den Rechtecken im Hintergrund, sie sind zu dunkel Also lass uns sie leichter machen. Dann machen wir Bs auch leichter. Genau da. Also ich glaube, das gefällt mir besser. Wenn wir jetzt wieder hierher zurückkehren, aktualisiert es sich automatisch von selbst, und jetzt gibt es unseren Bereich mit den empfohlenen Kategorien. Wir müssen eine Schaltfläche hinzufügen, genau wie hier, mehr anzeigen. Also müssen wir nur hierher zurückkehren, dies und das auswählen, dann ziehe ich Strg G, um es zu gruppieren, und dann stellen wir sicher, dass wir es so in der Mitte ausrichten. nun Shift G, um die Gruppierung aufzuheben, sodass Sie den Hintergrund auswählen können Gehen Sie hier hin und geben wir ihm die schwarze Farbe Wählen wir die Schrift aus und geben ihr eine weiße Farbe. Wählen Sie das aus und lassen Sie uns es nach oben drücken. Halten Sie dabei die Umschalttaste gedrückt, um uns in einer geraden Linie zu bewegen. Gehen Sie zurück und dort finden unseren Bereich mit den empfohlenen Kategorien. Also ich denke, das ist ein guter Ort, um das zu beenden. Schauen wir uns in der nächsten Lektion an, wie man diesen Rabatt-Bereich erstellt. Ich bin mir sicher , dass Sie wahrscheinlich schon wissen, wie das geht, aber wir sehen uns in Kürze. 5. Rabattbereich: Jetzt ist es an der Zeit, den Rabatt-Bereich genau hier zu erstellen. Wechseln wir also zurück zu unserem Editor. Also werde ich scrollen Nein, lass uns gleich hier zum Editor zurückkehren. ich die Strg-Taste gedrückt halte und mit einem Mausrad herauszoome, Wenn ich die Strg-Taste gedrückt halte und mit einem Mausrad herauszoome, ziehe ich das einfach heraus und lege es an eine beliebige Stelle , sodass der Abstand zwischen der Schaltfläche und hier fast dem Abstand zwischen hier und hier entspricht dem Abstand zwischen hier und hier Jetzt werde ich es mir einfach ansehen. Ich finde, das ist ein netter Ort. Ich doppelklicke darauf. Wenn ich nun die Höhe dieses Bilds ändern möchte, kann ich das einfach tun, weil es die Größe proportional Wenn ich also die Höhe dieses Bildes ändern möchte , ohne die Seiten zu bewegen, muss ich nur darauf doppelklicken Wenn das erscheint, bedeutet das, dass ich jetzt das Feld bearbeiten kann , in dem sich das Bild befindet So kann ich die Unterseite halten und sie nach oben ziehen. Also sagen wir irgendwo dort, doppelklicken oder schließen Sie das einfach. Und jetzt wähle ich einfach einen dieser Schuhe aus, vielleicht diesen raus und ziehe, vielleicht diesen raus und ziehe, dann halte Shift gedrückt und raus, um die Größe proportional von allen Dann werde ich das einfach neu positionieren und doppelklicken, damit wir es ersetzen können Also ich glaube, ich habe benutzt, ich glaube, das ist der Schuh, den ich ausgewählt habe, doppelklicken Sie darauf Und weil wir uns in diesem Zustand befinden, können wir die Seiten ziehen, ohne andere Seiten zu beeinflussen. Ordnung. Doppelklicken Sie draußen. Wählen Sie es aus. Halten Sie die Umschalttaste gedrückt und ändern Sie die Größe von dieser Seite aus, indem Sie die Umschalttaste gedrückt halten 50% von. Also schnapp ich mir einfach diese drei, ziehe sie mit der Alt-Taste hierher. Solange sie noch ausgewählt sind, gehe ich zunächst zur Füllfarbe Plus und gebe ihr diese weiße Farbe. Schauen wir uns nun an, ob einer von ihnen eine andere Farbe hat . Das ist der ultimative Rabatt. Also werde ich das als ultimativen Rabatt auswählen. Also es scheint, dass wir das kleiner machen müssen . Ich will es kleiner haben. also die Umschalttaste gedrückt halte, um Slick auszuwählen, möchte ich, dass all diese winzigen Überschriften über den Hauptüberschriften die gleiche Größe Ich möchte, dass die Überschriften alle dieselbe Größe haben. Für den Text, den Haupttext, möchte ich, dass sie alle dieselbe Größe haben Lassen Sie uns also die Größe von diesem und dem auf Größe 18 ändern. Ja. Dann lassen Sie uns die Shift-Taste gedrückt halten und sie alle näher runterschieben. Und jetzt will ich nicht, dass sie schwarz sind. Ich möchte, dass sie regelmäßig sind. Lassen Sie uns sie jetzt einfach fett machen. Wählen wir nun diesen und diesen und diesen oberen ändern wir die Ausrichtung nach links. Und während sie noch ausgewählt sind, gehen wir zu Ausrichtung links ausrichten , um sie alle in einer geraden Linie auszurichten. Und ich möchte sie an den Schaltflächen und Inhalten der Helden-Sektion ausrichten , da ihr die rote Markierung sehen könnt. Dann lass mich sie einfach nach oben drücken. Ich werde diesen Text auswählen und ihn wie folgt neu skalieren. Ja, dieser Ort. Dann wähle ich diesen Button. Es zieht die rechte Klammer, um sicherzustellen, dass es vorne ist. Wählen Sie es aus und halten Sie dann die Augen auf der Tastatur, um die Pipette auszuwählen Ich möchte ein hellgrünes Pixel auswählen. Nun, ich weiß, dass wir uns hier oben nicht an dasselbe Farbschema gehalten haben , und normalerweise behält unsere Marke das Farbschema bis zum Ende bei. Aber manchmal werden Sie auf einigen Websites feststellen, dass sie Farben an verschiedenen Stellen mischen. Die Website ist sehr farbenfroh. Wir wollen also sichergehen, dass wir diese grüne Farbe hier nicht mischen wollen . Wenn ich I auswähle und das probiere, wenn ich diesem Button diese grüne Farbe gebe, kollidiert dieses Grün mit diesem anderen Grün Und wenn Sie als Kunde scrollen, wenn Sie sich in diesem Bereich befinden, ist es besser, wenn das Farbschema einheitlich Deshalb wähle ich das aus. Dann wähle ich ein Grün aus, das in der Nähe ist. Und dann wähle ich das aus, dann wähle ich den Hintergrund aus , um den Hintergrund zu testen. Das ist ein nettes Farbschema für diesen speziellen Abschnitt, wenn jemand nach unten scrollt Also ich denke, das ist ein guter Ort, um das zu beenden. Lass mich nachsehen, ob wir etwas vergessen haben. Holen Sie sich diesen Deal. Ich werde diesen Text nicht ändern, aber ich werde ihn auswählen und ihm eine Höhe von 24 Zeilen geben. Holen Sie sich diesen Deal. Und jetzt wechseln wir hier zu unserer Website und sehen, was wir haben. Wenn ich also nach unten scrolle und an diese Stelle komme, haben wir unseren Rabattbereich Also nur eine Kleinigkeit, die ich tun möchte, wie Sie sehen können, der Abstand hier ist nicht der gleiche wie der Abstand Lassen Sie mich zunächst die Umschalttaste gedrückt halten und alles auswählen. Wählen Sie dies nun aus, halten Sie die Umschalttaste gedrückt und ziehen Sie, um dies auszuwählen und den Hintergrund abzuwählen Drücken Sie G, um sie zu gruppieren, halten Sie dann die Umschalttaste gedrückt, um den Hintergrund auszuwählen und den Textkörper im Verhältnis zum Hintergrund mittig auszurichten im Verhältnis zum Hintergrund mittig 50% Lachs, lass uns hierher zurückkehren. Drücken Sie Shift G, um die Gruppierung aufzuheben. Dann hießen 50% der Schuhe Slomons. Also werde ich diesen Text auswählen. Gehe hier direkt zur Füllfarbe und wähle die grüne Farbe aus. Wenn Sie hierher zurückkehren, gibt es unseren ultimativen Rabattbereich. 6. Abschnitt "Trends": Lassen Sie uns nun diesen Bereich mit den angesagtesten und angesagtesten Kicks erstellen diesen Bereich mit den angesagtesten und angesagtesten Kicks Jetzt gehe ich einfach zurück zu unserer Grafik, wo mein Redakteur genau hier ist Und bevor wir zu weit gehen, möchte ich das ziemlich schnell vergrößern. Und ich möchte das einfach ein bisschen anpassen. Lassen Sie mich ihnen sogar einfach diese Farbe geben. Also drücke ich I auf der Tastatur. Jetzt haben sie diese Farbe, aber ich möchte sie mittelfett machen. Gehen Sie also zur Schriftstärke, halb fett, nicht mittel. Und ich möchte auch den Buchstabenabstand auf 5% erhöhen. Ich denke, sie sehen so viel besser aus. Aber jetzt sind sie natürlich auf die nächste Zeile reduziert, weil sie nicht in die aktuellen Boxen passen. Also halte ich die Alt-Taste gedrückt, um die Größe von beiden Seiten zu ändern. Wenn du die Alt-Taste nicht gedrückt hältst, wird die Größe von einer Seite aus geändert, also von der Seite, die du gerade hältst Bei ändert sich die Größe von der Mitte aus. Also möchte ich das ziehen, das auswählen, gedrückt halten und es zur Seite ziehen , herausziehen und das herausziehen Ich denke, jetzt sehen sie vorzeigbarer aus. Nun, der Grund, warum ich dieses Update gemacht habe, war zunächst, dass ich wollte, dass es besser aussieht, aber gleichzeitig, wie Sie in unserer Referenz hier sehen können, der Bereich mit den Trends dem Abschnitt mit den vorgestellten Kategorien ziemlich ähnlich sieht den vorgestellten Kategorien ziemlich ähnlich Gehen wir also weiter und wechseln hier zurück. Ich möchte diese auswählen, leicht scrollen, dann gedrückt halten und ziehen, dann die Umschalttaste gedrückt halten, um zu vermeiden, dass sie nach links und rechts wechseln Also schalten Sie aus und legen Sie es genau dort ab. Dann lass die Schicht los und raus. Verkleinern Sie die Ansicht etwas und ich möchte sie nach unten drücken , weil ich sicherstellen möchte, dass der Abstand hier dem Abstand hier ziemlich ähnlich ist Also ich denke, das ist ein netter Ort. Und jetzt werden Sie hier feststellen, dass wir diese winzige Kiste nicht da unten haben . Okay. Ich werde es mir einfach bis zu der Stelle genau dort ansehen Lassen Sie mich diese drei sogar einfach löschen. Und ich werde diese beiden auswählen und sicherstellen, dass die innere auf die Mitte der äußeren ausgerichtet ist , indem ich auf das und das klicke. Jetzt wähle ich diesen inneren Hintergrund aus, klicken Sie hier. Haben wir ein dunkles Grau? Es heißt, ich bin offline. Ordnung, also mach das nicht zu dunkel, nicht schwarz, dunkelgrau, denn das ist schwarz Also wähle ich diesen Text aus und gebe ihm die weiße Farbe Wählen Sie den Snaker aus und halten Sie die Umschalttaste gedrückt, wählen Sie den inneren aus und richten Sie ihn so vertikal zur Mitte aus Lassen Sie uns ihn sogar ein bisschen nach oben drücken. Nun, ich finde, das sieht gut aus. Also wenn ich es auswähle, kann ich gedrückt halten und die Umschalttaste drücken. Geben wir ihm den Abstand von 22. Hier, 22, Schicht D. Ich finde das gut. Also doppelklicke ich darauf und ersetze es durch die Trendschuhe Was ist hier im Trend? Nehmen wir an, dieser ist im Trend. Doppelklicken Sie darauf. Das ist auch im Trend Ich muss das so anpassen, aber jetzt scheint es größer zu sein als die anderen Also werde ich gedrückt halten und die Umschalttaste auch das auswählen. Halte die Taste gedrückt und verschiebe sie, um sie proportional zu skalieren. Dann doppelklicken wir darauf. In der Tat, was für ein Zufall. Sie scheinen alle in dieselbe Richtung zu blicken. Warum vervollständigen wir diesen Look nicht? Ich denke, das ist gut. Bevor wir uns dafür entscheiden, haben wir noch einen. Ich denke, das ist ein guter Kandidat, also doppelklicke ich darauf. Und jetzt, da haben wir's. Das sind also die angesagtesten und angesagtesten Kicks. Also doppelklicken Sie darauf. Sag einfach heiß und trendig statt heiß und trendig Beliebt hier oben. Beliebt. Dies sind die am schnellsten verkauften Schuhe im Laden. Ich lasse das einfach so , weil dies keine echte Website ist, aber Sie würden dort eine Beschreibung eingeben Und mal sehen, mehr lesen. Nein, das sollte nicht weiter gelesen werden. Das sollte ein Schnäppchen sein, also kauf. Also habe ich vergessen, diesen Button zu bearbeiten, aber jetzt können wir ihn hier bearbeiten. Einfach so mehr ansehen. Also ich denke, wir werden damit aufhören. Bevor wir gehen, schauen wir uns kurz an, was wir jetzt haben. Also fang einfach an zu scrollen. Und da ist was wir haben. Warten wir, bis es geladen ist. Okay, lassen Sie uns einen kurzen Blick darauf werfen, was wir hier haben, und nach unten scrollen Ich denke, das ist nicht ausgewogen. Ich denke, wir müssen es etwas nach unten drücken. Dieser Abstand hier ist kleiner als dieser Abstand hier. Ja, irgendwo da. Wenn du hier draußen klickst, wird es automatisch aktualisiert. Jetzt ist es gut positioniert, scrollt nach unten, unser Rabatt und jetzt unser angesagter Top-Trend Also ich denke, das ist ein guter Ort, um dem ein Ende zu setzen. Lassen Sie uns in der nächsten Lektion weitermachen und unsere So-Geschichte schreiben. Wir sehen uns in Kürze. 7. Über uns Abschnitt: Lassen Sie uns nun weitermachen und den Bereich Über uns erstellen. Also zurück zu unserem Editor, wo ist unser Editor, genau hier. Also nach unten scrollen. Ich möchte das auswählen. Übrigens, ich glaube, wir haben es hier nicht richtig ausbalanciert, also schiebe ich es einfach nach oben, leicht nach oben, also scrolle ich nach unten, ich wähle einfach diese drei aus und ziehe, um sie zu duplizieren Und natürlich werde ich die Ausrichtung auf links umstellen und sie so nach links ausrichten Also werde ich den Absatztext auswählen und ihn so ziehen, und ich werde diesen auswählen, diese drei auswählen, sie ziehen und irgendwo hier platzieren. Wählen Sie das mit Alt-Taste aus und ziehen Sie es. Halten Sie Alt Shift gedrückt, um das zu erweitern , da wir diese Bilder hinzufügen möchten. Tatsächlich werde ich darauf doppelklicken um das Feld selbst einfach so bearbeiten zu können. Ich werde darauf klicken, um es von Select This Dude hochzuladen. Ich gebe ihm einen Radius von 20 Ecken. Dann haben wir diese beiden. Ziehen Sie also mit der Alt-Taste und doppelklicken Sie darauf , um es bearbeiten zu können. jetzt natürlich die Alt-Taste gedrückt, da wir gelernt haben, die Größe aus zwei Richtungen zu Also ich denke, das ist ein netter Teil. Wir wollen es fast zum Quadrat bringen. Laden Sie von hier hoch. Ich wähle einfach diesen Typen aus. Dann ziehe ich das. Ich glaube, der Abstand hier war 22. Jetzt sind es 21. Ich doppelklicke einfach auf diesen Upload vom Computer und wähle das Bild aus. jetzt wieder reingehen, haben wir unsere Seelengeschichte über uns. Also und dann die Geschichte hier. Ich werde das auswählen und ihm eine Zeilenhöhe von 24 geben. In der Tat ist das, glaube ich, 36. Ich hatte es 36 gegeben. Und lassen Sie mich einfach den Text nehmen und ihn dort einfügen. Lassen Sie mich das Feld jetzt einfach so erweitern. Wählen Sie die Schaltfläche aus und richten Sie sie genau dort aus. Dann sagen wir, lesen Sie mehr. Und tatsächlich denke ich, wir hätten für die Schaltfläche den Button-Text auswählen sollen und so weiter. Geben wir ihm einen Buchstabenabstand von 5% und machen wir ihn mittelgroß. Wir möchten, dass der Text ausgeprägter ist. Ich wähle hier den Hintergrund der Schaltfläche aus. Halten Sie die Taste gedrückt, um die Größe von beiden Seiten bis zu dieser Stelle zu Ich denke, die beiden sind okay. Wählen Sie nun diese drei aus, um sie zu gruppieren, wählen Sie diese drei aus, um sie zu gruppieren. Steuerung G. Wählen Sie dann diese beiden Gruppen aus und richten Sie sie so vertikal in einer Linie aus. Nun, dieser Abstand ist zu klein, also schieb sie einfach so nach unten Ich denke, das ist ein netter Ort, um sie zu verlassen. Wählen Sie Strg+G, um die Gruppierung aufzuheben, und drücken Sie diese Tastenkombination, um die Gruppierung Jetzt wähle ich diese drei aus und entferne diese drei aus und Wie Sie sehen können, haben sie einen Schlagschatten, weil wir ihn dupliziert haben und er einen Schlagschatten von hier oben hatte Also wollen wir diesen Effekt eines solchen Schlagschattens entfernen diesen Effekt eines solchen Schlagschattens Schauen wir uns also kurz an, was wir auf unserer Landingpage haben. Wenn Sie nach unten scrollen, gibt es unsere Vorschau. Mir gefällt, was wir bisher haben. Lassen Sie uns in der nächsten Lektion diesen Bereich für die Newsletter-Anmeldung oder die Anmeldung für die Mailingliste erstellen . Wir sehen uns also in Kürze. 8. Anmeldung zur Mailingliste: Willkommen zurück. Jetzt ist es an der Zeit, diesen Anmeldebereich für die Mailingliste zu erstellen. Also wechsle ich zu unserem Editor. Hier sind wir. Lassen Sie uns nun schnell zu unserer Referenz zurückkehren. Wie Sie sehen können, haben wir ein Formular, Vornamen, eine E-Mail-Adresse und eine Anmeldung, aber diese anderen bleiben ähnlich. Also möchte ich diese drei auswählen. Also werde ich das auswählen. Ziehen Sie dann, während Sie die Umschalttaste gedrückt halten , um die Alternative auszuwählen. Es wird also den Hintergrund abwählen und auswählen, was sich davor befindet Dann drücke ich die Alt-Taste, ziehe nach draußen und halte jetzt die Umschalttaste gedrückt Einfach so. Ich ziehe und wähle das alles aus und gehe hier zu Füllplus, und ich gebe ihm die schwarze Farbe. Hier steht: Verpasse nie wieder einen Tropfen. Auch hier gilt: Schnürung für Vergünstigungen oder Schnürung, um Vergünstigungen zu bekommen. Lassen Sie mich den Text ganz schnell abrufen. Füge das da ein. Also ziehe ich einfach raus, während ich die Umschalttaste gedrückt halte, um zu duplizieren, und dann Strg D, um den Zug zu wiederholen , den ich gerade gemacht habe. Wählen Sie diese beiden aus. Dann lassen Sie uns die Breite erhöhen. Solange sie noch ausgewählt sind, gehen wir hierher und geben ihnen vielleicht diesen Hintergrund. Nein, das ist der helle Hintergrund. Ich finde, das ist eine nette Form. Wir können dem eine schwarze Farbe geben. Also wähle ich einfach das hier aus, wähle den Text aus und gebe ihm die weiße Farbe. Das sollte eine Anmeldung sein. Das sollte eine E-Mail-Adresse sein. Das kann Oh, nein, das kann eine E-Mail-Adresse sein, und das kann der Vorname sein. Bei der Auswahl der beiden habe ich festgestellt, dass die Ausrichtung mittig ist Richten wir sie also links aus und richten sie auch so links aus. Dann ändern wir auch die Feldfarbe hellgrau , damit sie innerhalb des Feldes nicht zu stark ausgeprägt sind. Ich denke, ich sollte sie so näher heranrücken. Ich denke, das ist eine bessere Art, sie zu präsentieren. Ich ziehe das und ich möchte diese drei auswählen, sie gruppieren und dann diese Gruppe und das Bild auswählen , damit wir sie so ausrichten können. Doppelklicken Sie nun auf diesen Upload vom Computer. Was haben wir hier? Wir haben dieses Brandproblem, aber das war natürlich, dass ich nur mit Ideen herumgespielt habe. Sie können jedes Bild verwenden, das Sie wollen. Lass mich sehen. Was ist mit diesem Rot? Nein? Was ist mit dem schwarzen Schuh? Verwenden Sie ein Bild, das vielleicht Werbegeschenke oder Rabatte darstellt vielleicht Werbegeschenke oder Rabatte oder etwas Interessantes, das diesen Abschnitt repräsentiert Mir gefällt der Kontrast in diesem Schuh nicht, also lassen Sie uns ihn durch diese beiden Schuhe ersetzen Ja, lassen Sie uns sie genau da hinstellen. Aber jetzt möchte ich sie so auswählen und sie bei gedrückter Shift-Taste in einer geraden Linie nach unten ziehen Ich möchte sicherstellen, dass wir ihnen auf diese Weise genügend Abstand geben ihnen auf diese Weise genügend Abstand Wir können die Größe dieser Schuhe reduzieren. Also ich denke, das ist ein guter Ort, um das zu beenden. Wir müssen es nicht zu kompliziert machen. Im Moment lernst du nur die Feinheiten von Also zurück zu unserer Vorschau. Wenn wir jetzt nach unten scrollen, haben wir hier ein Anmeldeformular Ja. Gehen wir also zurück zu unserer Referenz. In der nächsten Lektion wollen wir uns nun ansehen, wie dieser Instagram-Bereich erstellt wird. Wir müssen zuerst eine Instagram-Karte erstellen , bevor wir sie vollständig duplizieren können. Wir sehen uns in Kürze. 9. Bereich "Instagram-Beiträge": Zeit, diesen Instagram-Bereich zu erstellen. Wie Sie sehen können, haben wir vier Instagram-Karten, und alles, was wir tun müssen, ist vorerst nur eine zu erstellen. Schauen wir uns also an, wie das geht. Zu unserem Editor wechseln. Ich werde hier nach unten scrollen. Und wie Sie sehen können, können wir das einfach kopieren und dann ziehe ich es hierher. Und was da steht, ist Instagram da reingeklebt. Du kannst uns auf Kick Verse taggen und vorgestellt werden. Wenn du unsere Schuhe trägst, kannst du uns taggen, wenn du es auf Instagram postest Lass uns also unsere Karte erstellen. Ich wähle das aus und drücke Shift Ctrl Shift G, um die Gruppierung aufzuheben Und ich wähle das aus und ziehe es nach unten oder ziehe es einfach heraus und lege es Ich werde das vielleicht an diese Stelle ziehen. Ich versuche nur, etwas zu bekommen , das diese Dimensionen hat. Wir haben also einen Benutzer. Wir haben einen Benutzernamen, der folgt. Lass uns einfach weitermachen und das schnell eingeben. Hier ist ein Name. Lass mich diesen Text rausziehen. Und dann klammern wir es, um es nach vorne zu bringen. Ich werde das einfach als Instagram-Beitrag verwenden , den jemand gepostet hat. Ich werde es so nach links ausrichten. Dann werde ich auch die Größe auf vielleicht 12, vielleicht 14 Zeilenhöhe von 18 reduzieren . Nein, sagen wir vielleicht 22. Drücken Sie es nur leicht nach oben. Was haben wir sonst noch hier? Wir haben diese Icons. 12 K Likes. Also lass uns das einfach rausziehen Ich versuche nur, den gesamten notwendigen Text einzugeben. Ich werde diese Schaltfläche auswählen. Wählen Sie den unteren Rand aus und halten Sie ihn gedrückt, um die Größe so Halten Sie dann diese Seite gedrückt und ändern Sie die Größe auf diese Weise. Beim Heranzoomen ist der Eckenradius, wie Sie sehen können, zu groß. Ich gebe ihm einfach so drei. Dann möchte ich es in eine solche Grenze ändern, anstatt ein Gefühl zu haben. Da es sich so anfühlt und noch keinen Rand hat, kann ich Shift X drücken, um zu wechseln. Was auch immer die Feldfarbe ist, wird zur Strichfarbe und der Strichwert wird zum Feldwert umgeschaltet. Wir haben keinen Strich, also wird das Gefühl zu keins, und der Strich hat die Füllfarbe. Drücken Sie also X, um sie umzukehren. Der Text ist weiß, also wähle ich ihn aus und gebe ihn. Nehmen wir die graue Farbe an. Wählen Sie dies aus, gehen Sie zur Strichfarbe und geben Sie ihr auch diese graue Farbe. Das ist wie folgt. Halten Sie die Umschalttaste gedrückt, um die Größe zu verringern. Lassen Sie mich nun einfach die Größe auf neun reduzieren sie so auf die Mitte ausrichten. Und machen wir es mittelgroß. Dann geben wir ihm auch einen Abstand von 6%. Halten Sie die Umschalttaste gedrückt, um dies auszuwählen und sie so auszurichten. Jetzt werden Sie feststellen, dass wir hier ein paar Symbole haben, die wir benötigen. Suchen wir also nach einem Benutzersymbol, Herz-Chat. Also, wenn ich wieder reingehe, werde ich Flat Icon eingeben. Einfach so, weil wir Icons von hier herunterladen wollen , Hart. Ordnung, also wähle ich dieses schlichte Rot. Lass mich das auswählen. Dann werde ich sicherstellen, dass Sie sich angemeldet haben. Und dann sagen wir, 64, das ist die richtige Größe, die wir für unseren Zweck haben wollen , also gehen wir wieder rein. Weil es heruntergeladen ist, kann ich es von hier ziehen, im Internet, und es hier ablegen. Halten Sie die Umschalttaste genau dort gedrückt. Geh wieder rein und wähle ein anderes Herz aus, vielleicht auch in der Größe 64, kostenloser Download. Ich gehe wieder rein. Wird immer noch heruntergeladen. In Ordnung, lass es uns da reinlegen Halten Sie die Umschalttaste gedrückt und skalieren Sie es so neu. Ich möchte einfach so nach links gehen. Zurück zu unserer Referenz 12 K Likes, chatten und senden. Das ist eine nette Chat-Blase. Fahren Sie mit dem Herunterladen fort. Da haben wir's. Also ziehe ich dieses gepunktete Menü einfach hierher. Halten Sie die Umschalttaste gedrückt, um es proportional zu verkleinern, und lassen Sie es dort ablegen Lassen Sie uns das auch leicht so ziehen. Dann Strg D, um es zu wiederholen. Doppelklicken Sie darauf und ersetzen Sie es dann durch Lass uns zu den Downloads gehen. Das sollte das Diagramm sein. Ich denke, schick mir das Diagramm. Senden. In Ordnung. Also werde ich das so bis zum Ende schleppen . Doppelklicken Sie darauf. Laden Sie vom Computer hoch und lassen Sie uns hochladen. Ordnung, wir haben das Lesezeichen nicht heruntergeladen . Ich nehme Größe 64, kostenloser Download. Lassen Sie uns es jetzt durch ein Lesezeichen ersetzen. Jetzt wähle ich alle aus und richte sie aus. Sie sind bereits ausgerichtet. Ziehen Sie es heraus, dann klammern wir es, um es nach vorne zu bringen, halten Sie es gedrückt und verschieben Sie um es proportional zu skalieren Dann platzieren wir es genau dort. Eckradius von fünf. Doppelklicken Sie hinein und ziehen Sie es vielleicht bis zu dieser Stelle. Eigentlich sollten wir das viel kleiner machen. Wählen Sie dieses Steuerelement aus. Das ist Steuerung C zum Kopieren, Steuerung V zum Einfügen. Und jetzt wählen wir die Datei aus, die wir eingefügt haben, und halten dabei die Umschalt-Taste gedrückt, um sie so weit zu verkleinern, dass sie bis zu dem Punkt verkleinert wird, an dem sie mit diesem übereinstimmt Dann ziehen wir es so nach oben und so nach unten Und geben wir ihm so ein etwas dunkleres Grau. Kann dem einen Schlagschatteneffekt verleihen. Ich ziehe das nach links. Dann können wir auch einen Benutzer haben. Ich nehme diesen Benutzer. 64 herunterladen, kostenloser Download. Gehen wir wieder rein. Lass uns diesen Benutzer ziehen. Da haben wir's. Also haben wir unseren Now, das ist natürlich kein perfekter Instagram-Post, aber wir haben etwas, das wir genau hier verwenden können. Wenn Sie das auswählen, halten Sie die Umschalttaste gedrückt , um die Größe proportional zu Ich möchte es etwas kleiner machen, vielleicht bis zu dieser Stelle Nun, was den Text angeht, müssen Sie die Größe entsprechend ändern Halten Sie für das Folgende die Alt-Taste gedrückt, um die Größe von beiden Seiten zu ändern. Und dann benutzen sie einen Namen. das jetzt auswähle, kann ich Umschalttaste drücken und die Taste D drücken, um das zu wiederholen. Und ich denke, wir werden uns für diese drei entscheiden. Als Referenz hatte ich vier, und der Text und alles andere schienen viel kleiner zu sein. Aber denken Sie daran, wie ich schon sagte, wir versuchen zu verstehen, wie man mit den in Figma verfügbaren Tools arbeitet Wir versuchen nicht, etwas Perfektes zu schaffen. Wir versuchen, Ihnen den Umgang mit diesen Tools beizubringen. Sobald Sie wissen, wie man die Tools verwendet, können Sie so viel Zeit damit verbringen das Design zu perfektionieren Also ich denke, das ist ein guter Sport, um dem ein Ende zu setzen. Wir sind fast fertig. Lassen Sie uns in der nächsten Lektion weitermachen und an der Fußzeile arbeiten Wir sehen uns also in Kürze. Geh nirgendwohin. 10. Fußzeilenabschnitt: Fast fertig. Es ist Zeit , an der Fußzeile zu arbeiten Gehen wir also zurück zu unserer Grafik, hier scrollen wir einfach nach unten und lassen mich ein wenig herauszoomen Nun, zunächst ist mir aufgefallen, dass wir diese drei dupliziert haben, aber wir haben sie im Verhältnis zum Rahmen nicht mittig ausgerichtet im Verhältnis zum Rahmen nicht mittig Wählen Sie sie aus, drücken Sie G, um sie zu gruppieren, und richten Sie sie dann als ein Objekt Drücken Sie Shift G, um die Gruppierung aufzuheben. Sie können sie auch gruppiert lassen, wenn Sie möchten. Ich kann das Logo von dort oben nehmen oder ich kann es einfach neu erstellen Kick Vs. Geben wir ihm diese Farbe. Ich gebe ihm dieses Grün. Nein, das Grün ist nicht gut. Ich gebe ihm dieses andere Grün hier oben, das. Ich glaube also, das war es. Ja, ich denke, das ist ein guter Anfang. Steuerung: Wählen Sie diesen Rahmen aus, um ihn auszuwählen , und ziehen Sie ihn dann, um die Größe zu ändern Klicken Sie nach draußen. Ich habe den ganzen Fotoinhalt hier auf der Seite, also werde ich ihn einfach kopieren und einfügen Also lass mich einfach diesen Text hier holen. Beim Ziehen. Stellen wir das da hin. Eine Linie links. Wir können Carpi, ich will es verdoppeln. Wir können ihm auch eine Höhe von 28 geben und ihn leicht so verteilen Gehen wir zurück und lassen Sie uns diese beiden Linien erstellen. Also wähle ich das Zeichenstift-Werkzeug aus. Klicken Sie hier auf eine beliebige Stelle und beginnen Sie dann mit dem Zeichnen. Wenn wir diese rote Markierung haben, bedeutet das, dass wir uns in einer geraden Linie bewegen. Also klicke ich einfach irgendwo hin, dann flüchte ich, entkomme wieder, klicke erneut auf Escape , um dem Pent zu entkommen Es zieht das. Ich werde es einfach irgendwo da hinstellen. Dann wähle ich das aus. Es schleift. Dann wähle ich Ich doppelklicke darauf. Dann wähle ich das aus und halte die Umschalttaste gedrückt, um es in einer geraden Linie zu bewegen und die Größe zu reduzieren. Dann drehe ich es. Ich halte die Umschalttaste gedrückt, um zu rasten, und sobald es vertikal ist, kann ich es hier platzieren. Ich denke, es ist immer noch zu groß. Also kann ich einfach zu den Dimensionen zurückkehren und das reduzieren und dann auswählen, ich kann es nach unten verschieben, vielleicht bis zu dieser Stelle für den Moment. Also ziehe ich das. Wenn ich das rückgängig mache, ziehe ich das alles raus. Und jetzt komme ich her. Ich habe eine Kolumne namens Shop. Das wird Größe 20 sein. Das wird Größe 16 sein. Das sind also Links für diese Kolumne. Ich werde das erweitern und das runterziehen , vielleicht bis zu dieser Stelle hochdrücken. Ich möchte, dass sie mehr Abstand haben, also gehe ich zur Zeilenhöhe und mache sie so 36. Dann wähle ich diese beiden aus. Bei gedrückter Umschalttaste ziehen, dann zweimal Strg D drücken. Die zweite Spalte enthält für mich Produkte nach Kategorien. Also wähle ich einfach diese beiden aus und ziehe sie heraus. Wähle diese beiden aus und schiebe sie nach links. Ich werde das auswählen und in der Mitte ausrichten. Halten Sie die Umschalttaste gedrückt, um es zusammen mit diesem auszuwählen und es so in der Mitte auszurichten. Als Nächstes erstellen wir diese Schaltfläche und diesen Teil. Also ziehen wir diese beiden einfach so raus. Ich werde sie genau da hinstellen. Und ich glaube, wir haben diesen Knopf verpasst, weil wir die anderen Knöpfe gestylt haben Sie hatten einen Buchstabenabstand von 5% und wir haben sie mittelgroß gemacht. Das, was wir einstellen, kann also diese Farbe haben. Also geben wir ihm diese Farbe. Zurück zu unserer Referenz, wir haben auch dieses Formular. Wählen Sie dies aus, drücken Sie C zum Kopieren und dann Strg V zum Einfügen. Sie haben es an der richtigen Stelle eingefügt. Sie jetzt Shift und T gedrückt halten , ändern wir die Größe von allen Seiten Ich möchte, dass es vielleicht diese Größe hat, und ich möchte es bis zu dieser Stelle ziehen. Lass mich die Farbe ändern , damit du sie sehen kannst. Gib ihm diese Farbe. Geben wir ihm jetzt einen halben Grenzradius. Die Hälfte des äußeren Grenzradius. Wenn ich dann diese beiden auswähle, richte ich sie so in der Mitte aus. Drücken Sie darauf, sodass der Rand um ihn herum fast die gleiche Größe hat. wir das herausziehen, können wir dem jetzt einen Text wie „ Senden“ geben . Wählen Sie die beiden aus und richten Sie sie so aus. Melden Sie sich an oder senden Sie es ab. Lass es mich so schwarz machen. Halte die Taste gedrückt und wähle diese beiden aus. Drücken Sie das so. Was haben wir sonst noch hier? Wir haben Google Play und Appstore. Nun, das sind Dinge, die Sie googeln und herunterladen müssen googeln und herunterladen müssen Google Play-Schaltflächen. Bilder. Äh, lass mich sehen. Lass uns diesen auswählen. Also diese Typen haben diesen Knopf wirklich versteckt, aber ich habe ihn endlich gefunden. Hier ist er. Da haben wir's. Da gehe ich wieder rein und ziehe es einfach hierher. Also werde ich es einfach runterskalieren Umschalttaste gedrückt halten und dann rausfahren. Ich werde sie einfach irgendwo dort ausrichten. Gehen wir zurück zu den flachen Symbolen und laden YouTube herunter. Ich glaube, ich habe diese Symbole bereits heruntergeladen, aber für dich musst du sie herunterladen. Ich möchte nur Zeit sparen. Wenn ich also zu Strg+Shift K gehe, glaube ich, dass ich diese Symbole hier in meinem Download-Ordner habe. Also komplett mit X verknüpft, ich werde sie hier einfach zeichnen. Los geht's, wir wählen sie alle aus, richten sie aus. Jetzt sind einige von ihnen viel größer. Halten Sie also Alt gedrückt, um die Größe zu ändern. Halte die Taste gedrückt. Halte durch. Jetzt haben wir ungefähr die gleiche Größe, den gleichen Abstand. Wählen Sie diese drei aus. Oder ich kann das einfach auswählen. Lass mich das einfach auswählen. Halte die Taste gedrückt und ändere die Größe Kehren wir zu unserer Referenz zurück. Ja, wir müssen sie dort hinstellen. Zoomen Sie hinein und ziehen Sie dann zweimal Strg D bei gedrückter Alt-Taste. Dann doppelklicke ich darauf. Gehe zurück hierher. Doppelklicken Sie auf YouTube, wählen Sie das aus, doppelklicken Sie darauf, laden Sie es von einem Bild oder Instagram hoch und doppelklicken Sie, damit wir X hinzufügen können Diese sind zu groß. Ich möchte sie immer noch viel kleiner machen. Und das ist, ich möchte es etwas größer machen und alles auswählen und es so vertikal ausrichten Wählen Sie diese drei aus und ziehen Sie sie nach unten. Ich möchte sie an dieser Seitenübersicht ausrichten. Jetzt möchte ich das auswählen und die Höhe reduzieren. Ich denke, das ist jetzt eine gute Größe. Eine Sache bleibt noch übrig. Bevor wir diesen Abschnitt beenden, haben wir hier etwas Text. Wenn ich das nun ziehe, wird es nach links ausgerichtet. Richten wir uns nach rechts aus. Und hier sagen wir, melden Sie sich für den Early-Access an. Doppelklicken Sie darauf und fügen Sie das dort ein. Mach es ohnmächtig. Mach es nicht so dunkel Lass mich das ein bisschen runterdrücken und diese löschen. Und ich glaube, jetzt kommen wir weiter. Wenn wir jetzt hier zu unserer Referenz-Website gehen, fangen wir ganz oben an und schauen, was wir haben. Scrollen Sie also nach unten, unsere vorgestellten Kategorien, wir haben unseren Rabattbereich, unseren Hot-End-Trend Sie können klicken und mehr ansehen. Sie können unsere Geschichte lesen. Sie können sich in unsere Mailingliste eintragen. Sie können uns helfen zu wachsen, indem sie uns taggen und Schuhe präsentieren, die sie bei uns gekauft haben, und das teilen wir auf unserer Plattform Lassen Sie mich diese auswählen. Da haben wir's. Also ich denke, das ist ein guter Ort, um das zu beenden. Wir konnten eine Landingpage von oben nach unten erstellen . Als Nächstes werden wir organisieren und bereinigen unsere Datei organisieren und bereinigen, denn wenn wir in einem Team arbeiten oder wenn wir später wiederkommen wollen, um an dem Projekt zu arbeiten, wollen wir, dass etwas organisiert ist. Wie räumen wir die Dinge auf? Lass uns das in der nächsten Lektion machen. Wir sehen uns in Kürze. 11. Bereinigen: Jetzt ist es an der Zeit, unsere Designdatei aufzuräumen. Also zurück zu unserem Kunstwerk, wo ist es? Ja, hier sind wir. Lass uns von ganz oben beginnen. Wenn ich also Organisieren sage, meine ich, lass uns verschiedene Dinge gruppieren und sie benennen, damit wir sie sehr leicht finden können. Hier haben wir zum Beispiel das Logo und die Nervenelemente. Und jetzt möchte ich diese Elemente auswählen, also wähle ich Kickers und alle Menüelemente aus und mache das Wählen Sie all diese aus und dann Strg G. Wenn Sie nun G drücken, werden sie gruppiert Denken Sie daran, dass jedes Mal, wenn Sie Ihrem Rahmen etwas hinzufügen, es unter dem Rahmen unter dem Rahmen platziert wird. Alles, was wir zu diesem Rahmen hinzugefügt haben, befindet sich also immer noch darunter. Denken Sie also daran, dass wir einen Frame namens Desktop hinzugefügt haben. Ich doppelklicke also einfach darauf und nenne es Sneaker Store. Landingpage. Wie Sie sehen können, hat sich der Name hier oben geändert. Das ist also der Name dieser Landingpage. Und jetzt haben wir auf der Landingpage verschiedene Dinge, die alle Namen haben, mit denen sie geliefert wurden, selbst als wir sie importiert haben. Zum Beispiel dieses Google-Bild. Also wollen wir hier Elemente umbenennen. Denken Sie also daran, dass wir diese Elemente ausgewählt und gruppiert haben. Jetzt sind sie also Gruppe eins. Nennen wir sie Header. Und lass uns sie verstecken. Wählen wir dieses Bild aus, Hintergrundbild. Hier ist es. Doppelklicken Sie darauf und nennen Sie es Hero Image und verstecken Sie es. Okay, bevor wir es ausblenden, wähle ich den Hintergrund aus, halte dann die Umschalttaste gedrückt und ziehe und wähle, um sie auszuwählen. Steuerung G. Ich nenne sie Textblock für den Abschnitt Hero. Dann wähle ich diese beiden Bilder aus Control G. Bilder aus dem Abschnitt Hero. Ich werde das ausblenden, dann die Bilder der Helden-Sektion ausblenden dann den Hintergrund des Heldenbilds ausblenden. Lassen Sie mich das den Hintergrund des Heldenbildes nennen. Jetzt ist alles da oben beschriftet. Ich wähle einfach das und Strg G. Jetzt ist es gruppiert. Ausgewählte Kategorien. Dann lass es uns verstecken. Lass es kollabieren. Lassen Sie uns diesen ultimativen Rabatt auswählen. Steuerung G. Ultimativer Rabatt Bereich Ultimativer Rabatt, lassen Sie uns ihn ausblenden. Topaktuell und im Trend . Bereich Control G., verstecken wir ihn Über uns Control G. Endlich die Fußzeile, Control G-Fußzeile Zusammenklappen, verstecken und zusammenklappen. Lass uns weitermachen und anfangen alles von ganz oben aufzudecken Also das Helden-Hintergrundbild, der Helden-Textblock an, Helden-Hintergrundbild ein. Wählen Sie das aus, halten Sie die Strg-Taste gedrückt, wählen Sie den Hintergrund des Heldenbilds aus und lassen Sie uns sie dort platzieren Tatsächlich wähle ich diese beiden aus, Strg G und nenne sie die Helden-Sektion, um das zu reduzieren. Jetzt ist also der Heldenbereich sichtbar. Bilder aus dem Heldenbereich. Wo sind sie? Bilder aus der Heldenabteilung sollten sich auch in der Gruppe der Heldenabteilung befinden. Ziehen Sie es also per Drag & Drop hinein. Jetzt haben wir also den Hintergrund, den Textblock und die Bilder im Heldenbereich Textblock und die Bilder Lassen Sie uns sie einblenden. Lassen Sie uns auch den Header nehmen und ihn im Heldenbereich ablegen Es sollte oben sein, und lassen Sie uns es einblenden Lassen Sie uns den Fotobereich einblenden, der sich unten befinden sollte Instagram-Bereich soll gleich nebenan sein. Über uns soll ja direkt nach dem Trend stehen. Der ultimative Rabatt, die Registrierung in der Mailingliste ist das, wonach es um uns geht Lassen Sie uns jetzt aufklappen. Oh, der ultimative Rabatt kommt nach dem Featured. Fangen wir jetzt an, das Featured zu machen. Da haben wir's. Ultimativer Rabatt. Da haben wir's. Hot-End-Trend. Mailingliste , Instagram und das Foto Da haben wir's. Also noch ein Blick auf unsere Vorschau. In Ordnung, also klick. Und jetzt fangen wir zu scrollen, um zu sehen, was wir erreicht haben Nett. Da haben wir's. Jetzt haben Sie also eine schöne Landingpage, die Sie Ihrem Portfolio hinzufügen können . Man weiß nie. Dies könnten die Designs sein, die Sie Ihrem potenziellen Arbeitgeber zeigen werden. Also werden wir das von Zeit zu Zeit tun. Ich werde Kurse zum Entwerfen von Landingpages und anderen Teilen unserer Website oder Webseite mit Figma veröffentlichen Landingpages und anderen Teilen unserer Website oder Webseite mit Figma Jetzt, wo wir fertig sind, habe ich noch ein paar abschließende Gedanken, die ich mit Ihnen teilen möchte, damit wir uns in der nächsten Lektion wiedersehen. Geh nirgendwohin. 12. Schlussgedanken: Ich möchte mich nur ganz herzlich bei Ihnen dafür bedanken, dass Sie an diesem Kurs teilgenommen haben. Ich hoffe wirklich, dass Sie dadurch ein solides Gefühl dafür bekommen haben, wie UI-Designprojekte in der realen Welt in Pigma angehen können, nicht nur das Was, sondern auch das Wie und Warum hinter jedem Abschnitt, den wir erstellt haben Und jetzt sind Sie dran. Sie für Ihr Klassenprojekt Gestalten Ihre eigene Version der Landingpage, die wir durchgegangen sind. Es könnte ein Sneaker-Geschäft, eine Bekleidungsmarke oder sogar etwas anderes Mach es einfach zu etwas Einzigartigem, mach es dir zu eigen. Wenn Sie fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit teilen, indem Sie sie auf den Tab Projekte und Ressourcen unter diesem Videoplayer hochladen sie auf den Tab Projekte und Ressourcen unter diesem Videoplayer Auf diese Weise kannst du zeigen, was du geschaffen hast, Feedback einholen und vielleicht sogar andere Kursteilnehmer inspirieren Und wenn Sie diesen Kurs hilfreich fanden, können Sie meine Arbeit am besten unterstützen , indem Sie eine kurze Bewertung hinterlassen. Ruft einfach den Tab „ Rezensionen“ unter diesem Videoplayer auf und gebt uns ein paar Gedanken. Es dauert nur ein paar Minuten und hilft vielen Schülern, meinen Unterricht zu entdecken. Also mach weiter und gib deine Bewertung ab. Ich möchte mich noch einmal ganz herzlich bei Ihnen dafür bedanken, dass Sie von Anfang bis Ende mit mir zusammen waren, und ich kann es kaum erwarten, Sie in der nächsten Klasse zu sehen. Bis zum nächsten Mal, bleib kreativ. Frieden.