Figma für Webdesign UI und UX: Homepage Erstentwurf

1. Willkommen!: Hey da, ich bin Chris var1, ein professioneller Web- und App-Designer im folgenden Gower, du und ich, wir werden eine tolle Homepage in Figma entwerfen . Wenn du meine FIG nicht gesehen hast, führt mein Essentials-Kurs. Fangen Sie damit an. Du wirst diese Stiftung brauchen , bevor du in diese Bar springst. Jetzt, am Ende dieser Stunde, haben Sie ein vollständiges Homepage-Design für eine aktuelle Website. Aber bitte bedenken Sie, dass es keine Codierung gibt. Jetzt kreieren wir in Figma das Erscheinungsbild der Website. Und das könnte sie führen. Codewords werden unser Design aufgreifen und es in eine echte funktionierende Website implementieren. Das ist eine ganz andere Sache. Und wenn Sie Fragen dazu haben, ist dieser Codierungsprozess. Auch hier erinnere ich mich an die wesentlichen Ergebnisse , die alles klären werden. Was ich von dir will, ist eine perfekte Nachbildung meines Designs in diesem Video. Dann möchte ich damit deine Version sehen. Also poste es bitte auf der Plattform, damit ich dir meine Gedanken dazu mitteilen kann. Ich verspreche, dass mein Feedback konstruktiv sein wird. Sie sich also keine Sorgen um Ihre Fähigkeiten. Wir sind hier um es zu lernen. Das ist kein Urteil. Es geht darum, Spaß zu haben und als Gate-Designer zu wachsen , Lasst uns an die Arbeit gehen. 2. die Desktop-Version auf die richtige Weise einrichten: Willkommen zurück. Bitte öffne Figma, die Standalone-Version, und lass uns ein neues Projekt erstellen. Nennen Sie es das LG, kurz für diese Beine, tolles Dotnet. Okay, gut. Das Frame Tool und klicken Sie auf den Desktop-Reset. Diese Schritte sollten sehr vertraut sein, aber das ist der Punkt. Ich möchte, dass Sie diese Aktionen mit geschlossenen Augen bis zum Ende dieses Kurses ausführen können , wobei der Rahmen ausgewählt ist, ändern Sie den Breitenwert auf 1920. Sie können die Höhe so lassen wie sie ist. Wir passen es an, wenn wir nach unten gehen. Als nächstes ist das Raster, wie hier im Layout-Raster, der Standardwert nicht das, wonach wir suchen. Also führe dieses Icon an. Wählen Sie nun aus dieser Liste Spalten aus. diesem Grund sollten Sie sich keine Notizen machen, wenn Sie die wichtigsten Schritte für die Anzahl der Spalten viele Male wiederholen die wichtigsten Schritte für die Anzahl der Spalten viele . Ich bin sicher, du weißt schon, dass es 12 ist. Für die Margen. 360, bitte. Obwohl die Deckkraft auf 10 Prozent eingestellt ist, beeinträchtigt dies die Aufnahme. Es lenkt ab. Also bringe ich es auf 3%. Das musst du übrigens nicht tun. Darüber hinaus füge ich zwei Hilfslinien hinzu, die einen aktiven Bereich von 1200 Pixeln einrichten oder aktiv sind. Verwenden Sie Umschalttaste R, um die Lineale zu aktivieren , wenn Sie sie nicht aktiv haben. Bewegen Sie nun den Cursor hier auf der linken Seite, und Sie sehen dieses Symbol auf Ihrem Cursor. Klicken, ziehen und bewegen Sie es zum linken Rand. Sie werden das Gefühl haben, dass der große Mann versucht, Ihnen zu helfen , es einzurasten und bei Bedarf herauszuzoomen. Wiederholen Sie dies für die andere Kante des Rasters. Im Grunde ist dies die Grundlage unseres Designs. Dies ist unser Ausgangspunkt. Bitte öffnen Sie die Website in Ihrem Browser. Das ist, das sieht gut aus. Dotnet. Von hier aus möchten wir das Logo herunterladen, was auf verschiedene Arten geschehen kann. Wenn Ihr Browser dies zulässt, klicken Sie mit der rechten Maustaste darauf und prüfen Sie, ob Sie das Bild direkt herunterladen können. Wenn das nicht funktioniert. Hier ist meine andere Methode. Klicken Sie mit der rechten Maustaste darauf und wählen Sie in dieser Liste Inspect. Das ist also inspizieren. Die meisten bekannten Browser haben diese Option. Ich benutze übrigens Firefox, in diesem Panel unten suchst du nach dem einzigen Ding, diesem Teil hier, Logo das PNG. Wenn Sie den Cursor darüber bewegen, sehen Sie, dass dies ein Logo in einem transparenten Format ist, PNG und das ist wunderschön, genau das wollen wir. Klicke drauf. Und jetzt können Sie definitiv sagen, dass Sie es, sobald dies erledigt ist, ziehen Sie es bitte von Ihrem Desktop auf unser Design. Das Tolle daran ist , dass Sie die Größe nicht ändern müssen. Es ist schon genau so, wie wir es wollen. In Bezug auf die Platzierung sollte dies ein Kinderspiel sein. Richten Sie es an der linken Führung aus. Von oben. Lassen Sie etwa 30 Pixel auch ihr Datum angeben. Sie sich keine Sorgen um diesen spezifischen Wert , da wir später damit spielen werden. Lassen Sie uns innehalten, weil es einen sehr wichtigen Punkt gibt. Bitte kommen Sie immer wieder auf 100% Zoomstufe zurück. Das ist wie Zähne putzen oder Wasser trinken. Es ist nicht fraglich, ist nicht optional. Es basiert nicht auf deiner Stimmung. Ich zoome ständig mit der Maus rein und heraus. Sie müssen dasselbe tun, um nach den verschiedenen Details zu suchen. Aber wir müssen immer, und ich wiederhole, immer wieder auf 100% zurückkommen. Warum mache ich es so eine große Sache? Weil unsere Arbeit bei 100% zu sehen sein wird. Wir müssen unsere Arbeit immer mit den Augen des Benutzers beurteilen . Wir werden alle möglichen feinen Minutendetails bemerken. Aber wenn wir auf 100% zurückzoomen, sind diese Details der Bauch und gehen verloren. Dies ist also ein sehr häufiger Fehler bei Anfängern , da sie hineinzoomen konnten. Sie sehen all diese Details und gehen einfach davon aus, dass die Benutzer sie ebenfalls sehen werden. Und offensichtlich ist das nicht der Fall. Und hier ist die Kehrseite. Sie zoomen auf 50% oder so etwas heraus. Sie fügen das Textfeld hinzu, in dem Willkommen oder was auch immer steht. Jetzt ist es an der Zeit, seine Größe einzustellen, richtig? 12 ist eindeutig zu klein. Aber weil wir verkleinert sind, wählen wir vielleicht einen Wert wie 70. Jetzt scheint dies in diesem spezifischen Kontext bei dieser spezifischen Zoomstufe in Ordnung zu sein. Aber wenn Sie zu 100% zurückkommen, können Sie deutlich sehen, dass dies viel zu groß ist. Das ist so groß wie das Logo und es ist nur ein Wort. So haben sich Anfänger oft selbst getäuscht, dass die Ansicht aufgrund der falschen Zoomstufe verzerrt wird . Okay, bitte löschen Sie die Texte und machen Sie sich mit dieser Option vertraut. Verunsichert, sagen Sie, dass der Hotkey für mich absolut keinen Sinn ergibt. Verschieben Sie die 0. Sie müssen also Ihre Maus loslassen , um die Umschalttaste Z zu verwenden. Es ist, was es in anderen Designprogrammen ist kontrolliert, aber dass es hier etwas ganz anderes gibt. Vorerst. Bitte stellen Sie sicher, dass Sie sich hier an dieses Dropdown-Menü gewöhnen und immer zu 100 Prozent zurückkehren. Machen wir eine kurze Pause. 3. Gestalte die Kopfseite: Willkommen zurück. Wir haben jetzt die Grundlage. Lasst uns nun zur Kopfzeile übergehen. Um die Dinge einfacher zu machen, wählen Sie bitte den Rahmen und ändern Sie weniger die Hintergrundfarbe. Ich suche das sehr, sehr hellgraue und ich habe einen genauen Farbcode im Auge. Es ist F2, F2, F2. Wenn Sie wachsen und erleben, werden Sie sich bald an einige wichtige Farbcodes erinnern. Vertrau mir dabei. Drücken Sie nun die Escape-Taste und ich hoffe, Sie können sehen warum das Rastersystem ein kleines Problem darstellt. Also bitte hallo, indem du hier auf dieses Symbol klickst , weil wir uns auf das konzentrieren müssen, was vor sich geht, auf die eigentliche Leinwand. Jetzt brauchen wir für den Header den reinweißen Hintergrund, figma. Wir verlassen uns nicht allzu sehr auf Rechtecke, weil wir das Frame Tool F drücken und eines herausziehen lassen. mir egal, wie groß es ist. Ich möchte nur sicherstellen, dass das Logo in dieser Box enthalten ist. Wenn Sie es richtig gemacht haben, sollten Sie das Logo in Frame 1 sehen, das sich in diesem oberen befindet. Okay, jetzt lasst uns eine reinweiße Füllung aktivieren. Deshalb habe ich mich für diesen bestimmten Grauton entschieden weil er mit diesen weißen Rechtecken sehr gut funktioniert. Nun ungefähr die Größe dieses Regens, egal was er ist, Lasst uns ihn auf 1920 ändern. Und das liegt daran, dass das die Größe unseres Projekts ist. Um es zu zentrieren, bewegen Sie einfach die Maus nach oben und klicken Sie auf dieses Symbol. Okay, jetzt brauchen wir für die Höhe nicht viel, also sollten rund 100 Pixel in Ordnung sein. Plus oder das Minus 10, 20 Pixel geben oder nehmen liegt immer auf dem Tisch, weil wirklich nichts in Stein gemeißelt ist. Sie müssen sich wirklich anpassen, während Sie gut vorwärts gehen, okay, jetzt richten Sie es oben aus, indem Sie hier klicken. Jetzt braucht das Logo ein bisschen Arbeit, weil es sich in diesem Rechteck befindet. Wir können hier auf dieses Symbol klicken, um es vertikal im Rahmen auszurichten. Und natürlich muss es den linken Guide berühren. Jetzt. Okay, gutes Zeug, nett und einfach. Der nächste Schritt besteht darin, sich flach zu erstellen icon.com, was wieder meine Go-To-Website für Icons ist. Auch hier benötigen Sie ein Abonnement dafür und es gab keine kostenlosen Ressourcen, die vergleichbar sind. Okay, wir brauchen das Social-Media-Set für die richtige Seite. Bitte denken Sie daran, dass das flache Symbol nicht kostenlos ist, sondern bei weitem das Beste der Besten ist. Es tut mir leid, das sagen zu müssen. Keine ähnlichen Websites , die völlig kostenlos sind. Okay. Wir suchen nach den Icon-Paketen. Wir könnten nach Facebook, dann Twitter und Instagram und so weiter suchen. Aber ich würde das Rudel viel lieber finden. Das liegt daran, dass es unglaublich wichtig ist, konsistent zu sein. Geben Sie also soziale Medien ein und schauen Sie es sich an. Ich empfehle dringend, Icons zu verwenden , die dieselbe Farbe haben. Es sieht so viel sauberer aus, viel besser, aber das ist natürlich eine subjektive Sache. Jetzt bevorzugte ich diese sozialen Medien zurück, abgerundete Icons. Ich denke, diese sehen in meinem Kopf 10 mal besser aus. Ich liebe diese Symmetrie. Wenn dir das nicht gefällt, ist dieser auch eine starke Sekunde. Wir möchten sie als SVGs herunterladen. Ich füge sie schnell zu meiner Sammlung hinzu, indem ich hier klicke. Das ist ziemlich intuitiv, also werde ich nicht zu viel Zeit damit verbringen. Wenn Sie bereit sind, laden Sie die Sammlung herunter und wählen Sie SVG. Png ist keine gute Wahl , weil es einfach nicht so Wappen ist. Die Qualität ist nicht so gut wie SVGs sie exportieren, archivieren und per Drag & Drop in Figma ziehen. Jetzt gehe ich ziemlich schnell, aber ich hoffe, du arbeitest an deiner zweiten Besichtigung mit. Okay, wir haben sie alle ausgewählt. Bitte holen Sie sich das Skalierungswerkzeug und Sie die Größe auf etwas in dieser Richtung. So ziemlich klein. Zoomen Sie als Nächstes auf 100%, damit wir sie überprüfen können. Idealerweise möchte ich sie unter 40 Pixel haben , während Sie sie verkleinern. Behalten Sie das Breitenfeld im Auge. Nun, die Breite und Höhe sind gleich weil es sich um perfekte Kreise handelt. Aber du verstehst die Idee. Behalten Sie diesen Teil im Auge wenn Sie mit der Größe zufrieden sind, wechseln Sie zur Bewegung zu gut, positionieren Sie jetzt Ihre Maus zwischen zwei Symbolen neu und Sie werden einige rosa Linien sehen. Ich werde auftauchen, klicke und ziehe nach außen, um den Abstand zwischen ihnen zu vergrößern. Ich möchte hier zehn Pixel sehen, Fall, dass Ihnen diese bestimmte Reihenfolge nicht gefällt, gehen Sie über einen dieser Kreise, klicken, halten und ziehen Sie das Symbol an eine andere Stelle. Dies ist verfügbar, weil alle von ihnen ausgewählt sind und dass der gleiche Layertyp übrigens gerade unterwegs bin und nichts anderes los ist. Es gibt hier keine fortgeschrittene Technik und nur grundlegende Sachen in Figma. Okay, jetzt eine letzte Sache. Bewegen wir sie in die richtige Position. Klicken Sie auf Ziehen und lassen Sie es nicht los. Sucht nach diesen beiden Zeilen. Dies bedeutet, dass das Set vertikal im weißen Rahmen zentriert ist, aber auch richtig an dieser Anleitung ausgerichtet ist. Und das ist absolut perfekt. Eine Sache jedoch: Lass sie nicht schwarz. Klicken Sie auf die Auswahlfarben und der Farbwähler sollte angezeigt werden. Wählen Sie das Pipette-Werkzeug, dieses Symbol hier. Okay, jetzt stecke das Orange aus dem Logo, und das war's im Grunde genommen. Wir sind fertig. Herzlichen Glückwunsch zu deinem ersten Header. Toller Job. Machen wir jetzt eine kurze Pause und dann machen wir weiter. Danke. 4. Das Hauptmenü erstellen: Willkommen zurück. Bevor wir zum Hauptmenü wechseln, ist es am besten, dass Sie den Namen Frame eins zu Kopf haben. Es gab etwas Ähnliches. Es ist am besten, organisiert zu bleiben. Also nochmal, benennen Sie es bitte um. Okay, ziehen Sie jetzt einen neuen Frame heraus und es ist dieselbe Geschichte wie zuvor. Keine bestimmte Größe, nur eine zufällige Größe. Bevor wir uns anpassen, aktivieren Sie bitte eine Füllung, öffnen Sie den Farbwähler und wir sollten das Orange darunter zur Verfügung haben. Okay, da gehst du. Dokumentfarben, weil das Jetzt für die Breite 1920 die naheliegende Wahl ist. Heutzutage ist dies einer der beliebtesten Hauptmenü-Stile. Keine Effekte, keine ausgefallenen Farbverläufe, einfach schön und einfach. Zentriere es horizontal und lass uns über die Größe sprechen. Dies enthält unsere Hauptmenüpunkte, aber das geht darum und sonst nichts. Also denke ich, dass 60 Pixel ausreichen sollten, bis hin zu 100% gezoomt werden und sehen, ob das sinnvoll ist. Und ich denke, es ist in Ordnung, obwohl wir unsere Meinung später nicht ändern können , nachdem wir die Artikel hinzugefügt haben. Okay, holen wir uns das Typ-Tool und fangen wir mit zu Hause an. Kann 14 Pixel erhalten. Und unterhalten wir uns über die Schrift, die wir benutzen werden. Die kurze Antwort ist diese Poppins. Ich mag es, weil es einen Charakter zu nass hat, aber es ist nicht so schick. Es ist wie ein schön tailliertes Hemd, ein gutes Medium zwischen hawaiianischem Hemd und einem formellen Hemd, das mit einer Fliege getragen werden soll . Also ein glückliches Medium, das ist Poppins für mich. Jetzt wollte ich auffallen, also aktiviere ich die All-Caps-Funktion. Dies steht sehr im Einklang mit der bestehenden Version der Website. Denken Sie daran, wenn Sie dieses All-Caps-Styling deaktivieren möchten, klicken Sie auf das Minus. Ich bin damit zufrieden, wie es aussieht, aber es ist ein bisschen zu leicht für meine Basis. Lassen Sie uns also den Stil in halbfett ändern. Sieht bisher gut aus, verschiebe es bitte in den orangefarbenen Rahmen und platziere es so, dass es die linke Führung berührt, obwohl es nicht obligatorisch ist. Ich empfehle Ihnen, Umschalttaste a zu verwenden, um dies in einen automatischen Layout-Regen zu verwandeln , falls Sie keine Verknüpfungen mögen, drücke ich Control Z, damit ich Leg aus dieser Liste schreiben und Auto-Layout hinzufügen auswählen kann . Jetzt nochmal gutes Zeug. Beachten Sie, dass wir rundum etwas zusätzlichen Platz haben Das ist Polsterung und Sie können es von hier aus anpassen, auf 0 setzen, das wird es fehl am Platz schlagen, aber keine Sorge, greifen Sie es und bewegen Sie es rückwärts gehört. Jetzt ist der nächste Schritt wichtig. Stellen Sie sicher, dass Sie Home ausgewählt haben und nicht den Rahmen selbst. Okay, benutze Control D, um eine Kopie zu erstellen und zu duplizieren. Und da es sich um ein automatisches Layout handelt, weiß Figma, wo es rechts von diesem Artikel positioniert werden soll. Woher weiß es das? Wähle den Rahmen aus und ich zeige dir , dass es dieser Pfeil ist genau hier. Dieser Pfeil sagt, dass das waagerecht sein wird. Wenn Sie sich für die andere entscheiden , wird dies unsere vertikale Liste sein. Offensichtlich wollen wir das nicht, also ändere es zurück. Und lassen Sie uns diesen Doppelklick bearbeiten, um das auszuwählen. Möglicherweise müssen Sie das übrigens zweimal machen. Okay, das sollte sagen „Photoshop lernen“. Das ist mein Blog, das ist eine der Seiten. Es ist entkommen, die Änderung zu übernehmen und Control D erneut zu verwenden . Wenn Sie mit dem Hotkey nicht einverstanden sind, müssen Sie einfach alle ziehen oder Option ziehen. Wenn Sie auf einem Mac sind, müssen Sie Werbegeschenke sehen. Okay. Als nächster Punkt geht es um Chris unfruchtbar und den letzten Punkt, Kontakt. Jede Website braucht diese Seite. Jetzt gehen Sie bitte entspannt über das automatische Layout und all diese Hotkeys vor. Wenn Sie nur reguläre Textebenen hinzufügen und diese dann manuell verteilen möchten. Das ist auch total in Ordnung. Alles, was ich dich gebeten habe, ist sicherzustellen, dass du den gleichen leeren Raum zwischen ihnen hast. Apropos, bitte wählen Sie den Rahmen aus. Die Standardlücke beträgt 10 Pixel, aber das ist etwas niedrig, besonders wenn man bedenkt, mit wie viel Platz wir spielen müssen. Also klicke hier und ich schlage vor, dass du Umschalttaste gedrückt hältst und auf die Pfeiltaste Ich habe keinen bestimmten Wert im Hinterkopf. Manchmal friere ich einfach den Dialekt ein. In diesem Fall möchte ich, dass dieser letzte Menüpunkt etwas über dem halben Punkt des Rahmens Sie können fragen, warum nicht dieses Hauptmenü zentriert wurde? Und es ist eine einfache Antwort, weil Benutzer auf der linken Seite sein würden. Es gibt noch viel mehr zu sagen, aber das ist die Essenz, die später im Kurs eine tiefere Diskussion führen wird. Das Home-Element ist im vorhandenen Design gelb, Sie können Ihren Browser aufrufen, mit der rechten Maustaste klicken und das überprüfen. Und der Farbcode lautet FF FE 00 000. Wenn Sie die Auswahl wie folgt aufheben, müssen Sie mehrmals doppelklicken, um zu dieser Textebene zu gelangen. Klicken Sie einmal und Sie haben Rimland ausgewählt Doppelklick ausgewählt und Sie haben eingerahmt, um erneut Doppelklick ausgewählt zu haben, diesmal oberhalb der Startseite, und Sie haben es endlich. Das ist ein bisschen mühsam. Hier ist also eine schnellere Auswahl von Strahl. Okay. Jetzt mit allem, was diese gewählt haben, kontrollieren glyc home. Und das war's. Kontrollierter Likud und du bist fertig. Okay, öffne den Farbwähler und benutze diesen Code, FS und FF, FE 00, 00, 00, 00. Toller Job. Denken Sie also daran, wenn Sie steuern, auf eine Blasenebene zu klicken , die sich in mehreren Frames befindet, werden Sie sofort fantastisches Zeug auswählen. Benennen wir dieses in Hauptmenü um, und wir sind vorerst fertig. Ich danke dir vielmals. 5. Richte das Suchfeld ein: Willkommen zurück. Lassen Sie uns das Suchfeld behandeln, indem dieses Textbit aus dem vorhandenen Design einfügen. Gut das Typenwerkzeug und füge es ein. Design-Werbegeschenke mit Liebe gemacht, kostenlos für den kommerziellen Gebrauch. Großartig. Zentrieren Sie den Text sowohl in Bezug auf Positionierung als auch von hier aus. Das ist schon in allen Großbuchstaben. Passen wir also die Größe an. Lass uns mit Poppins gehen, robust, aber ich will etwas Weicheres. Mutig bedeutet im Grunde, dass Sie eine starke Aussage abgeben, aber wir wollen nicht wirklich so viel Aufmerksamkeit auf diesen Titel. So kann ein leichterer Stil besser funktionieren. Und im Licht scheint es in Ordnung zu sein. Bitte lassen Sie etwa 40 Pixel aus dem Hauptmenü. Das ist übrigens keine Resonanz für die Pexels. Aber wir wollen diesen Sweet Spot erreichen, zwischen einem kompakten Design und genügend Platz zum Atmen. Um sicherzustellen, dass Sie sich auf dem richtigen Weg befinden, halten Sie die Alt-Taste gedrückt und bewegen Sie den Mauszeiger über das Hauptmenü. Benutze dann deine Pfeiltasten womit? Ohne Verschiebung. Okay, jetzt für das Suchfeld, fangen wir mit unserem Texttyp an, um nach dem Freebie zu suchen. Und das wird ein Hinweis sein, der sich in der Box befindet. Obwohl die meisten Leute wissen, wie man ein Suchfeld benutzt, sieht dieser Hinweis für das Styling ein bisschen besser aus. Lass es uns ziemlich viel abnehmen. Ich würde sagen vielleicht Poppins, normale 13 Pixel, keine All-Caps-Behandlung. Das sollte ein einfaches und unkompliziertes Wort sein. Bitte denken Sie daran, dieses Panel zu öffnen , um diese Einstellung, die Einstellung für alle Großbuchstaben, zu deaktivieren . Sie tun dies, indem Sie auf dieses Minus-Symbol klicken. Okay, wir werden eine Farbe wählen nachdem wir den Hintergrund für diese Region hinzugefügt haben. Drücken Sie Shift a, um das automatische Layout zu aktivieren. Wir hätten den einfachen Rahmen benutzen können, aber das ist etwas besser. Aktivieren Sie eine Glocke, indem Sie hier klicken. Reines Weiß ist total in Ordnung. Nun, okay, jetzt ändern wir die Größe auf etwas etwa 500 Pixel, 500 oder etwas in dieser Richtung. Warum jetzt 500 Pixel? Weil die Last darin liegt und es nichts anderes gibt, was wirklich wichtig ist als dieser Bereich. Etwas, obwohl 300 Pixel den Platz nicht richtig belegen würden, würde es seltsam aussehen, einfach viel zu klein. Aber etwas über den 750 wäre eine enorme Übertreibung. Falls Sie präzise arbeiten möchten, gehen Sie hier in das Feld W und geben Sie 550 ein, was auch immer der Wert für die Höhe zu Ihnen passt. Denken Sie daran, das Hauptmenü betrug 60 Pixel und 600 Pixel. Verwenden Sie jedoch den gleichen Wert hier. Vielleicht bemerken Sie, dass das H-Feld ausgegraut ist. Das kann dir passieren. liegt daran, dass hier eine Einstellung von Einschränkungen und Größenanpassungen vorliegt. Aber lass uns weitermachen. Lass es uns einfach halten. Geh her und zieh das nach unten. Jetzt ist das Altersfeld, das Höhenfeld, freigeschaltet, weil Figma versteht, dass Tryna hier etwas tun kann. Der Text ist nicht mehr zentriert, sondern öffnet die Polstereinstellung von diesem Ort aus. Die Standardeinstellung ist oben links. Ich suche das hier. Okay? Manche Leute zentrieren es gerne so. Aber weil der Suchknopf darin sein wird, denke ich, dass ich es so belassen werde. Okay, quadratische Kanten sind ein bisschen 2005. Runden wir sie also auf fünf Pixel ab. Und weil wir hier in diesem Panel haben, zentrieren wir es in diesem großen Rahmen. Jetzt lassen Gang, der bisher in Bezug auf die Überschrift gut aussieht , 20 Pixel dazwischen. Einige Textebenen haben diesen Begrenzungsrahmen, der etwas größer ist als der eigentliche Text. Die Messung ist also möglicherweise nicht 100% genau, aber wenn Sie konsistent bleiben und die Welt messen, dann ist das alles, was zählt. Vertrauen Sie also den von Figma gezeigten Messungen und schon können Sie loslegen. Jetzt ist es an der Zeit, die Belastung einzurichten, das Typ-Tool zu geben und die Suche auszuschreiben. Jetzt merkt man vielleicht etwas Seltsames hier, aber keine Sorge, ich werde es erklären. Denken Sie daran, wie wir das Hauptmenü gemacht haben, in dem die Menüelemente direkt nebeneinander platziert werden , wenn wir auf Control D klicken, das ist automatisches Layout in Aktion. Lassen Sie mich das jetzt löschen. In diesem Fall müssen wir hier folgendes tun. Wählen Sie den Rahmen aus und im Popup-Fenster der Polsterung haben wir dieses Dropdown-Menü , das Sie möglicherweise verpasst haben. Im Moment heißt es zurück, ändere es in Leerzeichen dazwischen. Also von hinten in den Raum dazwischen. Und da gehst du. Und während wir hier sind, bearbeiten wir die Polsterung am linken Rand um 20 Pixel. Okay, das nächste Bett sollte einfach sein, wie der Suchtext und die Überschrift sie oder klicken Sie mit der rechten Maustaste und wählen Sie Auto-Layout hinzufügen. Fertig. Fügen Sie als Nächstes eine Füllung hinzu. Und natürlich sollte das orange sein. Sie werden feststellen, dass wir noch keine Text- oder Farbstile eingerichtet haben. Und das liegt daran, dass es bisher nicht nötig ist. Außerdem wird dies ein sehr kleines Projekt sein, also wird es nicht wirklich benötigt. Ändern Sie nun den Text weiß und wir runden die Koordinaten mit einem Wert von fünf Pixeln ab, um diesen Knopf gesünder zu machen, ändern Sie die Watte, dann ist es in Ordnung für die oberen und unteren 40 sollte dir einen Knopf in anständiger Größe geben. Jetzt weiß ich, dass wir eine andere Lücke für das Suchfeld haben , aber das ist beabsichtigt. Ich fühle , dass es so besser aussieht, weil wir den gleichen Abstand um uns herum haben den gleichen Abstand um uns herum und das sind 10 Pixel. Okay, jetzt zieh dich zurück, das ist alles Suchfeld. Wir haben noch einige Details zu klären, aber lassen Sie mich Ihnen zeigen, warum wir Auto Layout verwendet haben. Schnappen Sie sich eine beliebige Kante und ändern Sie sie. Sie werden feststellen, dass es immer noch sinnvoll ist. Keine Methode. Woher schleppt man? Im Moment weniger Pause, damit du das Video zurückspulen und mit mir arbeiten kannst . Wir sehen uns in einer Minute. 6. Gestalte ein Dropdown-Menü: Willkommen zurück. Wir haben alle Suchfelder und der Kontrast ist etwas anständig, aber ich denke, wir brauchen etwas mehr Trennung zwischen ihnen. Um uns dabei zu helfen, füge ich einen Schlaganfall hinzu. Nun wird dies auf diesen Frame angewendet , der übrigens Suche umbenannt werden sollte. Also bitte erledige das jetzt, benenne es um, um nach Farbe zu suchen, wir suchen nach diesem Sweet Spot. Nicht zu dunkel, nicht zu hell. Ich denke, dass etwas in dieser Richtung gut funktionieren sollte. Der Farbcode ist C9. C9, C9. Großartig. Lassen Sie uns nun das Dropdown-Menü machen, um es zu verschieben. Lassen Sie uns dieses Suchfeld duplizieren, Control D verwenden und zur Seite verschieben, benennen Sie es in das Dropdown-Menü um, bevor wir darauf eintauchen. Nun, okay, das erste, was wir einrichten müssen, ist, diesen Text zu ändern und ihn bis heute umzubenennen. Dafür kannst du aber alle Caps benutzen. Sie müssen nicht zur Texttransformation gehen. Manchmal ist es einfach einfacher. Okay, als Nächstes müssen wir das Dropdown-Symbol hinzufügen. Also werde ich meine Lieblingswebsite für dieses Labor aufrufen icon.com, während ich diese Schritte durchführe Lassen Sie mich eine wichtige Sache unterstreichen. Wir haben unserem Asset-Panel nichts hinzugefügt. In der Regel haben wir diese Suchschaltfläche noch keine Farbe oder Textilien eingerichtet. könnten wir möglicherweise tun. Aber wenn wir nicht vorhaben, sie über viele Seiten hinweg zu verwenden , warum sollten wir uns die Mühe machen? Wenn wir von ein paar Seiten sprechen? Tutorial-Einstellung, ich bin mehr als glücklich, einige dieser Dinge zu überspringen , die uns wirklich entfokussieren, die uns von der eigentlichen Designarbeit abbringen. Okay, wir haben den Button gelöscht und die Textebene wurde verschoben. Keine Sorge. Bring aber da rein und schrumpfe es. Sie müssen das Skalierungswerkzeug dafür nicht verwenden. Wenn Sie diese Art von Symbol verwenden, wird dies das Darlehen aushalten. Sie müssen sich also keine Sorgen machen, dass das Symbol 10 oder ähnliches durchschaut. Ich suche nach 36 Pixeln, aber nur eine persönliche Präferenz. Wenn Sie das Symbol in den Rahmen gelegt haben, wird das Datum wieder an seinen Platz verschoben. Warum geht es jetzt so zurück? Wenn Sie den Dropdown-Frame auswählen, sehen Sie, dass diese Option im Abstand des Polsterfensters zwischen eingerichtet ist. Okay, ich möchte, dass dieser Artikel etwa 120 Pixel breit ist. Stimmt's? es mir ansehe, glaube ich, dass ich vergessen habe, die Farbe der Hand zu ändern. Siehst du, das ist eine Auswahl hier. Date ist der Standardwert. Das ist aktiv. Dieser Text hier. Auf der anderen Seite ist dies eine Hand. Dies ist ein Text, der verschwindet, sobald Sie mit der Eingabe beginnen. Also bitte klicke darauf und öffne den Farbwähler. Während ich versucht bin, das Grau vom Strich zu benutzen, denke ich, dass das viel zu leicht dafür ist. Lassen Sie uns stattdessen mit etwas um diesen Farbcode gehen . A4. A4, a4. Okay, das sieht besser aus. Jetzt ist die Frage: Brauchen wir dieses zusätzliche Wort zwischen diesen beiden Feldern? Dieser hier sagt „ Sortieren nach“ und ich sage nein. Stattdessen denke ich, dass ich eine kleinere Höhe bevorzugen würde, aber beide Elemente wählen sie aus. Beide 50 Pixel sollten besser passen. Und ich werde etwas Kontroverses tun, aber ich stehe fest dahinter. Sie für den Suchrahmen Ändern Sie für den Suchrahmen den Füllstand auf der rechten Seite auf 50 Pixel. Und das liegt daran, dass ich fünf Pixel auf allen drei Seiten haben will. Das sollte viel besser aussehen. Und in der Tat tut es das. Bevor wir eine Pause machen, zentrieren wir sie horizontal. Um dies zu erreichen, wählen Sie beide Frames aus und gruppieren Sie sie zusammen. Ja, unsere erste Gruppe in diesem Kurs. Okay, Sie können Control G verwenden oder mit der rechten Maustaste klicken, nachdem sie ausgewählt haben. Ich bevorzuge das Control G aus offensichtlichen Gründen, es ist ein bisschen schneller. Verwenden Sie als Nächstes dieses Symbol hier, richten Sie horizontale Zentren aus. Jetzt können wir die Gruppierung dieser Artikel so aufheben. der rechten Maustaste in das Ebenenbedienfeld und das war's. Im Grunde sind wir fertig. Und ich bin sehr zufrieden mit unseren Fortschritten. Und ich hoffe, du amüsierst Schritt für Schritt. Wir werden diese großartige Website erstellen. Wir sehen uns in einer Minute. 7. Den wichtigsten Punkt erstellen – die Karte: Willkommen zurück, Heels. Der wichtigste Teil in unserem Design, die Karte. Dies ist unerlässlich, da es rund 80 Prozent der Seite einnimmt . Dies wird das Aussehen unserer Homepage bestimmen, also ist es am besten, damit gute Arbeit zu leisten. Bitte stellen Sie sicher, dass Sie an Ihrer zweiten Besichtigung mitarbeiten. Okay, mach auf, das sieht gut aus. Dotnet, klicke auf ein beliebiges Freebie. Und wenn Sie dann sind, speichern Sie das Foto auf dieser Seite, kopieren Sie den Titel und fügen Sie ihn in Figma hinzu. Du kannst es vorerst so lassen, wie es ist. Für die Beschreibung kopieren Sie zwei Sätze, Teil, und fügen Sie sie ein. Aber dieses Mal ziehe eine Kiste heraus. Okay, wir haben den Text hinzugefügt weil wir das automatische Layout verwenden, beide greifen und Umschalttaste verwenden. Sie werden feststellen, dass Sie ein automatisches Layout haben, indem Sie das Ebenenbedienfeld überprüfen. Dies ist das Symbol dafür. Stimmt's? Jetzt füge bitte die weiße Füllung hinzu. Das sieht nicht alles aus, was springt, aber keine Sorge, wir werden diese Ebenenstile ändern und es wird besser aussehen. Das erste, was ich reparieren möchte, ist die Polsterung. Verwende 24 alle Kanten. Und das liegt daran, dass dies einen großen Einfluss darauf hat wie die Website aussieht und wie sie sich anfühlt. Es dreht sich alles um diese winzigen Details. Verwenden wir für den Titel Poppins, halb fett, 20 Pixel, keine All-Caps-Transformation. Das vorhandene Design hat einen normalen Stil, aber ich denke, ich bevorzuge das halb fett. Egal, wir können mit allem in wenigen Lektionen experimentieren . Okay, Poppins halb fett 20. Für die Beschreibung versuchen wir Poppins reguläre 14 Pixel, keine Großbuchstaben. Auch hier musst du das nicht auswendig wissen und du musst nicht jede Wahl behandeln , als wäre es eine dauerhafte Sache. Es ist sehr wahrscheinlich, dass wir das ändern werden. Der Schlüssel hierbei ist sicherzustellen, dass die Beschreibung unwesentlich kleiner ist als der Buchtitel. Das ist merkwürdig. Hauptsache. Okay. Falls die Polsterung an der Unterseite nicht so aussieht, gehen Sie bitte mit der ausgewählten Beschreibung folgendermaßen vor, wählen Sie die zweite Option hier mit dem Namen „Auto Hide“. diese Option ausgewählt ist, wird das weiße Feld erweitert und die 20-Pixel-Polsterung sollte richtig aussehen. diesem Grund verwenden wir das automatische Layout. Ohne sie hätten wir das Hintergrundrechteck ständig anpassen und die Dinge ständig messen müssen. Es ist nicht das Ende der Welt, aber das ist immer noch viel besser. Apropos intelligenter arbeiten, wir möchten Spalten wie in der Live-Version sein. Wie sollen wir das machen? Nun, es gibt zwei Möglichkeiten. Nummer eins, wir machen etwas Mathematik. 1200 Pixel, aktiver Bereich minus zwei Lücken. Sagen Sie, dass die Pixel jeweils 16 insgesamt sind. 1200 minus 60 ist also 1140 geteilt durch drei, das sind 380. Das ist also die erste Methode. Eine Karte sollte 380 Pixel breit sein. Wir würden den Frame auswählen und dann würden wir den w-Wert auf 380 ändern. Nun, hier ist die zweite Methode. Wenn wir diesen Griff einfach nach außen ziehen, werden die Dinge nicht wirklich funktionieren. Also ändere ich etwas. Ich kontrolliere, klicke auf die Beschreibung und konzentriere mich hier. Das sagt wo. Und das liegt daran, dass ich die Kiste gezeichnet habe, ich habe es geschafft. Aber sagen wir, ich möchte, dass der Text basierend auf der Breite des Rahmens angepasst wird. Nun, wir müssen das ändern, um den Container zu füllen. Und lass es mich erklären. Dies ist eine Textebene , die sich innerhalb des Rahmens befindet. Der Container ist also der Rahmen. Wenn wir festlegen, dass die Textebene den Container füllt, bedeutet dies, dass sie ihrer Breite folgt. So sieht das aus. Wählen Sie den Rahmen aus und machen Sie ihn breiter. In genau so, dass sich der Text selbst neu anordnen ist wie Magie. In mehr als dem haben wir immer noch diesen 20-Pixel-Padding. Wenn ich den Container von Nanowire erstelle, sieht dieser Text das und er passt sich an, wächst in der Höhe. Das ist total genial und ich liebe es. Und hier ist ein weiterer Vorteil, wo sie kaufen, mehr Texte mit dieser Beschreibung haben. Lass mich etwas einfügen. Und da gehst du. Es sieht toll aus. Und wenn ich etwas davon entferne, ändert sich das Layout. Okay, lassen Sie mich die Größe auf 380 Pixel ändern und lassen Sie uns eine Zusammenfassung machen. Wir haben zwei Textebenen für den Titel erstellt, den ich gerade sammle, und dann habe ich ihn für die Beschreibung eingefügt. Ich habe die Schachtel gemacht und dann etwas hineingeklebt. Dann werden für beide von ihnen Auto Layout verwendet, um zu versenden. Hey, ich habe dann eine Hintergrundfüllung hinzugefügt und eine Polsterung von 20 Pixeln für die Breite der Karte eingerichtet . Ich hätte etwas Mathematik machen können, aber ich habe mich dafür entschieden, dem Projekt mehr Flexibilität zu verleihen. Ich habe das getan, indem die Beschreibung ausgewählt habe und darauf eingestellt habe, den Container zu füllen. Container bedeutet einfach Rahmen. In diesem Fall können Sie sich das als innerhalb des Rahmens vorstellen. Okay, mit dieser Einstellung kann ich jetzt die Größe des Rahmens und die Beschreibung wird angepasst. Bitte beachten Sie jedoch , dass wir keine Änderungen am Titel vorgenommen haben. Wenn wir also weitere Zeilen hinzufügen, wird es nicht richtig aussehen. Wählen Sie es erneut aus und ändern Sie es in den Build-Container. Sie können jetzt genau hier deutlich erkennen, dass es einen Vorteil hat. Wenn ich mehr Texte einfüge, werden wir loslegen. Geht zurück. Wir haben den Abstand zwischen diesen beiden Schichten nicht festgelegt. Lassen Sie uns dies tun, wählen Sie den Frame aus und legen Sie diesen Wert auf 10 Pixel fest. Bewegen Sie das abschließend nach unten und fügen wir ein Rechteck hinzu. Mach es so breit wie der Rahmen und mach dir keine Sorgen um die Höhe. Okay, sieht gut aus. Jetzt wo das Foto ist, Verwenden wir Control Shift J. Die, die wir zu Beginn der Lektion heruntergeladen haben , ist völlig in Ordnung, ob sie vorhanden sind und jetzt können Sie die Größe so hoch wie möglich ändern benötigt. Sie möchten sicherstellen, dass die Ecke sichtbar ist. Und wenn du glücklich bist, bewege es nur ein bisschen nach unten. Ich hoffe, das war interessant, aber machen Sie sich keine Sorgen, wenn Sie diese Größenanpassungsfunktion noch nicht erhalten. Es ist nicht das Ende der Welt. Es ist eine fortschrittliche Technik , um dich ein bisschen schneller zu machen. Wenn du es nicht schaffst, ist das vollkommen in Ordnung. Bitte komm zu diesem Gericht und bitte um Hilfe. Ich danke dir vielmals. 8. So verbesserst du die Karten: Willkommen zurück. In Figma gibt es immer Möglichkeiten. Wir haben zuvor gesehen, wie wir ein wenig Komplexität hinzufügen können , indem wir mit der Größenanpassungsfunktion spielen. mussten wir nicht tun, aber es gab uns viel mehr Flexibilität für den Fall, dass wir die Karte schmaler machen oder vielleicht die vierte Spalte hinzufügen möchten , der Job braucht nur ein paar Klicks. Die Arbeit wird mit nur wenigen Klicks erledigt. Wenn wir diese Komplexität nicht hinzufügen würden, würde es viel mehr manuelle Arbeit geben. Es ist das Gleiche mit dem, was wir gerade tun werden. Wir könnten diese Karte mehrmals duplizieren. Aber was ist, wenn wir zum Beispiel den Eckenradius oder vielleicht die Größe des Titels ändern wollen. Es wäre viel mehr Handarbeit. Also hier ist was ich vorschlage. Wählen Sie hier den Rahmen und diese Form aus. Überprüfen Sie das Ebenenbedienfeld, um sicherzustellen , dass Sie das Richtige ausgewählt haben. Wandeln Sie es nun in eine Komponente um, indem Sie hier klicken. Sie werden feststellen, dass sich das Symbol im Ebenenbedienfeld geändert hat. Und das bedeutet, dass wir loslegen können. Bitte entferne es aus dem Rahmen, ziehe es einfach nach draußen. Normalerweise würde ich eine separate Seite für alle meine Komponenten erstellen , aber ich möchte, dass Sie sie genau hier sehen. Okay, als nächstes ziehen Sie ein paar Kopien heraus , um sie zu ziehen, ist der beste Weg. Okay, noch eins, aber dieses Mal zentriere es im Rahmen, indem du hier klickst. Und schließlich noch ein anderes. Ich bin sicher, dass wir mindestens zwei weitere wollen. Vergrößern wir also die Größe des Rahmens. Wählen Sie diese oberste und ziehen Sie ihn ziemlich nach unten. Mach es richtig groß. Okay, als nächstes benutze alter, ziehen und verschieben, um noch ein paar Kopien zu erstellen. Unüberlegtes Raster von drei mal drei. Das sollte genug sein. Während ich im Hintergrund arbeite, möchte ich Ihnen sagen, dass es wichtig ist, dass wir die Fotos und die Titel ändern. Wenn wir neunmal eine einzelne Karte hinterlassen, wird dies viel über uns aussagen, da Designer sagen werden, dass wir in jedem Projekt faul sind, stellen Sie sicher, dass Sie Ihre Inhalte diversifizieren. Das Ziel ist einfach. Sie möchten es so aussehen lassen, als wäre das Projekt bereits codiert worden. So ist das die Live-Website. Repetitiv oder der falsche Inhalt bricht einfach dieses Bild, bricht diesen Traum, diese Fata Morgana , wie auch immer du es nennen willst, oder? Okay, jetzt zurück dahin, wo wir dieses Raster jetzt haben. Aber ich bin nicht in ihn verliebt. Gehen wir also zurück zur Hauptkomponente, die sich an der Seite des großen Rahmens befindet. Okay, jetzt wählen Sie bitte den Rahmen aus, das automatische Layout, das unsere Textebenen enthält. Sag, wir wollen diese Koordinaten abrunden, oder? Verwenden Sie dieses Feld hier nicht, da sich dies auch auf die oberen Kanten auswirken würde. Das wollen wir nicht. Klicken Sie stattdessen hier. Jetzt können wir mit dieser neuen Linie jede Ecke einzeln steuern und wir wollen die unteren Kanten. Das sind also die letzten beiden Felder mit 15 Pixeln. Und beachte, wie sich die Änderung auf der ganzen Linie verbreitet hat. diesem Grund haben wir mit Komponenten ein wenig Komplexität hinzugefügt. Ich glaube, es ist die Mühe wert. Wie wäre es, wenn wir den Schlaganfall dem Schlaganfall hinzufügen , war C9, C9, C9. Kein Tor. Hier geht's viel besser. Nur zum Spaß daran. Wählen Sie den Titel aus und tippen Sie auf die Pfeiltaste nach unten. Diese Änderung steht uns aufgrund dieser Funktion zum automatischen Layout zur Verfügung. Und weil es sich um eine Komponente handelt, wird ein auf jede andere Instanz verteilt. Auch hier ist eine Instanz ein Klon. In einer anderen Notiz. Was ist, wenn wir den Titel lesen lassen? Nun, schauen wir uns mal an. So würde es aussehen. Aber weißt du was, ich denke, ich bevorzuge eine dunkelgraue Farbe, übrigens nicht reines Schwarz , sondern nahe dran , um zu tun. Dies ist einer meiner Lieblings-Farbcodes und es sieht etwas raffinierter aus als reines Schwarz, so dass die Koordinate es möglicherweise nicht bemerkt. Aber vertrau mir, es ist ein subtiler, aber merklicher Unterschied , weil es mir so gut gefällt. Lassen Sie mich es zu meinen Farbstilen hinzufügen , nur damit wir wieder üben können, es wird nicht wirklich benötigt, aber ich denke, es ist eine gute Praxis. Ich nenne es Dark Text oder so ähnlich. Und ich bin froh, dass wir unseren ersten Farbstil in unser Projekt eingeführt haben . Denken Sie daran, an Ihrer zweiten Besichtigung mitzuarbeiten. Übrigens haben wir natürlich einige Schichten die die gleiche Behandlung benötigen. Der Titel, das Datum und das Dropdown-Symbol. Wählen Sie den Titel mit einem einzigen Klick aus. Verwenden Sie dann die Umschalttaste, um das Datum abzurufen. Und steuere die Umschalttaste wie noch einmal, um den Pfeil auszuwählen. So sollte Ihr Ebenenbedienfeld aussehen , wenn diese drei Ebenen ausgewählt sind. Jetzt. Jetzt wählen Sie bitte dunklen Text und wir können loslegen. Folgendes möchte ich, dass Sie tun, bevor wir die Umschalttaste K steuern und alle diese Bilder ersetzen. Natürlich müssen Sie sie von diesem Look gray.net herunterladen . Aber ja, ersetzen Sie die Bilder und ersetzen Sie danach bitte die Titel und die Beschreibungen. Lassen Sie mich Ihnen jedoch eine Situation zeigen. Sagen Sie, der Titel ist sehr lang und die Karte wächst in der Höhe. Jetzt könnten wir hier allerlei Tricks machen, aber das wäre wirklich kompliziert. Und das will ich nicht machen. Stattdessen möchte ich, dass du das machst. Entfernen Sie eine Zeile in der Beschreibung. Dies ist keine perfekte Lösung. Unsere Einstellungen erlauben uns keine maximale Flexibilität, aber das ist mehr als gut genug für diesen Punkt. Wenn Sie fertig sind, probieren Sie bitte verschiedene Stile für den Titel, die Beschreibung für die Polsterung und sehen Sie, was Sie sich einfallen lassen. Hier kannst du mit Dingen herumspielen. Nehmen Sie sich Zeit und bitte viel Spaß damit. 9. die sekundäre Navigation einrichten: Willkommen zurück. Richten wir die sekundäre Navigation ein, die zwischen dem Suchfeld und dem Raster platziert wird . Das haben wir vorher übersprungen, weil die Karten in meinem Buch höchste Priorität haben. Eine letzte Sache an ihnen, aber zu diesem Zeitpunkt könnten wir viel mehr in Bezug auf Neudimensionierung, Flexibilität und sogar Styling tun. Aber ehrlich gesagt würde das Sigmas Fähigkeiten zeigen und sonst nichts. Es ist so einfach, sich von all diesen Einstellungen überwältigen zu lassen. Also werde ich das sehr fortgeschrittene verlassen, vielleicht am Ende des Kurses, falls Sie diese Situation bekommen, in der eine der Karten etwas größer ist, gehen Sie zur Hauptkomponente und wählen Sie den Rahmen aus, der beide Texte enthält Layer und ändern Sie diesen Teil hier anstelle von HCG-Inhalten, schalten Sie ihn auf fixiert um. Das wird einige der vorherigen Einstellungen durchbrechen. Aber auch hier ist alles in Ordnung, weil es ein so kleines Projekt ist. Und wieder würde es eine große Komplexität erfordern, es zu reparieren und es zu 100% flexibel zu machen . Und das will ich jetzt nicht machen. Okay, für die Kategorien holen Sie sich den Hotkey des Typ-Tools D und schreiben Sie alle. Verschieben Sie dann eine für das automatische Layout. Sie können sehen, wie sich das Feld erweitert, das Padding macht, lassen Sie es uns auf 0 fallen. Und wenn wir im rechten Bereich hören, richten wir ein horizontales Layout ein. Der nächste Schritt ist ziemlich wichtig. Bitte stellen Sie sicher, dass Sie die Textebene und nicht den Rahmen selbst auswählen . Prüfen Sie das Ebenenbedienfeld. Okay, drücken Sie jetzt mehrmals auf Control D , um viele Kopien zu erstellen. Platzieren Sie sie jetzt eins nach dem anderen, würden sie in Kategorien aus der Live-Version existieren? Wie beim Durchlaufen, arbeiten Sie bitte an Ihrer zweiten Ansicht mit und erstellen Sie die perfekte Replik. In erster Linie, nachdem Sie die Replik verwaltet haben, können Sie mit einer neuen Version kreativ werden, kreativ werden und Spaß damit haben. Andere Farben, andere Layouts, andere Schriftarten nennen Sie es. Aber im Moment halten wir es einfach, indem wir beide dasselbe schaffen sogar dieselben Dinge zusammen benennen. Okay, da wir jetzt ein Objekt eingerichtet haben, hat Lee den Frame in zwei Kategorien umbenannt. Okay, wenn das erledigt ist, verwenden Sie bitte die Ausrichtungswerkzeuge auf der rechten Seite, um es zu zentrieren. Okay, tolles Zeug. Lassen Sie uns den Stil dieser Textebenen ändern. Und hier ist ein Tipp. Nachdem Sie den Rahmen ausgewählt haben, drücken Sie die Eingabetaste, alle Elemente in diesem Gehirn auszuwählen. Okay, jetzt haben wir den Textbereich im rechten Bereich zur Verfügung. Poppins regulär 14 ist völlig in Ordnung. Was ich tun möchte, ist eine All-Caps-Transformation hinzuzufügen. Und das liegt daran, dass ich möchte, dass dies ein bisschen mehr, weniger hervorsticht. Es wird auch die Hauptnavigation gespiegelt. Nun, okay, drücken Sie die Escape-Taste und wählen Sie den Rahmen erneut aus. Dieses Mal möchten wir den Abstand zwischen diesen Elementen anpassen . Ich suche etwas Großzügiges, wie 40 Pixel, das voll von 0 ist. Um sicherzustellen, dass Sie es richtig beurteilen, zentrieren Sie es bitte zurück. Und ja, damit bin ich ziemlich zufrieden. Jetzt haben wir ein paar Dinge zu tun. Wir wollen also 30 Pixel aus dem Suchfeld. Benutze dafür die ALT-Taste und die Pfeiltasten. Und 30 Pixel von den Karten entfernt. Könnten Sie diesen Wert jetzt mehr gebrauchen? Klar, mach das, wenn du danach fühlst. Aber jetzt machen wir eine komplette Replik und dann experimentieren Sie. Oh, vergessen wir nicht die Farbe. Bitte wählen Sie den Rahmen aus, drücken Sie die Eingabetaste, um alle Textebenen auszuwählen, und weisen Sie dann das dunkle Textil zu. Das hab ich gerade vergessen. Okay, wir sind fast fertig. Als optionaler Schritt. Lassen Sie uns zeigen, dass wir uns derzeit dieser ersten Kategorie in der Live-Version befinden, in Orange dargestellt wird. Also lasst uns das Gleiche machen, aber es auch mutig machen. Klicken Sie mit der Steuerung darauf und ändern Sie dann das Gewicht von hier aus. Aber wir werden, Okay, Ehrfürchtig, gutes Zeug für die Farbe. Wir müssen zuerst die Verbindung zu diesem Stil brechen, denn dies ist wiederum ein dunkler Stil. Das ist es, was dieser Button für diesen Teil ist. Und jetzt bekommen wir Zugriff auf den Farbwähler, einfache Sachen. Jetzt sollte unser Orangeton hier verfügbar sein, ausgewählt und wir sind fertig. Wenn Sie es aus irgendeinem Grund nicht haben, verwenden Sie einfach das Pipettenwerkzeug. Ich habe diesen abgerundeten Punkt nicht hinzugefügt, weil ich glaube, dass er nicht viel auf den Tisch bringt und ich denke, dass es eine Ablenkung von allem anderen ist, was hier vor sich geht. Also lasst uns weitermachen. Aber nach der kurzen Pause vielen Dank. 10. Die Pagination erstellen: Willkommen zurück. Dieser Teil, der Ihnen die Anzahl der Seiten anzeigt , wird als Paginierung bezeichnet. Lass uns an die Arbeit gehen und es in Figma schaffen. Beginnen Sie mit dem Typenwerkzeug und schreiben Sie eines aus. Aktivieren Sie als Nächstes das automatische Layout mit Umschalttaste a und richten Sie einen Film ein. Ich hoffe, du fängst an, diese Schritte auswendig zu lernen. Wenn nicht, keine Sorge, werden wir sie ständig durchgehen. Für die Polsterung verwenden wir 24 auf beiden Seiten und lassen Sie es dann oben und unten stehen. Okay, richten Sie einen Koordinatenradius von 10 Pixeln ein, obwohl wir diesen Wert später ändern möchten. Okay, jetzt lasst uns den Schlaganfall aktivieren. Pure Black ist vorerst auf der n-Seite eingestellt. Pixelstriche funktionieren viel besser. Ich schlage nie vor, dass sie für die sichtbaren Farben in den Karten einen Pixelstrichen verwenden . Die Note, die wir benutzt haben, ist sehr subtil. Deshalb können wir dort damit davonkommen , aber nicht hier. In diesem Fall ist das mit diesem Knopf nicht gut. Nun, Okay, nettes Zeug. In der Tat bin ich mit dem Koordinatenradius nicht zufrieden, dann mache ich es einfach nicht für mich. Bringen Sie es also bitte auf fünf Pixel herunter. Und ich denke, das ist viel besser. Wir müssen mehrere Exemplare erstellen. Aber lassen Sie es uns zuerst von Anfang des Programms in eine Komponente umwandeln . Okay, tolles Zeug. Ziehen Sie es an die Seite des Bildschirms und benennen Sie es in Paginierung oder ähnliches um. Auch hier bevorzuge ich es, die Komponenten nicht im eigentlichen Design zu verwenden . Und ich denke, das ist eine gute Angewohnheit. Idealerweise sollten Sie sie auf einer separaten Seite platzieren, aber das ist auch in Ordnung. Ziehen Sie nun die erste Kopie heraus, indem Sie die Alt- oder Wahltaste auf einem Mac gedrückt halten. Schnüren Sie es 30 Pixel von der Karte, das sind 300, 30. Okay, als nächstes ziehen wir noch ein paar Exemplare raus. Wir suchen die Fünf insgesamt. Jetzt könnten wir hier möglicherweise ein automatisches Layout hinzufügen, aber ich bevorzugte den klassischen Weg für dieses Element. Okay, fünf Instanzen dieser Komponente, fünf Klone, weil wir sie alle ausgewählt haben und denselben Typ. Passen wir den Abstand zwischen ihnen auf 10 Pixel an. Klassisch. Nun, okay, sieht gut aus, aber wir müssen sie immer noch stylen. Und fangen wir mit dem Strich und dem Text an. Diese müssen auf Orange eingestellt sein. Ich klicke auf die Hauptkomponente , die zur Seite steht. aus den Auswahlfarben Öffnen Sie aus den Auswahlfarben den Farbwähler und wählen Sie orangefarbene, klassische Sachen. Okay, jetzt brauchen wir den ersten , der schwarz ist, weil er bereits gedrückt ist. Lassen Sie mich Ihnen zeigen, wie einfach es ist, es zu ändern, auszuwählen und den Strich auf das Minussymbol zu entfernen. Sie dann von derselben Stelle Wechseln Sie dann von derselben Stelle aus diese Farben nach oben. So einfach ist das. Okay, lasst uns diese Belastungen trennen. Wir wollen drei links und zwei auf der rechten Seite. Und das liegt daran, dass wir zwischen ihnen die Textebene wollen , die drei Punkte zeigt. Sie denken vielleicht, dass die Dinge kompliziert werden, aber es ist Zeit, die Ausrichtungswände auszubrechen. Aber lassen Sie uns zuerst die Textebenen in andere Werte ändern . Auch hier wird dies nur einen Moment dauern. Übe deine Geschwindigkeit wie immer. Sie werden sehen , dass diese Instanz mit zweistelligen Ziffern die Größe selbst ändert, was für mich völlig in Ordnung ist. Okay, jetzt benutze diese Funktion namens „ aufräumen“ und das wird alles klären. Hills dort, da wir uns dem Ende dieses Homepage-Designs nähern, ist alles, was wir tun, ziemlich einfach. Es sind Textebenen und Rechtecke, nichts Ausgefallenes. Wir sorgen dafür, dass unsere Entfernungen unauffällig sind und dass wir die gleichen Handvoll Farben verwenden. Ob Sie es glauben oder nicht, dies ist die Grundlage, solide Entscheidungen, eine gute Basis Arbeit und das anständige Wissen des Programms. Das ist alles was du brauchst. Fühlen Sie sich frei, all diese Typen auszuwählen und zu einer Gruppe zu organisieren. Und wenn das erledigt ist, haben wir diesen Abschnitt beendet. Vielen Dank und wir sehen uns in einer Minute. 11. die Grundlage für die Fußzeile erstellen: Willkommen zurück. Lassen Sie uns daran arbeiten, je weiter Sie den Desktop-Rahmen möglicherweise etwas vergrößern müssen, aber das ist einfach zu tun. jetzt keine Sorgen darüber. Okay, jetzt, gutes The Frame-Werkzeug und ziehe eins raus. Dies muss 1920 Pixel breit sein. Und was die Höhe angeht, würde ich etwa 400 Pixel sagen. Das ist eine anständige Größe. Muss einige Dinge wie gewohnt bearbeiten. Für die Farbe bevorzuge ich normalerweise helle Fußzeilen, aber in diesem Fall ist das Original dunkel. Also lass mich etwas wie 33 benutzen, um zu sein. Dies ist ein weiterer dunkelgrauer Farbton, den ich oft benutze und Sie werden sich bald auch an sie erinnern. Auf der bestehenden Website haben wir einen orangefarbenen Balken , der darauf hinausgeht. Dafür verwenden wir das Rechteck-Werkzeug. Ich hoffe, Sie haben inzwischen gesehen, dass ich im Allgemeinen zufällige Formen zeichne und dann das Eigenschaftenfenster verwende, um es zu verwechseln. In diesem Fall dies 1920 mal sechs Pixel. Denken Sie daran, dass das in Ordnung sein sollte. Sechs ist ein anständiges Medium. Acht würde auch funktionieren, aber ich würde sechs etwas dünner bevorzugen. Und da wir auf dieser Seite sind, können wir es auch zentrieren und dann oben ausrichten. Das funktioniert gut, weil der von uns erstellte Rahmen ihn verschluckt. Übrigens sollten wir es in Footer umbenennen. Also haben wir hier etwas mehr bestellt. Wir könnten auch alle diese Komponenten zusammenfassen. Aber nochmal, lass uns weitermachen. Holen Sie sich das Type-Tool und fügen Sie alle diese Titel ein. Navigation, das ist der erste in der Mitte, Top-Downloads. Dann kontaktiere uns und abonniere unseren Newsletter, verteile sie aus dem Bett. Aber wir suchen zu diesem Zeitpunkt nicht nach etwas Bestimmtem. Leg sie einfach alle aus. Jetzt. Okay, lass uns jetzt über Styling sprechen. Wählen Sie alle diese Textebenen aus, und wir halten es ziemlich einfach. Poppins, reguläre 14 Pixel in allen Kappen. Es gibt viele, viele Details, die Sie hinzufügen können, um ein Design besser aussehen zu lassen. Pünktlich. Du wirst sehen, was sie sind, aber ich kann dir sagen, dass sie nicht das sind, was du erwarten würdest. Anfänger liebten es, Fotos, riesige Grafiken und Dinge dieser Art zu werfen . Also über Bord, viel zu viel. Profis machen das. Anstatt Weiß für diese Titel zu verwenden oder das ist reinweiß. Wir können eines dieser leichten Grautöne benutzen. Zum Beispiel E5, E5, e5. Es scheint nicht viel zu sein, aber vertrau mir, so zeigst du Liebe zum Detail. So arbeiten Profis. Eine andere Sache, lassen Sie uns all diese Elemente 60 Pixel von der Oberseite des Rahmens ablegen , das sind 60. Okay? Eine Sache an diesem Abstand ist, dass Sie auch 40, 50, 60, 70, 80 Pixel verwenden können, was immer Sie wollen. Aber was ist mit der Lücke zwischen ihnen? Nun, oben haben wir drei Spalten und wir kennen die genaue Breite, weil wir die Mathematik gemacht haben. Es waren 380. Wiederholen wir jetzt die Mathematik hier. 1200 Pixel für den aktiven Bereich oben haben wir zwei Lücken, aber hier haben wir drei. Die Lücken können beliebig groß sein, aber verwenden wir in diesem Fall 20. Das ist ziemlich Standard. Also 3 mal 20 ist 60, 1200 Pixel minus 60 ist 1140 geteilt durch vier, weil wir vier Spalten wollen, das sind 285. Was Sie also tun können, ist, dass Sie ein Rechteck zeichnen können , das so breit ist. 285. Da sind wir los. Jetzt können Sie es natürlich mit der linken Führung ausrichten. Sobald das erledigt ist, können wir noch ein paar Kopien hinzufügen und 20 Pixel dazwischen lassen. Jetzt diese narrensichere Arbeitsweise, aber es gibt noch einen schnelleren Weg mit weniger Mathematik. Denken Sie an das Raster, das wir am Anfang eingerichtet haben. Wählen wir den Desktop-Frame aus und ich aktiviere ihn. Ich ändere auch die Deckkraft auf 10 Prozent, damit du sehen kannst, was los ist. Jetzt beachte etwas. Die grauen Rechtecke sind so breit wie drei Spalten. Also mussten wir eigentlich keine Mathematik machen. Wir wissen, dass wir insgesamt 12 Spalten haben und wir wollen vier Bereiche. Jeder Titel sollte also drei Spalten erhalten. V mal 4 ist 12. Der erste hat diese drei. Der nächste hat also folgendes mir. Jetzt ist es ein Kinderspiel, die Titel an der ersten Spalte in jeder Gruppe auszurichten . Das ist ziemlich einfach. Insgesamt können Sie also eine Fußzeile aufteilen indem Sie Mathematik auf 85 verwenden oder dieses Raster verwenden. Wenn Sie nun drei Bereiche, drei Spalten wünschen , würde das folgendes bedeuten. Top-Downloads würden sich einfach in die rechte Spalte bewegen. Das ist alles, was es dazu gibt. Die Leader Rechtecke und jetzt können wir weitermachen. Aber nach dieser kurzen Pause vielen Dank. Und wieder hoffe ich, dass du mit mir zusammenarbeitest. 12. Inhalte in der Fußzeile hinzufügen: Willkommen zurück. Lasst uns anfangen, etwas Inhalt hinzuzufügen, um die Dinge am Laufen zu halten. Ich kopiere diese Menüpunkte einfügen. Nichts so ausgefallenes. Was ich sicherstellen möchte, ist, dass ich es ausrichten gelassen habe und dass ich die Zeilenhöhe auf etwas ziemlich Großzügiges erhöht . Vielleicht 30 Pixel, also sind das 300 etwas in dieser Richtung. Stellen Sie sicher, dass der Text weiß ist und entfernen Sie die Transformation für alle Großbuchstaben. Umso wichtiger ist, dass diese Navigation der Titel in diesen Elementen ist der Inhalt in diesem Abschnitt. Das ist also ein einzelnes Element. Um sicherzustellen, dass wir das an unser Design weitergeben. Ich wollte, dass die Gegenstände ziemlich nahe am Titel liegen, höchstens 15, 20 Pixel. Nun, irgendwo in dieser Richtung, vielleicht 10, würde das auch funktionieren, aber idealerweise 15 bis 20. Was ich möchte, dass Sie vermeiden, ist ein kräftiges, so dichtes, was im Grunde die Idee bricht dass dies ein einzelnes Element ist. Okay, jetzt füge ich für die nächste Spalte meinen Inhalt ein und lasse ungefähr 30 Pixel dazwischen. Ich möchte nicht an den Rand der dritten Spalte gehen weil sie auch komisch und überfüllt aussehen wird. Eine Sache, die Ihnen vielleicht aufgefallen ist, ist, dass die zweite Spalte tatsächlich länger ist als die erste. Und das ist kein großes Glück. Idealerweise haben diese Gegenstände die gleiche Höhe oder der linke wäre länger als der andere. Es ist einfach optisch angenehmer anzusehen. Aber weil dies ein echtes Projekt ist, werde ich es so behalten, wie es ist, denn so ist es in der Bibliothek. Und lass mich die Argumentation erklären. Die erste Spalte spiegelt gerade die Hauptnavigation wider. Die andere ist die sekundäre Navigation. Aus diesem Grund können wir andere nicht wirklich abhacken und auf die linke legen. Das würde keinen Sinn ergeben. Das sind also logisch organisiert . Wir können damit beginnen, Dinge auf Kosten der Logik oder der Benutzererfahrung neu anzuordnen . Das sage ich noch mal. Wir stützen unsere Entscheidungen nicht auf das Argument , dass es mir so besser gefällt. Wenn wir wissen, dass dies gegen die Logik oder die Benutzererfahrung verstößt . Okay, lass uns das weitermachen. Top-Downloads sind bereits sortiert, nur der Haufen leeren Speicherplatz , den Sie löschen müssen. Bitte stellen Sie sicher, dass Sie am Ende der Zeile keine leeren Leerzeichen hinterlassen . Das zeigt einen Mangel an Liebe zum Detail und es ist ein Fehler in meinem Buch ist kein großer Fehler, aber es ist ein Fehler, der mir und dem Kunden sagt, dass Sie nicht wirklich daran interessiert sind, Dinge auszuführen richtig. Navigieren Sie. Für den Abschnitt „Kontakt“. Bitte ziehen Sie ein Feld heraus , das besagt, warum es drei Spalten gibt , und fügen Sie den Text ein. Wählen Sie die E-Mail-Adresse aus der Zeile aus und machen Sie sie halb fett. Mehr als das, bitte mach es gelb. Du solltest das Farbfeld unter dem Farbwähler haben. Wenn nicht, probieren Sie es einfach oder legen Sie es manuell ein. Die Idee ist, dass dies eine Verbindung ist und auffallen muss. Man könnte sagen, okay, aber die Linken sind auch Links, oder? Und in der Tat hast du Recht. Aber was die Wichtigkeit angeht, wollen wir dieses Stück vorantreiben. Das ist ein bisschen interessanter. Die Links auf der linken Seite, naja, sie sind, sie sind hauptsächlich für die CEO-Zwecke, SEO-Zwecke. Nur wenige Leute benutzen sie tatsächlich, aber es ist nur ein Teil einer Website. Es ist also eine klassische Sache, sie in die Fußzeile zu integrieren. Okay, jetzt mach das Gleiche für Kontakt, halb fett, und mach es dann gelb. Die Dinge bewegen sich gut voran. Während ich die Social-Media-Symbole kopiere, lass mich dir sagen, warum du dich von sehr kleinen Fußzeilen fernhalten solltest . Ich meine, diese Fotos, die unglaublich kurz sind, wie 100 Pixel groß oder so ähnlich, haben nur einen Copyright-Hinweis und das ist das, was die Sache gibt. Die meisten Unternehmen haben verschiedene gesetzliche Anforderungen die sie posten müssen, die sie in der Fußzeile zeigen müssen. Nutzungsbedingungen, Cookies, DSGVO-Zeug, Datenschutzrichtlinie, Sie nennen es. Deshalb ist es am besten, Fotos wie dieses zu haben , großzügige. Oh, übrigens, du solltest diese Textebene auswählen und sie auf ganz hoch ändern. liegt daran, dass ich das Einfüge-Set für die kurze Beschreibung für den Newsletter kopieren möchte Einfüge-Set für die kurze Beschreibung für , nur falls Sie nicht sicher sind , ob die Dinge richtig ausgerichtet sind, wählen Sie beide Ebenen aus und verwenden Sie den Befehl Ausrichtung. Okay, tolles Zeug. Noch ein Tipp. Wenn Sie das Raster schnell ausschalten möchten, zoomen Sie nicht heraus und wählen Sie den Desktop-Frame aus. Verwenden Sie stattdessen das Ebenenbedienfeld. Einfach so. Jetzt können Sie das Raster aktivieren oder deaktivieren. Gute Arbeit. Lass mich dir noch eine gute Arbeit zeigen. Wir brauchen das Feld hier, oder? Kopieren wir das Suchfeld von oben in unserem Design. Klicken Sie nun auf die Fußzeile und fügen Sie sie mit Control V Positionieren Sie sie nun etwa 10 Pixel von der Textebene entfernt. Deshalb wollte ich, dass du es auf die automatische Höhe änderst , damit wir keinen Zugriff haben. Das ist ein bisschen zu breit, aber nirgends ist es. Klicken Sie zuerst auf den Button und bringen Sie ihn außerhalb dieses Rahmens. Platzieren Sie es auf der linken Seite wie bei allem anderen, wieder im Allgemeinen, links ausgerichtet des Dings zentrieren Sie sich nicht auf, okay? Sobald Sie eine Ausrichtung B gewählt haben, ist sie zentriert, obwohl ich die Linie verlassen habe. Also nochmal, du solltest angeben, um die Linie zu lassen, dieses Feld erfordert ein bisschen mehr Liebe. Das ist viel zu groß für diese Region. Wählen Sie es also aus und senken Sie es auf 40 ab. Das ist aber für das Z. Machen Sie es auch schmaler. Wenn Sie dies noch nicht getan haben, verwenden Sie dafür die richtige Anleitung. Das sollte ein Punkt des Libanon sein. Ersetzen Sie die Textbreite und geben Sie Ihre E-Mail-Adresse ein. Und ich fahre ziemlich schnell. Aber wenn Sie dies bei Ihrer zweiten Betrachtung sehen, sollten Sie in der Lage sein, so oft anzuhalten, wie Sie wissen müssen, okay? Dies wird zentriert sein, weil es früher eine Belastung für die Seite gab. Das bedeutet, dass wir den Suchrahmen auswählen und die Einstellung im Padding ändern müssen, indem aus dem Leerzeichen zwischen DO back now auftauchen. Okay, Ehrfürchtig, gutes Zeug. Der graue Strich wurde entfernt. braucht man nicht wirklich, besonders in diesem Hintergrund. Sie haben vielleicht bemerkt, dass dies weiß ist , während der Bibliothekar dunkel ist. Die kleine Variante an meinem Ende. Ich bin total einverstanden damit. Prüfen Sie Ihre Entfernungen und wenn Sie zufrieden sind, können wir es einen Tag nennen. Versteh mich nicht falsch. Es gibt noch so viel Arbeit auf der Homepage zu erledigen, aber wir werden nach der kurzen Pause weitermachen. Vielen Dank. 13. So gehst du visuelle imperfections: Willkommen zurück. Je weiter ist gerade fertig. Aber Sie haben vielleicht bemerkt, dass es nicht so ausgeglichen aussieht, obwohl es technisch korrekt und entsprechend der Mathematik gut ausgeführt ist, es fühlt sich einfach nicht richtig an. Aus diesem Grund wird alles in vier verschiedene Ordner gruppiert . Eine für jede Spalte. Verwenden Sie Umschalt zu Mehrfachauswahl-Layern und gruppieren Sie sie dann mit Control G. Das wird also Gruppe Nummer eins sein. Während ich den Rest erledige. Lassen Sie mich ein bisschen mehr über diese Situation sprechen. Dies ist einer dieser wenigen Fälle in denen Sie die Regeln biegen sollten. Auch hier ist das Gittersystem ein netter Leitfaden und es kann uns helfen, aber es ist nicht das Ende der Welt. Wenn etwas nicht perfekt auf Entwickler ausgerichtet ist, ist das wirklich keine große Sache, es ist kein großes Problem. Aus diesem Grund. Ich zögere nicht, es folgendermaßen zu tun. Nachdem Sie alle diese vier Gruppen haben, wählen Sie bitte alle aus. Gehen Sie als Nächstes nach oben rechts und verwenden Sie diese Funktion , die Aufräumen genannt wird. Dies wird im Grunde genommen den Abstand zwischen den einzelnen Ordnern zwischen den einzelnen Gruppen neu einstellen. Und einfach so sieht das besser aus. Okay, wir haben noch ein paar Elemente übrig. Wählen Sie die Linie zu gut aus, damit wir diesen horizontalen Teiler hinzufügen können. Wenn Sie Ihre Guides aktiv haben, sollte dies eine einfache Aufgabe sein. Schauen Sie sich hier das Breitenfeld an, um sicherzustellen, dass dies korrekt eingerichtet ist. Was Anfänger oft tun, ist, dass sie es weiß oder sehr hellgrau lassen . Und das ist ein großer Fehler. Das ist wie ein Gürtel, aber für deine Fußzeile anstelle deiner Bänder. Willst du jetzt, dass dein Gürtel wirklich auffällt? Nein, nicht wirklich. Deshalb brauchen wir eine sehr subtile Farbe. Vielleicht möchten Sie diese Noten im Bereich der Dokumentfarben ausprobieren , aber ich glaube nicht, dass eine von ihnen subtil genug ist. Stattdessen schlage ich so etwas vor. 434343. In der Vergangenheit verwendeten einige Designer Weiß mit einer geringeren Deckkraft, aber Entwickler mochten diese Art von Sachen nicht wirklich . Also würde ich lieber einen bestimmten Farbcode verwenden. ist es sicherer. In Bezug auf seine Position 30 Pixel von der sekundären Navigation entfernt völlig in Ordnung. Jetzt bleibt nur noch ein bisschen Kopiereinfügen, aber bitte überstürzen Sie es nicht. Es sind die letzten paar Minuten des Projekts. In diesem Teil hätten wir das automatische Layout mit der Einstellung verwenden können , die als Leerzeichen zwischen bezeichnet wird. Aber die klassische Arbeitsweise ist völlig in Ordnung. Ich verwende gerne die Alt-Taste ziemlich oft, um meine Messungen zu überprüfen und Dinge mit meinen Pfeiltasten anzubringen. Ich schlage vor, dass Sie gerade dasselbe tun . Das ist vielleicht nicht selbstverständlich, aber wenn Sie immer mehr Projekte entwerfen, werden Sie sehen, dass Sie damit beginnen , ohne darüber nachzudenken. Okay. Für Nutzungsbedingungen und Datenschutzrichtlinien möchte ich mehrmals die Leertaste drücken , um meinen leeren Bereich einzurichten. Dann kopiere ich gerne das leere Feld und füge ihn auf der anderen Seite ein. Auf diese Weise ist es perfekt ausbalanciert. Der Schnellaufstieg wählte diesen Datenrahmen und passte die Größe bei Bedarf an. Ja, okay. Um sich das Design anzusehen, drücken Sie die Wiedergabetaste, wenn Sie bereit sind, und sehen Sie von oben nach unten gut aus. Dieser Entwurf ist eine Acht von 10 in meinem Buch. Es ist nichts Glaubwürdiges, oder? Es ist nicht wunderschön, aber es ist gut ausgeführt und es sieht gut aus und es erledigt die Arbeit. Das bedeutet, dass die Leute keine Probleme damit haben werden. Wenn Sie das schaffen, eine einfache Acht von 10, können Sie ganz einfach Tausende von Dollar pro Monat verdienen. Du musst nicht ganz kreativ sein. Oh, hier ist ein Detail , das wir nicht verpassen sollten. Die Schaltfläche „Kontakt“ geht knapp über dem weiteren. Kopieren wir die Belastung aus dem Suchfeld. Stellen Sie zunächst sicher, dass Sie den Rahmen und nicht die Textebene auswählen . Das ist eine große Sache. Wählen Sie also erneut den Rahmen aus und kopieren Sie ihn dann. Wir wissen, dass wenn wir diesen Knopf über den Fuß der Vene ziehen , ihn aufnehmen wird, wird er ihn so verschlingen. Das wollen wir nicht. Wir brauchen die Last , um darüber zu schweben. Die Lösung ist ziemlich einfach. Fangen Sie an, es zu bewegen und halten Sie dann die Leertaste gedrückt. Und so einfach ist es wirklich. Das wird Figma sagen, dass er es verlassen soll. Wo lässt man das fallen? Auch hier fangen Sie an, die Ebene zu bewegen und halten dann den Platz, suchen Sie das Zentrum. Und das war's. Lass es besser aussehen. Runden Sie die Koordinaten ab, indem Sie einen sehr hohen Wert wie z. B. AD verwenden. Das ist aber E bis Z. Das wird komplett abgerundet, den Text in etwas Interessanteres ändern, z. B. senden Sie mir eine Nachricht und zentrieren Sie ihn dann noch einmal. Vielleicht möchten Sie den Frame in Last oder den Call to Action oder CTA oder ähnliches umbenennen . Wir wissen also, ob es LK ist, lustige Sachen, die gerade mit unserem Projekt fertig sind. Ich sehe dich in einer Sekunde danach Greg, Pause. Danke. 14. Hier brauchst du daran denken, dass du daran denken musst.: Hey, da, das ist Chris. Wie hast du es gemacht? Ich hoffe, du schaffst es, Spaß damit zu haben , denn am Ende des Tages geht es darum. Unabhängig vom Endergebnis müssen Sie dabei bleiben und Ihr Bestes geben, müssen Sie dabei bleiben und Ihr Bestes geben auch wenn Sie sich nicht zu 100% über Ihre eigene Version freuen, posten Sie sie bitte auf der Plattform. Was ich gerne von dir sehen würde , ist ein anderes Farbschema, verschiedene Schriftarten, vielleicht ein anderes Kartenraster. Bitte beachten Sie nun, dass Sie zuerst die perfekte Replik erstellen müssen die perfekte Replik dann bei der neuen, um dies alleine zu tun. Nur dann solltest du zu deiner eigenen Version übergehen. Wenn du Figma magst und du denkst , dass dies das Richtige für dich ist, lerne bitte weiter. Es gibt noch viel mehr zu entpacken, aber wir werden es Schritt für Schritt machen. Damit hoffe ich, dass ich dich bald in einem anderen Kurs von mir sehen werde . Das ist Chris unfruchtbar, der sich im Moment abmeldet. Sie geben.