Benutzerdefiniertes Website-UI-Design

1. Willkommen zum benutzerdefinierten Website-UI-Design-Kurs: Hallo, alle zusammen. Willkommen zum Kurs „ Benutzerdefiniertes Design von Benutzeroberflächen für Websites“. In diesem Kurs lernen Sie Schritt für Schritt alles, was Sie wissen müssen , um eine professionelle benutzerzentrierte Website-Benutzeroberfläche zu erstellen . Ich bin Giana Kanga eine UIUX-Designerin und freiberufliche Ich habe diesen Kurs so konzipiert, dass Webdesign einfach zu erlernen und praktisch Sie können sofort mit der Erstellung einer fantastischen Website beginnen. Folgendes werden Sie in diesem Kurs entdecken. Zunächst werden wir untersuchen, warum generische Website-Vorlage nicht funktioniert. Und verstehen Sie die Grundlagen von UIUX und wie Sie sie auf das Webdesign anwenden können Als Nächstes werden wir die Grundlagen von Figma untersuchen. Es ist ein leistungsstarkes Tool zum Entwerfen von Benutzeroberflächen für Websites. Anschließend konzentrieren wir uns auf die UX-Prinzipien, einschließlich der Auswahl einer Typografie, die Persönlichkeit einer Marke entspricht, der Auswahl von Farben mithilfe der Farbpsychologie und der Verwendung 603010-Regel, um die Farben auf der Website auszugleichen Anschließend werden wir das UX-Prinzip anwenden, um die Website benutzerfreundlich und visuell ansprechend zu gestalten Danach werden wir uns mit dem professionellen Umgang mit Kunden befassen, von der Erfassung von Projektinformationen bis zur Vertragserstellung. Schließlich werden wir alles zusammenstellen indem wir von Anfang bis Ende eine vollständige Website in Figma entwerfen von Anfang bis Ende Nicht nur das, wir werden auch Hilfe von künstlicher Intelligenz erhalten , um Websites mit Inhalten zu erstellen In diesem Kurs werden Sie noch viele weitere bewährte Methoden und Tipps lernen können. Dieser Kurs ist unkompliziert, anfängerfreundlich und enthält viele praktische Tipps, die Sie sofort anwenden können. Lassen Sie uns Ihre Reise ins Webdesign beginnen und gemeinsam etwas wirklich Tolles schaffen. Wir sehen uns in der Klasse. 2. Warum funktionieren generische Website-Vorlagen nicht: Lassen Sie uns zunächst darüber sprechen, warum es eine schlechte Idee ist, dieselbe alte Website-Vorlage zu verwenden . Sie haben wahrscheinlich eine Reihe von Websites gesehen , die sehr ähnlich aussehen. Sie sind wie Häuser mit Ausstechformen, alle haben dieselbe Form, nur unterschiedliche Farben. Diese generischen Websites sind ein großes Problem für Unternehmen. Stellen Sie sich einen überfüllten Markt vor, auf dem jeder dasselbe im selben Paket sagt. Wie heben Sie sich von der Masse ab? Das ist es, womit Unternehmen mit diesen generischen Websites konfrontiert sind. Diese Websites erzählen weder Geschichte eines Unternehmens noch machen sie zu etwas Besonderem. Sie sehen vielleicht hübsch aus, funktionieren aber nicht wirklich gut für Leute, die die Website nutzen. Außerdem helfen sie Unternehmen nicht dabei, neue Kunden zu gewinnen. Eine gute Website ist ein leistungsstarkes Instrument, um Menschen anzulocken. Bring sie dazu, Sachen zu kaufen. Es ist mehr als nur eine schicke Online-Broschüre. Es ist das Gesicht des Unternehmens. Wir müssen uns auf die Leute konzentrieren, die die Website nutzen. Sie suchen nach Antworten und Lösungen. Wir sollten eine Website entwerfen, die ihnen hilft, schnell das zu finden, was sie brauchen. Maßgeschneiderte Websites sind wie maßgeschneiderte Anzüge. Sie passen perfekt. Wir können dafür sorgen, dass sie gut aussehen, perfekt funktionieren und Unternehmen dabei helfen, mehr Geld zu verdienen. Denken Sie daran, dass jedes Unternehmen anders ist. Ihre Websites sollten dieselbe alte Website-Vorlage verwenden. Wird es nicht mehr schneiden. Wir müssen Websites erstellen, die etwas Besonderes sind und wirklich für Menschen funktionieren. Darüber werden wir der nächsten Lektion mehr erfahren. 3. Was ist UI/UX und wie können wir es anwenden? Website-Design: Lassen Sie uns etwas über etwas wirklich Wichtiges im kundenspezifischen Webdesign lernen wirklich Wichtiges im kundenspezifischen Webdesign UI und UX. Also, was ist UI? UI steht für Benutzerschnittstelle. Es ist wie das Gesicht der U-Website. Es ist alles, was ein Benutzer sieht und mit dem er interagiert. Dazu gehören Schaltflächen, Text , Bilder, Farben und deren Anordnung. Ein gutes UI ist leicht verständlich gebraucht. Also, was ist UX? UX steht für Benutzererfahrung. Es geht darum, wie sich ein Benutzer fühlt , wenn er Ihre Website nutzt. Es geht um den gesamten Weg von Suche nach Ihrer Website bis zur Erledigung einer Aufgabe. Eine gute UX macht die Nutzer zufrieden und zufrieden. UI und UX sind wie zwei Seiten derselben Medaille. Sie können eine schöne Website haben, aber wenn sie schwer zu bedienen ist, werden die Leute sie nicht mögen. Es hat eine gute Benutzeroberfläche und eine schlechte UX und Sie können eine Website haben , die einfach zu bedienen ist, aber wenn sie hässlich aussieht, Leute sie nicht benutzen wollen. Es ist wie gutes UX mit schlechter Benutzeroberfläche. Wie verwenden wir UI und UX , wenn wir Websites entwerfen? Die Erstellung einer erfolgreichen Website beginnt mit einem tiefen Verständnis der Nutzer. Wir müssen herausfinden , für wen wir konzipiert sind , welche spezifischen Bedürfnisse und Ziele sie haben. Indem wir das Design vereinfachen und sicherstellen, dass es leicht zu bedienen ist, können wir eine positive Benutzererfahrung schaffen Regelmäßige Tests mit echten Benutzern helfen uns dabei, Verbesserungspotenziale zu identifizieren und unser Design entsprechend zu verfeinern Letztlich sollte unser Fokus immer darauf liegen, die Bedürfnisse und Wünsche der Nutzer zu erfüllen und gleichzeitig eine visuell ansprechende Website zu erstellen. UI und UX sind sehr wichtig für die Erstellung erfolgreicher Websites. diese Konzepte verstehen und anwenden, können Sie Websites entwerfen , die die Leute gerne nutzen. 4. Was ist Figma-Design-Tool: Bevor wir uns mit benutzerzentrierten Designs und fortgeschrittenen UX-Prinzipien vertraut machen, sollten wir mit den Grundlagen beginnen Lassen Sie uns in das Design der Benutzeroberfläche von Websites eintauchen und gleichzeitig UX lernen. Zunächst müssen wir uns mit dem Design-Tool vertraut machen, also werden wir Figma verwenden FIGMA ist ein fantastisches Tool zur Gestaltung von Benutzeroberflächen, wir die Benutzeroberfläche von Websites entwerfen können , die wir gerne Wir beginnen mit den Grundlagen von Figma, wo wir lernen, wie man in der Benutzeroberfläche navigiert und einfache Designs erstellt Verlauf werden wir die fortschrittlicheren Funktionen wie die Erstellung interaktiver Prototypen, die Zusammenarbeit mit Teammitgliedern und die Verwendung von Komponenten untersuchen fortschrittlicheren Funktionen wie die Erstellung interaktiver Prototypen, , um unser Design konsistent zu halten Am Ende werden Sie ein solides Verständnis dafür haben, wie Figma verwenden können, um das Website-Design von Anfang bis Ende zu erstellen Website-Design von Anfang bis Ende zu 5. Vor- und Nachteile von Figma und Alternativen: FIGMA ist ein weit verbreitetes Tool zur Gestaltung von Benutzeroberflächen und bietet eine Reihe von Vor- und Nachteilen, die es wert sind, in Betracht gezogen Einer der größten Vorteile von FIGMA ist sein kollaborativer Charakter Da es cloudbasiert ist, können mehrere Teammitglieder gleichzeitig an demselben Projekt arbeiten Dadurch ist die Zusammenarbeit in Echtzeit reibungslos und effizient. FIGMA verfügt außerdem über eine intuitive Benutzeroberfläche , die für Anfänger leicht zu erlernen ist und dennoch leistungsstark genug für fortgeschrittene Benutzer Die Designkomponenten und wiederverwendbaren Stile tragen dazu bei dass Projekte organisiert und konsistent bleiben , was auf lange Sicht Zeit spart Darüber hinaus ist FICMA von jedem Gerät mit Internetverbindung aus zugänglich von jedem Gerät mit Internetverbindung aus So können Sie an Ihrem Design arbeiten, wo auch immer Sie sind , FIMA ist jedoch nicht ohne Nachteile Da es auf eine konsistente Internetverbindung angewiesen ist, kann es problematisch sein, wenn Sie in einem Bereich mit schlechter Konnektivität arbeiten FICMA bietet zwar einen kostenlosen Tarif an, einige seiner erweiterten Funktionen sind jedoch an ein kostenpflichtiges Abonnement gebunden, was für ähnliche Teams oder einzelne Designer eine Einschränkung darstellen kann ähnliche Teams oder einzelne Designer zwar Cloud-basierte Natur von Figma ist zwar eine Stärke, kann aber auch ein Nachteil sein, wenn Sie lieber arbeiten oder fliegen möchten oder mehr Kontrolle darüber benötigen, wo Ihre Dateien gespeichert werden Adobe XD ist jedoch eine Alternative zu FIGMA und bietet seine eigenen Stärken Für diese Lektionen werden wir FGMA als Leitfaden für unsere Lernreise verwenden Vor - und Nachteile verstehen, können Sie eine fundierte Entscheidung darüber treffen , welches Tool Ihren Bedürfnissen am besten entspricht Lassen Sie uns nun weitermachen und herausfinden, was FICMA für uns tun kann 6. Ein Figma-Konto erstellen: Hallo zusammen. Es ist Zeit , ein Figma-Konto zu erstellen Wenn Sie bereits ein Figma-Konto haben, können Sie diese Lektion überspringen Wenn du nicht einfach zu Google gehst oder auf den Link im Bereich Ressourcen klickst Wenn Sie zu Google gehen und nach Figma suchen, werden Sie diese Art von Ergebnis sehen Klicken Sie einfach auf das erste Ergebnis Jetzt bin ich auf der Figma-Landingpage. Wenn Sie bereits ein Konto haben, können Sie auf Anmelden klicken Wenn nicht, klicken Sie auf Schaltfläche „Kostenlos starten“ und klicken Sie hier auf Weiter mit Google, klicken Sie hier auf Weiter mit Google um sich mit Ihrem Gmail-Konto anzumelden. Okay. Jetzt klicke ich auf mein Gmail-Konto und dann auf. Weiter. Okay. Jetzt melde ich mich einfach an und wir müssen einige Details ausfüllen. Zuerst müssen wir hier unseren Namen hinzufügen, also füge ich meinen Namen hinzu klicke dann auf Weiter. Dann muss ich auswählen Welche Art von Arbeit machst du? Hier wähle ich das Design aus und klicke dann auf Weiter. Dann heißt es, beschreibt irgendeines davon deine Arbeit? Hier wähle ich die kostenlose Antwort und Sie wählen entsprechend Ihrer Position Dann klicke ich auf Weiter. Dann haben wir noch eine Frage wie, wem arbeiten Sie normalerweise zusammen? Hier wähle ich niemand nur mich aus und klicke auf Weiter, dann möchte ich niemanden einladen. Ich werde diesen Teil überspringen und hier etwas anderes auswählen, dann auf Weiter klicken und hier, haben Sie schon einmal ein IgM-Produkt verwendet, werde ich viele Male hinzufügen Wenn Sie mit WIC MA nicht vertraut sind, klicken Sie einfach auf Nein und dann auf Weiter Dann wähle ich dieses Starterpaket aus. In zukünftigen Lektionen werde ich die Vorteile eines kostenpflichtigen Abonnements von Figma erläutern die Vorteile eines kostenpflichtigen Abonnements von Figma Wir können jedoch all diese Lektionen mit dem kostenlosen Paket verfolgen diese Lektionen mit dem kostenlosen Paket Ich klicke auf Weiter und hier werde ich auf Eskepo klicken, jetzt ist hier das Figma-Dashboard Alle unsere Projekte werden hier geladen. als ersten Schritt Lassen Sie uns als ersten Schritt eine neue Figma-Datei erstellen. Dazu klicke ich auf diese neue Designdatei Okay, hier ist die Figma-Oberfläche. Zuallererst werde ich diese Figma-Datei umbenennen. Lassen Sie uns es als mein erstes Projekt umbenennen. Treten Sie ein. In der nächsten Lektion wollen wir uns mit all diesen Paneelen vertraut machen und versuchen, unseren ersten Rahmen oder unser erstes Design zu erstellen. S im nächsten 7. Was ist Figma UI3: Hallo alle zusammen. Figma hat ihren neuen UI-Baum vorgestellt Machen wir uns mit Figma UI Two und Figma UI Tree vertraut. als ersten Schritt Lassen Sie uns als ersten Schritt ein neues Design erstellen. Dazu klicke ich auf diese blaue Schaltfläche und dann auf Designdatei Okay. Hier ist die Vorschau von UI Two Editor. Wenn Sie diesen Editor sehen, haben Sie möglicherweise keinen Zugriff auf die dritte Benutzeroberfläche, da die dritte Benutzeroberfläche nur Personen gewährt wird , die auf ihrer Warteliste stehen. Wenn Sie auf die Schaltfläche „Hilfe und Ressourcen“ klicken, sehen Sie diesen Link, erfahren Sie mehr über UI Three und AIXs und hier finden Sie weitere Details Wenn Sie jedoch für UI 3 bewilligt haben, sieht die Benutzeroberfläche so aus Zuerst gehe ich zur Figma und lass uns eine neue Datei erstellen. Ich klicke hier einfach auf dieses neue Design. Ich werde so aussehen und in der nächsten Lektion werden wir die Elemente im Figma-Editor mit der zweiten Benutzeroberfläche durchgehen Figma-Editor mit der zweiten Benutzeroberfläche Wenn Sie diese Vorschau bereits haben und zur alten Vorschau der Benutzeroberfläche wechseln möchten, können Sie auf diese Hilfe und Ressourcen klicken und darauf klicken, um zur vorherigen Benutzeroberfläche zurückzukehren Und Sie können hier klicken und auf Neue Benutzeroberfläche verwenden klicken, um zur dritten Benutzeroberfläche zu wechseln. nächsten Lektionen müssen Sie zwei mit der Figma-Benutzeroberfläche abschließen. Danach werde ich Ihnen zeigen, wie Sie die dritte Benutzeroberfläche erhalten , auch wenn Sie nicht ausgewählt sind Wenn Sie also mit FIGMA nicht vertraut sind und über die UI-Vorschau verfügen, müssen Sie hier klicken und auf Zurück zur zweiten Benutzeroberfläche klicken, um die nächsten Lektionen abzuschließen 8. Figma UI2-Komplettlösung: vorherigen Lektion haben wir unser Figma-Konto erstellt. Jetzt bin ich im Figma-Dashboard, um zum Figma-Dashboard zu gelangen. Sie können figma.com verknüpfen und Jetzt bin ich im Figma-Dashboard, um zum Figma-Dashboard zu gelangen. Sie können figma.com verknüpfen Hier ist das erste Projekt, das wir in unserer letzten Lektion erstellt haben Machen wir uns mit dem Figma-Designtool vertraut und finden wir heraus welche Art von Elementen oder welche Funktionen wir in Figma verwenden können Dazu gehe ich zu unserem ersten Projekt und doppelklicke darauf Okay, jetzt bin ich bei unserem Figma-Projekt. Und in diesem Bereich nannten wir es Leinwand Hier ist der Bereich, in dem wir unsere Website gestalten, und in dieser oberen schwarzen Leiste finden wir Artikel oder Tools, die wir verwenden können. Hier haben wir Frames. Frames sind die Ebenen, die zur Gestaltung unserer Website verwendet wurden. Als ersten Schritt erstellen Sie einfach einen Rahmen, klicken Sie auf den Rahmen und klicken Sie auf unsere Leinwand und wir werden diese Art von Rahmen sehen und hier können wir unseren Rahmen umbenennen, indem wir darauf klicken oder auf den Frame-Namen doppelklicken und ihn wie meinen ersten Frame umbenennen. Dann können wir in unserer linken Seitenleiste viele unserer Ebenen sehen. Derzeit haben wir nur einen Rahmen und in unserer rechten Seitenleiste haben wir die Eigenschaften dieses Rahmens. Wenn wir beispielsweise die Größe dieses Rahmens ändern möchten, haben wir Breite und Höhe. Ändern wir also die Breite auf 1.400 und drücken die Eingabetaste Dann ändern wir die Höhe auf 700. Okay. Jetzt drücke ich Befehlstaste und das Mausrad , um den Rahmen zu vergrößern und zu verkleinern. Also hier ist der erste Frame. A, wir können auf dieser Leinwand beliebig viele Frames erstellen. Ich drücke Cramand und scrolle mit dem Mausrad nach oben, um unsere Leinwand zu verkleinern Dann klicke ich auch auf diesen Rahmen. Nachdem ich auf den Rahmen geklickt habe, sehe ich in unserer rechten Seitenleiste die Rahmenoption. Das sind also vordefinierte Frames. In diesem Fall werden wir beispielsweise ein Website-Design für den Desktop erstellen. Klicken wir auf diesen Desktop und hier haben wir kostenlose Standardgrößen für leider vorgefertigte Rahmengrößen für den Desktop Ich klicke auf diesen Desktop. Und hier haben wir den Rahmen in Desktop-Größe, die Breite beträgt 1.440 und die Höhe können wir an die Höhe der Website anpassen Lassen Sie uns das in meinen zweiten Frame umbenennen und die Eingabetaste drücken. Jetzt klicke ich auch auf den Rahmen und lassen Sie uns sehen, dass wir eine mobile Version der Website erstellen werden eine mobile Version der Website erstellen . Dazu klicke ich auf Telefon und hier haben wir Telefongrößen. Ich werde iPhone 40 und 50 Pro auswählen und hier ist die iPhone-Rahmengröße. Drücken wir unter Windows die Befehlstaste oder und scrollen wir ein bisschen nach oben zu Zumi So erstellen Sie Frames. Auch wenn wir auf den Rahmen in unserer rechten Seitenleiste klicken, haben wir die Optionen, die wir für unseren Rahmen verwenden können. Wenn wir beispielsweise die Feldfarbe ändern möchten, können wir auf diese Feldfarbe klicken und sie nach Belieben ändern. Okay, ich drücke zu Befehlssatz, um die Änderung rückgängig zu machen. Okay. Jetzt weißt du es mit Earl und dann haben wir das Shapes Tool. In diesem Formwerkzeug haben wir verschiedene Arten von Formen Klicken Sie auf das Formwerkzeug oder klicken Sie auf dieses kleine Down-Symbol und dann auf Red Wrangle Wenn wir dann zu diesem Rahmen kommen und darauf klicken, erstellen wir diese Art von Rechteckform In unserer Layoutoption oder im Ebenen-Trichter können wir den Rahmen sehen und innerhalb des Rahmens haben wir die rechteckige Form Vorerst werde ich diesen ersten Frame und den mobilen Frame entfernen und es wird einfacher zu verstehen sein Jetzt klicke ich auf dieses Rechteck und hier können wir die Feldfarbe ändern Lass es uns so ändern. Lass es uns grün machen. Okay. Jetzt kann ich die Größe ändern, wie ich will. Lass uns 150 mal 150 draus machen. Klicken Sie einfach auf das W und drücken Sie 150. Klicken Sie dann auf die Kappe , um zu den Höhenwerten zu gelangen. Lass uns 160 draus machen. Okay. Wenn wir jetzt zu Formen übergehen, können wir auch Linien wie diese erstellen. Wenn wir etwas kreieren wollen, lassen Sie uns eine Linie wie diese erstellen. Wenn wir eine exakt horizontale Linie erstellen wollen, drücken einfach die Shift-Taste und ihre Drehung oder ihr Winkel wird Null sein. Und hier können wir den Winkel auch so ändern. Okay. Jetzt können wir in Estroke die E-Strichfarbe ändern und den Strich vergrößern Dies ist ein Design-Tool und wir können mit diesem Tool jede Art von Design erstellen und ein fantastisches Website-Design erstellen Außerdem haben wir eine Pfeilellipse, wir können diese Ellipse so erstellen Lassen Sie uns die Füllfarbe ändern, um diese grüne Farbe zu ändern. Okay, markiere L von ihnen und dann können wir die Ausrichtung ändern. Wenn wir in diesem Fall auf Vertikale Mitte ausrichten klicken, wird L mittig ausgerichtet. Auch wenn wir auf dieses kleine Pfeilsymbol klicken und dann auf Horizontal verteilen klicken, ist vorerst nichts passiert, aber lassen Sie uns hier diesen Kreis bilden Dann drücken wir auf „Horizontal verteilen“. Komm schon, es funktioniert nicht. Lassen Sie uns zunächst einfach diese Linie entfernen und Alt drücken und rechten Maustaste klicken und so ziehen , um dieses Rangrechteck zu duplizieren Klicken Sie dann auf MTol, klicken Sie auf M-Tool und markieren Sie dies Klicken Sie dann auf Horizontalen I-Abstand verteilen und Earl wird gleichmäßig ausgerichtet Dann können wir Bilder erstellen oder wir können Bilder erstellen. Um Bilder hinzuzufügen, können wir auf dieses Symbol klicken , Formwerkzeuge und dann auf dieses Ortsbild klicken . Dann gehe ich zum eingestellten Ordner, klicke dann auf Öffnen und dann können wir auf unseren Rahmen wie folgt klicken, dann können wir die Größe dieses Rahmens ändern. Um es zu ändern, ohne das Bild zu beschädigen, wenn wir es einfach ändern, wird die Größe beschädigt oder es wird nicht richtig angezeigt. Um dies zu vermeiden, können wir die Umschalttaste drücken und es so anpassen. Okay, als nächstes haben wir das Stiftwerkzeug, das Stift und das Bleistiftwerkzeug. Mit dem Stiftwerkzeug können wir Formen wie diese erstellen und auf Fertig klicken. Dann haben wir T oder Text, klicken Sie auf den Text und klicken Sie so. Lass uns den Text als Hallo machen, also hallo Welt. Dann klicke ich auf den Rahmen und dann auf den Text. Dann haben wir Eigenschaften dieses Textes. Hier haben wir Google Fonts. Lassen Sie uns die Schrift mit vier Stiften erstellen. Die Schriftfamilie wird aus vier Pins bestehen und die Schriftgröße wird halbfett sein, und ich werde auch die Schriftgröße erhöhen Lass uns 60 Moderatoren einschmieren. Hier ist die Schrift und in der Feldfarbe können wir die Schriftfarbe ändern Außerdem gibt es eine Menge Eigenschaften, mit denen man spielen kann. Spielen wir erstmal damit herum, lassen Sie uns den Effekt zu diesem Text hinzufügen. Dazu klicke ich auf Effekt und dann auf Schlagschatten, und hier machen wir 20 X als Null und Y als Null. Dann erhöhen wir die Deckkraft auf 80% und wenn wir wollen, können wir die Hintergrundfarbe wie folgt ändern Es gibt viele Eigenschaften, mit denen man spielen kann. Auf diese Weise wird Text erstellt. Außerdem haben wir das Plug-In und die Komponentenbibliothek Figma, und in zukünftigen Lektionen werden wir sie alle lernen Wenn wir die Objekte auswählen , die Elemente auswählen, haben wir außerdem diese Art von Eigenschaften, mit denen wir Komponenten erstellen und Maschinenebenen und ähnliches auswählen In zukünftigen Lektionen werden wir zunächst alles darüber lernen. Ich werde diese Bleistiftgrafik entfernen und dann diese entfernen und die Bildgröße auf die volle Größe erhöhen. Außerdem haben wir zwei Rechtecke. Wählen Sie es aus und drücken Sie die Umschalttaste und wählen Sie das zweite Rechteck aus. Auf diese Weise können wir beide Rechtecke auswählen und dann auf Löschen drücken , um sie zu entfernen. Okay. Jetzt können wir diesen Frame oder das gesamte Projekt mit unseren Teammitgliedern teilen gesamte Projekt mit unseren Teammitgliedern Klicken Sie auf diesen Link zum Kopieren und jeder kann mit diesem Link auf dieses Figma-Projekt zugreifen Dann können wir das Original überprüfen, indem wir auf diese Schaltfläche klicken Lass uns darauf klicken und hier ist unsere Website. O hier ist unser Rahmen, der in der realen Ansicht aussehen wird. Außerdem gibt es viele Funktionen. Wenn wir beispielsweise den Rahmen oder das Bild auf der rechten Seite auswählen, haben wir einen Prototyp-Bereich. Dieser Prototyp-Bereich oder Prototyp-Tab dient dazu, die Interaktion zu unserer Website zu machen. Wenn wir beispielsweise auf eine Schaltfläche klicken, unsere Website oder unsere Webseite auf eine andere Seite leitet unsere Website oder unsere Webseite auf eine andere Seite weiter Diese Interaktion können wir mit dem Prototyp-Tab durchführen , und auf der linken Seite haben wir den Tab Assert im Assert-Tab. Wir können die vorgefertigten Designs bekommen. Wir können unser eigenes Design oder unsere eigenen Designelemente erstellen und diese über AssistTab verwenden Wir können auch mehr Seiten erstellen. aktuelle Seite ist Seite eins, machen wir es wie zu Hause und wenn wir auf dieses Plus-Symbol klicken, können wir eine neue Seite wie diese erstellen. Das sind die Grundlagen und wir haben mehr Tools zum Erkunden, mehr Funktionen zum Erkunden. Lass uns sie machen, während wir versuchen zu lernen, wie man die Benutzeroberfläche für unsere Website gestaltet. 9. Figma-Rasterlayout lernen: Hallo, alle zusammen. Die Ausrichtung ist im UX-Design von entscheidender Bedeutung , da sie ein Gefühl von Ordnung und Ausgewogenheit auf der Seite schafft . Wenn die Elemente richtig ausgerichtet sind, führen sie die Benutzer reibungslos durch den Inhalt, sodass er leichter zu lesen als zu verstehen ist. Eine gute Ausrichtung hilft den Benutzern, sich auf den wichtigen Teil des Designs zu konzentrieren , und trägt dazu bei, Verwirrung zu vermeiden, die zu einer insgesamt besseren Benutzererfahrung führt. Außerdem sieht die Website dadurch professioneller und ausgefeilter aus, was Vertrauen beim Publikum schafft. Sie können die nächsten Designs gerne sorgfältig analysieren. Bei all diesen Designs ist die Ausrichtung korrekt und die Ausrichtung falsch gestaltet. Überprüfen Sie einfach den Unterschied zwischen diesen beiden Versionen. Wenn wir benutzerdefinierte Designs erstellen, Ausrichten von Objekten etwas verwirrend und etwas knifflig. Aber in Figma haben wir ein Layoutraster. Schauen wir uns also an, wie wir das Layoutraster verwenden können , um unser Design auszurichten Ich bin im Figma-Dashboard klicke dann auf mein erstes Projekt Wir brauchen das nicht mehr, meinen zweiten Frame oder irgendeinen Frame. Ich lösche einfach die Leinwand und klicke dann auf den Rahmen. Lassen Sie uns einen Rahmen für die Desktop-Version erstellen. Klicken Sie hier auf den Rahmen, klicken Sie auf den Desktop und lassen Sie uns dann den Rahmen der Tablet-Version erstellen. Klicken Sie auf den Rahmen, erweitern Sie das Tablet und ich wähle die Tablet-Größe als iPad Pro 11 Zoll aus. Okay. Jetzt müssen wir eine mobile Version erstellen. Klicken Sie auf Telefon und wählen wir iPhone 14 und 15 Pro aus. Ordnung. Jetzt haben wir hier drei Pranes. Fügen wir dieser Desktop-Version zunächst ein Layoutraster hinzu. Wenn ich auf den Rahmen der Desktop-Version auf meiner rechten Seite klicke , kann ich die Eigenschaften dieses Rahmens sehen. Hier haben wir ein Layoutraster. Also klicke ich einfach auf dieses Plus-Symbol. Wenn ich auf dieses Plus-Symbol klicke, vergrößern wir das Design wie folgt. Okay. Okay. Wenn ich ein Layoutraster anwende oder diesem Rahmen hinzufüge, sieht es so aus. Jetzt klicke ich auf das Layoutraster, das wir hinzugefügt haben, um die Einstellung des Layoutrasters zu erhalten. Derzeit ist unser Rastertyp Raster, aber wir benötigen den Spaltentyp Layoutraster, weil wir unsere Elemente von links nach rechts ausrichten. Wenn wir es so horizontal ausrichten, müssen wir die richtige Ausrichtung auf der linken und rechten Seite erreichen , also Ausrichtung zwischen den Elementen. Hier müssen wir die Anzahl der Spalten hinzufügen. Ich werde die Anzahl der Spalten als Gebühr hinzufügen. Jetzt haben wir die Spalte für das Mautgitter, und ich werde die gleiche Farbe beibehalten. Dann wird der Text gestreckt und hier müssen wir einen Rand zwischen links und rechts hinzufügen. Rand bedeutet Abstand zwischen der linken Seite unseres Elements. Wenn wir beispielsweise Marginus 140 sagen, passt sich dieses Raster an , indem es uns einen Rand oder einen Abstand von links zum ersten Element und von rechts zum letzten Element gibt einen Abstand von links zum ersten Element und von rechts zum letzten Element Also hoffe ich, dass du es verstehst. Wenn wir jetzt Objekte hinzufügen, können wir sie korrekt hinzufügen, indem wir diese Spalte überprüfen. Dann müssen wir Dachrinne hinzufügen. In der Desktop-Version fügen wir Gutter als 20 hinzu. Wenn wir diese Dachrinne auf zehn ändern, wird der Raum dünn Fügen wir es tatsächlich als 15 hinzu, also so. Wenn wir nun Elemente wie dieses hinzufügen, fügen wir das Rechteck hinzu und duplizieren es, indem wir auf dem Mac die Befehlstaste drücken Wenn wir diese Elemente einfügen, können wir einfach die Rahmengröße erhöhen und die Ausrichtung wie folgt überprüfen. Wir können es perfekt so ausrichten. Auch wenn ich ein Objekt oder Element markiere oder auswähle , drücke ich und über einem anderen Element. Wir können den I-Abstand zwischen diesen beiden Elementen überprüfen. Derzeit 815 und lassen Sie uns diese beiden so hinzufügen. Perfekt. Dies ist der Vorteil der Verwendung des Rasterlayouts. Und wenn wir das Design ohne Rasterlayout überprüfen möchten, können wir auf den Rahmen klicken und auf dieses I-Symbol klicken und das Raster wird angezeigt. Okay. Lassen Sie uns nun dieser Tablet-Version ein Raster hinzufügen. Klicken Sie dazu auf den Rahmen in Tablet-Größe und dann auf GritayoutPlus Ich kann dann die Version in die Spalte ändern Dann verwende ich auf dem Tablet sieben als Spaltenanzahl. Dann wird die Marge 60 sein. Dann wird Gutter zehn Jahre alt. Lassen Sie uns die Anzahl der Spalten hinzufügen. Sechs ist besser. Dann können wir, genau wie auf dem Desktop, dieses Raster verwenden, um die Ausrichtung auf diese Weise zu überprüfen. Das ist der Bienenkuchen. Okay. Gehen wir jetzt zum Telefon. Lassen Sie uns auf Layoutraster klicken und hier klicken, dann den Rastertyp in Spalte ändern, und hier füge ich die Rasterzahlen-Synchronisierung hinzu, dann wird Gutter zehn sein, dann wird der Rand 20 sein Lassen Sie uns den Rand tatsächlich wie folgt als 12 hinzufügen. Jetzt können wir entsprechend diesem Raster so retrangle hinzufügen. Dies ist der Vorteil eines Rasterlayouts. Im nächsten Video werden wir über die Figma-Community sprechen. 10. Was ist Figma-Community: Hallo, alle zusammen. Wussten Sie, dass Figma eine Online-Community hat Die Figma-Online-Community ist eine leistungsstarke Ressource , die Ihnen helfen kann, zu lernen, wachsen und mit anderen Designern in Kontakt Es ist wie ein großer Online-Marktplatz. In der Figma-Community können Designer ihre Ideen und Ressourcen teilen Es ist ein Ort, an dem Sie kostenlose und gefälschte Designdateien, Plugins und sogar Tutorials finden können kostenlose und gefälschte Designdateien, Plugins und sogar Tutorials finden Plugins und sogar Tutorials In zukünftigen Lektionen werden wir speziell über Figma-Dateien sprechen in dieser Lektion Lassen Sie uns in dieser Lektion tief in die Figma-Community eintauchen und herausfinden , welche Art von Designmaterialien wir finden können Um das zu tun, gehe ich zur Figma Community. Ich gehe zu Google und suche nach Figma Community. Als erstes Ergebnis haben wir diese URL der Figma-Slash-Community-Website, dann klicke ich darauf und jetzt bin ich In dieser Figma-Community gibt es viel zu entdecken Die Figma-Designer wie Sie fügen der FIGMA-Community täglich Ressourcen hinzu Lassen Sie uns vorerst nach einigen Webdesigns suchen. Also werde ich einfach nach dem Moderator für Webdesign-Ideen suchen . Hier haben wir Webdesign-Ideen. Also hier drin habe ich Datei und Vorlage, Plug-ins, Widgets und Entwickler. Für dieses Ergebnis haben wir Dateien, Vorlagen und Plugins. Lassen Sie uns also die Datei und die Vorlagen aussortieren, und hier haben wir Idee, Webdesign, Holz. Also lass es uns überprüfen. Und hier haben wir E-Commerce-Theme-Dateien. Ich werde das auch öffnen, und hier haben wir eine Benutzeroberfläche, also ist es eine nette Benutzeroberfläche. Also klicken Sie einfach darauf und lassen Sie uns sehen, was wir hier finden können. Wir haben die Beschreibung. So wie wir das Design haben. Erhöhen wir es und wenn wir hier klicken, können wir die Seite wechseln. Wechseln wir zu Design, und hier haben wir das Design. Hier ist das Design der Nike-Website. Ich denke, es ist ein inspirierendes Design, also ist es ein sauberes Design. wir diese Elemente überprüfen, können wir Ideen entwerfen und gehen wir zum Idea-Webdesign über. Hier haben wir ein einfaches Webdesign und es ist nur ein Bild mit Text und lassen Sie uns zum nächsten übergehen. Hier haben wir eine E-Commerce-Vorlage oder ein E-Commerce-Thema. Schauen wir uns diese Web-App an. Hier haben wir ein Design für eine E-Commerce-Website. Angenommen, Sie erstellen eine E-Commerce-Marke oder eine E-Commerce-Website. Sie können einfach diese Designs überprüfen, sich vom Design inspirieren lassen oder einen Designteil aus dieser Figma-Datei abrufen Designteil aus dieser Figma-Datei Dazu müssen wir nur auf In Figma öffnen klicken und dann wird diese Datei in unserem Figma-Dashboard geöffnet. Auf Seiten gehen wir zu webvlpa, hier haben wir ein bearbeitbares Figma-Design Auf Seiten gehen wir zu webvlpa, hier haben wir Lassen Sie uns vorerst nur diese Elemente überprüfen und am Ende dieses Figma-Abschnitts werden Sie in der Lage sein, diese Art von Figma-Design, die Figma-Benutzeroberfläche, zu entwerfen diese Art Schauen wir uns das mobile Alpha an und hier haben wir die Machen Sie sich keine Sorgen, wenn Sie glauben , nicht zu wissen, wie man diese Designs erstellt. In wenigen Lektionen werden Sie in der Lage sein und lernen, wie man diese Art von Designs erstellt. Wenn wir jetzt Designs erstellen oder wenn wir unsere Website erstellen, müssen wir Symbole verwenden, wir müssen Symbole verwenden. Wenn wir nach Figma-Symbolen suchen und auf PrsiconoPres Enter klicken, können wir Symbolbibliotheken wie diese abrufen Als Beispiel haben wir ein Wettersymbol festgelegt und suchen wir nach einem Geschäftssymbol Hier haben wir Symbole für Geschäftsbereiche. Ich werde einfach darauf klicken und das ist eine Designdatei, und hier ist das Geschäftssymbol-Set. Also können wir einfach diese Symbole überprüfen, und wenn wir möchten, lassen Sie uns alle Vektorsymbole überprüfen. Okay, hier ist die Symbolbibliothek, und wenn Sie diese Art von Symbolen zu Ihren Projekten hinzufügen möchten , können Sie sie in Figma öffnen und diese Symbole abrufen Aber in Zukunft werde ich Ihnen zeigen, wie das geht. Außerdem habe ich ein Figma-Community-Profil. Lass es mich mit Okay teilen, hier ist mein Figma-Community-Profil Schauen wir uns dieses BNTSGameMP an und das ist ein App-UI-Modell, das ein App-UI-Modell Lass uns versuchen, es zu öffnen und dir anzusehen, wie mächtig die Figma ist. Ich klicke auf das Öffnen von Figma. Eigentlich ist dieses UIKit wirklich einfach und als ich dieses UIk erstellt habe, wusste ich nicht In der nächsten Lektion werden wir also die Figma-Community und andere Dinge, die wir bisher gelernt haben, nutzen , Helden-Sektionen erstellen und uns mit dem Design der Figma-Benutzeroberfläche befassen 11. Den ersten Heldenabschnitt mit Figma UI2 gestalten: Lassen Sie uns versuchen, unser erstes Webdesign zu erstellen. Überprüfen Sie also die URL oder Community-Datei in der Beschreibung oder im Ressourcenbereich Sie werden die URL sehen. Wenn Sie auf Verbinden klicken, gelangen Sie zu diesem Figma-Community-Profil Also werden wir diese beiden Heldenbereiche entwerfen. Das wird uns helfen, mehr über das Figma-Tool und die grundlegenden Dinge zu erfahren , während wir diese beiden Apfelweine oder diese beiden Helden erstellen Wir erfahren bereits etwas über die Figma-Community. Klicken Sie jetzt einfach auf die Schaltfläche In Figma öffnen , um die bearbeitbare Ansicht zu öffnen Okay. Hier haben wir Helden-Sektionen Lassen Sie uns zunächst versuchen, diesen zu erstellen. Ich werde herauszoomen und es so platzieren und vergrößern. Okay, nett, zuerst müssen wir diesen Rahmen erstellen. Wenn ich auf dieses Heldenbeispiel klicke, hier ist der Rahmen, lass uns versuchen, ihn zu erstellen. Ich gehe zu diesem Rahmensymbol und dann können wir den Gerätetyp auswählen. Dies ist ein Heldenbereich vom Typ Desktop. Ich klicke auf Desktop und wähle die Größe als Schreibtisch aus, alles klar, nett Jetzt werde ich das in 01 umbenennen. Okay. Jetzt ist die Höhe 1024. Lass uns die Höhe von diesem angeben. Es sind 700. Ändern wir diese Höhe auf 700. Schieben Sie den Rahmen und setzen Sie die Größe auf 700 Dann müssen wir die Layoutbreite hinzufügen , da wir ohne Layoutbreite unser Design nicht richtig ausrichten können. Um das zu tun, klicke ich auf Layoutraster und hier Dann ändere ich das Layoutraster in Spalten, und die Spaltenanzahl beträgt zwei L und der Rand 140. Die Dachrinne ist 20. Okay. Außerdem hat FICMA eine Funktion zum Speichern unserer Istis. Als Beispiel möchten wir dieses Spaltenraster-Layout speichern Wir können auf dieses Estes-Symbol klicken und hier haben wir Ich klicke einfach darauf und hier können wir den Namen hinzufügen Ich füge es zum Anruf-Grid klicke dann auf Creative Style. Wenn wir nun unserem nächsten Frame das Rasterlayout für die Mautspalte hinzufügen möchten , können wir dieses Mal einfach die Option Speichern auswählen. Klicken wir auf dieses Rasterlayout und erstellen wir ein neues Layout in Schreibtischgröße. Also, es ist ein Rahmen, Schreibtisch in Größe. Wenn ich dann zum Layout-Git gehe und auf dieses Symbol klicke, habe ich diesen Grit-Layoutstil wie diesen, ich kann ihn einfach hinzufügen Ordnung. Jetzt werde ich es entfernen. Als nächsten Schritt müssen wir dieses Hintergrundbild hinzufügen, um es zuerst hinzuzufügen Ich werde ein Rechteck erstellen und dieses Rechteck so gestalten , dass es unserer Rahmengröße entspricht. Klicken Sie nun auf dieses Rechteck- oder Formwerkzeug, und hier haben wir die Option Bild platzieren. Ich klicke einfach darauf und jetzt gehen wir zu unserem Bild. Es ist also auf einem Dokument. Hier ist das Bild. Ich klicke einfach darauf und du kannst diese Bildressourcendatei im Ressourcenbereich abrufen diese Bildressourcendatei im und ich klicke auf Öffnen. Jetzt klicke ich so. Okay, der erste Teil ist abgeschlossen. Jetzt müssen wir Farbe überlagern, um Überlagerungsfarbe hinzuzufügen, dieses Bild auswählen und hier haben wir Füllung, klicken Sie einfach auf dieses Plus-Symbol und schon haben wir eine Farbebene Hier klicke ich auf unsere Farbe als dunkel und hier haben wir die Transparenz Ich werde für Transparenz 80 sorgen. Okay, sieht gut aus, aber wir können es so machen , als ob 70 70 besser sind. Jetzt wird das Bild hinzugefügt, und jetzt müssen wir dieses Logo und den Abschnitt Mus hinzufügen , um das zu tun Lassen Sie uns zuerst einen Text erstellen. Klicken Sie auf diesen Text und klicken Sie hier. Dann werde ich diesen Text als Logo ändern. Lassen Sie uns die Eigenschaften wie Schriftgröße, Fontan, Dinge wie das dieses Logos herausfinden Schriftgröße, Fontan, Dinge wie das . Um das auf dem Mac zu tun, drücke ich die Befehlstaste und klicke auf diesen Logotext, wenn ich auf Befehl klicke Es hilft uns direkt, den gewünschten Artikel auszuwählen. In Windows sollte es Kontrolle sein. Okay. Jetzt, auf unserer linken Seite, haben wir die Details. Die Schrift ist Railway und die Schriftstärke ist Semivol und die Schriftgröße ist 35. Fügen wir also diese Details hinzu. Ich klicke auf unsere Schrift und ändere diese Schriftart in Rail Die Schriftbreite wird Semibol sein und die Schriftgröße ist 35. Nett. Ich werde dieses Design etwas vergrößern, damit wir das Design leichter überprüfen können. Jetzt verschiebe ich diesen Text hierher. Gehen wir dann zu unserem ursprünglichen Design und wählen den Text durch Drücken der Befehlstaste aus oder unter Windows sollte er gesteuert werden. Dann drücke ich Alt und überprüfe die Größe zwischen der oberen Leiste und der linken Seite. Die Größen sind nicht korrekt, aber in unserem ursprünglichen Design geben wir die Größe 14020 Okay, sieht gut aus. Jetzt müssen wir dieses Menü erstellen , um das zu tun Klicken Sie erneut auf diesen Text oder wir können diesen Text einfach duplizieren, indem wir auf Alle klicken. Drücken Sie alles und klicken Sie mit der Maus und ziehen Sie es so. Okay. Jetzt müssen wir die Textdetails finden. Klicken wir auf diesen Text und die Textfarbe ist weiß und die Textschrift ist offen Semibol 18 und die Zeilenhöhe ist 31. Fügen wir diese Informationen hinzu. Einfach auf unseren Text klicken und der Text ist geöffnet 18 halbfett und die Zeilenhöhe 31 31. Alles gut. Nun, ändern wir Text auf der Startseite und der Text ist auf der oberen Vermutung, um diesen oberen Gaswert zu erhalten. Ich klicke hier und ändere Groß- und Kleinschreibung wie hier. Ordnung. Sehen Sie, Sie lernen viel über das Figma-Tool, indem Sie dieses Design erstellen Jetzt drücke und dupliziere ich es so und lass es uns noch ein, zwei, drei, vier, fünf, drei Mal duplizieren noch ein, zwei, drei, vier, fünf, drei Mal 12, drei. In Ordnung. Lassen Sie uns jetzt diese Einstellungen ändern. Als Nächstes geht es um uns. Okay. Die nächste ist, wie es so funktioniert. Als Nächstes sind unsere Trainer dran. Okay. Jetzt ist der nächste Kontakt. Alles gut. Nun müssen wir diesen Kontakt in die rechte Ecke legen . Hier ist unser Rasterlayout, und jetzt müssen wir den Ort finden , an dem sich dieses Startmenüsymbol befinden soll. Demnach ist es hier und wir fügen es hier hinzu. Um das zu tun, ziehe ich es einfach so und lasse uns das ganze Menü so platzieren. Bevor wir die Ausrichtungen korrigieren, klicke ich auf dieses Zuhause und ändere es in diese rote Farbe Lassen Sie uns also den roten Farbcode herausfinden. Klicken Sie einfach auf dieses Haus und hier haben wir den roten Farbcode. Ich versuche einfach zu kopieren, indem ich Befehl C drücke, und dann kommen wir hierher, markieren das, B drücke Befehl A, um es zu markieren und gehe zur Feldfarbe und drücke Befehl V, um die rote Farbe wie folgt zu erreichen. Okay. Jetzt ist es an der Zeit , die Ausrichtung zu korrigieren. Dieser Text befindet sich in der Mitte dieser Leiste. Lassen Sie uns dieses Haus so einrichten, dass es in der Mitte dieser Bar liegt. Jetzt drücke ich die Umschalttaste und wähle fünf Menüpunkte wie diesen aus. Dann haben wir hier Werkzeuge für die Ausrichtung Klicken Sie auf „Vertikale Mitte ausrichten“ und hier können wir auf „Horizontale I-Phasen verteilen“ klicken . In Ordnung. Lassen Sie uns nun den Abstand oder die Abstände zwischen dem oberen und dem Menüpunkt verschieben, es sollten zwei T sein. Auch hier markieren Sie die markierten OselTel dieser Texte, markieren Sie die markierten OselTel dieser indem Sie at drücken Jetzt drücke ich Alt und klicke auf die obere Taste der Tastatur Okay. Jetzt kann ich das als Gruppe machen, um das als Gruppe zu machen, ich drücke den Befehl G und jetzt wird daraus eine Gruppe. Wenn wir wollen, können wir diese Gruppe in Man Items umbenennen . Und wenn wir die Gruppe erweitern, werden wir Menüelemente wie diesen haben, und dann wähle ich diese Gruppe und drücke die Umschalttaste und klicke auf das Logo, und dann klicke ich auf diese vertikale Mitte wie folgt. Und jetzt erstellen wir unser Menü und unser Logo. Jetzt ist es an der Zeit, diesen mittleren Text zu erstellen. Es ist wirklich einfach, fangen wir Schritt für Schritt an. Zuerst müssen wir dieses Live-Coaching für Leistungsträger hinzufügen dieses Live-Coaching für Leistungsträger Um es hinzuzufügen, drücke ich auf dieses T und klicke hier. Dann füge ich einen Text wie diesen hinzu und klicke auf eine beliebige Stelle auf der Leinwand, denn wenn wir keinen Text hinzufügen und auf eine beliebige Stelle auf der Leinwand klicken, verschwindet das Textfeld. Okay, jetzt gehe ich zu unserem ursprünglichen Design und klicke auf Befehl C zwei. Dann klicke ich auf diesen Text und drücke jetzt Befehl A und Befehl C zwei, kopiere diesen Text und komme hierher, drücke Befehl A und Befehl C zwei, kopiere den Text so. Andererseits werde ich das duplizieren, denn bevor wir das Design erstellen, lassen Sie uns Text erstellen , der einfach ist. Duplizieren drücke ich also auf alles und dupliziere es so, wie hier. Okay. Jetzt haben wir drei Abschnitte. A, lassen Sie uns das noch einmal für den Text für die Schaltfläche duplizieren . Jetzt haben wir also dieses Hauptelement, also markiere ich es einfach und passe Text an , tut mir leid, lassen wir es ohne Schriften ohne Schriftstil ablaufen, weil wir versuchen werden , Schrifttextilien auf unsere eigene Art hinzuzufügen Okay. Nett. Jetzt fügen wir den Fontistyle hinzu und korrigieren die Ausrichtung Schauen wir uns zunächst den Schriftstil Absatzes oder unserer ersten Unterüberschrift an, klicken auf die Untergliederung und schon haben wir Text, der geöffnet und zusammengefügt Text Klicken Sie jetzt hier, öffnet das Symbol. Ich bin schon da. Und jetzt schauen wir uns das Design der Überschrift an. Wähle die Überschrift aus, drücke ich die Befehlstaste und klicke so, dann ist es Railway Bolt, 60. Lassen Sie uns diese Eisenbahn fett formatieren, 69, und bei der Schrift wird Groß- und Kleinschreibung unterschieden. Okay. Jetzt ist es an der Zeit, dieses Schriftdesign zu erstellen, Befehlstaste zu drücken und den Text zu verschieben, dann den Text open sans regular 20 zu überprüfen, hier zu klicken und sans regular 20 zu öffnen, dann ist es wieder so, dass wir Titel Sens haben Ordnung. Bevor wir die Schaltfläche erstellen, korrigieren wir die Ausrichtung und machen sie besser, um die Ausrichtung zu korrigieren Lassen Sie uns die Ausrichtung zwischen diesen beiden Elementen überprüfen, sie ist 15 und wir haben Alignment Touch 15. Lass es uns so ausdrücken, dann drück und drück über das Obige, jetzt können wir es so einstellen. Da wir ein Problem haben, weil die Zeile Leerzeichen ist, nicht Zeile ist Leerzeichen, sollte die Zeilenhöhe mehr als 31 betragen. Die Zeilenhöhe ist automatisch. Lassen Sie uns die Zeilenhöhe auf Auto setzen. Klicken Sie einfach auf den Text und dann bei Automatisch präsentieren auf das Textfeld Zeilenhöhe. Okay. Jetzt sind es 15 und das hier ist auch 15 und ja, scheint gut zu sein Und jetzt drücke ich die Umschalttaste und wähle alle drei Elemente aus und klicke auf diese horizontale Ausrichtung und diese Textausrichtung, die als Mittelpunkt festgelegt Okay. Jetzt ist es perfekt zentriert, und jetzt müssen wir diesen Text so einstellen , dass er auf der rechten und linken Seite ausgerichtet ist. Eigentlich ist es schon ausgerichtet, und dann müssen wir es in die Mitte legen, um das zu tun. Wir können es einfach mit dieser roten Farbausrichtungsanleitung so anpassen , wir können es so in die Mitte legen. Okay. Ich denke, das ist nicht in der Ah, wird in der Mitte sein, nachdem wir diese Anfrage erstellt haben. Kostenlose Beratung, um sie zu erstellen Ich klicke einfach auf Neues Rechteck und dann so. Dann vergrößern wir das Rechteck wie folgt und fügen diesen Text in das Rechteck ein. Okay, jetzt ist unser Text hinten und das Rechteck ist oben. Um das Problem zu beheben, bevor wir es reparieren, ändern wir die Farbe des Rechtecks. Um die Farbe des Rechtecks zu ändern, können wir auf das Rechteck klicken und hier haben wir die Feldfarbe. Dann können wir auf dieses kleine Symbol klicken und auf diese ursprüngliche Designfarbe um die Farbe wie diese zu erhalten. In Ordnung. Jetzt werde ich unser linkes Seitenpanel überprüfen und hier haben wir Details zu unserem Design. Hier haben wir dieses Rechteck. Benennen wir es in Button BG um und jetzt ist hier der Text. Derzeit wird der Text nicht angezeigt, damit er angezeigt Wir können ihn einfach anklicken und ihn so erstellen. Okay. Jetzt müssen wir die Größen zwischen dem Hintergrund des Rechtecks oder der Schaltfläche und dem Text überprüfen. Bevor wir das tun, wollen wir die Größe des Rechtecks herausfinden. Es sind 418 und 60. Machen wir das auf 420 und 60. Okay. Jetzt werde ich dieses Design vergrößern, weil es leicht zu sehen ist, wenn ich das Design so vergrößere, dann drücke ich und passe das Design so an. Und wenn wir wollen, können wir auf diese Option in der Mitte des Textes klicken und es wird mittig ausgerichtet. Jetzt ist es jedoch perfekt ausgerichtet und jetzt wähle ich den Hintergrund aus und drücke die Umschalttaste und wähle diesen Text aus und drücke Command G, um ihn zu gruppieren. Wenn ich will, kann ich das dann in Button In Ordnung umbenennen. Was ich jetzt tun kann, ist diese Schaltfläche so zu platzieren und den Abstand zwischen der Schaltfläche und diesem Unterteil zu überprüfen . Markieren Sie nun diese Schaltflächengruppe und drücken Sie und über dieser Untereinheit und klicken Sie auf den Abwärtspfeil, um den Abstand zwischen dieser Schaltfläche und Unterbett zu 20 zu machen zwischen dieser Okay. Jetzt markiere ich Earl of the Section, den Button und Earl of the Items und klicke auf dieses Alignment Center und dann auf dieses Alignment Horizontal Center. Okay, jetzt ist es perfekt ausgerichtet, und jetzt kann ich Command G drücken, um es zu gruppieren Wenn ich dieses Design jetzt so ändere , ändere ich diese Gruppe so, kann ich den perfekten Mittelpunkt finden und los geht's. Wir haben das Design. Lassen Sie uns nun das Design erweitern. Es ist ziemlich ähnlich. Wenn wir die Farbe dieses Bildes etwas dunkler machen, sieht es vielleicht genauso aus wie dieses Design, aber ich mag es so. Lass uns diesen Heldenbereich machen. Und jetzt hier, klicken Sie auf dieses Symbol, um dieses Rasterlayout zu entfernen, und es wird so aussehen. Dann klicke ich auf diesen Heldenbereich und dann auf diesen Geschenk-Button und wir können unser Design in diesem Vorschaumodus sehen. Jetzt erstellen wir unser eigenes Design. Es ist also ein wunderschöner Slider, und ich hoffe, Sie folgen dem ersten Schritt mit mir. Wenn Sie Zweifel oder Probleme haben, lassen Sie es mich einfach wissen, und jetzt ist es an der Zeit, unser zweites Design zu erstellen. Das ist ein bisschen knifflig, aber wir können es schaffen. 12. 2. Heldenabschnitt mit Figma UI2 gestalten: Hallo, alle zusammen. Jetzt ist es an der Zeit, unsere zweite Helden-Sektion zu erstellen. Lass uns damit beginnen. Jetzt bin ich auf meinem Figma-Dashboard und hier ist unser zweiter Heldenbereich Als ersten Schritt klicke ich auf den Rahmen und auf der rechten Seite kann ich die DextFrame-Größe auswählen Ich wähle dieses Ziel von 1.440 mit Rahmen aus und setze es hier so ein und dann kann ich es so in Hero Two umbenennen, dann kann ich ein automatisches Layout hinzufügen Entschuldigung, füge das Rasterlayout hinzu. Um das zu tun, klicke ich auf diese Registerkarte und hier ist unser Layout, das wir als Rasterlayout bezeichnen können. Ich klicke einfach darauf. Nett. Nun, mal sehen, mal sehen, was wir tun müssen. Zuerst müssen wir einen Menübereich erstellen. Bevor wir den Menübereich erstellen, fügen wir das Hintergrundbild hinzu. Also muss ich zuerst die Größe dieses Hintergrunds ermitteln. Es hat also eine Breite von 1.440 Exel und eine Höhe von 700. Lassen Sie uns also ein Rechteck erstellen. Klicken Sie auf das Rechteck, klicken Sie auf die Leinwand, klicken Sie auf den Rahmen und lassen Sie uns ihn so auf diese Seite bringen. Okay, jetzt muss ich die Breite 1.440 hinzufügen und die Höhe wird 700 sein Nett. Jetzt müssen wir dieses Hintergrundbild hinzufügen. Also habe ich dieses Hintergrundbild bereits erstellt. Sie finden es im Bereich Ressourcen Nachdem Sie es heruntergeladen haben, müssen wir hier klicken und auf Bild platzieren klicken. Und hier haben wir das Hintergrundbild. Ich klicke einfach darauf und klicke auf Öffnen. Dann siehst du das Bild zum Anhängen mit dem Mauszeiger. Ich tippe einfach darauf oder klicke auf ein Rechteck wie dieses, alles klar, sieht gut aus. Jetzt müssen wir also die Farbe dieses Hintergrunds und die Opazität herausfinden Farbe dieses Hintergrunds und die Opazität Dazu klicke ich auf dieses Bild oder tippe zweimal darauf, und hier haben wir das Bild Wählen Sie einfach das Bild aus und hier können wir sehen, dass die weiße Farbe mit 90% der Deckkraft gefüllt ist oder die Sichtbarkeit bei 90% liegt Klicken Sie auf das Bild und klicken Sie auf dieses Plussymbol, und hier haben wir den Hintergrund Also ändern wir es auf 90 und klicken dann hier und setzen es so ein Okay. Nett. Jetzt erstellen wir einfach unseren Hintergrund. Dann müssen wir bei diesem Text zuerst zweimal auf diesen Text tippen und Befehl C drücken, zweimal auf diesen Text tippen um ihn zu kopieren. Und in Ihrem Fall könnte es Control C sein. Wenn Sie Windows verwenden, dann klicke ich auf diesen Text und dann hier. Dann drücke ich in Ihrem Fall Command V oder Control V. Auf diese Weise kann ich dann den Schrifttyp und die Schriftgröße herausfinden. Die Schrift ist also Georgia Regular und 45. Machen Sie sich keine Sorgen, wenn Sie die Schrift nicht kennen oder viel mehr über die Schrift wissen. In zukünftigen Lektionen werde ich dir alles zeigen, was du über Fontin, UX und UI wissen musst Klicken Sie hier und es scheint, dass wir diese Schriftart bereits ausgewählt haben. Lass uns nochmal sehen. Ja, es ist Georgia Regular 45. Und hier Georgia Regular 45. Okay. Dann müssen wir es so in diese Ecke stellen. Dann drücke und du wirst die Linien sehen. Lass uns 20 draus machen. Dann müssen wir diesen Menübereich erstellen. Es ist also Helvetica. Die Schriftart ist Helvetica und die reguläre 16. Also lass es uns erstellen. Es ist ganz einfach, klicken Sie auf den Text und lassen Sie uns diesen Textnamen in Home umbenennen. Klicken Sie dann auf den Text und wählen Sie die vertikale Schrift aus. Hier sehen Sie, dass die Größe normal ist und die Schriftgröße tatsächlich die Schriftbreite ist normal und die Schriftgröße beträgt 16. Okay. Dann müssen wir es vorerst einfach so machen und es duplizieren. Drücken Sie Alt und klicken Sie auf Maus, dann duplizieren Sie es. Also, wie oft wollen wir es duplizieren? Eins, zwei, drei, vier, fünf. Es ist fünfmal, also eins, zwei, drei, vier, fünf, nett. Jetzt werde ich die Schrift ändern. Ich kann hier zweimal tippen und Strg C zum Kopieren und Strg V zum Einfügen drücken . Und lass es uns noch einmal machen. Klicken Sie so. Okay. Jetzt haben wir wieder den Standort, fügen Sie ihn so ein. Wenn wir es einfügen, hat es sogar schon das Design, also werde ich es eintippen. Hier haben wir Blob, dann Con Tag Ni. Okay. Was wir jetzt tun können, ist die Größe dazwischen zu überprüfen. Um es zu überprüfen, klicken Sie einfach hier und drücken Sie alles wie folgt. Die Ibtwin-Größe ist 25. Also lass uns das anpassen. Zuerst werde ich sie alle so auswählen. Dann klicke hier und klicke auf „ gebunden“ und dann auf „Gefällt mir“. Okay. Ich klicke auch hier und hier rein, wir können die gebundene Seite auf 25 setzen, so wie hier. Das Tempo dazwischen ist 25. Jetzt müssen wir sie in Großbuchstaben schreiben. Wie ich es schon einmal gemacht habe, klicken Sie hier und falls wir auf die Großbuchstaben klicken können Jetzt müssen wir wieder alle auswählen und hier klicken und auf Tied klicken und dann 25 daraus machen. Okay. Nun, wenn wir das überprüfen, ist das Haus gewagt. Also lass es uns hier finden. Es ist mit diesem Mutigen. Machen wir das fett, klicken wir so und ändern dann den Regler fett. Okay. Jetzt kann ich all dies auswählen indem ich auf den Menüpunkt klicke oder auf den Text und den Text klicke, auf den Text klicke und gleichzeitig die Umschalttaste so drücke. Dann drücke ich Command G oder Control G. Gruppiere es. Okay, dann isoliere beide Abschnitte und mache es so. Okay. Konzentrieren wir uns darauf, diese Kontakte zu erstellen, aber es ist wirklich einfach. Lass es uns machen. Klicken Sie auf die Rechteckform und erstellen Sie ein Rechteck wie dieses. Okay. Dann fügen wir diese Ecke hinzu oder reduzieren die Ecken um 30. Nett. Jetzt kann ich einfach hier klicken und den Text duplizieren, indem ich so drücke, dann füge ich ihn so ein, aber wir müssen das über diesem Rechteck machen, um hohen Kick auf die Kontakte auf unserer linken Seitenebene aufgenommen werden, es dann so platzieren Okay. Lassen Sie uns jetzt prüfen, was wir tun können. Hier haben wir die Größe 176 und die Höhe 50. Außerdem ist die Farbe schwarz. Lassen Sie uns diese Änderungen vornehmen. Zuerst wird die Höhe 50 sein und die Farbe wird schwarz sein. Die Textfarbe ist der Grund. Wählen Sie dann beide Objekte aus und lassen Sie den Text wie folgt zentrieren. Mal sehen, was wir gemacht haben, sieht gut aus. Dann müssen wir den Text ändern. Eigentlich ist es schon so wie der Kontakt-Cus, wir haben hier bereits den Kontakt-Cus-Text. Eigentlich brauchen wir keine Kontaktsymbole, um uns zu kontaktieren, Menüelemente. Im ursprünglichen Heldenbereich werde ich diesen Kontakt-Cus also auf „Über uns“ ändern. Über Tsk. Mach nein, mach es Machen wir jetzt dasselbe hier. Lassen Sie uns diesen Kontakt über uns ändern. Okay. Jetzt sieht es gut aus. Jetzt müssen wir diese Schaltfläche zu einer Gruppenseite gruppieren , auf den Text klicken und auf den Hintergrund klicken , indem wir die Umschalttaste drücken. Drücken Sie dann Commando Control G, Command G auf Mac und Control G unter Windows. Mmm mm. Nett. Jetzt können wir all diese Takes in der aktuellen Schicht auswählen und in den Gruppen wie dieser auswählen und dann auf klicken. Eine vertikal zentrierte Linie. Dann klicken Sie hier auf Horizontal verteilen und drücken Sie Okay. Unser Menü ist fertig. Und wie ich bereits erwähnt habe, werden wir in zukünftigen Lektionen erweiterte Funktionen wie automatische Layouts und Komponenten verwenden wie automatische Layouts und Mit diesen automatischen Layouts und Komponenten können wir diese Art von Website auf einfache Weise erstellen Aber vorerst wird Ihnen diese Übung helfen, viel Wissen über die Funktionsweise von FIGMA zu erlangen Wissen über die Funktionsweise von FIGMA und Sie werden in der Lage sein, Erfahrungen mit Figma zu Erfahrungen mit Figma Okay. Jetzt müssen wir diesen Text erstellen. Es ist wirklich einfach. Also lass uns damit anfangen. müssen wir zunächst diesen Willkommensgruß in My Finance erstellen Dafür müssen wir zunächst diesen Willkommensgruß in My Finance erstellen. Ich drücke einfach T auf der Tastatur und lass uns Text wie diesen hinzufügen. Okay, es ist so, dann müssen wir herausfinden welche Schriftarten verwendet wurden, um diese Überschrift zu erstellen. Die Schrift ist also Georgia Five Regular. Fügen wir diese Details hinzu Georgia Regular. Das sollte 55 sein. Okay. Jetzt kopiere ich einfach diese BHs in Befehl C und füge sie so ein, und sie werden in Großbuchstaben geschrieben, um sie klein zu schreiben, klicken Sie hier und falls wir diese und sie werden in Großbuchstaben geschrieben, um sie klein zu schreiben, Titelschrift auswählen können Okay. Sieht nett aus. Jetzt werde ich es an unser Layout anpassen. Was müssen wir dann machen , um das zu erstellen. Wir sind hier, um beim Kopieren des Textes zu helfen, und er ist auf der Schriftart Tas Hell, Vertica, regulär 25. Lassen Sie uns einen Text erstellen und ihn so einfügen und er hat die Schriftart tas hell, Vertica, regular 25. Okay, also klicken wir einfach hier und setzen es vorerst so ein, dann müssen wir dieses Kontakt-und-Lern-Symbol erstellen Wir haben also bereits das Kontakt-Cast-Symbol erstellt, also kann ich es einfach duplizieren, auf alles klicken und es so duplizieren. Dann ändere ich dazu diese Höhe auf 60, klicke auf das Rechteck und ändere die Höhe auf 60. Dann mach dieses Zentrum. Außerdem denke ich, dass wir die Schriftgröße ändern müssen. Die Schriftgröße ist 21, Größe ist 20, machen Sie es zu einer Linienmitte wie dieser. Jetzt kann ich das wieder duplizieren und so hier platzieren. Dann mache sie in der Mitte der Linie und dieser Text wird mehr erfahren. Ändern Sie den Text, um mehr zu erfahren. Jetzt müssen wir diese Feldfarbe entfernen, um diese Feldfarbe zu entfernen Ich klicke einfach auf dieses Minussymbol, und jetzt füge ich den Etro hinzu, klicke auf Etro und die Strichfarbe ist schwarz Ich werde diese Textfarbe wie folgt in die Feldfarbe Schwarz ändern wie folgt in die Feldfarbe Schwarz Wir haben die Schaltfläche „Mehr erfahren“ nett gestaltet, aber wir müssen zuerst noch mehr Dinge anpassen Finden wir heraus, wie groß der Abstand zwischen dem Text und dem Rand der Schaltfläche ist 33 mal 33. Lass uns hier sein, wir haben 20 mal 20. Lassen Sie uns ein bisschen mehr wie diese 33 daraus machen. Und wir müssen drei weitere 0,1, zwei, drei erhöhen. Okay. Nett. Jetzt müssen wir darauf klicken und es als drinnen auswählen. Nett. Jetzt haben wir zwei Buttons und den Header-Bereich. Dann gruppiere ich diese beiden Tasten, indem nach ihnen drücke und dann Command G Dann muss ich den Abstand zwischen diesen beiden Abschnitten herausfinden . Es ist 20 mal 30, klicken wir hier und rufen das auf, indem wir die UP-Taste auf der Tastatur drücken, dann bringen wir es auf 30. Okay. Jetzt kann ich den gesamten Text auswählen und Command G drücken, um ihn zu gruppieren. Okay. Jetzt kann ich diesen auswählen und den Hintergrund auswählen. Klicken Sie darauf, richten Sie die vertikale Mitte aus und richten Sie sie vertikal mittig aus. Dann müssen wir dieses Bild hinzufügen. Um es hinzuzufügen, erstellen Sie einfach ein Rechteck wie dieses, platzieren Sie es dann so und stellen Sie es so ein, so. Dann klicken wir hier und klicken auf Bild platzieren und wählen das Bild aus. Dann klicken Sie hier, um es zu platzieren. Okay. Jetzt kann ich zweimal auf dieses Bild tippen und das Feld so ändern, dass es zugeschnitten werden soll. Und jetzt habe ich dieses Bild von hier, dieses Bild so platziert. Okay. Eigentlich denke ich, dass wir das Bild so vergrößern können, aber sie haben das gemacht, es so gemacht und ja, es passt perfekt. Jetzt müssen wir also diesen schwarzen Balken erstellen. Es ist einfach, ein Rechteck zu erstellen, klicken Sie einfach auf ein Rechteck und klicken Sie so, setzen Sie es so ein und Sie die Breite dem Rahmen erhöhen Sie dann die Größe. Lassen Sie uns eigentlich die Größe herausfinden. Ich 270, mache 270 so, ändere dann die Feldfarbe auf Schwarz und klicke auf den Heldenbereich und drücke Come in Mac und Control in Windows und Radio so. Nun, sieht gut aus, und was wir jetzt tun müssen , ist, diese Füllfarbe in diese Farbe zu ändern, diese Farbe kopieren und die Füllfarbe zu ändern. Das ist nett. Jetzt müssen wir diesen Text hinzufügen. Der Text ist Georgia 45 Regular, also klicken Sie einfach auf den Text oder klicken Sie einfach auf das T und drücken Sie hier, drücken Sie dann einige Takes, fügen Sie Text hinzu und schon ist es Georgia. Regulär 45, also in dieser Phase der Text so, dafür und lass uns in der zweiten Zeile so eingeben. Dann klicken Sie auf den Hintergrund, klicken Sie auf den Text, klicken Sie auf die vertikale Mitte der Linie. Okay. Jetzt müssen wir diese drei Abschnitte hinzufügen. Um sie hinzuzufügen, klicken Sie hier und überprüfen Sie die Schriftart, sie ist hell vertikal regulär, 65 duplizieren Sie das einfach und nehmen Sie diese beiden YE-Pläne und ändern Sie die Schriftart auf reguläre sechs wie folgt. Dann müssen wir das hinzufügen, es ist Albatica Regular 25. Wir können das einfach duplizieren und die Panzer hinzufügen. Okay, ich ändere schon auf 25. Klicken Sie dann auf diese beiden Elemente und dann auf Horizontale Mitte ausrichten. Sehen wir uns die Größe dazwischen oder den Rand zwischen diesen beiden an. 14. Lass uns 50 machen und dann beide drücken. Machen Sie es horizontal und klicken Sie auf Befehl G. Okay. Dupliziere jetzt dieses Foto. Jetzt müssen wir den Wert hier ändern, ps command c1v, das kopieren, kopieren und so kopieren Stellen Sie nun sicher, dass sie richtig ausgerichtet sind. Okay. Jetzt werde ich die Aufnahme hier platzieren, diesen Text hier. Lass uns auf Horizontalen Abstand verteilen klicken nachdem wir all diese drei Takes ausgewählt haben und dann, Entschuldigung, auf Vertikale Mitte ausrichten klicken. Also klicken Sie hier, klicken Sie auf Align Center. Drücken Sie dann Command G, um es hier zu gruppieren, und klicken Sie auf Vertikal zentriert ausrichten. Okay. Jetzt haben wir erfolgreich den zweiten Heldenbereich erstellt. Schauen wir uns den zweiten an, und hier ist das Design , das wir gerade erstellt haben. Wie ich bereits sagte, ist dies eine Möglichkeit, Figma effektiv zu lernen . Als nächstes haben Sie eine Übung Lass mich es mit dir teilen. Okay. Hier ist die dritte Helden-Sektion. Und Sie sollten diesen Abschnitt erstellen indem Sie das Wissen verwenden , das Sie gerade gelernt haben. Dies ist eine einfache Helden-Sektion, und wenn Sie diese beiden Helden-Sektionen erstellen, haben Sie einfach die Idee oder Sie haben einfach das Wissen, um dieses Design zu erstellen. Lass uns also mit der Arbeit beginnen. Außerdem werden wir in Zukunft das automatische Layout und die Komponenten verwenden. wird Ihre Webdesign-Reise also Mit dem automatischen Layout und den Komponenten wird Ihre Webdesign-Reise also ganz einfach. Erstellen Sie vorerst einfach diesen Heldenbereich. Und erfahre mehr über Figma. Während du diese Art von Heldenabschnitt erstellst, während du diese Übung erstellst, kannst du mit der Figma herumspielen und weitere coole Funktionen herausfinden Wir sehen uns in der nächsten Lektion. 13. 3. Heldenabschnitt mit Figma UI2 gestalten: Hast du es geschafft, dieses Design zu erstellen? Also lass es uns noch einmal entwerfen. Zuerst muss ich einen Rahmen erstellen. Klicken Sie auf den Rahmen, klicken Sie hier. Dann werde ich mit einem 14.4.700 wie diesem beginnen. Okay, wir haben den Frame, also ändern wir den Frame-Namen in Dann müssen wir das Rasterlayout oder das Layoutraster hinzufügen . Klicken Sie hier, und hier ist unser Rasterlayout, klicken Sie darauf. Jetzt müssen wir als ersten Schritt dieses Menü erstellen. Die Menügröße ist also 223. Ihre Höhe beträgt 223. Lassen Sie uns also ein Rechteck erstellen und es 14423 als Höhe festlegen Okay. Jetzt machen wir es so transparent bis auf Null. Okay. Jetzt müssen wir dafür dieses Logo erstellen Ich erstelle einfach ein weiteres Rechteck und lasse es so ausrichten. Dann müssen wir das Logo-Bild auswählen. Klicken Sie hier, klicken Sie auf Bild platzieren und hier haben wir das Logo. Dann klicken Sie so. Dann müssen wir dieses Feld auf Feldfrüchte umstellen. Okay. Dann mach es so und erhöhe es so. Okay. Vielleicht können wir es auch hier richtig ausrichten. Nett. Jetzt müssen wir dieses Menü erstellen. Es ist wirklich einfach. Klicken Sie auf T und erstellen Sie das Menü. Der erste Wein wird zu Hause sein. Jetzt müssen wir die Schrift finden. Klicken Sie darauf und die Schriftart ist Cabin Bolt 18. Sila hier ändere die Schrift in Kabine und dann Fett 18. In Ordnung. Eigentlich müssen wir die Sichtbarkeit des Rechtecks wieder auf Hundert ändern . Dann ändern wir die Feldfarbe auf Weiß. Ohne das können wir dieses Rechteck nicht ins Visier nehmen. Jetzt muss ich die Unterstreichung hinzufügen. Bevor wir die Unterstreichung hinzufügen, duplizieren wir das wie folgt: eins, zwei, drei Sicherlich brauchen wir es dreimal, und dann werden wir hier etwas über uns hinzufügen Lassen Sie uns dann über elektrische Dienstleistungen tippen. Oh nein, es sollte elektrisch sein. Elektroservice, dann kontaktieren Sie uns. Okay. Jetzt werde ich nur diese drei Menüelemente hervorheben und wir müssen sie in Großbuchstaben schreiben und die Schriftbreite wird normal sein. Markieren Sie alle drei, indem Sie die Umschalttaste drücken , und ändern Sie sie auf Normal Ändern Sie dann die Groß-/Kleinschreibung. Okay. müssen wir die Groß- und Kleinschreibung ändern und jetzt müssen wir diese Unterstreichung hinzufügen, um die Unterstreichung hinzuzufügen, wir können wählen, wir können hier klicken und wir können auf dieses Pluszeichen klicken Bevor wir die Unterstreichung hinzufügen, richten wir sie zuerst aus. Ich wähle all diese Elemente aus und lasse sie den horizontalen Abstand verteilen und dann die vertikale Mitte ausrichten Okay. Jetzt müssen wir die Farbe ändern. Die Farbe wird schwarz sein und hier wird die Farbe dunkelblau sein. Lass es uns ändern. Farbe zu dunkelblau. Okay. Jetzt müssen wir die Unterstreichung hinzufügen Um eine Unterstreichung hinzuzufügen, überprüfe ich nur, ob wir den Textstil haben, aber ich habe ihn nicht gefunden Lassen Sie uns also Unterstreichungen mit shaftOL hinzufügen. Also hier klicken wir online, und jetzt werde ich auf Shift klicken und Unterstreichungen wie folgt hinzufügen Ändern Sie dann die Unterstreichungsfarbe in diese dunkelblaue Farbe. Okay, okay, sieht gut aus. Jetzt muss ich diese Gruppe bilden. Wählen Sie diese beiden Objekte aus und drücken Sie Befehl G oder Strg G, um eine Gruppe zu erstellen. Dann müssen wir den Abstand zwischen 50 herausfinden. Lassen Sie uns diesen Raum hier in 50, 50 und 50 ändern . Okay, wählen Sie jetzt alle aus und drücken Sie Command G, um daraus eine Gruppe zu machen Wählen Sie dann das Logo aus und legen Sie die Menüelementgruppe fest. Klicken Sie dann auf diese vertikal ausgerichtete Mitte. In Ordnung. Jetzt müssen wir die Größe zwischen dem Logo und neuen Artikeln anpassen . Also hier, ich werde es 50, 40 bis 50, 50 machen , so. In Ordnung. Und diese Unterstreichung sollte größer sein. Sagen wir es wie sechs und ändern wir es auf zwei. Dann müssen wir jetzt diesen Anruf 24 Stunden hinzufügen , um gebührenfrei zu sein. Also lass es uns erstellen. Zuerst müssen wir einen Kreis erstellen, um einen Kreis zu erstellen, hier klicken und die Ellipse ziehen lassen, dann eine Ellipse wie diese erstellen Lassen Sie uns die Größe der Ellipse herausfinden. Es ist 86 mal 806-80-6806. Dann klicken Sie hier, um die Farbe dieses Lichts zu ändern. Dann werde ich das duplizieren, indem ich auf Raging It nach links Dann lassen Sie uns die Größe herausfinden, das ist 62 mal 62, machen daraus 6262 und ändern dann die Füllfarbe auf diese dunkle, diese Wählen Sie nun beide Objekte aus und richten Sie sie vertikal und horizontal mittig aus Okay. Dann müssen wir dieses Telefonsymbol hinzufügen. Um dieses Telefonsymbol hinzuzufügen, können wir das Fontosom-Symbol verwenden Wenn wir zu Fontsom gehen, ist Pontosom die Internet-Symbolbibliothek Wenn wir also auf diese Website klicken, Pontosom Also hier ist die Pontosom Icon Library, und wir können hier suchen, um das Icon Search Icon zu finden Und hier sind Telefonsymbole. Wir haben jedoch ein Figma-Plugin , das von Pontosm entworfen wurde. Um es hinzuzufügen, müssen wir auf das Plugin zugreifen Um darauf zuzugreifen, klicken Sie auf diese Ressourcen Hier können wir zu den Plugins gehen und hier können wir nach dem Namen des Plug-ins suchen. Ich suche Font Sum. Okay, hier sind die Pontosom-Symbole, klicken Sie auf Ausführen. Okay, jetzt haben wir das Pontosom-Icon-Widget oder ich kann Also hier müssen wir nach dem Namen des Symbols suchen, es ist Telefon, und hier ist das Telefonsymbol. Klicke darauf. Okay. Jetzt müssen wir es hier platzieren und dann die Farbe auf Y ändern . Okay. So wie das hier Ordnung, in Ordnung. Jetzt mach es mittig. Eigentlich liegt das außerhalb unseres Rahmens. Um das Problem zu beheben, müssen wir es also wie folgt an der Innenseite des Rahmens anbringen. Dann werde ich den ALT-Rahmen des Telefons entfernen . Jetzt haben wir das Symbol, das alle auswählt und sie alle zum Mittelpunkt macht. Okay. Was wir jetzt tun müssen, ist dieser Text. Lassen Sie uns die Texte herausfinden, Kabine Medium 16.5. Lassen Sie uns Panzer erstellen und den Text hinzufügen Lass es mich hinzufügen, indem ich hier koche und es so einfüge. Wenn wir es direkt einfügen, alle Eigenschaften dieses Textes werden alle Eigenschaften dieses Textes direkt in den Text übernommen. Aber jetzt fügen wir es so hinzu, weil wir wissen, wie man die Schrift auf Figma ändert . Finden wir heraus der Abstand 16 ist und wir haben diesen Teil, es ist Kabinenschraube 25. Lassen Sie uns zuerst diesen Text kopieren. Ich werde ihn einfach hier einfügen. Klicken Sie auf Kontext, klicken Sie hier. Dann füge ich hinzu, das dauert 1-110, eins. Ich habe es schon zugewiesen. Lass uns die Farbe herausfinden. Ich finde schon gut. Sag es jetzt so. Dann müssen wir dieses Blatt ausrichten und einen Abstand zwischen 2 und 2 schaffen , dann beide Objekte auswählen und die Befehlstaste oder die Strg-Taste G drücken, um sie zu gruppieren Dann müssen wir diese beiden gruppieren. Wählen Sie all diese drei Elemente aus und drücken Sie den Befehl G, markieren Sie dann diese beiden Objekte, diese beiden Gruppen, und klicken Sie so, dann werde ich es so platzieren. Okay, der Header-Teil ist fertig und sieht ähnlich aus. Jetzt müssen wir diese blaue Linie erstellen. Um es zu erstellen, klicke ich auf dieses Rechteck, das wir bereits erstellt haben, und klicke auf Strich. Die Felsfarbe wird diese dunkle Farbe sein. Dann ändere die Strichgröße auf „Gefällt mir “ und klicke hier und wir brauchen nur die Unterseite wie diese. Sollten wir auch die Größe ändern. In Ordnung, in Ordnung. Jetzt müssen wir dieses Bild hinzufügen. Das Hinzufügen des Bildes ist einfach. Zuerst klicke ich auf den Rahmen und drücke die Befehlstaste auf Mac und Alton Windows. Geh so Wenn wir den Befehl nicht verschieben, ändern wir die Positionen, wenn wir diese Ebene anpassen. Wenn Sie auf das Telefonsymbol klicken, wird es angepasst, wenn wir es anpassen. Aber wenn wir den Befehl übergeben , passt sich das so an. Ordnung, in Ordnung. So viel Platz brauchen wir nicht. Finden wir nun heraus, dass die Höhe 577 ist Lassen Sie uns ein weiteres Rechteck erstellen und daraus Zeichen 144 50 machen Entschuldigung, 1.440, dann 577 A und füge es hier ein. Okay. Wählen Sie dann erneut den Rahmen aus und passen Sie seine Größe wie folgt an. Dann können wir auf den Rahmen klicken. Klicken Sie auf das Rechteck und dann auf dieses Formwerkzeug und dann auf Conflasimage Gehe zu unserem Bild wähle so aus. Okay. Jetzt müssen wir nur noch diese Handlungsaufforderungen hinzufügen, diesen Aufruf zum Handeln als Unterüberschrift und als Schaltfläche Es ist ziemlich einfach, also lass es uns tun. Zuerst klicke ich auf einen Text und er wird zu 100% ausgeführt. Okay, jetzt wollen wir die Eigenschaften der Schrift herausfinden. Es ist Kabine Medium 24. Also ändern wir es auf Kabine Medium 24. Wenn wir also die Schriftart ändern, wählen wir tatsächlich die Schriftart aus oder wir müssen die Schriftart auswählen, ohne in den Bearbeitungsmodus zu wechseln. Wenn wir also den Text auswählen, können wir ihn ändern. 24 mittel, und die Farbe wird diese dunkelblaue Farbe sein. Okay. Jetzt müssen wir diesen Abschnitt hinzufügen. Um es hinzuzufügen, kopiere ich zuerst den Text und klicke auf dieses T und füge den Text so ein. Wie ich Ihnen bereits gesagt habe, wenn wir es einfügen, wird die Designeigenschaft damit einhergehen. Lassen Sie uns dann diese beiden Objekte miteinander verknüpfen und auf links ausrichten klicken. Finden Sie jetzt den Abstand dazwischen heraus, machen Sie ihn, und jetzt müssen wir diesen Button hinzufügen. Lassen Sie uns die Eigenschaften der Schaltflächen abrufen. Es ist 320 mal 80. Klicken Sie hier so, es wird 320 mal acht sein und Füllfarbe in diese dunkelblaue Farbe ändern, dann setzen Sie es so und klicken Sie auf Inhalt und fügen Sie Text wie Anfrage ab dem Wort dunkler hinzu, damit Figma eine coole Funktion hat Wenn wir hier mit der rechten Maustaste klicken und zu dieser Kopie als Kopieren und Einfügen unter gehen und Eigenschaften kopieren auswählen, dann klicken Sie hier und klicken Sie mit der rechten Maustaste auf Kopieren und Einfügen als und klicken Sie auf Phaseneigenschaften Was ist Block. Okay. Jetzt wird die Eigenschaft automatisch zu diesem Design hinzugefügt. Lassen Sie uns die Details herausfinden. Okay, zuerst müssen wir die Höhe ändern. Die Höhe ist acht, nicht die Höhe mit. Entschuldigung, ich habe drei bis 333. Okay. Wählen Sie nun das Rechteck und die Schaltfläche, tut mir leid, Text aus und richten Sie es vertikal und horizontal in der Mitte aus. Drücken Sie dann Command G, um es zu gruppieren und all diese Abschnitte zu markieren, und drücken Sie Befehl G, dann klicken Sie auf dieses Rechteck und machen Sie es mittig. Wir erstellen einfach das Design. Schauen wir uns den Vorschau-Präsentationsmodus im Präsentationsmodus an. Es sieht so aus. Ja, so kreieren wir das einfache Design. Wie ich bereits gesagt habe, werden wir in zukünftigen Lektionen praktischere und einfachere Methoden finden, und einfachere um diese Art von Design zu erstellen, und das ist dazu da, die Grundlagen zu erlernen Ich hoffe, ihr erfahrt etwas über Schriften, Panzer, Formwerkzeuge, das Nachzeichnen von Bildern und das Erstellen einfacher oder gut aussehender Helden Wir sehen uns in der nächsten Lektion. 14. Figma Auto-Layout lernen: Hallo, alle zusammen. Erfahren Sie mehr über das automatische Layout von Figma und wie Sie damit flexible und ansprechende Designs erstellen können sparen Sie Zeit und Mühe bei der Arbeit an Ihren Projekten Autoyout ist wie eine Magie in Figma. Es hilft Ihnen, Ihre Elemente zu organisieren und Ihre Designs flexibel zu gestalten Stellen Sie sich das als ein System vor, das alles in Ordnung hält und den Abstand für Sie anpasst Wenn Sie die Größe einer Schaltfläche, einer Karte oder sogar eines ganzen Abschnitts ändern, sorgt das automatische Layout dafür, dass alles darin auch die Größe Stellen Sie sich vor, Sie erstellen eine Navigationsleiste mit Schaltflächen. Ohne automatisches Layout müssen Sie jede Schaltfläche manuell anpassen, wenn Sie die Größe ändern. Aber mit dem automatischen Layout erledigt Figma das automatisch für Sie Es gibt nur wenige Gründe, warum das automatische Layout so wichtig ist. Erstens beschleunigt das automatische Layout Ihren Arbeitsablauf. Sie müssen nicht jedes Element von Hand anpassen. Wenn Sie möchten, dass Ihr Design auf verschiedenen Bildschirmgrößen funktioniert, sorgt das automatische Layout außerdem auf verschiedenen Bildschirmgrößen funktioniert, dafür, dass alles perfekt passt. Nicht nur das, es bietet Ihnen auch einen konsistenten Abstand, was für ein gutes Design von entscheidender Bedeutung ist. Grundsätzlich können Sie mit dem automatischen Layout mehr Zeit mit dem Entwerfen und weniger Zeit mit der Korrektur kleiner Details verbringen . Gehen wir zu unserem Figma-Design und beginnen wir mit dem Hinzufügen des automatischen Layouts Zuerst erstelle ich ein neues Projekt, indem blaue Schaltfläche „Neues erstellen“ und dann auf Designdateien klicke Dann werde ich das hier ändern in. Lass es uns wie Auto AO ändern. Dann klicke ich auf dieses Rahmensymbol und lass uns einen Rahmen in Desktop-Größe wie diesen erstellen. Als ersten Schritt fügen wir diesem Rahmen ein automatisches Layout hinzu. Und automatisches Layout. Wenn Sie in der rechten Seitenleiste nachsehen, wird die Option für das automatische Layout Nur Sie müssen auf dieses Plus-Symbol klicken. Oder wenn Sie die Tastenkombination verwenden möchten, ist die Tastenkombination für das automatische Layout Shift A. So können Sie Optionen für Autoayout I Autoay hinzufügen . Wir haben Funktionen, um zwischen Größen, horizontale Muster und vertikale Muster hinzuzufügen horizontale Muster und vertikale Muster und die Elemente nach Belieben auszurichten Es wird einfach sein, wenn wir einige Objekte erstellen Lassen Sie uns zunächst eine Schaltfläche erstellen. Hast du dich daran erinnert, als wir das letzte Mal eine Schaltfläche erstellt haben? Wir müssen Form und Text hinzufügen, aber beim automatischen Layout reicht der Text aus, um eine Schaltfläche zu erstellen. Klicken Sie auf den Text und klicken Sie hier dann Text hinzu oder fügen Sie den Namen der Schaltfläche hinzu, wenn Sie mich jetzt klicken. uns dann wie zuvor Lassen Sie uns dann wie zuvor die Schriftart ändern. Die Schriftart wird wie bei Offen hinzugefügt und die Größe wird halbfett sein. Dann fügen wir auf diese Weise die Schriftgröße 418 hinzu, und vielleicht werden wir normal sein . Ist gut Jetzt lass es uns halbbool machen. Okay, jetzt haben wir den Button-Text. Ich werde die Groß- und Kleinschreibung verwenden. Okay. Nun, das ist nur ein Text, und wir können diesem Text ein automatisches Layout hinzufügen. Sie müssen Shift A drücken. Wenn Sie Shift A drücken, können Sie ein automatisches Layout hinzufügen. Okay, hier sind die Optionen für das automatische Layout dieser Schaltfläche. Im zweiten Schritt werde ich diesen Rahmen in eine Schaltfläche umbenennen, damit er leichter zu verstehen ist. Dann füge ich eine Füllfarbe hinzu. Die Hintergrundfarbe. Wenn wir also die Hintergrundfarbe hinzufügen, können wir leicht erkennen, was passiert ist, als wir die automatischen Layout-Optionen in diesem Abschnitt geändert haben die automatischen Layout-Optionen in diesem Ihrer rechten Seitenleiste haben wir also das Feld gefüllt und ich klicke auf dieses Plus-Symbol Dann werde ich diese grüne Farbe ändern , weil Grün eine meiner Lieblingsfarben ist. Okay. Sieht gut aus. Sie können es in jede beliebige Farbe ändern, aber ich wähle Grün. Okay. Jetzt haben wir den Text mit Hintergrundfarbe. Und wenn wir auf dieses automatische Layout klicken, können wir den Text so sehen. Jetzt wähle ich die Schaltfläche aus und erinnerst du dich, dass ich dir von horizontaler Polsterung und vertikaler Polsterung erzählt habe dir von horizontaler Polsterung und vertikaler Polsterung erzählt Hier sind diese Optionen. Wir können sie einfach wie 15 hinzufügen und sehen, wenn ich das hinzufüge, erhalte ich den Abstand zwischen dem Text als 15 und lassen Sie uns 20 daraus machen Jetzt ist es klarer, 25, jetzt ist es klarer Dann haben wir vertikale Polsterung. Vertikaler Abstand bedeutet den Abstand zwischen dem Auf- und Abwärts dieses Textes Fügen wir vertikale Polsterung hinzu, fügen wir 25 hinzu. Okay. Jetzt sieht es eher aus wie ein Knopf. Machen wir das als Zwilling und 30. Okay. Jetzt ist es richtig gut. Wenn ich will, kann ich hinzufügen, ich kann die Ecken verkleinern, indem ich hier klicke und 39 hinzufüge. Erinnerst du dich, dass wir das in den letzten Lektionen gemacht haben und jetzt haben wir diese Art von Button und wenn wir diese Dinge anpassen, können wir dieses Design wirklich cool machen. Jetzt befindet sich dieser Button in der linken Ecke. Was ist, wenn wir wollen, dass es wie hier in der Mitte platziert wird. zu tun, klicken Sie auf den Rahmen, der Rahmen ist bereits automatisch formatiert. Wir müssen also nur auf Aline oben in der Mitte klicken und es wird zur oberen Mitte der Linie Wenn wir auf Align Center klicken, geht es zum mittleren Teil, und hier ist die Stärke des automatischen Layouts. Wenn wir das automatische Layout nicht verwendet haben, müssen wir diese Schaltfläche manuell anpassen. Beim automatischen Layout kümmert sich Figma jedoch um den Einstellungsteil Wir müssen ihn nur in diesem Bereich für das automatische Layout ändern Okay. Jetzt denke ich, wir müssen einen anderen Button erstellen. Lassen Sie uns diese Schaltfläche duplizieren. Ich werde auf den Button klicken und Command C drücken und Command V drücken. Der Button wird einfach hinzugefügt, dann überlege mal ob du die Größe des eingegebenen Stifts ändern musst. Es ist wirklich einfach. Sie müssen nur auf den Rahmen klicken und dann sehen Sie diese Art von Anpassungslinie, mit der Sie ihn ändern können. Also können wir es von hier aus so ändern. Okay. Jetzt machen wir diese Schaltfläche wie die Feldfarbe Null und fügen einen Strich hinzu. Um einen Strich hinzuzufügen, klicken Sie auf die Schaltfläche und Sie werden diesen Strich sehen Klicken Sie einfach so. Und jetzt ändern wir die Strichfarbe in diese grüne Farbe. Damit wir die Textfarbe ändern können, um die Textfarbe zu ändern, müssen wir den Text isolieren und ihn auf Grün umstellen Okay. Hier sieht es so aus, aber diese grüne Farbe ist zu hell, also müssen wir sie so auf dunkel ändern, die Füllfarbe auf Sorry ändern, nicht auf Füllfarbe. Ändern Sie die Textfarbe wie folgt in eine dunkle Farbe. Okay. Nun überlege, ob du den Text ändern willst, lass uns ändern, klick mich, um einen zu kaufen und einen gratis zu bekommen. Wenn wir die Textfarbe ändern, passt sich die Ausrichtung automatisch an. Schau mal, ob ich hier auf „Senden“ ändere, es wird sich entsprechend „Jetzt einreichen“ wie folgt ändern. Die Schaltfläche ändert sich je nach Text. Aber erinnerst du dich an das letzte Design, das wir erstellt haben? Gehen wir also zu diesem Design über. Ich klicke auf Zurück zu Dateien und hier haben wir das Design. Dann holen wir uns diesen Button. also auf diese Schaltfläche, wir also auf diese Schaltfläche, um auf mich zu klicken , um eine kostenlose zu erhalten. Wenn Sie jetzt den Schaltflächentext anpassen, wird der Hintergrund nicht angepasst. Wir müssen es manuell so anpassen. Deshalb sollten wir Autoayout verwenden. Gehen wir zurück und klicken auf den Abschnitt Autoayout. Dies ist nur eine Grundausstattung und wir haben viel mehr Elemente, viel mehr Funktionen, die wir mit dem automatischen Layout ausführen können Stellen Sie sich nun vor, Sie müssen in der zweiten Schaltfläche unter dieser Schaltfläche eine Schaltfläche erstellen . Derzeit ist das nicht möglich, denn wenn ich diese Schaltfläche dupliziere, gibt es nur eine horizontale Linie. Wenn wir die Schaltfläche unten hinzufügen möchten, lösche ich sie zuerst oder lösche Wenn wir eine neue Schaltfläche hinzufügen müssen, müssen wir zuerst auf diesen DestopFrame klicken und automatische Layout dieses Rahmens als vertikal hinzufügen, so wie Wenn ich es hinzufüge, werden die Take wie folgt vertikal ausgerichtet, aber ich möchte diese beiden horizontal sind und eine neue Zeile hinzufügen Um das zu tun, klicke ich auf diese beiden Elemente und drücke Shift A, und es entsteht ein anderer Frame. Hast du es gesehen? Ich drücke Command C, um es rückgängig zu machen. Zuerst klicke ich auf diese beiden Ebenen oder diese beiden Rahmen oder diese beiden Schaltflächen, dann drücke ich Shift A und es wird ein neues Layout oder ein neues Autoayout Jetzt kann ich auf dieses horizontale Layout klicken und es wird horizontal sein Nun, wenn ich eine neue Schaltfläche erstellen möchte. Lass uns unten einen neuen Button wie diesen erstellen und Hallo ich. Dann fügen wir das automatische Layout hinzu, indem wir Shift A drücken, und hier haben wir die Details, wir haben Optionen für das automatische Layout. Jetzt füge ich die Feldfarbe hinzu. Lassen Sie uns dieses Mal die Feldfarbe und das grüne Hellgrün wie folgt hinzufügen die Feldfarbe und das grüne Hellgrün wie folgt und die Textfarbe in Weiß ändern. Jetzt füge ich horizontales Paddin 20 hinzu und tut mir leid, vertikales Paddin 20 wie folgt Machen wir daraus 30. Nun sehen Sie, wir erstellen diese Schaltfläche unter diesem Set. Lassen Sie uns das in eine Schaltfläche wie diese umbenennen, dann können wir diese Textzeile anpassen oder wir können sie jetzt ändern diese Textzeile anpassen oder wir können sie jetzt und sie passt sich dem Text an. Okay. So erstellen Sie das automatische Layout. Mal sehen, ob Sie diese Schaltfläche als Schaltfläche in voller Größe verwenden möchten . Derzeit beträgt diese Desktop-Größe also 1.440. Also wenn wir diesen Button voll mit Button machen wollen. Wir müssen nur auf den Button klicken und schon wirst du es sehen. Im Frame siehst du, klicke auf diesen Button, und hier siehst du den Behälter hug, make it fill Dann lässt du es den Behälter füllen. Die Schaltfläche wird als Füllbehälter eingestellt. Außerdem werden Sie diese Art von Abstand sehen. Der Grund dafür ist, dass beim Klicken auf den Desktop-Rahmen horizontaler Abstand von zehn angezeigt wird Wenn wir es auf Null ändern, die Schaltfläche die volle Breite Also lass uns 140, 140 draus machen. Okay. Nun, diese Zwischengröße können Sie ändern, indem Sie den vertikalen Abstand ändern. Lass es uns wie 60 ändern. Also hier ist der Weg. Wenn Sie diese Schaltfläche nun oben platzieren möchten, können Sie auf eine Zeile oben in der Mitte oder auf eine Zeile links von einem Stummel wie diesem klicken oder auf eine Zeile links von einem Stummel wie diesem Das ist wirklich einfach. Vielleicht sind Sie immer noch verwirrt, aber in den nächsten Lektionen werden wir diese Banner mit automatischem Layout entwerfen und Sie werden das automatische Layout vollständig verstehen, wir sehen uns in der nächsten Lektion. 15. UI3 Beta für Figma aktivieren: Hallo zusammen, im Moment , in dem ich diese Lektion erstelle, neue Benutzeroberfläche von Figma UI nicht für alle Benutzer ist die neue Benutzeroberfläche von Figma UI nicht für alle Benutzer verfügbar, daher müssen wir auf die Warteliste gesetzt werden, da sie sich noch in der Betaphase befindet Nach der Beta werden wir, wie angekündigt, auf die Figma-Benutzeroberfläche drei zugreifen können Wenn Sie die drei Benutzeroberflächen jedoch nicht verfügbar haben, können wir die Google Chrome-Erweiterung verwenden um die drei Benutzeroberflächen zu überprüfen Lass es uns machen. Zuerst öffne ich einen neuen Tab und suche nach Figma, ich drei, schließe mich an Dann lasse ich das UI Three Beta oder Figma aktivieren. Ich klicke einfach drauf. Jetzt ist hier die Erweiterung oder das Plug-in, ich klicke bei Chrome darauf und klicke auf Erweiterung. Derzeit funktioniert diese Version in Webbrowsern, nicht im heruntergeladenen Figma-Tool. Verwenden Sie also Google Chrome, um diese Erweiterung auszuführen. Okay. Jetzt müssen wir zu unserem Figma-Konto gehen und ich repräsentiere Klicken wir nun auf Creative und dann auf Design-Datei. Von hier aus können wir Figma UI Three verwenden, um unsere Designs zu erstellen. In der nächsten Lektion werden wir einen kurzen Überblick geben und diese drei Funktionen der Benutzeroberfläche und die Benutzeroberfläche drei verwenden diese drei Funktionen der Benutzeroberfläche und die Benutzeroberfläche drei um unsere zukünftige Arbeit abzuschließen 16. Figma UI3-Komplettlösung: Hallo, alle zusammen. Lassen Sie uns die Benutzeroberfläche von Figma durchgehen die Benutzeroberfläche von Figma Jetzt bin ich auf dem Figma-Dashboard. Ich klicke auf diese neue Designdatei, um ein neues Design zu erstellen. Jetzt habe ich die UIT oder die alte Figma Editor-Benutzeroberfläche. Ich klicke auf dieses Hilfesymbol und hier klicke ich auf Neue Benutzeroberfläche in Beta Ink verwenden. Hier ist unsere Benutzeroberfläche Dies entspricht der zweiten Benutzeroberfläche oder der alten Benutzeroberfläche der Figma. Nur haben wir ein professionelleres Aussehen und haben bei einigen eine freundliche Änderung am Gesamteditor vorgenommen Zuerst werde ich einen Rahmen erstellen. Also hier haben wir das Werkzeug-Panel hier drin. Wir haben den Rahmen, also klicke ich auf den Rahmen und dann hier, dann erstelle ich einen Rahmen wie diesen, oder lassen Sie uns einen Rahmen mit Desktop-Größe erstellen. Ich klicke hier. Dann können wir auf unserer rechten Seite die Desktop-Größe auswählen. Ich werde diese Desktop-Version auswählen. Jetzt haben wir auf der linken Seite den Navigationsbereich. Hier können wir die Ebenen sehen und in *** können wir diese Asserts sehen Ich werde diesen Desktop 12 in Main umbenennen. Jetzt werde ich mit dem Formwerkzeug ein Rechteck erstellen Klicken Sie hier und erstellen Sie ein Rechteck wie dieses. Dann kann ich die Eigenschaft dieses Rechtecks sehen. Ändern wir diese Breite und Höhe auf 300 300 und ändern wir die Feldfarbe auf Rot. Es ist also dasselbe wie zuvor und wir können auch Lippen erstellen, die Ellipse verwenden und sie so erstellen Dann haben wir hier Text. Ich klicke darauf und dann wähle ich den Text aus und hier kann ich die Schrift ändern, um ihn Railway Size Will Be 30 Sync und Semi Board umzustellen. Ändere die Farbe auf diese Weise auf Rot. Ist 60 auf dieser Seite, können wir die Spieler sehen und wir können neue Seiten wie diese erstellen. Nach wie vor haben wir dieses Aktionspanel hier, wir finden Plugins und Widgets. In diesem Abschnitt finden Sie auch Funktionen, die wir mit Figma AI verwenden können . Lassen Sie uns in zukünftigen Lektionen mehr über Figma AI erfahren Lassen Sie uns diese Lektion mit der Änderung dieses Figma-Dateinamens abschließen mit der Änderung dieses Figma-Dateinamens Ich werde diesen Figma-Dateinamen in Webdesign ändern. Lektionen wie diese. Im nächsten Video werde ich sehen, wie Sie das automatische Figma-Layout mit der neuesten Version von UIT erstellen automatische Figma-Layout mit der neuesten Version von UIT 17. Figma Auto-Layout mit UI3 lernen: Hallo, alle zusammen. Lernen wir das automatische Layout von Figma mit der Benutzeroberfläche von Figma UI mit drei Editoren Sie kennen sich bereits mit dem automatischen Layout von Figma Lassen Sie uns loslegen Zuerst werde ich einen Rahmen erstellen. Also hier bin ich im Figma-Editor, also klicke ich hier, klicke auf das Rahmensymbol und wähle es als Desktop Hier ist unser Rahmen. Dann fügen wir diesem Rahmen ein automatisches Layout hinzu. Dazu kann ich mit der rechten Maustaste klicken und auf diesen Atayout-Menüpunkt klicken, oder ich kann hier oder auf der rechten Seite klicken, wir haben Layout im Layout Hier können wir die Autoayout-Funktion verwenden, also kann ich hier klicken oder ich kann einfach auf Shift A klicken. Ich klicke einfach hier und es Jetzt füge ich etwas Ellipse hinzu. Lass uns auf Ellips klicken und eine Elise erstellen. Dann setze ich die Breite der Ellipse auf 150 und die Höhe Dann ändere ich die Feldfarbe auf Rot und dann werde ich das dreimal duplizieren dreimal Lassen Sie uns diese Ellipsenfarbe auf Dann klicke hier und ändere diese Farbe wie folgt in Blau. Lassen Sie uns mit diesen Objekten herumspielen und mehr über das automatische Layout erfahren. Zunächst werde ich diesen Frame-Namen „Layouttest“ umbenennen. Okay. Dann wähle ich den Rahmen aus. Im Bereich Auto werden wir eine Option haben. Als ersten Schritt werde ich dafür den linken und rechten Rand auf 140 festlegen. Ich muss den linken und den rechten finden. Hier sind der linke und der rechte Rand. Derzeit sind es zehn. Wenn ich hier klicke, sehe ich einzelne Ränder. In diesem Fall handelt es sich um eine Polsterung, aber sie funktioniert auch als Rand Hier setze ich 140 und dann wieder 140 auf diese Seite Hier ist 140, hier ist 140. Jetzt möchte ich den Rand oben und unten hinzufügen , derzeit ist der obere Rand zehn. Hier können Sie sehen, dass es zehn, zehn sind, und wenn ich mit der Maus darüber fahre, werden zehn angezeigt, also möchte ich mehr Platz hinzufügen, also füge ich etwa 60 hinzu Um das zu tun, klicke ich hier und jetzt kann ich den Wert auf 60 ändern , wenn ich hier minimiere Ich kann nur bei 60 sein, dann habe ich 60 als oberen und unteren Rand, und hier sehen wir die horizontale Lücke zwischen Objekten Um es zu ändern, kann ich es überarbeiten und ändern, wie ich will. Stellen wir es auf 50 ein und auch von hier aus kann ich es ändern, wie ich will. Dann möchte ich diese Schaltfläche in der Mitte platzieren, um das zu tun . Ich klicke auf den Rahmen und hier kann ich auf An der Mitte ausrichten klicken. Die Ellipse geht in die Mitte und wenn ich auf die Mitte klicke, geht sie in die Mitte und es funktioniert so Derzeit befinden sich diese drei Ellipsen in der Horizontalen. Wenn ich es vertikal machen möchte, kann ich einfach auf dieses vertikale Layout klicken und es wird vertikal ausgerichtet Jetzt werde ich es wieder so horizontal anordnen. So können wir ein automatisches Layout im Frame hinzufügen und daran arbeiten. Es gibt mehr Optionen, mit denen man spielen kann. Wenn wir beispielsweise diese horizontale Lücke zwischen Objekten zur automatischen Einstellung hinzufügen, wird die Lücke automatisch gefüllt. Und wenn ich die Größe mit einer Höhe ändere, ändern wir sie etwa 1.000, dann passt sie sich an das Design 6 an, so wie hier. 18. Schaltflächen mit Auto-Layout entwerfen (bei Kleidung, nicht bei UI): Lassen Sie uns Schaltflächen mit automatischem Layout erstellen. Um das zu tun, entferne ich den ganzen Frame oder lass uns einen neuen Frame erstellen. Ich drücke die Befehlstaste und benutze das Mausrad, um die Anzahl der Scanner zu verkleinern . Dann klicke ich hier und klicke auf den Desktop Okay. Lassen Sie uns diesen Desktop auf die BTN-Ebene umstellen Und jetzt klicke ich hier und konvertiere es in ein automatisches Layout wie dieses Okay. Lassen Sie uns die Einstellung so beibehalten und jetzt drücke ich T und erstelle einen Schaltflächentext wie „Klick mich jetzt“. Ich kann die Schriftart ändern, wenn ich möchte. Ändern wir es so, als würden Roboto und Roboto sich zu 25 zusammenfügen. Machen wir es wie ein Medium. Lass uns die Schrift so ändern, dass sie wie Pop-In aussieht. Es sieht gut aus. Okay. Jetzt muss ich mit der rechten Maustaste klicken und auf AutoAyou klicken , um Shift A zu drücken. Ich klicke einfach darauf und es wird zu Autoayout hinzugefügt Dann werde ich hier klicken und es in TN One umbenennen. Okay. Jetzt gehe ich zu unserer rechten Seitenleiste und füge die Füllfarbe hinzu. Ich werde die Füllfarbe als hellblaue Farbe hinzufügen, lassen Sie uns sie etwas dunkler machen. dies nun erneut ab, klicken Sie auf diesen Text und ändern Sie die Füllfarbe wie folgt in Weiß. Wählen Sie erneut die Schaltfläche aus. Layout und von hier aus füge ich die linken und rechten Paddins 30 und die oberen und unteren Paddins 20 Dann ändere ich die Ecke oder verkleinere das Aussehen der Ecke, wir haben den Wert Null, ich mache 60 wie folgt daraus Okay. Was ich jetzt tun kann, ist, das in den Mittelpunkt zu stellen. Dazu müssen wir unseren Rahmen auswählen und wie zuvor müssen wir ihn so zentriert ausrichten, dass er wie folgt ausgerichtet wird. Okay. Jetzt werde ich das duplizieren, indem ich es so drücke und ziehe Okay. Jetzt werde ich einen zweiten Button erstellen. Lassen Sie uns diesen Text auf den zweiten ändern. Klicken Sie als Zweiter auf mich. Und jetzt ändern wir die Füllfarbe in diese blaue Farbe. Und jetzt klicke ich auf die Schaltfläche und lass uns die Schaltflächennamen zwei ändern und die Deckkraft wie folgt auf Null setzen Dann klicke ich auf Estro und hier, setze dann die Etro-Farbe auf diese blaue Farbe und ich ändere die Zeile mit zwei Okay. Jetzt haben wir zwei Knöpfe. Jetzt möchte ich dafür die Größe der Einladung ändern Ich kann einfach hier klicken und sie auf 20 ändern Aber wir haben ein Problem. Nehmen wir an, wir müssen eine weitere Schaltfläche erstellen , die sich unter diesen beiden Schaltflächen befinden sollte. Jetzt klicke ich auf diese Schaltfläche und drücke Befehl C oder Control C unter Windows und Befehl B und dann ist es in derselben Zeile. Wenn wir diesen Button auf der Linie machen wollen , können wir die Ebene versilbern und so klicken Wenn wir die Ebene als vertikale Ebene erstellen, wird jede Schaltfläche als vertikale Ebene festgelegt Um dies zu beheben, markiere ich diese beiden Schaltflächen, klicke auf diese Schaltfläche, drücke die Umschalttaste und klicke auf diese. Dann drücke ich Befehl G, um die zu gruppieren, und jetzt kann ich auf dieses vertikale Layout klicken, da diese Gruppe als anderes Layout funktioniert. Wenn wir in dieser Gruppe die Zwischengröße auf 15 ändern möchten, können wir das tun, indem wir auf die Gruppe klicken und von hier aus können wir sie wie 15 ändern. Oder wir können Shift A drücken und dieser Gruppe ein automatisches Layout hinzufügen. Von hier aus können wir es wie folgt ändern. Okay. Jetzt werde ich diesen Frame auf BTN-Set umstellen Jetzt möchte ich, dass diese Schaltfläche die folgenden dieser beiden Schaltflächen hinzufügt. Ich klicke einfach auf diesen Button und ziehe ihn an den unteren Rand dieses Schaltflächensatzes. Hier ändere ich die Feldfarbe, ändere ich die Feldfarbe sodass wir sie wie folgt auf Rot ändern können. Dann denke ich, dass ich diese Schaltfläche erstellen möchte, um das zu tun, ich werde hier hingehen und im W werde ich sie als Füllcontainer wie diesen einstellen. Dann werde ich das ändern. Klick mich an Ich bin voll mit BTN, so wie hier. Da wir diese Texte vorher ändern können, klicken Sie mich jetzt an, um zwei auf diese Weise zu teilen Das wird sich an das Design anpassen , da wir das automatische Layout hinzugefügt haben Wenn wir hier einen Rand hinzufügen möchten, können wir einfach den Hauptrahmen auswählen und von hier aus können wir einen Rand von 140 wie folgt hinzufügen. Das ist wirklich einfach und in der nächsten Lektion fangen wir an, den Heldenbereich zu entwerfen. 19. Den ersten Heldenabschnitt mit Auto-Layout erstellen: Hallo alle zusammen. Lassen Sie uns nun diese Heldenabschnitte mit automatischem Layout entwerfen. Wir sind bereits dabei , diese Nullbereiche ohne automatisches Layout zu erstellen . Jetzt ist es an der Zeit, das automatische Layout zu verwenden , um diesen Heldenbereich zu erstellen. Als ersten Schritt müssen wir einen Rahmen erstellen. Ich klicke hier und wähle dann die Rahmengröße als Desktop aus. Dann werde ich es so ausdrücken. Jetzt ändere ich diesen Desktop auf Hero One mit automatischem Layout. Okay. Jetzt müssen wir als ersten Schritt ein Rasterlayout hinzufügen. Um ein Rasterlayout hinzuzufügen, isolieren Sie den Rahmen und hier haben wir ein Rasterlayout Ich klicke hier und hier haben wir gespeichert, um das Grid aufzurufen, also füge ich es einfach hinzu Okay. Jetzt werde ich diesen Rahmen als automatisches Layout erstellen. Um das zu tun, wähle ich das Prime aus und drücke Shift A, dann wird es ein automatisches Layout und jetzt füge ich die notwendigen Details hinzu. Zuerst stelle ich eine Linie in der Mitte oben ein, dann füge ich den vertikalen Abstand oder die Polsterung auf 140 ein, dann füge ich tatsächlich den linken und rechten Rand hinzu, oder wir können es Padding nennen Dann füge ich Null als Rand des Lüfters oder als obere und untere Dann wähle ich als Zwischengröße 90 oder machen wir eins bis 20, hier haben wir ein horizontales Layout, aber wir brauchen ein aber wir brauchen vertikales Layout, weil wir die Website von oben nach unten erstellen Okay. Jetzt ist unser Layout fertig. Lassen Sie uns den Heldenbereich erstellen. Wir haben die Höhe des Heldenbereichs mit 700 angegeben. Lassen Sie uns einen Rahmen erstellen und auf einen Rahmen klicken und dann hier klicken. Dann setze ich die Breite auf 1.440 und die Höhe auf 700. Okay. Jetzt haben wir den Rahmen, ich drücke Shift A, um daraus ein automatisches Layout zu machen oder diesem Rahmen ein automatisches Layout hinzuzufügen. Wenn ich will, kann ich diesen Abschnitt dann in Hero umbenennen. Okay. Von hier aus müssen wir dieses Hintergrundbild hinzufügen. Dazu wähle ich diesen Heldenbereich und klicke auf ein Rechteck und dann hier. Dann setze ich das Rechteck wieder auf 1.440 Höhen auf 700, dann klicke ich auf das Dreieck mit 700, dann klicke ich auf das der Anzeige und dann hier, dann auf Bild mit dem Schrägstrich Video Dann wähle ich das Bild aus. Jetzt klicke ich hier , um das Bild hinzuzufügen. Jetzt wurde das Bild perfekt hinzugefügt. Wenn Sie das Design sehen, werden Sie diese Art von Abstand zwischen den Bildern sehen , um es zu entfernen Klicken Sie auf den Heldenbereich und setzen diese Details vorerst auf Null. Und lassen Sie uns das vorerst so belassen. Nochmals, und jetzt haben wir das Bild und als zweiten Schritt müssen wir diesen Overlay-Hintergrund hinzufügen Die Overlay-Farbe ist Schwarz und ihre Opazität beträgt 70. Lassen Sie uns diese Details hinzufügen. Klicken Sie auf das Bild, klicken Sie auf dieses Plus-Symbol und machen Sie es zu 70 und die Farbe ist schwarz. Okay. Jetzt müssen wir diesen Logo-Text hinzufügen, um ihn hinzuzufügen Ich werde auf TO-Text klicken und hier klicken, dann füge ich den Text hinzu, da ich den Text als Logo hinzufüge. Wenn ich den Text hinzufüge, werden Sie sehen, dass er hier erscheint. Der Grund dafür ist, dass wir uns derzeit im Hero-Frame befinden. Wenn ich auf diesen Rahmen klicke und er ein horizontales Layout hat. Lassen Sie uns ein vertikales Layout erstellen und dann erscheint der Heldentext hier. Lass es mich dir zeigen, indem ich die Farbe ändere. Lassen Sie uns es auswählen und die Feldfarbe wie folgt ändern. Aber dieses Bild sollte als Hintergrundbild funktionieren. Wenn wir diesem Design derzeit ein Objekt wie diesen hinzufügen , funktioniert dieses Bild nicht als Hintergrundbild. Um das zu sehen, können wir das Bild auswählen und an den Positionen auf der rechten Seite können wir auf „ Automatisches Layout ignorieren“ klicken, dann ignoriert dieses Bild das automatische Layout. Ich werde auf das Bild klicken und es so platzieren. Jetzt wird das Bild nicht mehr angezeigt, um das Problem zu beheben Ich werde das Bild oben im Heldenbereich platzieren. Dann kann ich es jetzt so einstellen, weil dieses Bild die Top-Layout-Funktionalität ignoriert. Jetzt können wir Änderungen an diesem Heldenbereich vornehmen , um das zu tun. Zuerst werde ich ihn entfernen und im Logo werde ich seine Farbe auf Weiß ändern und lass uns die Details herausfinden. Es ist Railway Semivol 35, klicke auf die Tanks und Railway Semi Wolthirty. Lass uns die Polsterung zwischen der Oberseite des Rahmens und dem Logo überprüfen die Polsterung zwischen der Oberseite des Rahmens und dem Logo Es ist 20. Also machen wir 20, um daraus 20 zu machen, isolieren den Heldenbereich und fügen die obere Polsterung als 20 hinzu, so wie hier Wenn ich dann hier schlitze, entfernen wir die untere Polsterung Im Heldenbereich werde ich die obere Polsterung wie folgt auf 20 einstellen die obere Polsterung wie folgt auf 20 Für diesen Heldenbereich haben wir dann ein Problem, weil der Heldenbereich es geändert hat Ich werde es mit einem Füllbehälter ausstatten und die Höhe wird auf diese Weise 700 sein. Jetzt ist es der zweite Schritt, wir müssen sie bei diesem Menüpunkt hinzufügen, ich drücke T und mag nach Hause. Dann klicke ich hier und klicke auf Kopieren Einfügen als und klicke auf Eigenschaften kopieren und komme hierher, wähle den Text und die Phaseneigenschaften aus. Jetzt haben wir das über uns, also werde ich dieses Zuhause duplizieren, indem ich Alt drücke. Dann klicke ich hier und klicke auf Immobilie kopieren Dann komme ich hierher und klicke auf erste Immobilie. Dann werde ich es für ein, zwei, eins, zwei, drei, vier Mal, eins, zwei, drei, vier Mal duplizieren . Jetzt werde ich diese Texte ändern. Dieser wird ungefähr so sein, wie er funktioniert. Dieser wird Trainer sein, dieser wird Ansprechpartner sein. Jetzt sollten wir diesen Text horizontal ausrichten lassen, derzeit ist er vertikal ausgerichtet. Um das zu tun, markiere ich all diese fünf Texte indem ich Shift und dann Shift A drücke. Wenn ich hier Shift A drücke, wird das dem neuen automatischen Layout hinzugefügt. Wir können diesen Namen für das automatische Layout als Menüelemente ändern. Es ist nicht notwendig. Dann können wir dieses automatische Layout ändern. Entwerfen Sie ein horizontales Layout. Lassen Sie uns nun die Größe zwischen den Zwischenräumen überprüfen. Die Zwischengröße ist 36. Machen wir es zu 36 dazwischen. Wählen Sie dazu das automatische Layout aus und ändern Sie es auf 36. So wie das. Als nächsten Schritt müssen wir diese beiden Abschnitte oder das Logo und den Menüelementabschnitt in dasselbe horizontale Layout einfügen Menüelementabschnitt in , um dies zu tun. Wählen Sie dazu erneut das automatische Layout oder den Menüelementsatz und das Logo aus, indem drücken und Shift A drücken, um ein automatisches Layout zu erstellen. Dann wiederum ändern wir das automatische Layout in ein horizontales Layout. Nun zur Ausrichtung, lassen Sie uns die Ausrichtung in der Mitte so einstellen, dass sie korrekt ausgerichtet ist, oder vielleicht wird eine Linie in der unteren Mitte angeordnet Jetzt müssen wir diesen Abstand einhalten , das Hinzufügen dieses Abstands ist wirklich einfach Wir müssen nur die Zwischengröße ändern. Wir können es manuell ändern, aber es gibt eine bessere Option. Das heißt, fügen Sie diese Größe dazwischen hinzu, bis sie so ist, und dann müssen wir das ändern, um den Behälter zu füllen. Jetzt ist es perfekt Line und von hier aus können wir das automatische Layout oder den Layoutnamen in ein Menü wie dieses ändern . Siehst du, es ist super sauber und super einfach. Wenn wir eines dieser Details ändern möchten, müssen wir es nur auf einmal ändern. Wenn wir beispielsweise einen größeren Abstand wie 50 wünschen, können wir einfach 50 drücken, aber in diesem Fall müssen wir einen nach dem anderen manuell anpassen. Also ja, Sie werden vielleicht verwirrt sein, was das automatische Layout angeht, aber das ist wirklich einfach und lassen Sie uns Schritt für Schritt vorgehen , damit Sie das automatische Layout vollständig verstehen . In der Helden-Sektion müssen wir dafür diese Texte erstellen. Ich drücke T und klicke hier, dann komme ich zu dieser Art von Text. Dann werde ich diesen Text direkt kopieren und so einfügen. Dann werde ich das duplizieren, auf den Text klicken und Befehl C oder Strg C drücken , um ihn zu kopieren und V, um ihn so einzufügen. Dann brauchen wir ihn tatsächlich viermal, dann werde ich den Text so ändern , dann werde ich den Text so ändern weil wir uns in dieser Lektion hauptsächlich auf das Autoayou konzentrieren In zukünftigen Lektionen werden wir uns eingehender Typografie und Farben befassen Sie uns nun als ersten Schritt Lassen Sie uns nun als ersten Schritt diese Schaltfläche erstellen Lassen Sie uns diese Schaltfläche erstellen und dann können wir einen Abstand hinzufügen und sie zentrieren, aber als ersten Schritt erstellen wir eine Schaltfläche. Wie zuvor können wir auf den Schaltflächentext klicken und dann Shift A drücken Dann wollen wir die Messung herausfinden. sind 16, 60 oben und unten und links und rechts 20, klicken Sie auf das automatische Layout. Lassen Sie uns den Namen wie folgt in BTN ändern. Von hier aus sind links und rechts 220 und oben und unten 16. Fügen wir nun diese Farbe zu dieser Schaltfläche hinzu. Klicken Sie dazu auf das Schnellsymbol in fill und klicken Sie hier, klicken Sie auf dieses Symbol und dann auf dieses, klicken Sie auf diese Farbe. Wir entwerfen ganz einfach den perfekten Button. Okay. Jetzt haben wir bei diesem Abstand, der Abstand dazwischen ist 15 und hier haben wir 20. Wählen wir die Elemente mit einem Abstand von 15 aus. Bevor ich das mache, wählen wir die Elemente und drücken Shift A und erstellen ein automatisches Layout Dann ändere ich dieses automatische Layout als CtA und jetzt müssen wir dieses automatische Layout in die Mitte stellen Ganz einfach, ich mache es als Linienmitte und dann müssen wir das in die Mitte stellen , um das zu tun Im CtA-Layout werde ich die Breite als Feldcontainer festlegen Dann müssen wir die Höhe ändern, um den Behälter so zu füllen, dass er so aussieht Jetzt wird es zentriert und wir müssen immer noch den Abstand hinzufügen, um den Abstand hinzuzufügen Ich wähle den CtA Lassen Sie uns die Größe dazwischen 20 setzen, aber hier ist die Einladungsgröße 15, um das Problem zu korrigieren, wählen Sie alle diese Elemente aus und drücken Sie Shift A, um die Einladungsgröße Okay, perfekt. Wir entwerfen nur den Heldenbereich mit automatischem Layout. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion auch diesen entwerfen. Wenn wir wollen, können wir es einfach so platzieren und es uns in der Vorschau ansehen. Ich sehe so aus 20. 2. Heldenabschnitt mit Auto-Layout erstellen: Hallo, alle zusammen. Lassen Sie uns diesen zweiten Heldenbereich mit automatischem Layout erstellen. unserem ersten Schritt Klicken Sie in unserem ersten Schritt auf den Rahmen und wählen Sie die Rahmengröße als Desktop aus, setzen Sie ihn so ein und ändern Sie diesen Frame-Namen Hero Two mit automatischem Layout. uns jetzt, wie zuvor, Lassen Sie uns jetzt, wie zuvor, ein Layoutraster wie dieses hinzufügen. Okay, dann fügen wir diesem Rahmen ein automatisches Layout hinzu. Ich drücke Shift A. Jetzt mache ich den horizontalen Abstand zwischen Null und dem linken und rechten Rand wie eins für T, und der obere und untere Rand werden Null sein. Lassen Sie uns nun sehen, was wir zuerst tun müssen. Zuerst müssen wir diesen Hintergrund hinzufügen. Um das zu tun, werde ich hier klicken und hier klicken und auf Dreieck klicken, hier klicken. Dann müssen wir 1.440 Breite und 700 als Höhe sehen. Ich denke, 700 sind ok. Jetzt klicke ich hier und klicke auf Bild Video und dann auf das Bild. Dies ist das Bild, klicken Sie hier und jetzt müssen wir die Hintergrundfarbe Weiß hinzufügen und die Deckkraft beträgt 90. Klicken Sie hier, klicken Sie auf Füllen, ändern Sie dies auf Weiß und es wird 90 sein Jetzt sehen Sie, dass aufgrund dieses 140-Grad-Randes das Bild oder der Hintergrund hier ist. Wir müssen das Hintergrundbild auswählen. Klicken Sie auf dieses Igno Auto Layout-Symbol. Jetzt können wir es hinzufügen, nach Belieben anpassen, dann werde ich es in BG umbenennen Wie ich bereits sagte, ist es nicht notwendig, aber ich werde das tun. Dann klicke ich hier und erstelle einen Rahmen. Der Name des Frames wird Hero sein. Dann füge ich Autoayout hinzu, indem ich den Hero-Frame auswähle und Shift A drücke. Dann stelle ich die Breite als Füllcontainer Soweit ich mich erinnere, habe ich in früheren Lektionen die Parameter nicht erklärt Machen wir uns mit diesen Parametern vertraut. Zunächst haben wir die Breite festgelegt. Wenn wir eine feste Breite wählen und nach Belieben 200 hinzufügen können , wird das Objekt 200 sein. Lassen Sie uns das Objekt mit Füllfarbe und Rot versehen. Okay. Wir müssen dieses Hintergrundbild als erste Ebene des Rahmens verwenden. Ohne das werden wir den Rest des Rahmens nicht sehen. Hier ist das Objekt oder Frame, an dem wir gerade arbeiten. Wenn wir es auf 300 setzen, die feste Breite 300. Wenn wir es als Hug-Container einstellen, wird es so lange eine Schnur sein, bis ein anderes Objekt den Rahmen berührt Lassen Sie uns als Beispiel einen Text erstellen und lassen Sie uns diesen Text als Hello World und dann als Hello erstellen Jetzt ist die Breite 300 , weil sie behoben ist. Wenn wir jedoch den Herzinhalt auswählen, wird er von der Größe des Inhalts abhängig gemacht. als Beispiel ein Lassen Sie uns hier als Beispiel ein anderes Rechteck erstellen, sodass es nur dem Element in diesem Objekt oder in diesem Rahmen entspricht. Klicken Sie jetzt hier und Sie sehen möglicherweise diesen Abstand zwischen den Rahmen. Das liegt daran, dass wir die Abstände links, rechts und oben unten als zehn angegeben haben. Machen wir sie auf Null, damit Sie es klar verstehen Okay. Jetzt haben wir einen Füllbehälter. Wenn wir auf Container füllen klicken, wird das Objekt oder das Element um den gesamten freien Speicherplatz erweitert, den es hat. In diesem Fall fügen wir einen Gruppenrand als automatisches Layout für unsere Helden-Sektion Dieser Rahmen befindet sich in diesem Heldenbereich, er hat freien Platz dazwischen. Er wird erweitert, bis Rand auf der linken Seite in diesem Frame erreicht Das ist es. Geben Sie hier die Admin-Breite ein und fügen Sie die maximale Breite hinzu. Wenn wir hier auf Admin-Breite klicken, können wir die Mindestbreite hinzufügen. Wenn wir die Mindestbreite auf 200 und die Mindestbreite auf 700 setzen und jetzt denken, dass wir das so verkleinern Wenn wir es verkleinern, schrumpft das Element oder der Rahmen nicht, wenn die Mindestbreite von 700 Wenn wir eine maximale Breite von 700 haben, das Element eine maximale Breite Das Element wird nur eine Breite von 700 haben. Die sind also etwas fortgeschritten, aber du kannst dich daran erinnern. Im responsiven Design wird es nützlich sein. Das gilt jetzt für die Größe Zwei. Wir haben es als fix angegeben, wir können Fix mit einem Füllbehälter, einem Umarmungsbehälter und Mint x Höhe hinzufügen Umarmungsbehälter und Mint x Höhe Lass uns mit der Arbeit beginnen. Zuerst entferne ich diese unnötigen Objekte, dann entfernen wir die Füllfarbe und wählen den Heldenbereich und das Set mit einem Füllbehälter aus, und wir müssen dieses Maximum entfernen und so meinen. Dann wird die Höhe 700 sein. Okay. Wir müssen diese Rahmengröße auf 1.440 setzen Okay. Jetzt müssen wir hier dieses Logo und den Text hinzufügen. Ich drücke einfach Befehl C, um das zu kopieren, und Befehl V, um es einzufügen. Dann wähle ich einfach all diese Menüelemente aus und kopiere sie, weil wir nicht vornehmen müssen das Styling nicht vornehmen müssen und wir auch diese Schaltfläche haben. Auf Knopfdruck kopiere ich einfach den Text. Der Text ist weiß, also fangen wir mit der Schaltfläche an. Hier haben wir die Taste, isolieren Sie die Taste und drücken Shift A. Dann wollen wir die Taste mit dem Hi herausfinden, sie hat die Größe 16 mal 16 und 37 mal 37. Hier ist der Tastenrahmen. Benennen wir es in VTN um und füllen es dann mit schwarzer Farbe. Dann müssen wir hier 37 als linke und rechte Polsterung und 16 als obere und untere Abstände hinzufügen als linke und rechte Polsterung und 16 als obere und . Jetzt müssen wir die Ecke auf 60 reduzieren. Die Schaltfläche Jetzt müssen wir diese Menüelemente auswählen und von hier aus haben wir die Menüelemente Das dazwischen liegende Menüelement ist 25, kommen Sie so hierher und wählen Sie die Menüelemente aus und drücken Sie Shift A, um ein neues automatisches Layout zu erstellen oder es zu gruppieren und das automatische Layout hinzuzufügen. Dann müssen wir im automatischen Layout das horizontale Layout einstellen. Dann müssen wir dazwischen die Größe 25 hinzufügen Okay. Jetzt müssen wir alle drei Elemente auswählen und die Umschalttaste drücken, um eine Gruppe zu bilden und einen Rahmen hinzuzufügen. Dann müssen wir es horizontal anordnen. Jetzt wird es so aussehen. Jetzt können wir es umbenennen, wenn wir wollen. Lassen Sie uns das in Menü umbenennen und hier Menüelemente wie diesen. Klicken Sie dann auf das Menü-Layout und lassen Sie uns einen Füllcontainer daraus machen. Und dann müssen wir dieses Element zwischen Größe auf Auto setzen , Enter drücken, eigentlich müssen wir dieses Objekt auswählen und das Objekt zwischen Größe auf Auto setzen, so wie hier. Dann müssen wir es zentrieren , damit es zentriert wird. Wir müssen hier so klicken. Das Menü ist erstellt und jetzt haben wir hier den oberen Rand und fügen den oberen Pass 25 hinzu. Lass uns 25 draus machen. Wählen Sie dies aus und klicken Sie von hier aus hier, machen Sie es zu 25. Perfekt. Jetzt müssen wir dieses Willkommen zu meinem Finanzbereich hinzufügen Es wird in diesem Heldenbereich sein. Lassen Sie uns alle auf dem Foto hier kopieren. Ich kopiere einfach so von hier. Für diese Schaltflächen müssen wir ein anderes Layout erstellen . Ich kopiere einfach den Text und kopiere auch nur diesen Text. Fangen wir wieder mit den Schaltflächen an. Bevor ich das mache, lass uns den Knopf zwischen den Seiten herausfinden. Es ist 18, 18, 24, 24. Klicken Sie hier, um die Phase A auf automatisches Layout umzustellen . Das ist dann 24 und hier 18. Dann ist die Füllfarbe schwarz. Eigentlich müssen wir hinzufügen, die Füllfarbe schwarz ist und die Ecken so aussehen , dass sie 60 Dann müssen wir das Gleiche mit der Schaltfläche „Weitere Informationen“ tun. Res-Shift A. Dann fügen wir zuerst einen Strich hinzu, klicken Sie hier und die Konturgröße wird zwei sein. Ich glaube, es ist C, mal sehen. Ja, es ist einer. Also lass uns eins daraus machen. Okay. Dann hat es die gleiche Höhe in der Breite? Ja, nein, es hat eine erhöhte Breite von 33, 33, 33, 18, 80, 35, 30. Lassen Sie uns das als nicht dieses als 35, 18 machen. Und lassen Sie uns hier dasselbe tun. Klicken Sie auf die Schaltfläche Weitere Informationen und stellen Sie hier den Wert auf 35 18 reduzieren Sie dann den Wert als zum Sitzen. Markieren Sie dann die Tasten , markieren Sie sie und drücken Sie Shift A, um das Layout als horizontales Layout festzulegen. Ich hoffe, Sie verstehen diese Option , mit der ich arbeite, klar und deutlich. Wenn du es zuerst nicht verstehst, spiel einfach damit herum. Du musst es immer wieder versuchen, um zu lernen. Zuerst habe ich dasselbe gemacht. Wenn Sie Fragen haben, können Sie mich einfach im Nachrichtenbereich oder im Kommentarbereich fragen . Hier haben wir einen Abstand von 30, hier haben wir einen Abstand von 21. Sie sehen, wenn wir ein Design ohne automatisches Layout erstellen, können wir genaue Zahlen erhalten. Als Beispiel hier haben wir das untere Pad in 19 , das obere Pad in 18. Auch hier haben wir 21 als Zwischengröße, aber es sollte 20 sein. Mit dem automatischen Layout können wir hier ganz einfach auswählen und das automatische Layout auf zwei ändern. Deshalb wird das Erlernen der Oto-Ebene ein großer Vorteil sein. Wählen wir dann all diese Elemente aus und drücken Shift A, um eine Gruppe zu bilden. Ich werde diese Gruppe in ctA und t N s BTN eins, BTN, zwei umbenennen und t N s BTN eins, BTN, , also machen wir diese Zwischengröße jetzt auf Ist es 30? Nur hier 30, hier sind 20. Wählen Sie für diese 20 einfach nur diese beiden aus und wir wechseln dann zu. Okay. Jetzt müssen wir es in den Mittelpunkt stellen. Um dieses Zentrum zu bilden, gehe ich hier hin und stelle die Höhe als Füllbehälter so ein. Dann setze ich diese Ausrichtung auf „ Linksmittig ausrichten“. Okay, es ist zentriert, und jetzt müssen wir dieses Bild hinzufügen. Also dieses Bild auch von der Außenseite unseres Designs, also sollte es kein Outlet haben oder es sollte das Autoao ignorieren Also zuerst erstelle ich ein Rechteck wie dieses und lassen es uns mit 710 und als 610 600 machen Okay, dann kann ich es dazu bringen, Autoao zu ignorieren und es so oben zu platzieren Dann kann ich überall Trinkgeld geben, wie ich will. Lassen Sie uns vorerst ein Bild hinzufügen. Klicken Sie hier, klicken Sie auf Bildvideo und wählen Sie das Bild aus. Hier ist der. Klicke hier, füge es hinzu. Derzeit wird es nicht angezeigt, also müssen wir es so platzieren und dann darauf klicken und Feld ändern, um es so zuzuschneiden und auszurichten. Okay. Der erste Teil ist abgeschlossen. Eigentlich müssen wir dieses Bild einfügen, das. Okay. Jetzt sieht es gut aus. Eigentlich müssen wir das jetzt hinzufügen, was wir tun müssen, ist diesen Abschnitt hinzuzufügen. Es ist einfach, es hinzuzufügen, ich erstelle einen neuen Rahmen. Lassen Sie uns ein neues Rechteck wie dieses erstellen Es wird sich unter dem Heldenbereich befinden, nicht im Heldenbereich. Nun, das sollte so sein, lass es uns hier platzieren und lass uns den Heldenbereich darüber platzieren. Ich habe das Problem in unserem Hauptrahmen gefunden, wir müssen das Layout als horizontales Layout auf vertikales Layout einstellen . Okay. Jetzt ist es da. Jetzt werde ich es mit der Höhe ändern, da 1.440 bis 700 nicht 700 die Größe hier ist 270. Lassen Sie uns 270 testen. Okay. Und für diesen müssen wir dasselbe tun. Lass uns auf Ignotayo klicken und es so ausdrücken. Okay, dann ändern Sie die Feldfarbe auf diese, jetzt müssen wir die Primzahl wie folgt hinzufügen und lassen Sie uns diesen Frame-Namen so ändern dass ich denke , für Sakura C-Highlight hervorheben Wählen Sie es dann aus und drücken Sie Shift A, um ein automatisches Layout zu erstellen und den Container mit Strichfüllung festzulegen Und die Höhe wird auf diese Weise 270 bis 70 betragen. Okay. Jetzt müssen wir diese Informationen hinzufügen. Im Moment werde ich diesen kopieren und den Rahmen setzen und ihn in den Rahmen legen und wir müssen das über den Rahmen machen. Andernfalls werden wir die Rahmendetails nicht sehen. Dann werde ich zu diesem Rahmenlayout eine Linie links in der Mitte machen Okay, jetzt müssen wir diese drei Elemente erstellen, dieses auswählen und dieses auswählen und es so kopieren und einfügen. Kopiere es so. Dann wähle ich diese beiden Objekte aus und drücke Shift A, und dann checke die Eingangskönigengröße auf 15 ein, wähle dieses aus und setze die Eingangskönigengröße auf 50. Okay. Und mach es auch zum Mittelpunkt. Machen wir das Zentrum. Okay. Nun, lassen Sie uns dasselbe auch mit diesem machen. wie bei diesen beiden Objekten Drücken Sie wie bei diesen beiden Objekten Shift A und stellen Sie die Mitte 15 ein. Jetzt wähle ich diese beiden Objekte aus und drücke Shift A, um ein neues automatisches Layout zu erstellen und ein horizontales Layout wie dieses festzulegen. Jetzt wähle ich diesen markierten Rahmen aus und stelle das automatische Layout als horizontales Layout ein. Okay. Dann müssen wir diesen hinzufügen. Fügen wir es hinzu und wählen diese beiden Objekte aus, drücken Shift A und legen es dann als vertikales Layoutzentrum fest. Sehen wir uns nun die Zwischenseiten an. Die Zwischenseiten sind 57, markiere tatsächlich all diese Rahmen, ich kann das in tatsächlich all diese Rahmen, diesen Rahmen einfügen und diesen Rahmen auswählen und ihn auf 57 setzen, dann konvertiere ich diesen Text in automatisches Layout, indem ich Shift A drücke und auf den Hauptrahmen klicke und ihn als Füllcontainer festlege, und hier haben wir Auto als Zwischengröße. Es passt perfekt. Wenn du willst, kannst du es umbenennen, aber im Moment werde ich es nicht umbenennen, also hier ist es, hier ist unser zweiter Heldenbereich mit automatischem Layout. Das Design wird so aussehen. Jetzt sind Sie dran Sie müssen diesem Bereich mit drei Helden ein automatisches Layout hinzufügen, mit Figma herumspielen und versuchen, es zu tun Wir sehen uns in der nächsten Lektion. 21. 3. Heldenabschnitt mit Auto-Layout erstellen: Hallo, alle zusammen. Hast du es geschafft, einen guten Job zu machen? Wenn nicht, machen wir es hier und zuerst müssen wir einen Rahmen erstellen. Klicken Sie auf den Rahmen, legen Sie die Größen und den Desktop fest, setzen Sie ihn so ein, dann fügen wir ein Layoutraster hinzu. Klicken Sie dann auf dieses Anrufregister. Eigentlich brauchen wir das Layout nicht. Aber mit dem Layout lässt sich leicht erkennen, wohin das Objekt gehen wird. Dann müssen wir zuerst dieses Menü hinzufügen, um das zu tun Ich drücke Shift A, um diesem Frame ein automatisches Layout hinzuzufügen. Ich werde diesen Frame in 03 mit automatischem Layout umbenennen. Dann werde ich all diese Details entfernen und hier werde ich sie auf 140 setzen, unseren Rand links und rechts, dann werde ich das als vertikales Layout einstellen , das an dieser Stelle zur Mitte ausgerichtet ist. Jetzt müssen wir dieses Logo hinzufügen. Um es hinzuzufügen, müssen wir einen neuen Rahmen erstellen, auf dieses Rahmensymbol klicken und einen Rahmen erstellen. Diese Rahmengröße entspricht der Höhe 223. Lassen Sie uns mit diesem Füllbehälter die Höhe 223 erreichen. Okay. Jetzt haben wir ein Problem. Nein, wir können das Problem lösen. Das Problem ist, dass wir diese Linie haben, aber unser Rahmen wird nur bis hierher reichen. Die Linie wird also nicht bis zum Ende dieses Frames gehen, aber das wird nicht das Problem sein, weil wir sie zum Hintergrundbild hinzufügen können. Okay. Jetzt müssen wir dieses Logo hinzufügen. Um dieses Logo hinzuzufügen, werde ich ein Rechteck wie dieses erstellen. Eigentlich müssen wir diesem Rahmen ein automatisches Layout hinzufügen, den Rahmen verschieben und Shift A drücken, um ein automatisches Layout hinzuzufügen. Dann legen Sie von hier aus Eigenschaften fest und die Höhe sollte 223 Personen betragen. Okay. Dann müssen wir hier dieses Logo hinzufügen. Die Logogröße ist 192 als Breite und 92, und lassen Sie uns die Höhe als Füllung Fügen Sie das Logo nun wie folgt zu diesem Rechteck hinzu. Der Teil ist fertig und als zweiter Teil müssen wir zuerst dieses Herren-Artikelset hinzufügen. Ich werde zuerst das Home-Menü kopieren , dann über den Elektroservice und uns kontaktieren. Ich werde sie alle hierher kopieren. Dann müssen wir für dieses Zuhause diesen kleinen Pfeil hinzufügen. Ich werde es von hier kopieren. Dann wähle ich den Pfeil und den Starttext, den Starttext, dann den Pfeil drücke dann Shift A. Dann lege ich das Layout als vertikales Layout fest, und dazwischen wird die Größe Null sein. Mal sehen, was dazwischen liegt, es ist 66 das. Okay. Dann werde ich mit einer Umarmung C wie diesem fertig Dann muss ich es so nach vorne stellen. Dann wähle ich all diese Menüelemente aus und drücke Shift A, um das automatische Layout eines neuen Menüelements zu erstellen. Und sehen wir uns die Größe zehn an, es ist 50 dazwischen, Größe hat 50 wie diese. Okay. Jetzt müssen wir diesen US-Bereich erstellen. Es ist wirklich einfach. Zuerst brauchen wir den Zirkus. Wir werden diese beiden Kreise von hier kopieren und sie hier ablegen. Okay. Dann müssen wir, bevor wir das Bauernsymbol hinzufügen, diese beiden in der Mitte platzieren zu tun, drücke ich Shift A und füge das automatische Layout Aber mit dem automatischen Layout können wir das nicht tun, weil Elemente nicht zusammengeklappt werden oder Elemente das nicht vor einem anderen Element im automatischen Layout hinzufügen . Wir müssen auf dieses Igno Auto-Layout klicken. Ich wähle diese beiden Kreise und klicke auf Igno Dann kann ich es so zentrieren lassen. Dann müssen wir auf dieses Handysymbol klicken, ich werde es einfach von hier kopieren. Und wähle diesen Rahmen aus, lege ihn in den Rahmen innerhalb des Rahmens und ich werde dasselbe auch für ihn tun. Dann wähle ich alle drei Elemente aus und mache es so in die Mitte. Okay. Jetzt haben wir ein Problem. Dieser Rahmen funktioniert nicht so, wie wir es wollen, also werde ich ihn außerhalb des Rahmens platzieren und entfernen. Dann wähle ich alle drei Elemente aus und drücke Command G Gruppe E zu erreichen. Dann drücke ich Shift A, um dem Objekt ein automatisches Layout hinzuzufügen. Dann müssen wir auf dieses Bild klicken oder es in ein Menü wie dieses umbenennen und hier Menüelemente hier, Telefonsymbol, dann müssen wir diese beiden Elemente hinzufügen. Ich füge sie einfach so hinzu und wähle beide aus, drücke Shift A, füge dann ein vertikales Layout hinzu und fertig. Jetzt kann ich diese beiden Elemente auswählen und Shift A drücken, um la zu erstellen, um Otolaa zu diesem Abschnitt hinzuzufügen Zwischengröße ist Handtuch, also ändere ich es einfach Okay. Alles gut. Jetzt wähle ich diesen Rahmen aus und setze den Artikel in Zwischengröße auf Otto und er verteilt alles gleichmäßig. Okay. Jetzt müssen wir dieses Hintergrundbild hinzufügen. Es ist wirklich einfach. Klicken Sie einfach auf das Rechteck und stellen Sie dann die Breite 1.440 ein. Lassen Sie uns sehen, dass die Höhe 577 beträgt Fügen wir die Höhe als 577 hinzu. Okay. Jetzt müssen wir nur noch auf dieses Ignootoa klicken, das können Sie, und jetzt können wir das Bild hinzufügen Klicken Sie hier, Video, plattieren Sie das Bild so. Okay. Dann müssen wir diesen Strich hinzufügen. Kopieren wir also die Strichfarbe und klicken Sie hier. Klicken Sie auf PAs und Innenseiten, setzen Sie oben und zwei, dann wird das diese Farbe sein Okay. Jetzt müssen wir diesen Abschnitt erstellen. Lassen Sie uns ihn als ersten Schritt erstellen, lassen Sie uns einen Rahmen erstellen. Eigentlich brauchen wir den Rahmen hier nicht, aber ich werde diesen Teil zuerst kopieren und ihn so platzieren. Dieser Teil wie dieser Text der Schaltfläche wie dieser. Ich werde auf den Rahmen klicken und wir müssen diesen Text nach links platzieren. Klicken Sie so und es wird nach links gehen und hier haben wir ein Problem. Wir haben unten eine 100-prozentige Garantie , aber sie sollte oben sein. Ich wähle es aus und klicke hier und lege es nach oben. Dann haben wir diesen Button in der Mitte, ihn unten. Okay, jetzt werde ich auf Shift A klicken, um eine Schaltfläche zu erstellen. Die Button-Details werden also 25, 25, 30, 30 sein. Okay. Machen wir 30 für links und rechts, 25 für oben und unten, dann Füllfarbe. Fügen wir diese Füllfarbe hinzu. Okay, nett. Jetzt müssen wir das dazwischen überprüfen. Größe, um die Zwischengröße hinzuzufügen Ich wähle all diese Elemente aus und drücke Shift A, dann wird die Zwischengröße angezeigt. Okay. Eigentlich sollte das Null sein. Das ist die obere und untere Polsterung oder die vertikale Polsterung sollte zwei L betragen Jetzt müssen wir dieses Zentrum machen. Um dieses Zentrum zu erstellen, müssen wir das automatische Layout wie folgt darauf anwenden. Um dieses Zentrum zu erstellen, benötigen wir einen Rahmen, der die Größe dieses Hintergrundbilds hat , da dieses Hintergrundbild derzeit das automatische Layout ignoriert Also brauchen wir einen Rahmen, der das automatische Layout nicht ignoriert, also erstelle ich einen Rahmen und drücke A, dann ist diese Höhe 577, dann wird er so gefüllt Dann werde ich diesen Rahmen in einen neu erstellten Rahmen wie diesen Jetzt ist es in der Mitte. Jetzt kann ich das in CTA ATN umbenennen, so wie hier. Dann wähle ich diesen einen Satz aus, der so mittig nach links ausgerichtet Ein hier, elektrischer Container Okay. Okay. Jetzt ist es fabelhaft zentriert. Wir haben erfolgreich den dritten Heldenabschnitt zwei erstellt. Sehen wir uns den Vorschaumodus an. In zukünftigen Lektionen werden wir das automatische Layout verwenden , um komplexere Websites zu entwerfen. Wir haben nur drei Designs erstellt. Wenn du denkst, dass Autoayout so kompliziert ist, suche einfach nach einem beliebten Design bei Google und versuche, dieses Design auf Figma mithilfe von atoyout nachzuahmen und zu erstellen Auf diese Weise erfahren Sie mehr über Autoayout und wie Sie Autoayout effektiv einsetzen Wir sehen uns in der nächsten Lektion. 22. Einführung in das UI/UX-Designprinzip: Hallo zusammen. Bisher lernen wir die Grundlagen von Figma kennen und beginnen, uns mit dem Tool vertraut zu machen und einige Designs mit Figma-Funktionen zu erstellen Konzentrieren wir uns nun auf die YX-Designprinzipien. Wenn wir eine benutzerdefinierte Website erstellen, müssen wir eine Vorstellung von den UIUX-Prinzipien haben , denn wenn wir die UIUX-Prinzipien und das Konzept nicht auf unser Design anwenden UIUX-Prinzipien und das Konzept nicht auf , wird der Zweck des Designs oder der Zweck Zweck des Designs oder der Zweck der Website nicht erreicht In den nächsten Lektionen werden wir etwas über visuelle Hierarchie, Layout, Typografie und Farbtheorie lernen und müssen die UX-Prinzipien kennen, um benutzerdefinierte Websites zu entwerfen Wir sehen uns in der nächsten Lektion. 23. Visuelle Hierarchie: Hallo zusammen. Stellen Sie sich vor, Sie gehen in ein neues Zimmer. Sie müssen wissen, wo Sie zuerst suchen müssen und wie Sie sich zurechtfinden. Genau das macht die visuelle Hierarchie auf einer Website. Lassen Sie es uns also aufschlüsseln. Visuelle Hierarchie ist die Art und Weise, wie wir Dinge auf einer Website anordnen , um zu zeigen, was wichtiger ist. Manche Dinge müssen sofort ins Auge fallen , während andere später bemerkt werden können. Je besser die Hierarchie, desto einfacher ist es, das SI zu verwenden. unserem Design eine visuelle Hierarchie hinzufügen, müssen wir hauptsächlich drei Dinge berücksichtigen. Das erste ist die Größe, große Dinge erregen zuerst Aufmerksamkeit. Denken Sie an eine große Schlagzeile in einer Zeitung. Es sticht heraus. Das Gleiche gilt für Websites. Wichtige Überschriften oder Schaltflächen sollten größer sein als andere Dinge auf der Seite. Dann müssen wir Farbe und Kontrast berücksichtigen. Helle Farben fallen Ihnen ins Auge, dunkle oder matte Farben wenn Sie möchten, dass etwas wie ein Knopf hervorsticht, verwenden Sie eine Farbe, die auffällt Ein roter Knopf auf weißem Hintergrund wird zum Beispiel schnell auffallen Dann sollten wir über Abstand und Platzierung nachdenken. Wir müssen wichtigen Dingen Raum geben. Wenn wir mehr Platz um das Element herum hinzufügen, hebt es sich besser ab. Wenn die Dinge zu nahe beieinander liegen, kann es schwierig sein, sich zu konzentrieren. Die visuelle Hierarchie führt Ihren Benutzer durch Ihre Website. Indem Sie Größe, Farbe und Abstand anpassen, können Sie ihnen zeigen, was wichtig ist , ohne dass sie es merken. 24. Typografie lernen: Hallo zusammen. Typografie ist einfach die Art und Weise, wie wir eine Schriftart auf einer Website , damit sie gut und leicht lesbar aussieht Es spielt eine große Rolle bei der Schaffung einer großartigen Benutzererfahrung. Hier sind einige schnelle Dinge, die Sie über Typografie wissen müssen Schrift. Dies bezieht sich auf das Design der Schrift wie bei Area Times Nur Rome oder Roboto Eine Schrift ist eine Sammlung von Zeichen, Buchstaben, Zahlen und Symbolen, die dieselbe Schriftart und denselben E-Stil haben Dann haben wir die Schriftbreite. Dies bezieht sich auf die Dicke der Schrift, z. B. normale alte Schrift oder. Dann haben wir Fonttyle. Dazu gehören Variationen wie Kursiv, Oblique oder Condensed. Wählen Sie bei der Auswahl einer Schrift für Ihre Website immer zuerst die Lesbarkeit dieser Dinge aus Wählen Sie eine Schrift, die auf Bildschirmen leicht lesbar ist. Vermeiden Sie überlagernde dekorative oder komplexe Schriften. Konsistenz Halten Sie sich an eine begrenzte Anzahl von Schriftarten auf Ihrer gesamten Website, um einen einheitlichen Stil zu gewährleisten. Ich empfehle, nur zwei Arten von Schriftarten zu verwenden, eine für die Überschrift und eine für Absätze Dann sollten Sie über die Markenidentität nachdenken. Ihre Schrift sollte die Persönlichkeit und die Werte Ihrer Marke wiedergeben Persönlichkeit und die Werte Ihrer Marke Dann müssen wir über den Kontext nachdenken. Das bedeutet, dass der Inhalt und der Zweck Ihrer Website den geeigneten Typ beeinflussen Hier sind einige Tipps für eine gute Typografie Verwenden Sie unterschiedliche Schriftgrößen mit einem Stil, um eine klare visuelle Hierarchie zu erstellen, richtigen Abstand zwischen Buchstaben und Wörtern, um eine optimale Lesbarkeit zu gewährleisten Buchstaben und Wörtern, um eine optimale Lesbarkeit einen Kontrast zwischen Text und Hintergrund, um die Lesbarkeit zu verbessern Halten Sie die Textzeilen auf einer angemessenen Länge, um eine Überanstrengung der Augen zu vermeiden Wählen Sie dann Textfarben, die leicht zu lesen sind und den Hintergrund ergänzen. Typografie ist ein Schlüssel, damit Ihre Website leicht lesbar und visuell erscheint 25. Mehr über Schriftarten erfahren: Wenn es um Schriften geht, werden Sie oft von Serif und Cancerif hören Serifenschriften haben einen kleinen Strich am Ende ihrer Buchstaben. Denken Sie an Zeitneuronen oder Georgia. Sie eignen sich hervorragend, um ein traditionelles und formelles Gefühl zu erzeugen , und werden oft für lange Textpassagen wie in Büchern oder Blogs verwendet . Auf der anderen Seite hat Sanserifont diese zusätzlichen E-Troke-Antennen nicht. Helvatica und Robot sind diese zusätzlichen E-Troke-Antennen nicht. Helvatica und Robot Beispiele dafür. Diese Telefone sind mutig, modern und Sie funktionieren auch gut auf Mobilgeräten, da sie klar und leicht lesbar sind. Mal sehen, welche Art von Marke und welche Art von Design diese Sans- und Sanserif-Telefone verwenden werden. Denken Sie also immer an die Ablesbarkeit des Geschmacks. Hier. Hier. 26. Schriftarten mit Google-Schriftarten finden: Hallo zusammen. Jetzt wissen wir über Typografie Lassen Sie uns herausfinden, wo und wie Sie Typografie für Ihre Projekte finden Der beste Ort ist Google Phones. Sie können auf Google-Telefone zugreifen, indem Sie zu phons.google.com gehen und auf diese Seite gelangen Hier haben wir viele Schriftarten zur Auswahl. Wir können also einfach so nach unten scrollen und die besten Schriftarten finden , oder wir können diese Filter verwenden , um die Schriftarten herauszufiltern. Lass uns Schriften für Überschriften finden. Hier werde ich die Überschriftengröße auf 60 einstellen. Lass uns 60 testen. Hier können wir die tatsächliche Überschrift eingeben. Ich werde etwas wie Ihren Leitfaden für einen ausgewogenen, gesünderen Lebensstil hinzufügen , und dann werde ich diese Sprache überspringen. Hier haben wir die Typen Serif und Sensori, also werde ich nur sensorisch auswählen Jetzt haben wir die gefilterten Schriften, jetzt können wir sie durchsehen und die beste Schrift finden Hier haben wir die letztere Schrift, also werde ich sie anklicken und dann können wir mehr über diese Schrift herausfinden. Wenn wir diese Schrift also zu Absätzen hinzufügen, wird sie so aussehen, und unser Plan ist es, sie zur Kopfzeile hinzuzufügen. Also werde ich jetzt auf diese G-Schrifttaste klicken und sie wird zu diesem ausgewählten Schriftbereich hinzugefügt, und ich gehe wieder zu den Schriftarten. Jetzt muss ich eine Schrift für Absätze finden. Um das zu tun, werde ich diese Art von Absatz hier hinzufügen. Dann ändern wir die Größe auf etwa 20 und wählen das sensorische Telefon aus. Hier können wir die Schriftarten überprüfen , die für unser Projekt geeignet sind. Die Suche nach dieser Schriftart hängt immer davon ab welche Art von Website Sie entwerfen. In diesem Fall. Das ist eine Website für Fitnesstrainer, also wähle ich diesen Arbeitssinn aus und hier können wir die Details überprüfen. Wenn wir das hinzufügen, wird es so aussehen. Jetzt können wir auf dieses Gate-Telefon klicken. Nachdem ich hier geklickt habe, kann ich die Schriftarten finden , die ich ausgewählt habe. In Figma haben wir eine Google-Schriftbibliothek. Ich öffne unsere Figma-Datei und hier wählen wir einfach diese aus und ich klicke auf diese Schriftart und hier haben wir die Hier können wir Google-Schriftarten auswählen und jetzt können wir die Google-Schriftarten abrufen Wenn wir diese RL-Schriftarten auswählen, können wir E-Schriftarten finden. Dies ist der einfache Weg, Schriften für unsere Projekte zu finden. Ich gehe zu den Schriftarten und wenn Sie die SEI-Schriftarten überprüfen möchten, können wir hier klicken und wir werden die SE-Schriftart haben , die wir auf unserer Website verwenden können. In einigen Lektionen werden wir diese Google-Schrift-Website verwenden , um Schriftarten für unser Projekt auszuwählen. 27. Farbpsychologie verwenden: Farben spielen eine entscheidende Rolle im Webdesign und beeinflussen, wie Nutzer Ihre Website wahrnehmen und mit ihr interagieren. Was ist Farbpsychologie? Farbpsychologie untersucht, wie Farben unsere Emotionen, Modi und Verhaltensweisen beeinflussen. Verschiedene Farben rufen unterschiedliche Gefühle und Assoziationen Zum Beispiel wird Rot oft mit Energie, Mode und Begeisterung in Verbindung gebracht , während Blau für Vertrauen und Zuverlässigkeit steht Vertrauen und Zuverlässigkeit Aus diesem Grund verwenden Marken wie Coca Cola Rot und Marken wie Linked In und die meisten vertrauenswürdigen Banken Blau als Hauptfarben Ein Verständnis der Farbpsychologie kann Ihnen dabei helfen, Websites zu erstellen, die bei Ihrer Zielgruppe Anklang finden und die gewünschten Emotionen hervorrufen Hier sind einige Tipps. Wählen Sie Farben, die zur Persönlichkeit Ihrer Marke passen, und welche Emotionen möchten Sie bei Ihren Nutzern hervorrufen? Stellen Sie sicher, dass Ihr Text und Ihre Grafiken leicht lesbar und visuell ansprechend sind Experimentieren Sie mit verschiedenen Farbschemata , um herauszufinden, was am besten funktioniert. Farbtheorie und Farbpsychologie sind wesentliche Aspekte des Webdesigns. verstehen, wie Farben unsere Emotionen und Verhaltensweisen beeinflussen, können Sie eine Website erstellen, die nicht nur visuell ansprechend, sondern auch emotional fasziniert. Schauen Sie sich diesen Leitfaden zu Farbemotionen an. In diesem Leitfaden werden Sie viele beliebte Marken und ihre Markenfarben sehen . Außerdem werden Sie Details zu Emotionen, Stimmungen und Verhaltensweisen dieser Farben sehen. Laden Sie dieses Bild im Bereich Ressourcen herunter und studieren Sie es, wenn Sie eine Website erstellen , die keine Markenfarbe oder wenn Sie versuchen, ihre Marke neu zu gestalten Verwenden Sie diesen Leitfaden für emotionale und lassen Sie sich Farben einfallen, die Farben und lassen Sie sich Farben einfallen, die zu ihrer Marke passen . Wir sehen uns in der nächsten Lektion 28. Was sind 60-30-10-Regeln: In der Innenarchitektur haben wir ein Konzept namens 603010-Regel. Wir können diese 603010-Regel für unsere benutzerdefinierte Website anwenden. Diese Regel trägt dazu bei, dass Ihre Website ausgewogen und attraktiv aussieht Was ist die 603010-Regel? Die 603010-Regel unterteilt die Farben in Ihrem Design und sorgt so für Harmonie. So funktioniert es. 60% ist deine dominante Farbe. Es sollte den größten Teil Ihrer Website abdecken und die allgemeine Stimmung bestimmen. 30% ist deine Sekundärfarbe. Es unterstützt die dominante Farbe und verleiht zusätzliche Tiefe 10% ist Ihre Akzentfarbe. Verwenden Sie diese Schaltfläche für Hervorhebungen eine wichtige Funktion , um Aufmerksamkeit zu erregen. Lassen Sie uns herausfinden, wie man das benutzt. zunächst Ihre Farbpaletten aus, wählen Sie eine dominante Farbe für Ihre Marke, eine Sekundärfarbe, die gut dazu passt , und eine Akzentfarbe, die hervorsticht, verwenden Sie dann die dominante Farbe für den Hintergrund und den Hauptbereich Die Sekundärfarbe eignet sich gut für Seitenleisten und Überschriften. Reservieren Sie die Akzentfarbe für Schaltflächen und. diese Farbkombination, Halten Sie sich an diese Farbkombination, damit Ihre Website sauber und übersichtlich aussieht und vermeiden Sie ein chaotisches Erscheinungsbild Nachdem Sie die 603010-Regel angewendet haben, holen Sie sich Feedback von echten Benutzern und finden Sie heraus, wie sie von der Farbe und dem Design denken Nehmen Sie dann nach Bedarf Änderungen vor. Denken Sie auch daran, dass dies eine Regel ist, was bedeutet, dass wir Regeln brechen können. Wenn Sie der Meinung sind, dass die 603010-Regel für einige Bereiche Ihrer Website nicht geeignet ist, können Sie sie ändern Sehen wir uns ein Beispiel an, das diese 603010-Regel effektiv verwendet Sie sehen, die 603010-Regel ist ein großartiger Leitfaden für die Gestaltung eines Wenn Sie sie verwenden, fühlt sich Ihre Website ausgewogen und ansprechend an. 29. Was ist nutzerzentriertes Design: Hallo, alle zusammen. Lassen Sie uns über ein sehr wichtiges Konzept im Webdesign, benutzerzentriertes Design, sprechen und warum es für Websites von entscheidender Bedeutung ist. Benutzerzentriertes Design bedeutet , Websites zu erstellen, die sich auf die Bedürfnisse und Wünsche der Benutzer konzentrieren die Bedürfnisse und Wünsche der Benutzer anstatt nach dem zu entwerfen, was Ihrer Meinung nach gut aussieht. Sie entwerfen so, dass die Dinge für die Besucher der Website einfach und nützlich sind. Stellen wir uns das wie den Bau eines Ladens vor. Sie würden alles so arrangieren , dass Kunden leicht finden, wonach sie suchen. Wenn Dinge schwer zu finden und verwirrend sind, verlassen die Leute den Laden, ohne etwas zu kaufen. Die gleiche Idee gilt für Websites. Eine Website sollte ein Problem lösen oder ein Bedürfnis des Benutzers erfüllen. Wenn dies nicht der Fall ist, werden die Besucher schnell gehen. Hier sind einige Gründe, warum es so wichtig ist, sich auf den Benutzer zu konzentrieren. Wenn Sie die Navigation auf der Website vereinfachen, können Nutzer schnell finden, wonach sie suchen. Das bedeutet, dass mehr Leute auf Ihrer Website bleiben. Wenn Benutzer das Gefühl haben, dass die Website für sie gemacht ist , ist es wahrscheinlicher, dass sie länger bleiben und mehr erkunden. Wenn der Nutzer leicht das finden kann was er braucht, z. B. Produkte oder Informationen, es wahrscheinlicher, dass er Maßnahmen ergreift, ob es nun darum geht, etwas zu binden, sich anzumelden oder Sie zu kontaktieren. Sehen wir uns ein Beispiel an. Nehmen wir an, Sie entwerfen eine Website für ein lokales Lebensmittelgeschäft. Wenn die meisten Kunden kommen, um Reis, Gemüse und Epe zu kaufen , sollten Sie sicherstellen, dass diese auf der Startseite leicht zu finden sind Sie werden auch die übersichtliche Suchleiste hinzufügen und vielleicht sogar verwandte Produkte vorschlagen, um das Einkaufen zu vereinfachen Sehen wir uns ein anderes Beispiel an. Wenn Eltern eine Website nutzen, um sich über Schulnachrichten oder Prüfungsergebnisse zu informieren, sollten diese Links direkt auf der Startseite leicht zu finden sein und mit klaren Bezeichnungen versehen sein. Hier sind einige einfache Tipps, um sicherzustellen, dass Ihre Website den Nutzer in den Mittelpunkt stellt. Fragen Sie sich vor dem Entwerfen , wer die Website besucht. Was wollen sie tun? Erfahren Sie, wann Ihr Publikum entscheidend ist. So können Sie einige Nachforschungen über Ihre Konkurrenten anstellen und herausfinden, welche Art von Design und Taktik sie auf ihrer Website verwenden. Dann sollten sich Benutzer niemals verloren fühlen. Verwenden Sie klare Menübeschriftungen und Schaltflächen , mit denen sie sich leicht auf der Website bewegen können. Außerdem verwenden viele Benutzer auf der ganzen Welt ihr Telefon Stellen Sie sicher, dass Ihre Website auch auf Mobilgeräten gut funktioniert. Nicht nur das, verlassen Sie sich nicht nur auf Ihre eigene Meinung. Zeigen Sie die Website echten Benutzern und sehen Sie, wie sie damit interagieren. Ihr Feedback wird Ihnen helfen, das Design zu verbessern. Im Mittelpunkt einer erfolgreichen Website steht der Nutzer. Indem Sie sich auf das konzentrieren, was sie benötigen und sicherstellen, dass die Website einfach zu bedienen ist, erstellen Sie eine effektivere Website , auf die Besucher immer wieder zurückkehren. Denken Sie daran, dass es beim Design nicht nur darum geht, wie eine Website aussieht, sondern auch darum, wie sie für die Nutzer funktioniert. 30. Was ist KISS-Prinzip: Hallo, alle zusammen. Lass uns über das Kuss-Prinzip sprechen. Kiss steht für Keep it simple, stupid. Wenn wir Websites entwerfen, müssen wir sicherstellen, dass der Benutzer schnell und ohne Verwirrung findet , wonach er sucht. Wenn eine Website zu kompliziert ist, kann es sein, dass Besucher frustriert sind und sie verlassen Folgen Sie also dem Kiss-Prinzip stellen Sie sicher, dass unsere Website schnell geladen wird, einfach zu navigieren ist und klare Inhalte hat Also, wie bewirbt man sich im Webdesign. Lassen Sie uns das in ein paar Schritte unterteilen. Vereinfachen Sie zunächst das Layout. Überladen Sie Ihre Seiten nicht mit zu vielen Elementen. Ein sauberes, einfaches Layout erleichtert es Benutzern, sich auf das Wesentliche zu konzentrieren Verwenden Sie eine klare Navigation. Halte dein Menü und deinen Link einfach und unkompliziert. Habe nicht zu viele Kategorien. Ich bleibe bei den Grundlagen, damit sich die Benutzer nicht verirren. Verwenden Sie weniger Farben und Schriften. Ein einfaches Farbschema und ein bis zwei Schriften reichen für Profis in der Regel aus. Zu viele Farben oder Schriften können dazu führen, dass die Website unordentlich und schwer lesbar aussieht In den Lektionen zu Typografie und Farbpsychologie lernen wir die Vorteile von zwei Schriftarten und die 603010-Regel kennen, um die Harmonie der Farben auf unserer Website aufrechtzuerhalten Dann müssen Sie sich auf die wesentlichen Inhalte konzentrieren. Zeigen Sie zuerst das Wichtigste. einer Website für das Gesundheitswesen möchte der Patient beispielsweise wissen, ob er einen Termin vereinbaren oder einen Arzt aufsuchen soll . Sorgen Sie dafür, dass diese Informationen leicht auffindbar sind, und testen Sie sie dann mit echten Benutzern. Manchmal kann das, was wir für einfach halten , für andere immer noch verwirrend sein. Testen Sie Ihr Design immer mit echten Benutzern, um zu sehen, ob sie problemlos auf der Website navigieren und den Inhalt verstehen können. Denken Sie an die Startseite von Google. Google ist eine der einfachsten Websites, die es gibt. Nur ein Logo, eine Suchleiste und Schaltflächen. Dennoch ist es eine der effektivsten Websites, die jemals erstellt wurden. Warum? Weil es an das Kussprinzip gebunden ist. 31. Den Projektumfang kennenlernen: Hallo, alle zusammen. Lassen Sie uns über das Projekt ICO sprechen. Stellen Sie sich Project iCOV als eine Landkarte Ihrer Website-Reise vor. Es hilft Ihnen dabei, verloren zu gehen, Fehler zu machen oder zu lange zu dauern, bis Ihre Website fertig ist wichtig zu wissen, was benötigt wird , bevor Sie mit dem Entwerfen beginnen. Stellen Sie sich vor, Sie bauen ein Haus. Sie würden nicht anfangen, ohne zu wissen, wie viele Räume es braucht welches Material verwendet werden soll? Das Gleiche gilt für Webdesign. Project iCOPE hilft Ihnen dabei, die Bedürfnisse der Kunden zu verstehen Möchten sie eine einfache oder eine große Website, einen Zeitplan Wie lange hast du Zeit, um fertig zu werden? Dann das Budget, dann die wichtigsten Funktionen wie, wird es einen Blog, Online-Shop oder ein Buchungssystem geben? In der nächsten Lektion werden wir damit beginnen, unser Projekt ICO — unser erstes Web — zu definieren. Manchmal treten jedoch selbst beim Projekt Disco Herausforderungen auf. Wenn ein Kunde später mehr Lohn oder Funktionen wünscht, wird das nicht so laufen, wie du es dir vorstellst. Um solche Probleme zu vermeiden, müssen wir von Anfang an klare Erwartungen setzen. Teilen Sie ihnen den Zeit- und Kostenaufwand für das spätere Hinzufügen neuer Funktionen mit. Die Erstellung eines Vertrags ist der Weg, um diese Probleme zu lösen. 32. Was ist ein Mood-Board: Hallo, alle zusammen. Lassen Sie uns über Moodboards sprechen und darüber, warum sie so besonders sind, wenn es darum geht, Design und Inspiration zu finden und zu verstehen, was Wettbewerber tun. Was ist also ein Moodboard? Ein Moodboard ist wie eine digitale Collage, die den Stil und das Gefühl zeigt, das Sie sich Es ist eine großartige Möglichkeit, ein visuelles Brainstorming durchzuführen, visuelles Warum brauchen wir ein Moodboard? Bei Null anzufangen kann schwierig sein. Ein Moodboard hilft Ihnen dabei, Designinspirationen von anderen Websites und den Websites Ihrer Konkurrenten zu sammeln Designinspirationen von anderen Websites und den Websites Ihrer Konkurrenten zu Nicht nur das wie Banner, sondern auch Anzeigen, die sich auf Ihre Unternehmensmarke oder sogar auf ein anderes Design beziehen Ihre Unternehmensmarke oder und Ihre Kreativität anregen Es ist leicht, sich von neuen Trends ablenken zu lassen. Ein Moodboard hält Sie auf dem Laufenden, indem es Sie an Ihre ursprüngliche Vision erinnert. Sie sich vor dem Entwerfen an, was Ihre Konkurrenten Mit einem Moodboard können Sie ihr Design erstellen und vergleichen, sodass Sie etwas noch Besseres kreieren können. Lassen Sie uns also herausfinden, wie man ein Moodboard erstellt. Schauen Sie sich zunächst die Website in Ihrem Bereich an. Was magst du oder nicht? Dann hol dir Screenshots und speichere Bilder, die du inspirierst Wo finden Sie also Design-Inspiration? Erstellen Sie Moodboard. Sie können die Website Ihres Konkurrenten direkt überprüfen und nach Website-Designs auf Websites wie Dibble, Pinterest, Figma Community und BNS suchen auf Websites wie Dibble, Pinterest, Figma Community Kürze werden wir ein Moodboard und coole Designinspirationen für unsere erste Website erstellen ein Moodboard und coole Designinspirationen In Kürze werden wir ein Moodboard und coole Designinspirationen für unsere erste Website erstellen. 33. So erstellen Sie eine Farbpalette: Hallo, alle zusammen. Jetzt kennen wir Farbtheorie und Farbpsychologie. Lassen Sie uns unsere erste Farbpalette erstellen. Ich verwende diese coolers.co-Website , um die Farbpalette zu generieren Gehe zu dieser Website klicke dann auf Es ist der Generator, und ich werde diesen hier entfernen Gemäß der 603010-Regel benötigen wir nur drei Farben Ich werde zwei davon entfernen. Jetzt haben wir drei Farben. Nehmen wir unser Beispiel als Immobilien-Website. Jetzt bin ich auf dem Bild mit dem Color Emotion Guide, also werde ich diese Bild-URL im Ressourcenbereich hinzufügen. Hier für die Website von Real Estate wird das Hauptbild der Marke Vertrauen sein, wird das Hauptbild der Marke Vertrauen sein und wir können über die Klarheit nachdenken Gemäß diesem Farbbild können Sie eine der Farben als Blau und eine davon als diese orange Farbe auswählen der Farben als Blau und eine davon als diese orange Farbe Ich habe immer noch Zweifel, wir können zu Google gehen und so etwas wie realistisches Bannerdesign suchen so etwas wie realistisches Bannerdesign Dann gehe ich zu diesen Bildern auf den Bildern, wir können sehen, dass viele von ihnen die Farbe Blau haben und einige von ihnen einige Farben mit Dunkelblau und Orange Lassen Sie uns ein anderes Beispiel nehmen. Jetzt denke ich, dass wir Markenfarben oder Website-Farben für das Eiscreme-Geschäft brauchen . In diesem Fall können wir das Rot auswählen. Es ist aufregend und es wird perfekt sein. Da wir diese freundliche Farbe wählen können. Wenn wir hier hingehen und Firmenbanner für Eiscreme suchen haben wir hier ein paar Bilder und viele davon haben die Farbe Rot. Gehen wir nun zu unserem ersten Designbeispiel, das werden die Immobilien sein. Ich gehe zurück und wähle hier dieses Design aus, wähle hier dieses Design damit wir diese blaue Farbe dafür bekommen. Ich gehe zu coolers.co und füge es auf dieser Seite ein, dann klicke ich hier und ich setze auf diese Seite, dann minimiere das und jetzt haben wir unsere erste Farbe als Blau, um es auszuwählen, ich klicke hier und hier haben wir dieses Pipette-Werkzeug haben wir dieses Ich klicke einfach darauf und jetzt kann ich Das wird die blaue Farbe sein und hier müssen wir weiße Farben haben. Ich werde das als weiße Farbe einstellen. Dann klicke ich auf „Protokoll umschalten“, um diesen Eintrag zu protokollieren, sodass sich diese Farbe nicht ändert Dann werde ich auch diesen Eintrag protokollieren Dann müssen wir unsere dritte Farbe finden. Um unsere dritte Farbe zu finden, drücken wir die Umschalttaste auf der Tastatur Wir können diese Art von Änderungen an der Farbe sehen, aber in unserem Fall können wir die gelbe Farbe auswählen Wenn wir zu diesem Leitfaden für Farbemotionen gehen, können wir auch diese grüne Farbe auswählen, aber in diesem Fall wählen wir diese orange Farbe Hier wähle ich hier aus und wähle den Picker, wähle die orange Farbe Wenn ich will, kann ich die Farbe vorerst ändern, ich werde es so setzen Jetzt vergrößere ich dieses Fenster, hier wird unser Farbenbaum sein. Jetzt gibt es ein Problem. Wenn wir Farbe auswählen, müssen wir immer den Kontrast und die Lesbarkeit überprüfen den Kontrast und die Lesbarkeit Es gibt ein Tool, um diesen Kontrast zu überprüfen. Um das zu tun, gehe ich zu color.adob.com und dann kommst du Hier klicke ich auf Vs und dann haben wir dieses Barrierefreiheitstool mit Checkbox, also wähle ich es einfach aus und Hier können wir den Kontrast und die Lesbarkeit der Farben überprüfen den Kontrast und die Lesbarkeit der Farben Jetzt komme ich her und kopiere diesen Farbcode und lass ihn uns als Textfarbe Dann werde ich hier die Hintergrundfarbe auf Weiß B F ändern . Jetzt ist das Kontrastverhältnis in Ordnung, aber wenn wir diese Farbe verwenden, wird es ein Vatertest für 17 Fixel und Blofon sein Sie werden hier überprüfen, ob es fehlschlägt. Wenn wir ihn erhöhen, wird der Farbkontrast verbessert und der Test wird schneller. Jetzt müssen wir diese Farbe etwas dunkler ändern. Ich werde es so ausdrücken. Das. Der Grund dafür ist, dass wir, wenn diese Farben für unsere Website auswählen, wir diese Farben für unsere Website auswählen, dieser blauen Farbe einen Absatz hinzufügen müssen. Ich kopiere diesen Farbcode und komme hierher. Dann sehen sie, dass das Kontrastverhältnis in Ordnung ist und lassen Sie uns den Hintergrund ändern, damit er großartig aussieht. Überprüfe es auch als nächstes mit dieser orangen Farbe. Um das zu tun, setze ich diese Textfarbe auf diese und lass uns diese hinzufügen Lass uns diese Farbe als B-Farbe hinzufügen. Okay. Ich habe den Test auch bestanden, aber wenn das heller wird, wird es sein, es hat auch den Geschmack bestanden. Lassen Sie uns die Text - und Hintergrundfarbe ändern. Ich werde perfekt arbeiten und mal sehen, ob es mit der weißen Farbe funktioniert. Lass uns sehen. Wenn wir dies zur Textfarbe und zur Hintergrundfarbe als Weiß hinzufügen, bedeutet das, dass wir diese orange Farbe nur mit dunkelblauen Farben verwenden können. Wenn Sie die Farbpalette für Ihre Website auswählen , überprüfen Sie immer den Farbkontrast . Dies trägt dazu bei , die Lesbarkeit unserer Website zu verbessern Denken Sie auch daran, dass die Farben Schwarz und Weiß meistens die Farben Schwarz und Weiß zwei unserer Website-Farben sind, aber manchmal ist die schwarze Farbe etwas weniger dunkler den meisten Fällen werden diese beiden Farben jedoch die Farben sein, die wir als Hintergrund - und Testfarben verwenden. Dann müssen wir unsere Primärfarbe finden und können diese Primärfarbe entsprechend der Farbemotion auswählen . In diesem Fall wählen wir sie als Blau aus. 34. Benutzerdefinierte Webdesign-Schritte verstehen: Hallo, alle zusammen. Ich erstelle gerade einen Schritt zur Fertigstellung eines Webdesign-Projekts. Dies ist der wesentliche Schritt , den wir verwenden werden, um eine erfolgreiche Website für unsere Kunden zu erstellen Du kannst diese Liste verwenden und der ITF folgen , wenn du eine Website für echte Kunden entwirfst . Wir können diesen Schritt auch verwenden , um diesen Kurs abzuschließen Zuerst haben wir das Kundengespräch. Es dient dazu, die Ziele, Bedürfnisse und Erwartungen des Kunden zu verstehen . Dann erstellen Sie einen Vertrag. Darin werden Leistungen, Zeitpläne und Zahlungsbedingungen definiert Zeitpläne und Dann stimmt der Kunde dem Vertrag zu, wir beginnen Im ersten Schritt werden wir ein Moodboard erstellen und Designinspirationen und das Design der Wettbewerber sammeln Designinspirationen und das Design Auf diese Weise können wir überprüfen, wie unsere Konkurrenten ihre Website nutzen , um ihr Problem zu lösen und ihren Kunden zu helfen Das Erstellen von Moodboards ist wirklich wichtig, um Inspiration zu bekommen Wir kopieren also nicht nur Webdesigns, wir werden auch das Aussehen dieses Webdesigns überprüfen und eine bessere Version erstellen und eine einzigartige Website erstellen Dann müssen wir eine Sitemap erstellen. Die Sitemap dient dazu, zu verstehen, welche Art von Seiten unsere Website hat, und Struktur der Website zu verstehen und zu planen. Dann müssen wir Schriftarten für unsere Website auswählen. Bei der Auswahl von Schriften haben wir uns für eine Typografie entschieden, die zur Marke passt , und diese Schriften sollten lesbar und leicht zu verstehen sein lesbar und leicht zu verstehen Dann müssen wir Farben auswählen. Also müssen wir eine Farbpalette erstellen , die der Markenidentität entspricht. Also hast du dich an die 603010-Regel erinnert? Wir werden die 603010-Regel verwenden, um die Farbpalette zu erstellen. Dann müssen wir die Benutzeroberfläche erstellen. Es geht darum, die Benutzeroberfläche mit den Schaltflächen, dem Symbol und dem Layout zu gestalten . Also verwenden wir Figma, um diese Benutzeroberflächen zu entwerfen und indem wir ja erstellen, bevor wir die Website entwerfen, wird uns das helfen, ein klares Verständnis für die Website zu vermitteln , ein klares Verständnis für die Website unseren Kunden zu suchen Dann können wir ihre Rückmeldungen einholen und die notwendigen Änderungen vornehmen Dann haben wir Inhalte generiert. Es geht darum, Texte, Bilder und Medien für die Website zu schreiben und zu sammeln . Bei einem Kundengespräch können wir den Kunden um Inhalte bitten und ihm mitteilen, dass wir KI verwenden, um Inhalte zu generieren. Während wir also den Bereich der Website gestalten, können wir Inhalte generieren. Dann müssen wir eine Plattform wählen. In diesem Fall wählen wir also WordPress als unsere Plattform aus. Es geht darum, WordPress zu installieren und die erforderlichen Plugins zu installieren. Anschließend müssen wir die Website entwerfen. Es geht darum, die Website entsprechend dem UI-Design zu erstellen und zu installieren . Dann werden wir das Analysetool einrichten . Es geht darum, Tools wie Google Analytics, Google Recapture und Google Search Console zu installieren , um die Tracking-Leistung zu überprüfen Dann müssen wir Formulare einrichten, das heißt, wenn wir ein Kontaktformular, ein Anmeldeformular, ein Formular erstellen , müssen wir sicherstellen, dass es perfekt funktioniert Dann müssen wir die Sicherheit verbessern. Sicherheit verbessern bedeutet, das SSL-Zertifikat zu konfigurieren, Sicherheits-Plugins und Backup-Plugins zu installieren. Dann müssen wir die Geschwindigkeit der Website verbessern. Wir werden dafür Plugins verwenden. Danach können wir die Website laden und wenn Sie dann den Support anbieten , ist dies der letzte Schritt , den wir unternehmen müssen. Dies ist der ETF und die meisten dieser ETFs. Es ist besser, über die Aktualisierungen zu informieren Es ist immer besser, unsere Kunden über die Dinge zu informieren , die wir getan haben Zum Beispiel, wenn wir ein Moodboard erstellen und es mit unserem Kunden teilen können und wir ihn die Möglichkeit geben können, Abschnitte auszuwählen oder seine Meinung zu den Designs mitzuteilen. Während der Gestaltung der Website können wir mit dem Kunden sprechen und auch bei der Auswahl der Bilder einen Feed erhalten auch bei der Auswahl der Bilder einen Feed Wenn der Kunde diese Bilder nicht zur Verfügung stellt, können wir einige Bildlinks sammeln und sie mit dem Kunden teilen. Er wird das bessere Bild für die Website wählen. Ein gesundes Gespräch mit dem Kunden und das Einholen von Feedback von ihm helfen uns, unsere Websites zu vervollständigen , ohne dass viele Überarbeitungen erforderlich Lassen Sie uns mit dem Designprozess beginnen. 35. Einen Projektvorschlag und eine Anforderungs-Checkliste erstellen: Wenn Sie ein Webdesign-Projekt von einem Kunden erhalten, müssen Sie die Möglichkeit haben, klare Informationen über die Kundenanforderungen und eine kurze Vorstellung von der Website zu erhalten Kundenanforderungen und eine kurze Vorstellung , die Sie erstellen werden. Darüber hinaus sollten Sie klar definieren, was Sie Ihrem Kunden anbieten und wie viel es kosten wird und welchen Zeitrahmen das Projekt hat. Um diese beiden Aufgaben zu erfüllen, benötigen wir eine Fragebogenliste und einen Vertrag. Wenn Sie diese vollständige FEMA-Community-Datei mit benutzerdefinierten Webdesign-Ressourcen öffnen, wird der Abschnitt Project ICO In diesem Projekt Icope haben wir diese Tabelle, die als Webdesign-Anforderungen bezeichnet wird Wenn Sie Ihren Kunden per Videoanruf kontaktieren oder ihm einfach eine Textnachricht senden, können Sie diese Informationen anfordern und die Antwort der Kunden erhalten Auf diese Weise erhalten Sie alle Informationen, die Sie benötigen, um eine individuelle Website für Ihren Kunden zu entwerfen. Wenn Sie diese Checkliste für die Anforderungen an das Webdesign ausfüllen, verfügen Sie über alle Informationen, die Sie benötigen, um mit dem Projekt zu beginnen Auch diese Datei kann bearbeitet werden. Sie können diese Fragen Ihrem Kunden stellen oder Sie können diese Datei mit Ihrem Kunden teilen , indem Sie auf diese Schaltfläche zum Teilen klicken und dann die Option auswählen, die jeder bearbeiten kann Klicken Sie dann auf Speichern und dann auf Link kopieren Dann lassen Sie uns das in einem neuen Fenster öffnen . Jetzt kann der Kunde diese Datei bearbeiten , wenn er sich bei Figma anmeldet. Wenn Sie dies tun, können Sie auch eine neue Figma-Datei erstellen Gehen wir zu Figma und klicken wir auf Neue Design-Datei. Dann kannst du einfach hier klicken und Strg oder Befehl C drücken und es dann hier einfügen Auf diese Weise werden Sie das Projekt klar verstehen. Hier können Sie den Projektnamen wie Doktor John Cleaning wie folgt hinzufügen . Dann können Sie diese Datei mit Ihren Kunden teilen. Dann können Sie einfach hier klicken und diese Antwort bearbeiten , wenn er diese Fragen beantwortet. Nachdem Sie all diese Informationen erhalten haben, können Sie einen Projektvorschlag erstellen. Dies ist ein einfacher, aber effektiver Projektvorschlag , den Sie für Webdesign-Projekte verwenden können und dem Kunden ein klares Verständnis darüber vermitteln können, was Sie tun und wie viel es kosten wird und welche Art von Zahlungsmethode Sie akzeptieren, solche Dinge. Lesen Sie den Vorschlag und Sie müssen die Punkte in diesen Klammern entsprechend Ihrem Projekt ändern . Der einfachste Weg ist, die Befehlstaste oder die Strg-Taste F zu drücken . Suchen Sie dann nach dieser Klammer wie folgt. Dann können Sie die Stellen sehen , an denen sich Klammern befinden. die Zahlungsstruktur für die Projektdauer ändern den nächsten Lektionen können Sie nicht nur die Projektergebnisse und , oder Sie können all diese Informationen entsprechend Ihrem Projekt bearbeiten In den nächsten Lektionen können Sie nicht nur die Projektergebnisse und die Zahlungsstruktur für die Projektdauer ändern, oder Sie können all diese Informationen entsprechend Ihrem Projekt bearbeiten. Ich werde Ihnen auch zeigen, wie Sie sie für unser erstes Projekt bearbeiten Ich werde diesen schließen. Auch in dieser Checkliste für Webdesign-Anforderungen können Sie, wenn Sie weitere Spalten oder weitere Informationen hinzufügen müssen, einfach das Pro auswählen und Strg C oder Befehl C und Strg oder Befehl V drücken Befehl C und Strg oder Befehl , um es einzufügen Gehen Sie die Anforderungen an das Webdesign und den Projektvorschlag durch und den Projektvorschlag Auch wenn Sie der Meinung sind, dass diese Vorlagen für Webdesign-Anforderungen oder Projektvorschläge weitere Informationen oder Verbesserungen benötigen , können Sie mir einfach eine Direktnachricht senden oder sie empfehlen . Ich werde sie dann aktualisieren, falls es sich um eine notwendige Änderung 36. Projekt 01-Checkliste: Hallo zusammen. Dies ist unser Presseprojekt und wir werden alles, was wir hier lernen, anwenden alles, was wir hier lernen, und eine maßgeschneiderte Website von Grund auf neu entwerfen. Dieses Projekt ist fiktiv, was bedeutet, dass alle Details dieses Projekts nur zu Bildungszwecken dienen und die Inhalte, die wir für diese Website verwenden, fiktive Inhalte sind Als ersten Schritt müssen wir Informationen sammeln und diese Checkliste Anforderungen an das Webdesign ausfüllen Ich habe es schon gemacht und lass uns eins nach dem anderen durchgehen. Wenn Sie versuchen, diese Informationen bei echten Kunden für Ihr echtes Projekt zu sammeln , Sie immer deren Meinung einholen und verstehen, was sie benötigen. Dann gib dir Vorschläge. Das ist wirklich wichtig. Versuche nicht, Vorschläge zu machen oder dir Versionen davon zu geben. Hören Sie sich einfach ihre Anforderungen an und geben Sie dann Verbesserungsvorschläge. Auf diese Weise haben Sie eine hervorragende Kommunikation mit Ihrem Kunden und können die Informationen sammeln. Hier wird zunächst unsere Frage lauten, was ist der Name des Kunden? In diesem Fall lautet der Name des Kunden Doktor John Bennett und wie lautet Ihr Firmenname Der Firmenname ist JB Family Clinic, und wie lautet Ihre E-Mail-Adresse, JB Clinic Haben Sie eine Website? Falls ja, wie lautet die URL? Hier hat dieser Kunde keine bestehende Website, also habe ich ihn als NANA nicht verfügbar eingestellt Dann haben wir hier einen Abschnitt mit der Projektübersicht. Was ist der Zweck der Website? Der Zweck besteht darin, Gesundheitsinformationen bereitzustellen , Terminanfragen zu ermöglichen, Gesundheitsressourcen für Familien gemeinsam zu nutzen, Sichtbarkeit der Klinik zu erhöhen und Verbindungen zu den Gemeinden zu fördern. Dann haben wir, wer ist Ihre Zielgruppe? Die Zielgruppe sind einheimische Familien und Einzelpersonen, die zuverlässige Gesundheitsdienste suchen , und Eltern, die nach pädiatrischer Versorgung, psychischer Gesundheit und familiärem Wohlbefinden Dann haben wir, was das Hauptziel der Website ist. Die Hauptziele sind die Verbesserung der Online-Präsenz der Kunden, um neue Patienten zu gewinnen, verfügbaren Dienstleistungen und Spezialgebiete der Familien klar zu kommunizieren und Spezialgebiete der Familien dann Informationsmaterialien zu Themen der Familiengesundheit bereitzustellen . Dann fragen wir. Gibt es Websites, deren Aussehen Ihnen gefällt , und hier haben wir eine Website, auf der URR Ihren Kunden immer nach einer Website fragt, die seiner Idee ähnelt Dies ist der beste Weg, um ihre Anforderungen zu verstehen. Dann können Sie fragen, welchen Designstil Sie bevorzugen. Vielleicht versteht der Kunde diese Frage, sodass Sie diese Fragen überspringen können . Wenn er sich mit Websites auskennt, wird er sagen, welche Art von Website er möchte. In diesem Fall sollten Sie Websites sauber und modern gestalten und haben Sie dann Markenfarben oder Richtlinien? In diesem Fall wird es nicht verfügbar sein. In den meisten Fällen erstellen Sie jedoch Websites für bestehende Marken, was bedeutet, dass Sie die Farbrichtlinien befolgen und deren eigene Logos verwenden müssen. In einigen Fällen werden sie ihr Unternehmen umbenennen. In diesem Fall geben sie Ihnen keine Markenfarben oder andere Richtlinien Hast du dann ein Logo? Es ist nicht hier drin, wir haben Inhalte und Funktionen. Wir haben Fragen wie viele Seiten benötigt Ihre Website? In diesem Fall müssen Sie Ihre Nachforschungen anstellen, bevor Sie den Kunden kontaktieren. Schauen Sie sich einfach ähnliche Websites und machen Sie sich ein Bild von der Website. Dann finde heraus, welche Art von Seiten sie haben und was die wichtigsten Seiten sind und ähnliches. Aber wenn Sie keine Ideen haben, fragen Sie sie einfach nach ähnlichen Websites, die ihnen gefallen. Auf diese Weise können Sie sich ein Bild machen. Wenn sie in diesem Fall jedoch keine ähnlichen Websites oder Beispielwebsites haben , können Sie selbst recherchieren und Websites finden, die sich auf diese Nische beziehen , und herausfinden, was sie am wichtigsten machen Wir werden diese Websites nicht nachahmen Wir werden diese Designinspirationen sammeln und eine einzigartige Website erstellen Jetzt haben wir die Namen der Seiten. In diesem Fall haben wir den Home About Contact Blog unserer Anbieter. Dann kannst du fragen, ob du Earl-Inhalte zur Verfügung stellen wirst. In diesem Fall zeige ich Ihnen, wie Sie Inhalte mit KI erstellen. Jetzt werden KI-Tools wie AGPT Google Bad eine große Rolle spielen und uns helfen, großartige Inhalte für Websites zu erstellen Wenn Kunden also keine Inhalte bereitstellen, können wir Inhalte für die Website generieren In zukünftigen Lektionen werde ich Ihnen zeigen, wie Sie professionell und am besten mit KI chatten und die gewünschten Details generieren können. Okay. Dann haben wir: Benötigen Sie spezielle Funktionen, wenn sie E-Commerce-Funktionen wie Online-Ito benötigen E-Commerce-Funktionen wie Online-Ito oder wenn sie den Chat-Bot hinzufügen möchten, können Sie sich anhand dieser Fragen Klarheit verschaffen. Wenn sie jedoch einige Funktionen wünschen, denen Sie nicht wissen, von denen Sie nicht wissen, wie man sie erstellt, sagen Sie ihnen, ich werde darüber recherchieren und mich bei Ihnen melden. Dann kannst du als Beispiel über die Funktionen recherchieren , wenn sie ein Chat-Board wollen und du kannst darüber recherchieren und , dass du es tun kannst, oder wenn es mehr kostet, kannst du ihnen sagen, dass es kosten wird. Und so geht man mit dieser Art von Frage um. Und wir haben ein Verhör, brauchst du irgendwelche In diesem Fall benötigen Sie Terminanfragen und Kontaktformulare. Wir werden in diesem Projekt Formulare erstellen, und dann haben wir technische Details. Ich sage, haben Sie eine bevorzugte Plattform? In diesem Fall wird es drücken, aber wenn der Kunde mit einer anderen Plattform wie Webflow, PFI Weeks Studio oder einfach nur HTML vertraut anderen Plattform wie Webflow, PFI Weeks Studio oder einfach nur Sie können mit ihnen sprechen, und wenn Sie diese anderen Plattformen nicht kennen, können Sie ihnen Vorschläge machen, warum sie sich für Wordpress entscheiden sollten . Wenn sie nicht damit einverstanden sind, können Sie das Projekt trotzdem und lernen, während Sie die Website erstellen Dann haben wir Fragen wie, haben Sie einen Domainnamen und ein Hosting? In diesem Fall ist es das, aber manchmal wissen Kunden einfach nichts über Domainnamen und Hosting oder einige Kunden denken, dass wir auch Domainnamen und Hostings anbieten werden Sie müssen klar definieren, dass Sie diese Dinge nicht bereitstellen und dass sie sie bereitstellen müssen Wenn Sie jedoch Ihren eigenen Hosting-Server und Ihre eigene Domain als Abonnement anbieten , können Sie sie darüber informieren und im Vertrag können Sie dies deutlich angeben, damit sie verstehen, wie viel es kosten wird , und wenn sie damit einverstanden sind, können Sie Ihr eigenes Hosting bereitstellen. Wenn ich eine Website für meine Kunden erstelle, werde ich persönlich den Domainnamen und das Hosting fragen, um die Website zu erstellen. Dann haben wir die Projektfrist. Sie können einfach fragen, wann die Website gestartet werden soll. Die meisten Kunden werden innerhalb einer Woche, innerhalb von drei Tagen, innerhalb von zwei Wochen sagen , aber wir werden nicht in der Lage sein, innerhalb von drei Tagen eine benutzerdefinierte Website zu erstellen , da wir die qualitativ hochwertige Website bereitstellen werden , die ihnen hilft, ihre Marke online zum Leuchten zu bringen. Sie erklären ihnen den Zeitrahmen und geben mindestens drei bis vier Wochen als Projektabschluss an mindestens drei bis vier Wochen als und versuchen , dies innerhalb von zwei Wochen zu tun. Auf diese Weise werden Sie einen zufriedenen Kunden haben und dieser wird Ihnen bei seinen nächsten Website-Designs Ihren Service anvertrauen . Dann haben wir ein Budget, Sie können einfach Ihr Budget für dieses Projekt festlegen. Wenn Sie also mit einem einzelnen Kunden und nicht mit einem Unternehmen zusammenarbeiten, werden diese meistens als erste Frage stellen, als erste Frage stellen wie viel es kosten wird. Sie erhalten lediglich Informationen darüber, welche Art von Website, wie viele Seiten sie benötigen und welche Funktionen sie haben möchten. Und wenn Sie dann eine fünfseitige Website für 1.000$ erstellen, sagen Sie ihnen, dass Sie 1.200 benötigen, und dann werden sie versuchen, mit Ihnen zu verhandeln und wenn sie es für tausend aushandeln, können Sie das innerhalb Ihres Budgets tun In diesem Fall nur um 7:50 Uhr als fiktive Zahl. Aber wenn Sie eine Marke haben und Kunden zu Ihnen kommen, indem sie sich Ihr Video ansehen oder Ihre Inhalte überprüfen, können Sie von diesem Kunden mehr verlangen Okay. Jetzt haben wir die Details und in der nächsten Lektion werden wir einen Vertrag für diese Checkliste erstellen 37. KI für Webdesign verwenden: Hallo, alle zusammen. KI spielt eine große Rolle bei Webdesigns und anderen internetbezogenen Bereichen. Zu wissen, wie man KI einsetzt, ist also ein großer Pluspunkt und hilft uns, innerhalb weniger Minuten das beste Ergebnis zu erzielen. Vor KDG PD und Google Bart, das jetzt JaMinir heißt, nutzten wir Websites wie Lam ISM Text, um unserer Website Inhalte hinzuzufügen , die wir für den Kunden entwerfen , weil Kunden oft keine Inhalte für uns bereitstellen, sodass wir Dummy-Text hinzufügen müssen Aber nach 22 22 können wir KI-Tools wie HAG PT und Jamin verwenden , um Inhalte für das Projekt unserer Kunden zu generieren Nicht nur das, dieses Tool wird uns helfen, unseren Arbeitsaufwand zu reduzieren und Informationen zu erhalten , die wir nicht haben und nicht kennen Als Beispiel habe ich vor Kurzem ein Webdesign-Projekt von Aviation Company bekommen . Ich wusste nichts über Luftfahrtunternehmen und die Dinge , die ich der Website hinzufügen muss. Ich verwende einfach JAG PT, um den Inhalt der Website zu generieren, und Cran war sehr glücklich darüber und er hat nur ein paar Dinge entsprechend seiner Version geändert Lassen Sie uns etwas über JAG PT lernen, um das zu generieren, was wir wollen. Ich gehe einfach zu HGBT und hier können wir das Formular eingeben. Fügen Sie einfach Prompt Life hinzu, um Heroon-Inhalte für die Website im Gesundheitswesen zu generieren , damit wir keine bessere Leistung erzielen Also lass uns das versuchen. Okay, hier sind die DTs. Aber wenn wir die richtigen Details hinzufügen und das DDS hinzufügen, das wir bereits kennen, wird das Ergebnis besser sein Also lass uns einen neuen Chat ausprobieren und versuchen, ihn mit dem Abschlussball zu generieren Ich verwende also Vorversionen dieser Tools, und Vorversionen werden für unseren Job ausreichen. Also hier ist die einfache Eingabeaufforderung, die ich immer verwende. Also zuerst müssen wir diesem GPT eine Rolle zuweisen. Dann sollten wir sagen, was wir generieren wollen, und dann haben wir drei Möglichkeiten Wenn wir also diese Informationen hinzufügen, müssen wir alles hinzufügen, was wir wissen , und wir müssen alles hinzufügen, was wir wissen, um bessere Ergebnisse zu erzielen. Also lass es uns versuchen. Zunächst möchte ich sagen, dass Sie ein Webdesigner sind. Dann entwerfen Sie eine Website für die HealthCare-Klinik namens Clinical JB Family Clinic, und dann müssen wir die Aufgabe zuweisen Ich möchte, dass du Helden-Sektions-Takes mit gutem CTA erstellst . CTA ist ein Aufruf Und habt ihr daran gedacht, dass wir Helden-Sektionen auf FICMA Autoayout und Pigma erstellen FICMA Autoayout und Pigma also müssen wir dann sagen , was darin enthalten sein soll Konzentrieren Sie sich wie diese Website darauf, das Online-Personal der Klinik zu verbessern, um neue Versionen anzuziehen anzuziehen Wenn es also mehr Informationen gibt, können wir sie in Zukunft hinzufügen. Ich werde sie vorerst hinzufügen. Dies werden die Eingabeaufforderungen sein, also drücken wir die Eingabetaste und sehen uns den Unterschied an Okay, ich glaube, wir haben drei Optionen. Konzentrieren wir uns hier nur auf die erste, Gesundheit, unsere vorrangige Betreuung von Familien, ein Besuch nach dem anderen und das ist die Überschrift und wir haben eine tolle Unterüberschrift in der JB Family Wir kümmern uns umfassend um Ihre ganze Familie und dann haben wir auf Knopfdruck einen Termin gebucht Gehen wir zum einfachen Abschlussball , den wir bereits erstellt haben. Gesundheit ist unsere Priorität. Das war's, dann hat es nur kleine Sub-Peddin bereitgestellt und es hat das nicht personalisiert und es hat keine besseren Optionen angeboten, aber hier haben wir bessere und Also müssen wir immer die Rolle zuweisen, dann die Aufgaben zuweisen und nach drei Optionen fragen Auf diese Weise erhalten wir also diese Art von Ergebnis und können das bessere auswählen. Der Punkt ist also, wenn Sie denken, nur Text hinzuzufügen und Ergebnisse vom HGBTO Jami zu erhalten , das wird nicht funktionieren, Sie müssen es immer spezifizieren, und auf diese Weise erhalten Sie bessere und In zukünftigen Lektionen werden wir also viele Eingabeaufforderungen für GBT verwenden, und wir werden auch versuchen, Jamini zu verwenden. 38. Einen Projektvorschlag erstellen: Jetzt ist es an der Zeit, einen Vertrag für unser Projekt zu erstellen. Ich gehe zu unserem Community-Profil und hier haben wir einen Projektvorschlag. Ich kopiere und klicke einfach hier füge es dann so ein. Okay. Jetzt werde ich es hier hinstellen. In Ordnung. Jetzt müssen wir zuerst den Namen des Projekts hinzufügen. Name wird Firmenname sein. Dann müssen wir den Namen des Freelancers hinzufügen. Ich werde hier meinen Namen hinzufügen. Ich muss eine E-Mail hinzufügen. Ich werde einfach eine gefälschte E-Mail wie test at mail.com hinzufügen und hier müssen wir den Namen des Kunden und unsere Webdesign-Anfrage hinzufügen, wir lassen den Kundennamen kopieren und so einfügen Lassen Sie uns nun die Projektübersicht erstellen. Um diesen Teil zu erstellen, können wir uns die Hilfe des Chats G PT holen. Gehen wir zu GVT und klicken Sie auf Neuer Chat. Also hier ist unsere Aufforderung. Sie können diese Eingabeaufforderung im Ressourcenbereich überprüfen . Sie erhalten zwei weitere Eingabeaufforderungen Hier ist die Rolle also Webdesigner, und dann gehen wir zu den Anforderungen an die Hier erstellen Sie eine Website für B tenING und ich möchte, dass Sie Projektübersicht für die Vertrags-Website der JB Family Clinic erstellen Vertrags-Website der JB Family Clinic Dann fügen wir hier weitere Informationen hinzu. Hier können wir Informationen wie den Zweck der Website hinzufügen . Ich kopiere die Kundenantwort so und füge sie dann ein. Lassen Sie uns diesen Teil zuerst durchblättern, so wie diesen, dann hier rein. Was sind die Hauptziele? Lass uns diesen Teil kopieren und ihn hier so einfügen. Dann können wir Nummer fünf bekommen und das wird in Ordnung sein. Jetzt muss ich auch sagen, mach es nur 150 Wörter und lass uns die Eingabetaste drücken. Okay, hier ist die erste Option. Also scheint es nicht gut zu sein. Wir können also auf Nachricht bearbeiten klicken. Jetzt gehe ich hier und weiter, ich werde so tun, als ob ich möchte, dass Sie eine Projektübersicht für den Kontakt zur JB Family Clinic-Website erstellen eine Projektübersicht für den Kontakt zur JB Family Clinic-Website erstellen, die ich für Kunden hier einschicken möchte Fügen wir nur ein Fünftel von 100 Wörtern und wir sprechen über die notwendigen Details, die notwendigen Details, dann klicken Sie auf Zustimmung und lassen Sie uns sehen Die erste Option ist, dass die Website der JB Family Clinic auf fünf Seiten Gesundheitsinformationen bietet, Terminanfragen erleichtert und Ressourcen zur Familiengesundheit anbietet Die Website zielt darauf ab, die Sichtbarkeit der Klinik zu verbessern, neue Patienten anzuziehen und ihre Dienstleistungen und Spezialgebiete hervorzuheben wichtigsten Elementen gehören eine leicht zu bedienende Oberfläche und Bildungsinhalte, um Verbindungen zur Gemeinschaft zu fördern. Das wird perfekt sein. Ich werde es einfach kopieren und gehen wir hierher und lassen Sie uns dieses Projekt so ersetzen. Als Ergebnis liefern wir die Figma-Mockups und dann liefern wir voll funktionsfähige und responsive Website hier eine voll funktionsfähige und responsive Website, ich füge WordPress hinzu, weil wir diese Website auf WordPress erstellen werden diese Website auf WordPress erstellen werden Machen wir es in technischen Fragen zu einer WordPress-Website , wir müssen eTAF hinzufügen und diesen ersten Ich werde es entfernen. Und hier werden wir Google Analytics für und die Google Search Console einrichten , dann die Ladegeschwindigkeit und die Reaktionsfähigkeit auf Mobilgeräten optimieren, dann bekommen wir das Tag-Formular und hier das Terminanfrageformular, Terminanfrageformular, und hier werden wir die Websicherheit verbessern Sie können diese technische Integration also an Ihr Projekt anpassen Also hier ist der Hinweis, dass wir das tun werden. Sie können diese klar verstehen, indem Sie die Anforderungen an das Webdesign und dann die Anforderungen für die Projektinitiierung überprüfen das Webdesign und dann die Anforderungen . In diesem Fall haben wir bereits das Design der Website oder ähnliche Beispiele genannt , sodass wir nur den Zugriff auf die Wörter Webserver und Website protokollieren müssen . Website bedeutet WordPressbd lässt sich ändern wie Wordpressabard, Wenn Wordpress noch nicht installiert ist, können Sie diesen Teil entfernen Dann benötigen wir also keine Anforderungsdokumentation , da wir sie bereits haben. Ich werde den Punkt streichen, dass Sie dies an Ihre Anforderungen anpassen können . Hier haben wir den Abschnitt für den Kundendienst neue Funktionen und neue Seiten sind zusätzliche Gebühren und Diskussionen erforderlich. Ich werde jedoch die grundlegende Wartung der Website und kleinere Updates nach der Fertigstellung anbieten grundlegende Wartung der Website und . Wenn Sie also keine kostenlose Grundwartung der Website oder nach Updates anbieten, können Sie das BDS hier hinzufügen Dann haben wir den bemannten Zustand. Hier haben wir also die geschätzte Zeit für die Fertigstellung des Projekts. Machen wir es auf vier Wochen und dann auf den Rahmen und die Restrukturierung Wenn Sie also eine Website erstellen, zahlen Sie immer im Voraus. Normalerweise erhalte ich 50% der Vorauszahlung. Lassen Sie uns das hier ändern, wir haben 375 und nach erfolgreichem Start der Website werden es wir haben 375 und nach erfolgreichem Start der Website werden 375 sein, und die Projektsumme beträgt 750 Dann müssen wir die Zahlungsmethoden hinzufügen. In meinem Fall akzeptiere ich Zahlungsmethoden Paneer und Western Union Wenn Sie Payal haben, können Sie auch Payal hinzufügen, aber ich biete nur Zahlungsmethoden an, dann haben wir Stornierungsbedingungen Hier heißt es also, wenn das Projekt nach Beginn vom Freelancer storniert wird , wird dem Kunden das Geld vollständig zurückerstattet , und zwar auf dieselbe Weise, wie Bei einer Stornierung durch den Kunden Zahlung für die gesamte in das Projekt investierte Zeit fällig , unabhängig vom Verwendungszweck Der Projektvorschlag ist also ein seriöser Brief immer überprüfen sollten, bevor Sie ihn abschicken. also in diesem Fall Wenn ich also in diesem Fall das Projekt storniere, werde ich dem Kunden das Geld vollständig zurückerstatten und wenn Kunden ihr Projekt stornieren, werde ich die Vorauszahlung für die Kunden nicht Passen Sie diese Richtlinien an Ihr Arbeitsmuster und Ihre Kunden an, dann haben wir einen Bereich für Eigentumsrechte Nach vollständiger Bezahlung geht verbundene geistige Eigentumsrecht mit der Website verbundene geistige Eigentumsrecht auf den Kunden über. Dann haben wir diese Nachricht wie den Vorschlag, eine Beschreibung der erbrachten Dienstleistungen und der erwarteten Ergebnisse des Projekts Wenn Sie Patienten haben oder zusätzliche Informationen benötigen, mich gerne kontaktieren. Ich freue mich über die Gelegenheit, gemeinsam an Design und Entwicklung zu arbeiten , und hier müssen wir den Namen der Website hinzufügen. Hier ist der Name der Website, das Unternehmen. Fügen wir einen Website-Namen wie diesen hinzu und wenn wir möchten, können wir die Website hinzufügen. Sie können jeden dieser Punkte hinzufügen oder entfernen. Wenn Sie neue Bedingungen hinzufügen möchten, können Sie einfach die Eingabetaste drücken und Sie erhalten diese Art von Punkt. Und wenn Sie hier einen weiteren Artikel hinzufügen möchten, müssen Sie hier klicken und auf diese Eigenschaft klicken. Dann können Sie es einfach duplizieren, indem Sie Strg C oder Befehl C und dann den Steuerbefehl wie folgt drücken . diesem Projektvorschlag, der mit automatischem Layout entworfen wurde haben Sie bereits eine Vorstellung vom automatischen Layout, und Sie können ihn ganz einfach nach Belieben bearbeiten. Und nachdem Sie diesen Projektvorschlag fertiggestellt haben, können Sie auf den Vorschlag klicken und auf der rechten Seite nach unten scrollen. Wenn Sie nach unten scrollen, sehen Sie hier den Exportbereich Wählen Sie den Typ als PDF aus und klicken Sie auf die Schaltfläche Projektvorschlag exportieren. Dieser Projektvorschlag hat also eine Größe von A 4. Klicken Sie darauf, es wird so aussehen, und Sie können es einfach an Ihren Kunden senden und ihm mitteilen, ob er Änderungen benötigt. Und nachdem Ihr Kunde mit diesen Details einverstanden ist, können Sie mit der Arbeit beginnen. 39. Designinspirationen sammeln: Hallo, alle zusammen. Es ist Zeit , unser Moodboard zu erstellen Um unser Moodboard zu erstellen, müssen wir Designinspirationen finden und In diesem Projekt haben wir bereits Designinspirationen, die uns der Kunde Lassen Sie uns eins nach dem anderen von diesen UR öffnen Okay, jetzt müssen wir einen Screenshot dieser Website machen. Dazu können wir den Google Com-Erweiterungsaufruf und die GoFullPage-Erweiterung verwenden, zu Google gehen und nach der GoFuulPage-Erweiterung suchen Dann erhalten Sie Comm Webstollin, klicken Sie darauf, und hier sehen Sie „Zu Chrome hinzufügen“. Klicken Sie Ich habe es schon gemacht. Sie werden diese Art von Kamerasymbol im Chrome-Browser sehen Kamerasymbol im Chrome-Browser Rufen Sie die Webseite auf und klicken Sie darauf , um das vollständige Design der Website zu erfassen. Hier haben wir ein Problem. In diesem Screenshot haben wir keine Header-Teile, um die Header-Teile abzurufen. Versuchen wir es erneut. Der Header-Teil wird nicht angezeigt, aber es ist okay. Zuerst lade ich es als PNG herunter, ich klicke einfach hier und dann kann ich Shift Command 4 drücken und es einfach so markieren oder auswählen, dann einfach die Maus loslassen und schon wird der Screenshot angezeigt. Wenn Sie jedoch Windows verwenden, können Sie ein Tool namens InpinTOL verwenden Gehen Sie einfach zu Windows und suchen Sie inPintolo, jetzt gehen wir zur nächsten Klicken Sie auf diese Erweiterung, um die gesamte Seite zu öffnen, und das Design wird automatisch abgerufen Laden Sie es dann herunter und lassen Sie uns das für diese EAL-Websites tun Nun, das ist die Website der Konkurrenz, aber das reicht nicht aus um mehr Designinspirationen zu sammeln, es ist besser, sich ein gutes Bild von der Website zu machen. Es gibt Websites, auf denen wir Designinspirationen sammeln können. Einer von ihnen ist Dribble. Lass uns zu Dribble gehen. Und wenn du kein Dibble-Konto hast, kannst du auf Anmelden klicken und ich habe bereits ein Dribble-Konto, also werde ich mich anmelden Okay, ich habe mich in mein Drivel-Konto eingeloggt Dann kann ich hier nach der Familienklinik suchen, weil wir eine Website für die Familienklinik entwerfen werden Suchen Sie hier nach einer Familienklinik, Moderator. Wählen Sie dann hier die Kategorie Webdesign aus. Dann die Art der Designs, finde die besten Designs und öffne sie in neuem Fenster. Klicken und klicken Sie auf Link in Nutab öffnen und tun Sie es einfach. Wenn Sie keine Website sehen, die sich auf UNH bezieht, holen Sie sich einfach andere Designs, die sich auf Rf beziehen In diesem Fall kann ich eine Website für das allgemeine Gesundheitswesen, eine Website für Zahnmedizin und andere Websites wie diese finden Zahnmedizin und andere Websites wie diese Lass uns öffnen, okay. Jetzt werde ich hier verwandte Keywords bekommen. Also zuerst Krankenhaus, Zahnarzt, Arzt, Zahnarzt Ich klicke einfach auf Krankenhaus eins, und hier haben wir das Krankenhausdesign. Also können wir diesen Filter auch ändern , aber ich werde ihn als beliebt einstellen. Und hier werde ich diese Designs wieder öffnen. Hier ist eine zahnärztliche Website, und dann gehen wir zum Arzt und okay. Und dann werde ich wieder auf diese Klinik klicken. Jetzt werden wir uns um das Design der Klinik-Website kümmern. Okay, recherchieren Sie einfach und finden Sie das Design der Website. Bisher habe ich nur wenige Designs gefunden, also gibt es von hier nichts zu bekommen, also werde ich dieses überspringen und den Tab schließen. Dann lass uns hier nach unten scrollen. Und hier haben wir eine ganzseitige Version. Klicken Sie darauf und dann mit der rechten Maustaste, dann klicken Sie auf Bild speichern unter und speichern Sie es. All diese Designs werden Ihren Download-Ordner heruntergeladen. Und wenn Sie nach unten scrollen, werden Sie auch andere Designs dieses Designers sehen. Denken Sie also immer daran, dass wir uns diese Designs holen , um uns vom Design inspirieren zu lassen, nicht nur um sie zu kopieren und einzufügen. Suchen Sie also nicht einfach Design anderer Leute und versuchen Sie, es zu kopieren und sich ihnen zu stellen. Lassen Sie sich einfach vom Design inspirieren und erstellen Sie Ihre eigene Version. Und ich werde dir zeigen, wie es geht. Okay, lass uns nach unten scrollen. Hier haben wir eine vollständige Seitenvorschau, klicken Sie darauf und klicken Sie mit der rechten Maustaste. Wir können es einfach speichern. Dann haben wir hier auch diese und hier ist eine weitere Website. Wir können sparen. Okay, kopiere das, zwei , okay, das war's. Dann können wir Website-Designs von ihnen für uns finden. Also werde ich in Google nach Tmforus suchen und wir werden auf themforus.net gehen, ich klicke einfach darauf ich Okay, hier kann ich nach Familie Krinic suchen und auf Suchen klicken Okay. Jetzt können Sie Websites sehen, die eine gute Bewertung haben. Öffnen Sie sie einem neuen Fenster und lassen Sie uns einige davon so öffnen. Ja. Ja, suchen wir nach Klinik , um die Website der Klinik zu finden. Hier haben wir eine Zahnklinik, aber hier haben wir eine andere Klinik, auf die ich klicke. Diese Vorlagen werden also bereits von Benutzern verwendet, was bedeutet, dass diese Vorlagen nicht einzigartig sind, aber wir können Abschnitte und deren Gestaltung der Website finden. Verschaffen Sie sich einen Einblick in die Designs , die wir auf unserer Website verwenden sollten. Klicken Sie von hier aus einfach auf Live-Vorschau und hier erhalten Sie die Live-Vorschau der Website. Hier haben wir einige Demos. Klicken Sie jetzt mit der rechten Maustaste auf diese Demos und holen Sie sich diese Designs wie dieses Hier haben wir das Design. Jetzt können wir auf diese verdammte Seite klicken, sie anschließen und einen Screenshot des Designs machen anschließen und einen Screenshot des Designs Ich lade es herunter und hier haben wir das nächste Überqueren Sie einfach diesen Stay-Selector und scrollen Sie nach unten. Okay. Klicken Sie dann auf diese Chrome-Erweiterung , um das Design zu erhalten, und laden Sie es herunter. Wir haben diesen. Lassen wir es auch entwerfen. Und diesen haben wir auch. Scrollen wir nach unten und klicken Sie auf Herunterladen. Dann haben wir eine andere Website. Klicken Sie auf Live-Bewertung, und hier ist die Live-Bewertung. Klicken Sie einfach auf diese R-Schaltfläche, um das Design zu öffnen. Lass uns weitermachen Okay, jetzt werde ich all die Links entfernen, von denen ich bereits die Screenshots erhalten habe. Okay. Eine weitere Website, auf der wir Designinspiration finden können, ist Ban dot O Bans Ich werde Family Clinic suchen Von hier aus werden wir Websites sehen, die sich auf Familienkliniken beziehen Ich werde sie so öffnen Schauen wir uns diese Designs an. Dies ist kein Website-Design, und hier ist das Website-Design. Holen Sie sich den Screenshot von hier, klicken Sie einfach darauf und verwenden Sie dann Go Full Page , um den Screenshot zu erhalten. Lass uns das sehen. Diese Website ist nicht auf Englisch, aber wir können uns trotzdem beim Design inspirieren lassen. Lass uns das auch herunterladen. Doppelklicken Sie und vergrößern Sie es Klicken Sie dann auf GoFullPage und dann auf Bild herunterladen Wir haben die Website der Zahnklinik, also lassen Sie uns auch diesen Screenshot davon machen Okay. Jetzt können wir uns von Pinterest inspirieren lassen Gehen wir zu PinterSTT. Um Designs von Pinterest zu bekommen, musst du dich bei Pinterest einloggen, ich bin auf meinem Pinterest-Account ich bin Jetzt klicke ich auf diese Suchschaltfläche und suche hier nach der Family Clinic-Website Dann solltest du Pins in Pins ändern und hier haben wir Website-Designs Klicke auf diese Designs und ich werde einfach auf das Design klicken und es so in ein neues Fenster stellen, dann mit der rechten Maustaste klicken, auf Bilder speichern und speichern. Ich werde hier klicken. Es ist nicht gut. Öffne sie in einem neuen Fenster wie diesem. Es ist eine offene Designfamilie. In Pin Trust können Sie diese Bildersuche verwenden, um ähnliche Website-Designs zu erhalten. Lass es uns so suchen. Wenn Sie das tun, erhalten Sie ein ähnliches Website-Design, also werde ich einige davon so öffnen und sie dann in einem neuen Fenster öffnen. Okay. Jetzt werde ich sie herunterladen, indem ich mit der rechten Maustaste klicke und dann auf Bilder speichern klicke. Ordnung. Jetzt haben wir genug Designs, um ein Mode-Board zu erstellen. also in der nächsten Lektion Lassen Sie uns also in der nächsten Lektion das Mode-Board erstellen. 40. Eine Stimmungsbasis erstellen: Hallo zusammen, es ist Zeit, unser Moodboard zu erstellen. Ich werde die Leinwandgröße verringern, indem Strg-Taste drücke und das Mausrad verwende. Dann werde ich hier einen Rahmen erstellen. Klicken Sie einfach auf den Rahmen und klicken Sie so und lassen seine Größe so erhöhen , dass wir ihn tatsächlich von hier aus hinzufügen, damit wir mehr Platz haben. Dann werde ich es in Smooth Ball umbenennen. Mehrere Leerzeichen. Okay. Jetzt können wir die Füllfarbe ändern, also den Rahmen isolieren und die Feldfarbe so ändern , dass sie etwas dunkler wird Okay. Jetzt haben wir all diese Screenshots, also werde ich sie einfach alle hervorheben und so hinzufügen. Sie werden hochgeladen, also müssen wir warten, bis die ersten Bilder erfolgreich hochgeladen wurden Es ist auch besser, die Designmuster, die uns der Kunde zur Verfügung stellt, näher beieinander zu platzieren Designmuster, die uns der Kunde zur Verfügung stellt, näher beieinander Also hier sind die Designs, und lassen Sie uns dieses Moodboard-Design so machen Lassen Sie uns diese beiden Abschnitte tatsächlich so platzieren. Dann lassen Sie uns das Moodboard so vergrößern, und jetzt ist hier einer der eigentlichen Lets Two. Okay, hier ist eines der Designs, lassen Sie uns das Moodboard so platzieren Machen Sie die Designs nass. Lassen Sie uns die Moodboard-Größe verringern und sie hier hinzufügen. Okay, jetzt haben wir dieses erste Design, ich werde es einfach so platzieren und es wird okay sein, dann haben wir dieses Design, fügen es einfach hier ein, ich setze die Größe für Einladungen auf Wir können das automatische Layout verwenden, aber es ist einfach, es ohne automatisches Layout so zu gestalten, und hier haben wir einen Hintergrund Lassen Sie uns es entfernen, um es zu entfernen. Ich doppelklicke auf das Bild und sage hier „Zuschneiden“. Jetzt können wir es so zuschneiden. Jetzt geht's los. In Ordnung. Dann werde ich das hier hinstellen. In Ordnung. Soweit ich mich erinnere, gibt es 38 Ressourcen, lassen Sie uns eine Menge zusammenfassen. Okay. Also dieser hat den Hintergrund, klicken Sie darauf und ändern Sie ihn, um ihn so zuzuschneiden und abzulegen und ihn so zu öffnen und die Eingabetaste zu drücken, damit wir ihn hier einfügen können. Okay. Eigentlich ist es so. Okay. Und hier haben wir ein anderes Design. Sagen wir es so und erhöhen es ein bisschen. Machen wir es zwischen den Größen 15. Okay, wir haben mehr Designs. Fügen wir sie alle hinzu. Das ist ein anderes Design. Lass es uns hier hinstellen, leg das hier hin. Und bei diesem Design werden wir diesen schwarzen Balken weglassen , weil es ein Thema für uns ist. Nett, lass es uns hier hinstellen. Okay, wir lassen diesen Stift fallen. Jetzt machen wir das hier. Okay. Nun, lassen Sie uns das sagen. Okay, ich werde einige dieser Designs zu diesem Modusboard hinzufügen. Jetzt haben wir nicht mehr viel Abstand, also klicke ich auf den Moodboard-Frame und drücke die Befehlstaste, um das Moodboard zu vergrößern Wenn Sie Windows verwenden, sollten Sie die Strg-Taste drücken Okay? Was wir haben, lassen Sie uns den Hintergrund entfernen. Dieser ist qualitativ nicht gut, also werde ich ihn entfernen. Lass uns sie hinzufügen. Jetzt wähle ich einfach diese Screenshots aus und mag sie hier. Lass uns sie weiterhin zur Mondbox hinzufügen. Also hier ist das Webdesign , das vom Kunden ausgewählt wurde. Lassen Sie uns sie also näher zusammenbringen, damit wir uns ein Bild von dem Bereich machen können , den diese Website haben sollte. Hier haben wir also Anzeichen dafür, dass wir nur das vollständige Design ohne Heldenbereich bekommen haben. Lassen Sie uns den Heldenbereich hinzufügen , weil wir den Heldenbereich bereits mit dem Snipping-Tool bekommen haben Lass uns das Design herausfinden. Gehen wir zur Vernunft. Hier haben wir den Kopf auseinander, kopieren es, ziehen und seilen es so, dann stecken wir Zähne wie diese, dann setzen wir es so ein. Jetzt kann ich den Befehl G drücken, um es zu gruppieren. Okay, jetzt werde ich es so ausdrücken. East AT Okay, hier haben wir das Modus-Board und hier haben wir alle Designs, die wir gesammelt haben, also können wir es vergrößern und das Design so überprüfen. Jetzt können wir uns eine allgemeine Vorstellung davon machen , welche Art von Abschnitt wir benötigen, und wir können diese Abschnitte auswählen , indem wir den Stil dieses Designs überprüfen. Der einfache Weg besteht darin, zunächst die von Ihrem Kunden bereitgestellten Websites zu überprüfen . Dies sind die Websites der Konkurrenten Ihres Kunden. Der Bereich „Finden Sie die häufigsten Informationen“ auf diesen Websites. Zum Beispiel hat diese Website einen Heldenbereich, den Bereich „Wir sind“, warum wir unseren Standort wählen, warum wir unsere Standorte mit dem Kontaktformular und den Google-Bewertungen und einer Fußzeile Wenn wir dann diesen Bereich überprüfen, gibt es Herosection, unsere Dienste, Protokollbereich, und hier haben wir den Bewertungsbereich, unseren Anbieterbereich und den Servicebereich Aus einem Bereich. Jetzt können wir diesen Abschnitt aus diesen Designs auswählen Gehen Sie einfach das Design durch und finden Sie heraus, was der Nassbereich ist. Um das in Figma zu tun, haben wir eine Befehlsfunktion In der Werkzeugleiste können Sie diesen Befehlsbereich sehen, darauf klicken und in diesen Designs gefällt mir dieser Bereich als unsere Website, Heldenbereich, klicken Sie auf diesen Abschnitt und geben Sie den Namen als Heldenbereich Okay, aber ich verstehe nur die Struktur dieses Designs, was bedeutet, dass die Unterüberschrift, Hauptüberschrift und der Absatztext so aussehen werden . Diese Schaltfläche wird unten platziert Das einzige, was der Text unten links sein wird. Dann müssen wir einen Abschnitt finden. Um den Abschnitt „Über“ zu finden, schauen wir uns das Design an und ich werde diesen Teil als Abschnitt auswählen. Moderator: Wenn wir Kommentare hinzufügen, können wir all diese Kommentare hier sehen. Und jetzt müssen wir herausfinden, welchen Bereich unsere Konkurrenz-Website hat. Hier haben wir als Nächstes den Abschnitt „ Wählen Sie uns“, und wenn wir zum zweiten Design gehen, hat es nicht viel Zeug, es hat Dienste und wählt Anbieter aus. Lassen Sie uns den Bereich für Dienste auswählen. Ich werde diese Art von Abschnitt für Dienstleistungen auswählen. Anstatt diesen Pfeil hinzuzufügen, werde ich Symbole hinzufügen, die sich auf diese Dienste beziehen. Ich sage, wir müssen eine bessere und einzigartige Version erstellen, und jetzt müssen wir Ihren Anbieterbereich auswählen. Mal sehen, was gut für die sein wird . Ich werde diese Art von Abschnitt für unsere Anbieter erstellen. Lassen Sie uns unsere Anbieter nennen. Ende jetzt müssen wir einen Bereich für Testimonios oder Bewertungen finden Bereich für Testimonios oder Lassen Sie uns den Abschnitt mit den Bewertungen herausfinden. Lassen Sie uns diese Art von Abschnitt für Rezensionen erstellen. Was wir nun hinzufügen müssen, müssen wir einen Blockabschnitt hinzufügen. Also lasst uns einen Blockabschnitt finden. Das wird gut aussehen, also klicke ich einfach hier und lass uns das als Block machen. Wir erstellen das für die Homepage. Lassen Sie uns eigentlich nicht den neuesten Block auf der Homepage hinzufügen. Ich werde hier klicken und lassen Sie uns den Befehl entfernen, klicken Sie auf Löschen, um ihn zu löschen Okay. Jetzt haben wir fünf Abschnitte für die Homepage. Wählen wir eine Fußzeile aus. Finden wir heraus, dass mit der Fußzeile diese Art von Fußzeile erstellt wird. Klicken Sie hier, um eine Fußzeile zu erstellen, aber ich werde das Design ändern Ich verstehe nur die Struktur. Also, wir brauchen einen solchen Bereich, damit wir die Nummer eindeutig haben und wir eine Schaltfläche haben, um einen Termin zu vereinbaren. Lassen Sie uns also diese Art von Design herausfinden. Das ist besser. Lassen Sie uns diese Art von Kontaktformular auf der Homepage erstellen. Machen wir es so schnell wie zehn. Jetzt haben wir acht Abschnitte. Gehen wir dann zur Anforderungsliste und sehen uns an, dass diese Abschnitte uns helfen werden, unser Ziel zu erreichen. Unser primäres Ziel ist es, die Online-Präsenz der Klinik zu verbessern , um neue Patienten zu gewinnen. Um das zu erreichen, brauchen wir einen starken Aufruf zum Handeln, die Helden-Sektion. In diesem Heldenbereich müssen wir die CLS-Nummer erwähnen Hier werde ich die Schaltfläche „ Erste Schritte mit CLS“ durch „Anzahl der Kliniken“ ersetzen Schaltfläche „ Erste Schritte mit CLS“ durch „Anzahl der Kliniken Das hilft Benutzern, die Nummer schnell zu finden , wenn sie die Website besuchen Fügen wir es als Antwort an die Kontaktnummer zu Menu Pa hinzu. Im nächsten Schritt wird es darum gehen, die verfügbaren Dienstleistungen und Spezialitäten für Familien klar zu kommunizieren . Wir haben bereits den Abschnitt für Dienstleistungen in diesen Diensten. Wir werden die wichtigsten Dienste hinzufügen, damit die Besucher die verfügbaren Dienste leicht verstehen und sich ein Bild davon machen können. Wir sollten Bildungsressourcen zum Thema Familiengesundheit bereitstellen . Dazu müssen wir einen Blog-Bereich einrichten. Lassen Sie uns also einen Blog-Bereich erstellen nachdem wir die Homepage entworfen haben. Also ich denke, wir haben den Abschnitt. Also jetzt ist es an der Zeit, diese Informationen an den Kunden zu senden. Wenn Sie also dieses Moodboard mit dem Kunden teilen, klicken wir auf Präsentation, damit er all diese Designs überprüft und seine Idee zur Auswahl des diese Designs überprüft und besten Nachdem Sie das Modus-Board fertiggestellt haben, teilen Sie es mit Ihrem Kunden. Klicken Sie einfach auf „Teilen“ und legen Sie fest, Klicken Sie einfach auf „Teilen“ und legen dass jeder den Link ansehen und kopieren kann Erkläre ihm dann etwas über dieses Modus-Board und welchen Bereich du auswählst, damit er dieses Modus-Board überprüft und dich über seine Vorschläge informiert, und wenn ihm ein anderer Abschnitt gefällt, wird er sie auch auswählen. 41. Website-Struktur erstellen: Hallo, alle zusammen. Jetzt wählen wir aus diesem Moodboard den L-Bereich aus, den wir auf unserer Website benötigen Lassen Sie uns alle sammeln und eine einzige Website mit Anhängen erstellen eine einzige Website mit Anhängen Um das zuerst zu tun, klicke ich auf den Rahmen und erstelle einen Schreibtisch in Rahmengröße Dann lassen Sie uns den Rahmen so vergrößern und dann gebe ich Befehle. Bei den Befehlen haben wir acht Abschnitte. Klicken wir also auf den ersten Abschnitt, und hier ist der erste Abschnitt. Also werde ich auf dieses Motol klicken und hier diesen Screenshot auswählen und Befehl C drücken, um ihn zu kopieren, hier klicken und Befehl V drücken, um ihn einzufügen Und von hier aus brauchen wir nur noch diesen Heldenbereich. Also doppelklicke ich auf das Bild und wähle Zuschneiden. Dann werde ich es so zuschneiden, so und dann die Eingabetaste drücken. Dann sag es einfach so und vergrößere das Design. Okay, dann müssen wir den zweiten Abschnitt finden. Es geht darum, also hier ist der A-Abschnitt. Jetzt werde ich auf mTOL klicken und hierher kopieren. Dann komm her, füge es so ein, dann klicke ich auf das Bild und stelle es auf Zuschneiden ein und schneide dann nur diesen Abschnitt ab Gefällt mir das und drücke Enter. Okay. Dann lass es uns so auf diese Website stellen. Okay. Was wir dann tun werden, ist im dritten Abschnitt zu finden. Dieser dritte Abschnitt ist Dienstleistungen und hier ist der Abschnitt Dienstleistungen. Ich übergebe motol und wähle es aus, kopiere es, füge es hier ein, dann brauchen wir nur diesen Servicebereich Lass es uns zuschneiden und präsentieren. Dann fügen wir hier diesen Abschnitt hinzu. Dies und vergrößern Sie den Abschnitt durch Drücken, Umschalten und Erhöhen. Wenn wir die Umschalttaste drücken, können wir die Größe erhöhen, ohne die Höhe und Breite zu ändern. Dann müssen wir unseren Bereich für Anbieter finden. Also hier ist dieser Abschnitt. Jetzt werde ich diesen Abschnitt kopieren. Eigentlich haben wir den Screenshot schon kopiert, also klicke ich auf mTOL und hier ist der Screenshot Ich dupliziere es einfach, indem ich Befehl C und Befehl V es dann so auslege Jetzt muss ich die Desktop-Größe erhöhen, den Desktop auswählen und ihn so vergrößern. Dann doppelklicke ich darauf und wir brauchen unseren Anbieterbereich so und stellen ihn dann so ein. Schauen wir uns jetzt den fünften Abschnitt an. Ich rezensiere, hier haben wir Bewertungen, drücken Sie einfach auf Mtol und kopieren Sie diese, kommen Sie her. Platziere es hier. Dann haben wir diesen Bewertungsbereich, doppelt bearbeiten, settsrop und bekommen nur den Vorschaubereich wie diesen und hier Okay. Jetzt leg es hierher und drücke Shift und erhöhe es wie folgt. Okay, also lass uns den nächsten Abschnitt finden. Es ist Fußzeile. Hier ist die Fußzeile Hier ist die Fußzeile, die wir hinzufügen werden. Also kopiere das, komm her. Gib diesen so weiter. Okay. Tippen Sie dann zweimal, klicken Sie auf Zuschneiden und schneiden dieses Design wie folgt zu und drücken Sie die Eingabetaste. Dann legen wir es so unten an. Dann müssen wir hinzufügen, lassen Sie uns die Größe erhöhen. Wir müssen hinzufügen, lassen Sie uns den Textrahmen auswählen und ihn wie folgt vergrößern Dann müssen wir den letzten Abschnitt hinzufügen. Der letzte Abschnitt ist schwacher Kontakt, hier ist der Abschnitt mit schwachem Kontakt. Drücken wir also Motle und Salz auf den Abschnitt, drücken Sie den Befehl C und drücken Sie hier Schritt, drücken Sie die Befehlstaste, dann holen wir uns diesen Abschnitt, tippen zweimal darauf, lassen ihn für den Moment wie diesen grauen Mittelpunkt fallen, lassen Sie uns auch diesen Abschnitt vergrößern, so wie Okay, und formuliere es so. Okay. Lassen Sie uns jetzt dieses Design überprüfen. Lassen Sie uns diesen Frame-Namen in Struktur, Webseitenstruktur ändern . Klicken Sie jetzt darauf und klicken Sie auf dieses Geschenk und hier ist die Struktur unserer Website. Jetzt können wir unsere einzigartige Version mit dieser Website-Designstruktur gestalten. Ich mache das, weil wir bei der Erstellung dieser Art von Struktur keine Drahtgitter erstellen müssen. Wir können die High-Fidelity-Benutzeroberfläche direkt erstellen. High-Fidelity-UI bedeutet , dass die Benutzeroberfläche dem tatsächlichen Produkt ähnelt. Außerdem werden wir das nicht einfach so gestalten, wie es ist. Wir werden dieses Design entsprechend unserer Kreativität ändern und eine bessere Version erstellen. 42. Eine Website-Karte erstellen: Hallo, alle zusammen. Jetzt haben wir die Struktur unserer Website in unseren Schritten zur Fertigstellung eines Webdesign-Projektleitfadens. Als Nächstes müssen wir eine Sitemap erstellen . Lass uns eine erstellen. Ich gehe hierher und um eine Sitemap zu erstellen, brauchen wir einen Frame, klicken Sie auf den Frame und klicken Sie hier, dann erhöhen Sie die Rahmengröße wie folgt, dann ändere ich diesen Namen in Sitemap. Dann ist Sitemap die Struktur unserer Website. Wenn wir einige Sitemap-Beispiele sehen, sieht die Sitemap so aus. Zuerst haben wir die Startseite, dann haben wir den Rest der Seite. Danach haben wir den Untermenüpunkt. Für kleine Websites benötigen wir keine Sitemap, aber für komplexe große Websites ist es besser, eine Sitemap zu haben, damit wir die Struktur der Website verstehen können. Nicht nur, dass Sie selbst eine Sitemap für Ihre Website erstellen, sie kann auch geändert werden, wenn wir sie entwickeln und während des Designprozesses mehr Einblicke von den Kunden unserer Wettbewerber erhalten . Lassen Sie uns die Sitemap erstellen. Jetzt haben wir den Rahmen. Ich klicke einfach auf Text und erstelle einen Text namens Home. Dann werde ich die Größe erhöhen dann die Schriftgröße auf 42 ändern. Okay. Dann kann ich Shift A drücken, um das automatische Layout auf diesen Text anzuwenden. Denken Sie daran, dass wir das automatische Layout nur auf diesen Text anwenden, nicht auf den Rahmen, nur für den Text. Jetzt hier drinnen, lass es uns erhöhen. Fügen wir eine horizontale Polsterung hinzu, etwa 20, und die vertikale Polsterung beträgt zehn Dann werde ich Farbe füllen. Klicken Sie hier und lassen Sie uns eine Feldfarbe wie diese rote Farbe hinzufügen Dann klicke ich auf den Text und wir ändern die Textfarbe in Weiß. Okay. Jetzt haben wir eine Homepage, sie scheint kleiner zu sein, also ändern wir diesen Text auf 60. Lassen Sie uns nun wieder die Größe dieses Rahmens auf 2000 reduzieren, also auf 2000 und die Höhen 151500 Okay, lassen Sie uns es jetzt hier hinzufügen. Lassen Sie uns diese Höhe tatsächlich auf Tausend ändern , weil wir die größere Sitemap nicht benötigen. Jetzt haben wir hier ein Zuhause. fügen wir horizontale Paddins 30 hinzu. Viel besser Jetzt müssen wir andere Seiten erstellen. Diese Seiten werden wir überprüfen. Lassen Sie uns unsere Anforderungen überprüfen. Hier werden wir den Seitennamen haben. Bei diesen geht es darum, unseren Provider zu blockieren Kopieren wir sie alle und kommen hierher, dann duplizieren wir das, indem wir es so drücken und ziehen. Lass es uns ein paar Mal duplizieren. Dann ist hier der Text, den ich kopiere, also werde ich ihn hinzufügen und zuerst haben wir ungefähr, dann haben wir Kontakt, dann haben wir hier blockiert dann wird es uns leid tun unser Anbieter. Hier sind die Hauptseiten unserer Website. Die Startseite wird also die erste Seite sein und Über uns wird die zweite Seite sein, und Block wird die dritte, unser Anbieter wird der vierte und Kontakt wird die letzte Seite unserer Website sein Wählen Sie alle aus und lassen Sie uns sie in den Mittelpunkt stellen. Dann wähle ich alle aus, gehe zur Position und klicke auf „So gebunden“. Dann ändere ich die Feldfarbe so , dass sie dieser blauen Farbe entspricht. So können wir andere Homepage-Seiten leicht identifizieren. Okay. Jetzt können wir diesen Seiten Pfeile hinzufügen. Hier wähle ich den Pfeil aus, lasse ihn vergrößern, dann klicke und ziehe ihn wie folgt. Okay. In Pfeil können wir diesen Stil wie folgt hinzufügen, und jetzt sollten wir eine Linie haben, um eine Linie zu erstellen Klicken wir auf Linie und drücken wir die Umschalttaste, dann fügen wir LineTo hinzu, dann setzen wir den Pfeil so Okay. Lassen Sie uns die Größe des Pfeils verringern und diese beiden Pfeile auswählen und die Breite erhöhen. Wählen Sie die Pfeile aus und hier fügen wir 55 hinzu, was mit zwei Lo so sein soll. Jetzt werde ich sie so duplizieren. So, erhöhen wir das hier Jetzt fügen wir hinzu, lassen Sie uns diesen Pfeil duplizieren und diesen hinzufügen. Eigentlich brauchen wir diese Pfeilspitzen nicht. Ich werde es schaffen und hier ist es. Auf unserer Website benötigen wir also eine Unterseite zu unseren Anbietern. Also lassen Sie uns es duplizieren und fügen wir hinzu, dass andere Seiten-URLs das Profil anzeigen. Okay. Dann werde ich diese Schriftgröße auf etwa 30 reduzieren, und lassen Sie uns das so ausdrücken und lassen Sie uns diese Farbe so ändern , dass sie dieser Farbe entspricht. Okay. Und jetzt werde ich diesen Pfeil duplizieren und ihn so ausdrücken. Dann duplizieren Sie es erneut, ändern Sie die Position. Okay. Jetzt entferne ich die Pfeilspitze dieser Linie und nur wir brauchen diesen Pfeil hier. Okay. Und wenn Sie keine Ahnung haben, wie Sie die Sitemap für Ihre Website erstellen sollen, können Sie die Website Ihres Konkurrenten überprüfen und sich ein Bild machen. Für uns ist hier die Sitemap. Jetzt haben wir alle Seiten , die wir erstellen wollen. Außerdem benötigen wir in diesem Blockabschnitt einen einzigen Blockbeitrag. Ich werde das duplizieren und so formulieren. Dann werde ich es wie einen einzigen Block vier wie folgt hinzufügen. Sehen wir uns unsere Seitenübersicht an, klicken Sie auf den Seitenübersichtsrahmen und klicken Sie auf dieses aktuelle Symbol, und hier ist unsere Seitenübersicht warum sie nicht sicher ist, ob sie dort stehen sollte. Wir müssen diese Linie in den Rahmen einfügen. Okay. Jetzt sieht es perfekt aus. 43. Schriftarten für die Website auswählen: Hallo, alle zusammen. Jetzt ist es an der Zeit, Typografie für unsere Website auszuwählen Dafür gibt es hauptsächlich zwei Möglichkeiten. Die erste Methode besteht darin, Ihre Konkurrenten und Designinspirationen auf Moodboard zu überprüfen Designinspirationen auf Moodboard und herauszufinden, was am besten funktioniert Lass uns sehen. haben wir die Seri-Schrift für die Überschrift und die San-Seri-Schrift als Absatz Wir benötigen nur zwei Arten von Schriften, eine für die Überschrift und eine für den Absatz Lass uns andere Designs verwenden. Hier haben wir Sanseris Header und Paragraph und hier haben wir Sansorifont und auch hier haben wir Sanserifont und hier haben wir Ceri Font als Header. Wenn Sie sich unsere Konkurrenten ansehen, können Sie verstehen, welche Art von Typografie auf unserer Website funktioniert können Sie verstehen, welche Art Ceri Font als Header. Wenn Sie sich unsere Konkurrenten ansehen, können Sie verstehen, welche Art von Typografie auf unserer Website funktioniert. Aus diesem Grund bin ich zu dem Schluss gekommen, dass die Verwendung von Sanserifont die bessere Option für den Überschriftenabsatz ist . Ich werde zwei verschiedene San-Serif-Schriften für die Website verwenden. Die zweite Methode ist also, dass wir nach KI fragen und ihre Meinung einholen können KI fragen und ihre Meinung einholen Also lass uns das machen. Hier bin ich auf HatGPT, also klicke ich auf Newhat. Also füge ich einfach unsere Eingabeaufforderung hinzu, damit Sie diese Eingabeaufforderung im Abschnitt Ressourcen finden können , und hier werde ich das ändern, da Sie ein Webdesigner sind, eine Website für JB Family Clinic dann können wir hier die Aufgabe hinzufügen, sodass die Aufgabe lautet, ich möchte, dass Sie hier den Ersteller ändern, ich möchte, dass Sie Ty für die Grafik für die JB Family Clinic-Website wählen JB Dann muss ich weitere Informationen bereitstellen, also werde ich sie hier bereitstellen, hier sind weitere Informationen und dann fügen wir die Informationen hinzu. Wir können diese Informationsanforderungen erfüllen. Hier haben wir also den Zweck, also können wir den Zweck der Website, die Zielgruppe und das Hauptziel kopieren , um die beste Schriftart zu finden. Also wähle ich zuerst, ich wähle diese Frage und dann kopiere ich sie und füge sie so ein. Drücken Sie die Eingabetaste, um ein Leerzeichen zu erstellen. Dann kopiere das auch und füge es so ein. Also lass es uns hier machen. Das. Jetzt werde ich diesen entfernen, mir drei Auswahlmöglichkeiten geben und dann versuchen, die Ausgabe zu generieren. Hier haben wir die Informationen. Für die Website von JB Family Kenic sollte die Typografie den Wert von Vertrauen, Sorgfalt und Zugänglichkeit widerspiegeln und sollte die Typografie den Wert von Vertrauen, Sorgfalt und Zugänglichkeit widerspiegeln und gleichzeitig die Professionalität wahren. Dann haben wir Primärtypen wie SunSerifFamily und die Schriftnamen Poppins und Lato Lato oder Lato . Dann haben wir den Grund und hier, wo sollen wir ihn platzieren? Wir sollten es in die Schlagzeilen bringen, damit wir es in die Unterüberschrift setzen können Dann haben wir die sekundäre Textphase, als ob Familie, dann haben wir diese beiden Schriften, aber das Problem ist, wenn wir Serifenschriften zu einem Absatz hinzufügen , kann es zu Problemen mit der Lesbarkeit kommen, also ist es immer besser, diese Schriften zu überprüfen , bevor wir sie zur Website hinzufügen Wir haben auch Akzenttypen, aber wir benötigen nur zwei Arten von Schriften, eine für Überschriften und eine für Absätze Gehen wir zu Google Fonts und überprüfen wir diese beiden Schriftarten. Auch wenn diese Schriften nicht besonders gut für die Website sind, verstehen wir, dass die SanSerif-Schrift gut für Überschriften sein wird , und hier handelt es sich um eine Serif-Schriftfamilie, aber wenn wir hier nachschauen, sind wir der Meinung, jedes einzelne Projekt Sun-Serif-Schrift hat Gehen wir jetzt zu Google Fonts. Jetzt bin ich auf phones.google.com. Hier können wir die vorgeschlagenen Schriftarten überprüfen . Kopieren wir die vier Pins und dann können wir hier direkt nach der Schrift suchen. Hier ist die Schrift mit den vier Pins Hier können wir die Größe der Überschriften festlegen. Stellen wir es auf 55 ein und hier wird es aussehen und die normale Schriftart 55 wird auf unserer Website großartig aussehen. Lassen Sie uns die von GPT vorgeschlagene Absatzschrift herausfinden , also wird es diese sein, lassen Sie uns die Schrift kopieren und hierher kommen und nach der Schrift suchen und hier wird diese Schrift sein Scrollen wir nach unten, und so sieht es aus wenn wir es als Fixer für Absatz 16 hinzufügen Wie ich bereits sagte, müssen wir über die Lesbarkeit nachdenken Wenn wir normalerweise die Serifenschrift für Absätze verwenden, ist sie für einige Benutzer nicht einfach zu lesen Einige moderne Schriftarten eignen sich jedoch am besten für Absätze benötigen sogar die Si-Schriftart Okay. Laut diesem Modus-Board die Überschrift, die Unterüberschrift und sollten die Überschrift, die Unterüberschrift und der Absatz sensorische Schriften sein Lassen Sie uns Sanserifon herausfinden, gehen Sie einfach zu Google Fonts und verwenden Sie den Filter, indem Sie auf den Filter klicken Dann scrolle hier nach unten und hier stellen wir den Font-Test ein. Wenn du darauf klickst , sehen wir uns die Schriftarten Ich mag diese Schriften, also lassen Sie uns mit der rechten Maustaste klicken und sie im Nib-Fenster öffnen , die letzteren von HG PT vorgeschlagenen Schriftarten, also lassen Sie uns sie auch öffnen und einfach nach unten scrollen und die beste Schriftart für die Website herausfinden Wenn Sie jedoch bereits ein Logo und Markenrichtlinien haben, müssen Sie diese befolgen, Schriftarten verwenden, die Ihrer Logo-Schrift ähneln, und wenn Sie die A-Schrift nicht finden können, suchen Sie einfach nach einer ähnlichen Schrift Jetzt habe ich hier drei Schriftarten gefunden , die für Überschriften geeignet sind. Lassen Sie uns jetzt nur eine davon finden, um das zu tun. Hier kann ich sie auf 60 setzen und wir werden regulär verwenden und sie wird auf der Website so aussehen. Wenn wir zu gehen, setzen wir die Größe auf 60 und wir müssen diese normale Schrift verwenden, normal oder hell, die helle Größe ist zu dünn, normal ist gut. Ich werde so aussehen und wir haben Manro, Mnro-Schrift gefunden und lassen Sie uns die Größe auf 60 erhöhen und die normale Schrift wird so aussehen Von diesen drei Schriften werde ich diese letztere als Saer-Schrift verwenden, also klicke ich auf Schrift abrufen und sie wird dem Bucket hinzugefügt Jetzt müssen wir die Schrift für Absätze finden. Ich werde diese beiden Schriftarten entfernen und beim Durchsuchen von Schriftarten wählen wir die Sensoren aus. Scrollen wir nun nach unten und sehen uns einige Schriftarten an, die wir verwenden können. Ich werde dieses Telefon öffnen und auch dieses und dieses. Scrollen wir nach unten und hier wird es im Absatztext aussehen. Wenn ich also auf dieses Thema klicke und die meiste Zeit gehe, können wir sehen, wo wir diese Schrift verwenden können. Hier ist der öffentliche Sinn eine starke natürliche Schriftphase für Benutzeroberflächen, Text und Überschrift. Wir können es als Text verwenden, das heißt Absatz, und wenn wir dann hier hingehen, nicht hier, wenn wir zu dieser Schrift gehen, schauen wir mal, ob es im Absatz so aussieht. Schauen wir uns die Details hier wir haben Details und lesen wir es so, dass es für Anzeigezwecke entworfen wurde, aber lesbar genug ist , um es auch in der ismll-Größe zu verwenden Diesen können wir im Absatz verwenden. Lassen Sie es uns hier als Medium bezeichnen. Wenn wir Medium hinzufügen, wird es viel besser aussehen. Lassen Sie uns das überprüfen und es wird im Absatz so aussehen. Schauen wir uns das Telefon an. Sagen wir, Fi Tree ist eine saubere, aber freundliche geometrische sensorische Schrift für den Einsatz im Web und im mobilen Labor. Es ist Harded und Crees haben wir für Text verwendet. Es ist klar, ich sage, wir können es für Text verwenden. Es ist perfekt für Buttons und kurze Etiketten. In Großbuchstaben ist es perfekt für Buttons und kurze Beschriftungen, und ich werde diese passende Schriftart als unsere Absatzschriften verwenden, also klicke ich auf Schriftart abrufen, und jetzt haben wir diese beiden Schriftarten, und ich werde diese Arbeit entfernen, dann, wenn ich mich erinnere, verwenden wir diese vier, verwenden wir diese vier, unseren vorherigen Lektionen etwas über Google-Schriften gelernt. Ich klicke auf Premo und hier die Schriftarten, die wir verwenden werden Jetzt müssen wir diese Schriftarten in der Figma-Datei definieren In der nächsten Lektion machen wir das 44. Was ist ein Aufkleberbogen: Hallo, alle zusammen. Lassen Sie uns über etwas wirklich Praktisches und Wichtiges für Webdesigner sprechen. Es ist Itigai. Was genau ist ein Itigahi? Stell es dir so vor. Es ist eine Sammlung von Designelementen, die Sie bei der Erstellung einer Website wiederholt verwenden werden. Diese Elemente können Schaltflächen, Symbole, Logos, Farbpaletten und sogar Schriftarten Es ist wie ein Toolkit, das Sie vorbereiten, bevor Sie Ihre Website entwerfen Nicht nur vor dem Entwerfen fügen Sie dem Itiga-Sheet weitere Elemente hinzu , während Sie die Website gestalten Warum brauchen wir das Itiga-Blatt? Nun, wenn wir Websites entwerfen, möchten wir, dass alles einheitlich aussieht , sodass auf der gesamten Website alles zusammenpasst Fangen wir also an, ein Stilset zu erstellen. Jetzt gehe ich zu unserer Figma-Datei und klicke auf Conframe und erstelle einen Frame wie diesen Lass es uns so erhöhen. Dann werde ich den Text in ein Aufkleberblatt ändern. Okay. Ich Figma, wir haben Stile und Variablen, damit wir sie für die spätere Verwendung speichern können Wir können eine Farbpalette, eine Schriftart, Schaltflächen, ein Symbol oder ähnliches auf dem Itera-Blatt erstellen Symbol oder ähnliches auf dem und sie als Variable oder Azur speichern Lass uns damit beginnen. Zuerst wählen wir unsere Schriftarten aus, ich entferne unnötige Tabs und klicke dann auf dieses Kartensymbol in Google Fonts, und hier haben wir unsere Schriftarten. Also lass uns hier klicken und ich werde T drücken und lass uns einen Abschnitt oder Test namens Typografie erstellen, ihn dann markieren und die Größe auf 60 erhöhen Okay, 60 ist zu viel, also reduzieren wir es ein bisschen wie 42, richtig Jetzt werde ich diesen Text duplizieren und ihn als Header ändern und hier können wir die Header-Typografie auswählen, die wir wählen Wir wählen Lato als Typografie für die Überschrift. Lass uns das kopieren und herkommen. Dann stelle ich es hier auf Lato ein und wählen Größe auf 60, dann machen wir es normal Jetzt werde ich den Textheader 60 ändern, 60 ist die Größe und den Schrift-Tweet regularisieren Okay. Jetzt haben wir den Kopfzeilentext und ich werde ihn duplizieren. Fügen wir dazwischen die Größe 20 hinzu. A hier, lassen Sie uns dazwischen die Größe 30 hinzufügen, und hier werde ich Absätze hinzufügen. Doppelklicken Sie tatsächlich darauf und entfernen Sie es. Dies ist das richtige Wort, und der Absatztext wird angezeigt. Lassen Sie uns den Absatztext überprüfen. Es ist Fk Tree. Wählen wir PF-Baum aus. Okay, hier haben wir die und hier, sagen wir, die Größe ist 200, und die normale Größe wird gut aussehen. Nehmen wir eine Größe dazwischen wie eine Person. Okay. Jetzt haben wir die Absatzschrift und die Header-Schrift, und lassen Sie uns das duplizieren. Lassen Sie uns das zweimal duplizieren , und hier haben wir eine Unterüberschrift und hier eine Flasche Wenn wir wollen, können wir sogar den zweiten Schrifttitel hinzufügen, aber lassen Sie uns das so hinzufügen Dann werde ich für Sub Fdding die Schriftgröße auf 30 einstellen. Okay, und machen wir es mittelgroß. Es scheint zu groß, also machen wir 25 und normal wird gut sein. Dann ändern wir es auf 25 regulär. Jetzt müssen wir die Button-Größe hinzufügen. Absatz, wir müssen das auf 20 ändern. Dann wird die Tastengröße 20 normal sein und wir legen die Groß- und Kleinschreibung auf Großbuchstaben fest. Machen wir es mittelgroß. Lass uns 20 nehmen. Jetzt werde ich die Position so ändern. Das werden die Schriften sein, die wir verwenden. Wir können dies auch besser erstellen. Das heißt, ich werde diesen kopieren und ihn als Header umbenennen und seine Größe auf 30 ändern und das hinzufügen. Dann werde ich es hier ablegen. Sag es so, dann können wir hier den Schriftnamen ändern wie lato und wir können es hier machen, das hier duplizieren und es so subdin machen, dann ändern wir hier den Subwdingo-Schriftnamen Der Name der Schrift ist Week Tree. Jetzt müssen wir uns das besorgen und es wird Knopf, Knopf sein. Dann ändern wir es hier Petree und machen das Leerzeichen zu 30 30. Und dann lassen Sie uns diesen duplizieren. Es wird ein Absatz sein, und hier wird es Abbildung drei bis regulär sein. Okay. Jetzt ist es sehr klar. Wir fügen unserem Istigast einfach Typografie hinzu und dann können wir Typografievariablen oder Stilvariablen erstellen Typografievariablen oder Stilvariablen Wählen Sie dazu den Typ für die Soße aus und klicken Sie hier. Sie dann im Popup-Fenster im Textstil Klicken Sie dann im Popup-Fenster im Textstil auf dieses Plus-Symbol Ich werde es als Header festlegen und auf Creative Style klicken. Ich werde hier klicken. Lass uns das eine B einfacher machen. Klicken Sie hier und klicken Sie auf Textstil, klicken Sie auf dieses Plus-Symbol und fügen Sie es wie folgt hinzu. Machen wir das also für zweiten Schaltflächentext und klicken wir auf Konkreter Stil, und machen wir das für den zweiten Absatztext, wie Okay. Also lasst uns diese Styles zum Text hinzufügen, also werde ich einen Test wie Hello Everyone erstellen. Wie geht es dir? Also dieser Text ist momentan unvoreingenommen, also ich klicke auf den Text hier und tippe Graphiton Ich klicke auf Apply Itis und wenn ich den Header auswähle, wird er zum Header-Text Und wenn ich auf C subbedin klicke, wird es zu subbedin geändert. Wenn ich auf Con-Tasten klicke, wird daraus Button-Text. Vorteil ist, dass wir auf der gesamten Website viel Text wie diesen haben , wir haben viele Absätze und denken, dass wir die Größe des Textes auf der gesamten Website ändern müssen . Wir können einfach auf den Text klicken , den wir im Stylesheet erstellt haben In diesem Fall handelt es sich um Absatztext, und hier können wir klicken und dann auf dieses Symbol „Stil bearbeiten“ klicken Dann können wir hier die Größe ändern. Stellen wir es auf 16 ein und drücken die Eingabetaste. Wenn ich das also auf 16 ändere, jeder Moment oder jeder Absatzstil ändert sich jeder Moment oder jeder Absatzstil , den wir der Website hinzugefügt haben. Wenn wir es auf 50 ändern, wird es auf diese Weise auf 50 geändert. Das ist der Vorteil des Hinzufügens seiner Typen und der Erstellung eines Aufkleberbogens. Stellen wir es auf zwei ein. Jetzt haben wir die Typografie für unsere Website gefunden. Ich werde dieses Aufkleberblatt so verkleinern. In der nächsten Lektion werden wir Farben für unsere Website auswählen. 45. Eine Farbpalette erstellen: Hallo, alle zusammen. Lassen Sie uns Farben für unsere Klinik-Website auswählen. Es gibt zwei Möglichkeiten, Hauptfarben oder Primärfarben für unsere Website auszuwählen . Die erste Methode besteht darin, den Color Emotion Guide zu verwenden und die passende Farbe zu finden. Jetzt erstellen wir eine Website für eine Klinik. Wenn wir darüber nachdenken, ein Krankenhaus zu reinigen, welche Art von Emotion wird ausgelöst Hier haben wir eine ausgeglichene Natur, friedliches Wachstum, Gesundheit, Gesundheit bedeutet Ernährung und die grüne Farbe, die mit der Gesundheit von Lebensmitteln zusammenhängt . Aber dann haben wir Vertrauen in verlässliche Stärke. Wenn wir an den Arzt denken, sollten wir ihm vertrauen können, besonders wenn wir über Familie sprechen. Vertrauen und Zuverlässigkeit sind ein Muss, Vertrauen und Zuverlässigkeit sind ein damit wir die Grundfarbe Blau wählen können Es gibt einen anderen Weg. Das heißt, wir können unser Modeboard überprüfen. Wenn wir unser Modeboard überprüfen, sehen wir deutlich, dass überall blaue Farbe sichtbar ist. Dann haben wir weiße und schwarze Farben. Die erste Methode besteht darin, den Color Emotion Guide zu verwenden, und die zweite Methode besteht darin, unser Moodboard zu überprüfen und die Farbe auszuwählen. Jetzt wählen wir unsere Farbe als Blau und dann müssen wir die Farbpalette erstellen. Um die Farbpalette zu erstellen, gehe ich zu coolers.co und klicke hier auf Generator starten und wir verwenden die Regel 60, 3010 für unsere Farbverwendung Wir benötigen nur drei Farben als Hauptfarbe, also werde ich zwei davon entfernen Jetzt haben wir drei Farben. Wählen wir unsere Primärfarbe , diese Farbe wird die blaue Farbe sein. Ich werde diese blaue Farbe etwas heller machen , und dann müssen wir zwei weitere Farben auswählen. Eine Farbe wird natürlich weiß sein und die zweite Farbe wird dunkel sein. Wenn ich eine dunkle Farbe wähle, werde ich mich nicht für zu viel Dunkelheit entscheiden. Ich werde mich für ein bisschen weniger Dunkelheit entscheiden. Jetzt haben wir gerade drei Farben für unsere Website ausgewählt. Dennoch müssen wir eine Sache tun. Das heißt, die Lesbarkeit dieser Farben überprüfen. Ich werde hier klicken und den Farbcode kopieren Dann gehe ich zu colors.adobe.com und klicke hier auf Dann gehe ich von hier aus zum Barrierefreiheitstool und wähle hier die kopierte Farbe als Testfarbe Eigentlich müssen wir das als Hintergrund festlegen und dann das Weiß als Textfarbe auswählen. Kopieren wir es von hier und legen wir Weiß als Textfarbe fest. In diesem Fall ist es blass. Auf diesem blauen Hintergrund können wir kein Weiß verwenden. Lassen Sie uns überprüfen, ob diese schwarze Farbe und die weiße Farbe dafür geeignet Ich füge diese Hintergrundfarbe als schwarze Farbe und die Testfarbe als weiß hinzu und sie alle drei Tests und lassen Sie uns Text ändern und die Hintergrundfarbe ist immer noch erfolgreich, was bedeutet, dass wir zwei Farben finden. Lassen Sie uns also diese beiden Farben sperren, und jetzt müssen wir diese blaue Farbe ändern. Machen wir es also ein bisschen dunkler und kopieren wir diese Farbe. Dann komm her und lass es uns als Textfarbe verwenden. In einem kleinen Test schlägt es also immer noch fehl. Also lass uns die Farbe ändern, aber es ist immer noch fehlgeschlagen, also müssen wir es dunkler machen. Schauen wir uns an, wie es mit diesem Farbtyp funktioniert, und kopieren wir die Farbe , die jetzt vorhanden ist, nachdem sie bestanden hat, was bedeutet, dass wir erfolgreich die Primärfarbe ausgewählt haben. Wenn diese Farbe jedoch nicht die blaue Farbe ist, die Sie mögen, können wir die Farbe von hier aus ändern und sehen , welche Art von Farbe geeignet ist. Wenn wir also die Farbe ändern, wird das Verhältnis geändert. Wenn die Zahl also größer ist , werden wir besser zugänglich sein und die Benutzer können sich das genauer ansehen. Also werde ich diese Farbe als unsere Primärfarbe wählen und jetzt haben wir drei Farben. Wählen Sie diese Farbe aus, weil es eine helle Farbe ist und wir jetzt diese drei Farben haben Gehen wir zu unserem Itagia-Blatt. Hier ist unser Itiga-Blatt und lassen Sie uns neuen Text erstellen. Lassen Sie uns diesen duplizieren und die beiden Farben ändern. Fügen wir unsere Farbpalette hinzu. Um unsere Farbpalette hinzuzufügen, klicke ich einfach auf Rechteck und lass uns ein Rechteck wie dieses erstellen. Nehmen wir 150 mal 150 und wir haben nur drei Farben. Ich werde das dreimal duplizieren. Und jetzt lasst uns diese Farben kopieren. Von hier aus klicke ich hier, um dieses Blau zu kopieren, und klicke auf das erste Rechteck und ändere die Feldfarbe in diese blaue Farbe. Dann haben wir diese weiße Farbe, kopieren sie und fügen sie so ein. Wenn wir es einfügen, ist die Farbe nicht sichtbar , da unser Hintergrund weiß ist. Wenn wir also diesen Hintergrund in eine andere Farbe ändern können , ändern wir ihn in eine grüne Farbe oder wir können den Strich für diesen Würfel oder für dieses Rechteck hinzufügen . Fügen wir Estroke hinzu, wählen Sie das Rechteck aus und klicken Sie auf Ich habe gerade den schwarzen Astro hinzugefügt, dann wählen wir hier unsere dritte Farbe aus. Kopiere das Lass uns diese Farbe damit testen. Wenn wir es testen, schlägt es immer noch fehl, was bedeutet, dass wir diese blaue Farbe nicht auf schwarzem Hintergrund verwenden können . Wir müssen es nur auf weißem Hintergrund verwenden. Kopiere es, gehe hierher und klicke hier, dann füge es als nächste Farbe hinzu. Jetzt haben wir Farben. Jetzt können wir also Stil kreieren. Klicken Sie also hier und klicken Sie auf dieses Plus-Symbol Lassen Sie uns diesen Stil auf Schwarz setzen wir auf den weißen Stil und klicken Sie hier, klicken Sie auf dieses Plus-Symbol und legen Sie diese Farbe so fest und klicken Sie dann auf diese blaue Farbe. Klicken Sie hier, klicken Sie auf das Plus-Symbol und stellen es auf Blau ein und klicken Sie auf Createtyle Okay. Jetzt haben wir unsere Farben und Typografie In der nächsten Lektion erstellen wir ein Logo für unsere Website 46. Ein Markenlogo entwerfen: Hallo, alle zusammen. Lassen Sie uns ein Logo für unsere Website erstellen. Wir haben Typografie und Farben. Lassen Sie uns nun das Logo erstellen. Der Name unserer Website ist BG Family Clinic, also werde ich ihn einfach kopieren und hierher kommen und ihn einfach hier einfügen. Dann werde ich hier einen Text erstellen, ihn voreinstellen und Text erstellen Dann füge ich diesen Text ein, dann werde ich diesen Teil der Familienklinik entfernen Eigentlich kann ich diesen entfernen. Dann werde ich diese Typografie in Header ändern. Dann werde ich auf Detach Itile klicken. Wenn ich auf Detachtyle klicke, kann ich die Typografie kann ich Hier mache ich es extra fett und lass uns die Seiten wie folgt auf 78 erhöhen Dann werde ich die Füllfarbe auf diese blaue Farbe ändern , jetzt müssen wir den Rest des Logos entwerfen. Ich werde auf T klicken, hier klicken, diesen Text eingeben, damit wir ihn kopieren und hier haben wir den Teil der Familienklinik. Jetzt werde ich hier klicken und dann auf Chad klicken. Dann werde ich den E-Stil abnehmen und ihn dann so formulieren Fügen wir einen Abstand von 20 hinzu. Dann werde ich mehr von diesem JB-Teil vergrößern. Jetzt klicke ich auf diesen Text und lass uns auf die untere Zeile klicken Eigentlich ist es okay. Erhöhen wir nun erneut diese 20 und markieren beide und klicken Sie auf Vertikale Mitte ausrichten. Jetzt werde ich die Testfarbe dieser Familienklinik in Schwarz ändern. Okay. Jetzt markiere ich diese beiden Elemente und drücke Command G, um sie zu gruppieren. Und jetzt haben wir gerade ein einfaches Logo erstellt. Wir können noch viel mehr mit diesem Logo machen, aber das ist der einfache Weg, ein Logo zu erstellen . Lassen Sie uns eine weitere Version dieses Logos erstellen. Um das zu tun, drücke ich erneut T und füge JB wie folgt Klicken Sie dann hier, legen Sie ihn als Kopfzeilentext fest und klicken Sie auf den Link, um ihn zu trennen Dann erhöhen wir die Größe auf Fettdruck Und jetzt lassen Sie uns die Größen wie 88 erhöhen, okay. Dann können wir auf T klicken und den Rest des Textes hinzufügen und wir bekommen nur den Teil mit der Familienklinik und klicken hier auf die Überschrift, dann können wir es so formulieren. Dann können wir diesen Text beliebig vergrößern. Machen wir 102 daraus und fügen wir diesen Abstand bei sechs Dann können wir die Elemente auswählen und auf den horizontalen Zeileninhalt klicken. Dann können wir so etwas machen. Dann machen wir aus dieser Familie eine blaue Farbe. Dann wählen wir diesen B-Teil und machen ihn blau. Es sieht nicht gut aus. Wenn wir wollen, können wir diesen Blow-Teil einfach in der blauen Farbe machen . Es gibt viele Möglichkeiten, wie wir dieses Logo mit einigen Linien versehen können . Vorerst wird das gut für unsere Arbeit sein. Wir können so etwas auch machen. Dann erhöhen wir auf 50, 50 ist zu viel, 15, und lassen Sie uns diese Farbe so ändern , dass wir sie tatsächlich blau machen. Wir können auch so etwas machen, aber es ist 7,5 und dann klicken wir auf Pfeil und lassen uns einen Pfeil wie diesen erstellen. Es ist kein Pfeil, es ist eine Linie, klicken Sie auf die Linie und klicken Sie erneut so, dann fügen wir diese Linie hier ein und wir müssen die Größe als eins festlegen. Wir können so etwas auch machen. Dafür gibt es viele Dinge. Es gibt viele Dinge zu tun, aber der einfachste Weg besteht darin, diese Art von Logo zu erstellen. Ich werde all diese Informationen haben. Jetzt kann ich auf dieses Logo und dann auf Port klicken. Stellen Sie dann den Dateityp auf PNG ein, erhöhen Sie die Größe auf zwei x, klicken Sie dann auf Herunterladen und es wird so heruntergeladen. Ich werde seinen Namen in JB-Logo ändern. Lassen Sie uns dieses duplizieren und es als Logo verwenden. Jetzt erstellen wir einfach ein einfaches Logo für unsere Website. 47. Was ist Figma-Komponente: Hallo, alle zusammen. In FIGMA haben wir eine Funktion namens Komponenten Komponenten sind wiederverwendbare Objekte, die uns helfen können, einheitliches Design auf der gesamten Website zu erstellen und aufrechtzuerhalten, sodass wir alle Elemente oder Elemente auf der Figma-Canvas in eine Komponente umwandeln Lassen Sie uns also Teil dieses Logos sein. Dazu wähle ich einfach das Logo aus. Wenn ich das Logo auswähle, sehe ich auf der rechten Seite das Objekt, das wir ausgewählt haben, und hier haben wir ein kleines Symbol mit der Bezeichnung Komponente erstellen. Ich tippe einfach darauf. Als ich das getan habe, wurde dieses Logo zu einer Komponente. Wenn du es in eine Komponente verwandelst, färbt sich das Highlight des Artikels indigoblau Wenn ich hier klicke, wird es als angezeigt Lassen Sie mich das Design vergrößern. Wenn ich auf ein normales Element klicke, wird es blau hervorgehoben. Wenn ich jedoch auf eine Komponente klicke, wird sie als Indigos hervorgehoben Auch im Bereich der linken Seitenebene wird angezeigt, dass es sich um eine Komponente handelt Nun, wie man diese Komponente benutzt, um das zu demonstrieren, ich werde einfach einen Frame erstellen und lassen uns einen weiteren Frame erstellen. Jetzt denke ich, dass ich dieses Logo zu diesem Rahmen hinzufügen muss , um das zu tun Wir haben eine einfache Methode, es zu verwenden, wir können zu diesem AZA-Tab auf unserer linken Seite gehen. Ich klicke einfach darauf und wenn ich darauf klicke, sehe ich vielleicht Bibliotheken hier. Wenn ich will, kann ich einfach nach dem Logo der Bibliothek suchen. Und das Logo wird angezeigt, oder wenn ich auf lokale Asserts klicke, wird das Logo hier angezeigt. Jetzt muss ich nur noch darauf klicken und auf Sofort einfügen klicken Jetzt können wir hier bearbeiten. Instanz bedeutet eine Kopie dieser Hauptkomponente Wenn ich also Änderungen an dieser Komponente vornehme, wirkt sich dies auf die Instanz dieser Komponente aus. Lassen Sie uns diesen Frame so bearbeiten, dass er einfach hier anklickt, sofort einfügen und dann füge ich ihn einfach hinzu. Okay, um die Vorteile dieser Komponente zu demonstrieren, werde ich das so duplizieren und dann auf dieses abgetrennte Instant-Symbol klicken. Wenn ich darauf klicke, wird es einfach zu einem normalen Element. Wenn ich zur Datei gehe, ist es nur ein normales Element, und jetzt duplizieren wir dieses Objekt so und so. Jetzt denke ich, dass ich diese JB-Farbe auf Rot ändern muss. Wir haben also zwei Versionen. Eine ist ein Beispiel für diese Hauptkomponente, und hier ist ein doppeltes Element dieses Logos. Also lasst uns die Farbe ändern. Hier wähle ich den Text und lasse uns diese Farbe wie Rot ändern. Ich klicke hier auf Stil entfernen und ändere diese Farbe in Rot Wenn ich diese Farbe ändere, wirkt sich das auf die Instanz dieser Hauptkomponente Wenn ich das also eins gegen eins ändere, wird es sich so ändern. Aber wenn Sie dieses normale Logo duplizieren und Änderungen an diesem Eins-zu-Eins-Logo vornehmen, wird diese Ansicht besser. Okay. Wenn wir nun Änderungen an diesem Logo vornehmen, hat dies keine Auswirkungen auf unsere doppelten Logos. Sie sehen, das ist der Vorteil einer Komponente. Jetzt entferne ich einfach alle und klicke hier, lass uns die Änderungen entfernen und hier, lass uns die Farbe auf Blau setzen. Auf unserer Website werden wir 45 Seiten erstellen. In diesem Fall können wir also eine Instanz dieser Komponente erstellen. Da wir die Details dieses Augenblicks ändern können. Wenn ich hier zum Beispiel eins gegen eins ändere, keinen Einfluss auf die Hauptkomponente, aber wenn ich die Farbe ändere, wird es trotzdem die Farbe dieser Instanz ändern und wenn ich hier, zwei, ändere, hat das keinen Einfluss auf diese bearbeitete Instanz weil wir sie bearbeiten und versuchen, die Farbe zu ändern. Lassen Sie uns die Farbe auf Blau ändern. Die Farbe wird sich trotzdem ändern, ich werde den Text nicht ändern, da wir den Text dieser Instanz ändern. Dies ist der Vorteil der Verwendungskomponente. In Zukunft werden wir mehr Komponenten verwenden und Sie werden mehr über Komponenten erfahren, siehe in der nächsten Lektion. 48. Mehr über Komponenten mit Schaltflächen (bei Kleidung, nicht bei UI) erfahren: Okay. Versuchen wir nun, Komponenten mit Button zu erstellen. Um das zu tun, werde ich einen neuen Rahmen erstellen und ihn als Desktop-Rahmen festlegen. Okay. Jetzt werde ich hier einen Button erstellen. Um eine Schaltfläche zu erstellen, drücke ich auf T und lasse uns den Namen der Schaltfläche als Schaltfläche festlegen. Name oder wir können einfach Label sagen. Dann erhöhe ich die Größe auf etwa 20, und lass uns die Schrift auf Railway ändern und hier klicken, dann machen wir Großbuchstaben ändern dann Regular zu Semi Bool Okay, jetzt drücke ich Shift A, um ein Layout zu erstellen oder dieser Schaltfläche ein automatisches Layout hinzuzufügen , und ich stelle 30 als horizontalen Abstand und 20 als Jetzt ändere ich die Füllfarbe auf, lassen Sie uns sie in eine grüne Farbe ändern, wie hier mit dunklerem Wie diese Farbe, dann füge ich Ecken wie 30 hinzu, lassen Sie uns sechs daraus machen. Okay. Jetzt ändere ich diese Textfarbe, lassen Sie uns sie auf Y ändern. Jetzt müssen wir die Hintergrundfarbe etwas dunkler machen Hintergrundfarbe etwas dunkler Jetzt haben wir diesen Rahmen, also werde ich ihn als Schaltfläche umbenennen. Dann klicke ich auf diese Komponente erstellen und ändere diese Schaltfläche in eine Komponente Okay. Wie wir bereits gelernt haben, können wir diese Schaltfläche jetzt wiederholt an anderen Stellen hinzufügen. Lass es uns tun. Ich gehe zu Asserts und klicke auf die Earl-Komponente Hier haben wir die Schaltfläche, dann klicke ich auf Insert Instance Okay, hier haben wir die Schaltfläche, und hier werde ich diesen Text ändern, um mehr über mich zu erfahren. Okay. Wenn ich dann diese Textfarbe in Grau ändere, wird sie in Grau geändert. Wenn ich zum Beispiel solche Änderungen vornehme, ändert sich das auf unsere Instanz weil das unsere Hauptkomponente ist, und hier ist die Instanz dieser Komponente, was bedeutet, dass wir, wenn wir mehr Instanzen bewerten und erstellen, sie überall hinzufügen können, indem wir den Text ändern, klicken und wir können diese Art von Schaltfläche überall im Design hinzufügen. Außerdem können wir diese Instanz immer noch so duplizieren und die Änderungen, die wir vornehmen, auf die Hauptkomponente anwenden. In der Hauptkomponente können wir eine Variante erstellen. Variante bedeutet eine andere Version dieser Schaltfläche. Nennen wir diese Schaltfläche als Beispiel die primäre Schaltfläche. Diese ist eine primäre Taste und ich denke, wir brauchen eine sekundäre Taste. Und diese Tastenform ist dieselbe. Nur, dass es keine grüne Feldfarbe haben wird. Stattdessen wird es einen grünen Rand haben, und dieser Text wird auch grün sein. Dazu können wir unsere Hauptkomponente auswählen Wenn ich auf „Auswählen“ klicke, wird dieses kleine Plussymbol angezeigt, und es heißt Advarian. Wenn ich auf Con klicke, wird eine doppelte Version dieser Schaltfläche erstellt Dann wird das Design dieser Schaltfläche geändert. Lass uns einen Strich hinzufügen. Ich drücke einfach hier und lass uns einen Strich mit dieser Farbe hinzufügen und dann machen wir es auch. Jetzt werde ich diese Füllfarbe ändern oder diese Füllfarbe entfernen. Das, dann werde ich die Textfarbe dieser Schaltfläche ändern. Lassen Sie uns die Textfarbe auf die gleiche Farbe dieses Hintergrunds ändern und es ist wenig hell. Machen wir es dunkler und fügen wir diese Rahmenfarbe zu Okay hinzu, jetzt haben wir die primäre Schaltfläche und die sekundäre Schaltfläche. Also lasst uns sie umbenennen. Also klicke ich auf diese Schaltfläche, und hier werde ich sie als sekundäre sekundäre Schaltfläche bezeichnen. Okay. Wenn ich es ändere und die Mitteltaste drücke, wird die Sekundärtaste aufgerufen, und hier haben wir die Haupttaste. Ich habe die Standardtaste aufgerufen, wir können diese Standardtaste auf die Primärtaste ändern . Okay. In Ordnung. Jetzt haben wir zwei Versionen dieser Schaltfläche und wir können viele Versionen erstellen, wie wir wollen. Okay, lassen Sie uns vorerst diese Variante in unserem Frame verwenden. Um das zu tun, gehe ich zu Assets und hier zu unserem Button. Wenn ich klicke, sehen wir zwei, ich meine, es gibt zwei Varianten. Also drücke ich einfach darauf und von hier aus kann ich den gewünschten Tastentyp auswählen. Also werde ich auf sekundäre Schaltfläche klicken und dann auf Sofort einfügen klicken. Also hier ist es, und jetzt können wir diesen Namen ändern, an einem schönen Ort wie diesem. Und jetzt überlege, ob wir das zu einem Hauptknopf machen wollen. Gehen wir also davon aus, dass wir hier mehr erfahren müssen. Hier haben wir die Schaltfläche „Ich lernen“ und die Schaltfläche „Standort suchen“. Das ist die primäre Taste, und das ist die sekundäre Taste, und ich möchte sie zur primären Taste machen . Um das zu tun, klicke ich auf die Schaltfläche, und hier haben wir die erste Eigenschaft, ich klicke einfach so und klicke auf die primäre Schaltfläche. Es ändert sich einfach und ich erhalte alle Details dieser Komponente. Die primären Tastendaten. Wenn ich das dann zweitrangig machen möchte, kann ich einfach hier klicken und auf sekundäre Schaltfläche klicken, und wir können das mit jeder dieser Schaltflächen machen. Das ist der Vorteil, wenn man die Komponente kennt und weiß, wie man eine Variante hinzufügt. Lassen Sie uns auch eine weitere Variante erstellen. Ich drücke einfach Klasse und für diesen ändern wir die Details, lassen Sie uns zuerst das Feld entfernen und keinen Typrahmen erstellen, und lassen Sie uns diese Textfarbe in diese Farbe ändern. Dann fügen wir hier das Symbol hinzu. Fügen wir das Symbol hier hinzu. Um das zu tun, gehe ich zu Flossen und von hier aus holen wir uns das Symbol. Also werde ich das Symbol vom Plug In bekommen. Also suche ich einfach hier nach der Schriftart Osome, wir haben Fontosom-Symbole Ich klicke einfach darauf und von hier aus, lass uns das Symbol holen, lass uns das Symbol holen Ein Pfeil. Wählen wir diesen Pfeiltyp aus. Jetzt wähle ich einfach den Pfeil und drücke Command X und schneide ihn aus. Wenn Sie ein Windows-Benutzer sind, können Sie Strg X drücken und ich dann Befehl V. In Ihrem Fall ist es Strg V. Dann haben wir ein Design wie dieses. Ich klicke darauf und ich werde es so vergrößern. brauche diesen Pfeil nicht mehr, ALT-Kreis, lösche ihn einfach. Okay. Jetzt hier, ich werde auf dieses Logo klicken und das Logo in diese Farbe ändern. Okay. Jetzt klicke ich auf diese Variante und hier kann ich zwischen den Größen wechseln. Lass es uns so machen wie Okay. Jetzt kann ich das zu unserem Design hinzufügen. Bevor wir es hinzufügen, benennen wir diese Schaltfläche um, indem wir einfach auf die Schaltfläche klicken, auf die Schaltfläche klicken und sie in primäre sekundäre einfache Schaltfläche, einfache Schaltfläche ändern . Der Name ist nicht wichtig. Okay. Jetzt kann ich auch diesen Button hinzufügen. Wenn ich also zu AZAS gehe, hier und hier klicke, die Eigenschaft auf einfache Schaltfläche ändere und auf Instanz einfügen klicke, fügen wir hinzu, dass wir diese Schaltfläche wie folgt hinzufügen können Ich gehe zu Fs. Und jetzt fügen wir all diese Schaltflächen wie folgt in den Desktop-Rahmen ein. Okay. Jetzt hier, ich kann den Text ändern. Lassen Sie uns das ändern, um mit dem nächsten Schritt wie diesem fortzufahren. Wenn wir wollen, können wir jetzt einfach auf die Schaltfläche klicken und das Design so ändern. Siehst du, das ist wichtig, wenn man etwas über Komponenten weiß und eine Vorstellung von Varianten hat. Es wird uns helfen, die Konsistenz auf der gesamten Website aufrechtzuerhalten . 49. Inhalte für das Website-Design finden: Hallo, alle zusammen. Wenn der Kunde keine Text - oder Bildinhalte bereitstellt, müssen wir sie finden. Lassen Sie uns zunächst sehen, wie Sie Bildinhalte finden. Dazu können wir kostenlose Websites mit historischen Bildern wie pixadt com oder pixabay.com verwenden kostenlose Websites mit historischen Bildern wie pixadt com oder pixabay.com Diese Bilder sind lizenzfrei, was bedeutet, dass wir sie für unsere Produkte verwenden können In unserem Fall müssen wir Bilder finden, die sich auf die Familienklinik beziehen Ich werde einfach so etwas wie eine Familienklinik suchen, und hier sind die Bilder, die wir bekommen haben. Ich klicke auf diese Filter und stelle sie hier als horizontal ein. Dann können wir nur die horizontalen Bilder filtern. Ich werde einfach einige dieser Bilder auswählen, also öffne ich sie einfach in einem neuen Fenster. Lass uns dieses öffnen. Jetzt gehe ich auf pixabay.com und lass uns so etwas wie Doctor Presenter suchen Ich werde hier nur filtern , also suche und finde Bilder wie Ich habe bereits die Bilder ausgewählt, die wir Fertigstellung dieses Projekts benötigen wenn Sie echte Projekte entwerfen. Suchen Sie einfach nach Bildern, die sich auf Ihre Website-Nische beziehen. Lassen Sie uns nun sehen, wie man Inhalte generiert. Um Inhalte zu generieren, können wir GPT oder J Mini verwenden. Lass uns GPT verwenden. Ich kopiere einfach unsere und lass uns diese Eingabeaufforderung ausfüllen. Also hier sind Sie ein Webdesigner und werden die Website für die JB Family Clinic entwerfen Gehen wir also zu unseren Anforderungen an das Webdesign, kopieren wir diesen Namen, und dann möchte ich, dass Sie hierher kommen, wir müssen die Aufgabe hinzufügen Ich möchte, dass Sie Inhalte für jeden Bereich der Website generieren . Ich gebe dir den Namen des Abschnitts und du musst Inhalte generieren. Dann können wir hier im Abschnitt mit weiteren Informationen alle Details hinzufügen, die wir in der Tabelle mit den Webdesign-Anforderungen gesammelt haben . Fangen wir also von hier an, kopieren wir diesen und lassen Sie uns dem ins Auge sehen, dann gehen wir hier weiter und lassen es so hinter sich. Ein hier wie dieses, dann geh hier hin so. Das sind die Informationen , die wir zur Verfügung stellen können. Okay, dann geben wir mir drei Möglichkeiten. Wir müssen das ändern, weil wir es nicht an die Sektion geschickt haben , für die wir Inhalte haben wollen Also können wir Ihnen drei Optionen für jeden Abschnitt geben, wenn ich Ihnen den Abschnitt gebe und vorstelle, sagen wir, ich bin bereit, bei der Erstellung von Inhalten für jeden Bereich der Kenic-Website der BG Family zu helfen jeden Bereich der Kenic-Website der BG Family Okay, jetzt muss ich nur noch den Abschnitt hinzufügen, ich werde einen Abschnitt wie die Startseite hinzufügen hier haben wir den Heldenbereich Okay, wir haben Überschrift, Unterüberschrift und Aufruf zum Handeln. Wenn dieser Abschnitt dann nicht geeignet ist, können wir darüber berichten. Ich kann sagen, ich mag Option auch, aber Unterüberschrift und CTA bedeuten Aufruf zum Handeln Der Text auf der Schaltfläche ist zu lang. Kannst du es ihnen zeigen? Jetzt sage ich, es ist zu kurz. Dann kann ich sagen, dass es immer noch zu kurz ist. Und du kannst mir nur 150 Zeichen als Unterüberschrift geben. Hier haben wir die Unterüberschrift , die 150 Zeichen hat. Halten Sie die Konversation mit CGBD so aufrecht und generieren Sie Lesen Sie jedoch immer den von KI generierten Text, bevor Sie ihn zu Ihrer Website hinzufügen Okay. Jetzt werde ich Sie in echtem Webdesign sehen und Sie können all diese Schriftarten und Bilder aus dem Ressourcenbereich abrufen . 50. Design-Helden-Abschnitt: Hallo, alle zusammen. Es ist Zeit , unsere Website zu gestalten. Beginnen wir also mit der Erstellung des Rahmens. Ich werde hier einen Rahmen erstellen, also klicken Sie auf den Rahmen und dann hier, wählen wir den Rahmen in Desktop-Größe aus. Okay. Nun müssen wir laut unserer Sitemap zuerst die Startseite erstellen. Also werde ich es in Home umbenennen. Dann werde ich diese Webseitenstruktur hierher bringen, damit wir diese beiden Frames deutlich sehen können. Okay. Jetzt füge ich diesem Rahmen ein Layoutraster hinzu. Um das zu tun, klicke ich auf dieses Plus-Symbol und dann hier, ändere dann das Raster Spalte und die Spaltenanzahl wird 12 sein. Und dann behalten wir diese Farbe. Und hier müssen wir Marge hinzufügen. Fügen wir den Rand als 140 hinzu. Die Daten werden 20 sein. Okay. Lassen Sie uns nun die Deckkraft dieser Layoutraster wie folgt verringern die Deckkraft dieser Layoutraster wie folgt Wenn ich will, kann ich es jetzt speichern. Ich klicke einfach hier, wende den Stil an und ich klicke auf diesen kreativen Stil und lass uns daraus ein Anruf-Grid und eine Präsentation machen. Jetzt können wir diese Grid-Daten immer wieder verwenden. Als ersten Schritt müssen wir diesen Frame in ein AutoAyouTo konvertieren. Zu diesem Frame müssen wir ein automatisches Layout hinzufügen Dazu kann ich mit der rechten Maustaste klicken und hier auf OtoAyouto hinzufügen klicken. Ich kann auf den Rahmen klicken und Shift A drücken. Wenn ich Shift A drücke, wird das automatische Layout hinzugefügt. Dann müssen wir es hier als vertikales Layout festlegen, weil wir die Website von oben nach unten gestalten werden Website von oben nach unten gestalten Dann mache ich für diese vertikale Lücke zwischen Objekten eins zu 20, was bedeutet, dass wir einen Abstand zwischen zwei Abschnitten als 120 haben werden . Dann ist das horizontale Muster 140, was bedeutet, dass Inhalte nur innerhalb dieses Abschnitts verfügbar sind. Fügen wir den Rand für die Polsterung am oberen Ende als 20 hinzu. Okay. Jetzt ist es fertig. Zuerst werde ich dieses Design einfach vergrößern und dem Heldenbereich ein Hintergrundbild hinzufügen. Lass uns ein rotes Dreieck erstellen, ich drücke auf das rote Dreieck, klicke so, dann klicke ich auf dieses IgnooToAyout, weil wir ein Hintergrundbild hinzufügen werden Also mache ich jetzt WTs 1.440 und lass uns Höhen 800 machen. Okay. Lass uns das so formulieren. Jetzt füge ich das Bild hinzu, um das Bild hinzuzufügen. Ich klicke hier, klicke auf diesen kleinen Abwärtspfeil auf den geformten Zehen und klicke auf Bildvideo. Von hier aus wähle ich Bild 04 und klicke auf Öffnen. Und jetzt klicke ich auf das Rechteck und das Bild wird so hinzugefügt. Wenn ich will, kann ich jetzt den Zuschnitt einstellen und die Position anpassen. Also lass es uns so anpassen. Okay. Lassen Sie uns das jetzt im Vorschaumodus überprüfen, damit es so aussieht. Als nächsten Schritt müssen wir eine Overlay-Farbe hinzufügen Ohne das Hinzufügen einer Overlay-Farbe können wir keinen Text hinzufügen, können wir keinen Text hinzufügen da dies die Lesbarkeit der Startseite beeinträchtigt Um ein Overlay hinzuzufügen, können wir einfach auf diese Füllung und dann auf AddFll klicken . Hier können wir die Deckkraft Ich werde den Farbverlauf hinzufügen . Strahlend bedeutet, dass wir auf der einen Seite dunklere und auf der anderen Seite hellere Farben hinzufügen können. Also lass es uns tun. Also wird der Strahlungstyp linear sein. Wir können die Position so ändern. Für diesen werde ich also die helle Farbe oben und die dunkle Farbe unten einstellen . Also lass uns hier klicken. Also hier ist die Lichtfarbe. Stellen wir es auf 70 ein, und hier haben wir die dunkle Farbe. Also müssen wir die dunkle Farbe erhöhen. Oh, und von hier aus werde ich 100 machen. Dann können wir diese Farben anpassen. oben Lassen Sie uns oben hell sein, fügen wir etwa 25 hinzu und hier machen wir es etwa 80. Ja. Und wenn ich will, kann ich es so machen. Also lass uns noch ein bisschen mehr erhöhen. Okay. Jetzt wird es so aussehen. Also fügen wir einfach einen linearen Farbverlauf hinzu und wenn wir wollen, können wir diese Deckkraft auf runter ändern und es so heller machen Lass es uns wie bei machen. Klicken wir auf dieses I, um die Höhe unseres Layoutrasters zu erhöhen, und es wird so aussehen. Jetzt ist unser Hintergrund in Ordnung, als nächsten Schritt müssen wir den Inhalt hinzufügen. Also lass uns das in der nächsten Lektion machen. 51. Designmenü: Hallo, alle zusammen. Es ist Zeit, das Menü zu erstellen. Bevor ich das Menü erstelle, erstellen wir einen Rahmen für unseren gesamten Heldenbereich. Um das zu tun, klicke ich einfach auf Frame und dann hier. Okay. Dann setze ich die Breite als Füllcontainer und lass uns die Höhe auf 800 setzen weil 800 die Höhe dieses Hintergrunds ist. Jetzt ist dieser Rahmen größer als der Hintergrund. Um das Problem zu beheben, denken Sie daran, dass wir 20 hinzugefügt haben, wir 20 hinzugefügt haben den Rahmen auf unserem Home-Frame vertikal auszurichten? Also setzen wir es auf Null. Wenn ich es auf Null setze, passt dieser Rahmen einfach zum Hintergrund. Jetzt werde ich diesen Namen als Held ändern. Okay. Dann füge ich diesem Heldenrahmen ein automatisches Layout hinzu, wähle den Rahmen aus und drücke Shift A, und für das Layout ich das vertikale Layout fest und wähle als Position die Option „ Oben mittig ausrichten “ aus, damit wir das später ändern können. Dann entferne ich die horizontale Polsterung und setze sie auf Null. Dann klicken wir auf individuelles Fading. Ikone. Dann stellen wir es hier wie für den Boden ein, lassen Sie uns es auf Null setzen. Ordnung. Jetzt ist es an der Zeit , das Menü zu erstellen. Ich werde diese Art von Menü nicht erstellen. Ich werde ein anderes Menü erstellen. Also lass uns damit beginnen. das Menü zu erstellen, klicke ich zunächst auf Frame und dann hier. Dann lege ich mit einem Füllbehälter und lass uns auf Füllen klicken und Füllfarbe hinzufügen. Fügen wir Farbe als Weiß hinzu, aber sie wurde nicht angezeigt, weil wir dieses Bild so über dem Heldenbereich platzieren müssen. Okay, jetzt wird es angezeigt. Jetzt klicke ich auf den Rahmen und lass uns die Höhe auf 130 einstellen Okay, viel besser. Wir können diese Größen ändern , während sie entwerfen. Dann füge ich Ecke als 20 hinzu. Okay. Jetzt werden wir in diesem Frame unser Menü erstellen und es wird viel besser aussehen als dieses normale Menü, also lasst uns es erstellen. Zuerst klicke ich auf den Rahmen und drücke Shift A um ihn in ein automatisches Layout umzuwandeln oder dem Menü ein automatisches Layout hinzuzufügen. Dann tippe ich zweimal auf den Rahmen und ändere seinen Namen in Hauptmenü. Okay. Lassen Sie uns jetzt die Eigenschaften ändern. Wir benötigen ein horizontales Layout weil wir ein Menü von links nach rechts wie dieses Menü erstellen werden rechts wie dieses Menü sodass wir keine horizontale Polsterung benötigen, es auf Null setzen und wir keine vertikale Polsterung benötigen, um sie auf Null zu setzen Lassen Sie uns dann vorerst den horizontalen Abstand zwischen Objekten auf zehn belassen horizontalen Abstand zwischen Objekten Dann werde ich eine Linie links in der Mitte setzen. Dann fügen wir unser Logo hinzu. Haben Sie sich an die Lektion „ Komponenten“ erinnert ? Wir konvertieren dieses Logo in eine Komponente. können wir direkt auf dieses Logo zugreifen und eine Instanz davon erstellen Assert-Tab können wir direkt auf dieses Logo zugreifen und eine Instanz davon erstellen. Ich klicke auf ASEs und hier auf Local Asserts und hier auf unser Logo Ich klicke einfach darauf und klicke auf Insert Instant und dann werde ich es so platzieren Lass uns zu den Dateien gehen. Jetzt befindet sich diese Instanz oder dieses Logo außerhalb unseres Rahmens. Fügen wir es in dieses Hauptmenü ein, Fügen wir es in indem wir es wie Okay ziehen Jetzt ist es größer, also müssen wir ändern , um die Größe zu ändern Wir können das Aufkleberblatt überprüfen. Lassen Sie uns tatsächlich Command X oder Control X drücken , um es auszuschneiden, und lassen Sie es uns hier so platzieren. Dann ziehe ich es einfach hierher. Dann können wir die Größe dieses Textes verringern. Es ist 84, also lassen Sie uns es so verringern und vergrößern. Lass uns 40 55 und wir müssen diese Textgröße wie folgt ändern. Lass uns 42 draus machen. Was wir jetzt tun müssen, ist diese Zwischengröße zu ändern. Lassen Sie uns das wie sechs ändern und als Nächstes ändern wir das damit. Dann lass uns das ändern. Drücken wir Befehl oder Ctrl, ändern dann die Größe auf diese Weise und platzieren sie in der Mitte, wählen diese beiden Texte aus und machen wir sie zentriert und hier sind sie in der Mitte. Das Logo ist noch größer. Ich? Lassen Sie uns das Logo im aktuellen Modus überprüfen. Es ist immer noch ein bisschen größer, lassen Sie uns zuerst die Größe verringern, lassen Sie uns diesen Text auf etwa 50 erhöhen. Okay. Dann ändern wir das auf 35. Sagen wir es wie 36. Okay. Jetzt hier, klicken Sie auf die Mitte. Lass es uns auf Null ändern, so. Und dann klicke ich auf die Hauptkomponente und drücke Befehl. Wenn Sie Windows verwenden, drücken Sie die Strg-Taste und verringern Sie die Größe wie folgt. Okay. Jetzt wird die Nu klein. Der Grund dafür ist, dass sie automatisch auf Umarmung eingestellt ist, also ändere diese Seite einfach auf 120 Ich denke, wir fügen es als eins zu 20 hinzu. Mal sehen, 120 wären perfekt. Und jetzt werde ich dieses Logo wieder auf den Sternsitz setzen. Ich wähle es einfach aus und drücke Command X in Windows Control X, dann komm einfach her und füge es so ein und füge es so ein. Okay. Jetzt gehen wir wieder zum Menü und klicken auf den Menürahmen, und jetzt fügen wir horizontale Paddins Jetzt passt es perfekt. Lass es uns im Design sehen und es wird so aussehen. Wenn wir wollen, können wir das Logo vergrößern, aber das sieht besser aus. Jetzt müssen wir Menüelemente hinzufügen, um Menüelemente hinzuzufügen Wir können auf T klicken und so klicken. Dann füge ich einfach Text wie diesen hinzu und dann gehen wir zu unserer Sitemap. Es geht zuerst darum, den Text zu kopieren und hier zu klicken. Ich habe die Eigenschaften dieses Textes erhalten , während wir ihn kopieren. Also ist Ipress Control so eingestellt, dass die Änderung rückgängig gemacht wird und ich gebe einfach B Wood Und dann klicke ich auf diesen Text und hier, klicke auf Typografie und lass uns auf die Schaltflächen klicken Okay. Also, was ich tun werde, ist, das zu duplizieren, ein-, zwei-, drei-, dreimal. Also lass es uns duplizieren. Control C, Control V. Oh, komm schon, das gefällt uns. Dann fügen wir die anderen Texte hinzu. Wir haben Blöcke, also klicken Sie einfach hier und fügen Sie Block hinzu. Dann haben wir unsere Anbieter. Gehen wir also hierher und fügen unsere Anbieter hinzu. Mal sehen, ob der Text korrekt ist oder nicht, indem wir ihn zur URL-Leiste von Google Chrome Dann müssen wir Kontakt hinzufügen. Lass uns Kontakt hinzufügen. Okay. Inhalt. In Ordnung, nett. Jetzt müssen wir all diese Menüelemente auswählen und Shift A drücken, um einen AutoLayoutFrame zu erstellen Jetzt ist hier dieser Rahmen, also werde ich ihn in Menüelemente umbenennen und Okay. Gehen wir nun zur automatischen Layout-Einstellung des neuen Elements, also geben wir 20 zwischen den Seiten ein, und wir setzen all diese horizontalen Lücken und vertikalen Lücken Es scheint, dass es perfekt in der Mitte ausgerichtet ist. Okay. Also vergessen wir das Zuhause. Warum haben wir das Zuhause vergessen? Duplizieren wir „about“ und ändern wir es in Home. Okay. Jetzt ändere ich diese Home-Fill-Farbe in blaue Farbe. Okay, was wir jetzt hinzufügen müssen, sind Kontaktdaten der Klinik. Also möchte ich hier die Kontaktnummer hinzufügen. Also lassen Sie uns diese Details hinzufügen. Lassen Sie uns zunächst auf den Hauptmenürahmen klicken und im automatischen Layout zwischen Größen wie 60 hinzufügen. Okay. Jetzt wird es so aussehen. Dann überprüfe ich das Design von hier aus, aber wir können es besser machen. Also werden wir wahrscheinlich in der nächsten Lektion mehr Dinge tun. Bevor ich gehe, klicken wir auf diesen Home-Frame. Erinnern Sie sich daran, wann wir das Layoutraster das letzte Mal ausgeblendet haben? Klicken Sie auf dieses Einblendensymbol, um es wieder sichtbar zu machen. Okay. Jetzt wird es so aussehen. 52. Design-Call-Element: Hallo, alle zusammen. Jetzt ist es an der Zeit, hier eine Kontaktnummer für uns zu erstellen. Dazu müssen wir eine gefälschte Kontaktnummer generieren. Ich gehe zu GPT und füge Befehle wie „Eine gefälschte US-Kontaktnummer erstellen und „Geben Sie sie zum Hinzufügen“ auf der rechten Seite des Menüs Geben Sie also Klartext ein , um das Geschenk hinzuzufügen. Okay, das sieht gut aus, aber ich brauche keine verfügbare Zeit. Ich muss nur eine Anruftextnachricht hinzufügen. Ich werde einen Befehl hinzufügen, z. B. Ich brauche keine offene Kontaktnummer mit dem Typ CTA, nimmt CDM in Call to Mal sehen, es ist so, aber das gefällt mir immer noch nicht Ich werde sagen, dass ich uns nicht gerne rund um die Uhr anrufen und die Kontaktnummer unten hinzufügen würde, aber uns zwei, vier, sieben anzurufen , muss besser sein. Lass uns sehen. Okay, jederzeit erreichbar. Sagen wir, geben Sie mir drei Vorschläge. Keine Kurzversion. Okay, fügen wir das hinzu, rufen Sie uns rund um die Uhr an und fügen Sie dann die Nummer hinzu. Um das zu tun, gehe ich zum Home-Frame und hier ist der Ort , an dem wir es hinzufügen möchten. Also werde ich T drücken und hier klicken. Dann werde ich den Text hinzufügen. Lass es uns kopieren. Hier ist der erste Text. Ich füge es einfach ein und lass uns Command C und Command V dazu zwingen und dann diesen Text so übergeben Jetzt werde ich bei Style zuerst hier klicken und die Typografie ändern Lassen Sie uns die Subhding-Typografie einstellen. Dann lassen Sie uns das hier wie Subding-Typografie einstellen. Dann wähle ich immer diese beiden Elemente aus und drücke Shift A, um sie zum automatischen Layout hinzuzufügen Dann ändern wir die Position in ein vertikales Layout. Dann lassen Sie uns die sechs Seiten dazwischen legen. Okay. Also hier, ich möchte, dass diese Klasse etwas kleiner ist und diese Zahl größer sein sollte. Ich klicke auf Conc las 247 und lasse es uns auf die Schaltflächengröße ändern. Das ist besser. Dann werde ich hier klicken und den Stil dieser Typografie von der Zahl trennen, dann lassen wir sie fett formatieren Jetzt ist es viel besser. Jetzt brauche ich hier das Telefonsymbol. Lass uns das auch machen. Um es hinzuzufügen, benötigen wir ein Symbol. Holen wir uns das Symbol aus der Figma-Bibliothek. Hier drin haben wir Aktionen. Ich klicke einfach darauf und von hier aus klicke ich auf Plug-In und Widget. Und von hier aus können wir das Pontosom-Symbol bekommen. Ich suche einfach nach Fontsom Jetzt klicke ich einfach auf dieses Pontosom-Symbol und ich glaube, ich habe es bereits installiert, ich habe es bereits installiert Jetzt klicke ich einfach auf dieses Pontosom-Symbol und ich glaube, ich habe es bereits installiert, ich habe es bereits installiert. Also lasst uns das Symbol herausfinden und es hinzufügen. Holen wir uns den Icon-Code. Lass uns wie ein Telefon suchen. Okay. Wir haben eine Ikone. Ich klicke einfach auf dieses und es wird so hinzugefügt, dann wähle ich nur das Symbol und füge es so in unseren Rahmen ein. Okay. Dann wähle ich diese beiden Elemente aus und Shift A, um verschiedene Frames zu erstellen. Hier ist der erste Frame , den wir für den Zahlenbereich oder den Schriftbereich erstellt haben , und hier ist der zweite Frame. Im zweiten Rahmen oder im zweiten Noto-Layout haben wir Claus 247 und diese Kontaktnummer. Dann wähle ich den ersten Rahmen und ändere das Layout in ein horizontales Layout Dann werden wir diese Art von Ergebnis erhalten. Okay. Jetzt möchte ich einen blauen Hintergrund um dieses Symbol herum erstellen. Dazu wähle ich das Symbol aus und drücke Shift A und mache es zu Atayou, dann klicke ich auf Align Center Zuerst fügen wir das Outlayou hinzu, dann machen wir daraus eine Linienmitte. Dann klicke ich auf das Plus-Symbol in der Feldfarbe. Dann kann ich hier tatsächlich direkt auf diesen blauen Stil wie diesen klicken. Dann werde ich 20 hinzufügen, so wie hier. Jetzt hat es sich nicht entsprechend den Änderungen geändert, um das Problem zu beheben. Ich werde es ändern, um den Inhalt zu umarmen Jetzt machen wir es um zwei. Zwei kleine. Machen wir es 15 mal 15. Jetzt werde ich die Ecken auf 20 ändern. Es ist eigentlich immer noch klein, aber wir können es vielleicht reparieren Dann füge ich dieser automatischen Layoutebene einen Strich hinzu , um das zu tun. Jetzt klicke ich auf das automatische Layout, klicke auf dieses Plus, ich kann und hier wählen wir unsere Farbe als Blau aus. Dann klicke ich auf diesen abgetrennten Stil und wähle von hier aus die hellblaue Farbe Das wird funktionieren. Dann erhöhe ich die Größe auf etwa zehn und lass es uns nach draußen stellen, lassen wir es tatsächlich drinnen und wir werden das Design weiter ändern. Okay. Jetzt gehe ich in den Rahmen und wähle den Vektor aus. Dann werde ich diese Vektorgröße auf 41 mal 41 erhöhen. Es ist 41 mal 40. Es ist okay. Jetzt klicke ich auf den Vektor und ändere seine Füllfarbe in weiße Farbe. Jetzt ändern wir es auf 30 32 mal 32. So wie das hier. Wenn wir das 32 machen. So wie das hier. Jetzt ist es viel besser und ich hoffe, wir haben den E-Raum. Hier haben wir sechs als Abstand. Lassen Sie uns nun das Alignu korrigieren , denn das bezieht sich auf diesen Rahmen Um das Problem zu beheben, müssen wir nur auf dieses Hauptmenü klicken und diesen 62 Auto Presenter ändern diesen 62 Auto Presenter Jetzt passt er sich einfach an den vorhandenen Speicherplatz Okay. Jetzt haben wir ein vollständiges Menü wie dieses, sodass wir auf den Hauptmenürahmen klicken und nach links und rechts wechseln können, sodass wir sechs daraus machen können. Okay. Lass uns sehen. Es sind etwa zwei weniger. Machen wir 50 draus. Okay. Nun, hier ist unsere Speisekarte. Es sieht aus, als wären es zwei kompakte. Also lassen Sie uns das zuerst korrigieren, wir können die Größe dieser Schrift auf etwa 20 reduzieren, dann ändern wir diese Einstellung auf 15, 60, dann klicken wir auf den Menüpunkt und lassen Sie uns 60, dann klicken wir auf dazwischen Größe 30 machen. Lass uns sehen. Jetzt ist es viel besser und wir sehen uns in der nächsten Lektion. 53. Design-Heldenabschnitt CTA: Hallo, alle zusammen. Jetzt ist es an der Zeit, diesen Abschnitt zu erstellen. Lass uns damit beginnen. Zuerst gehe ich hierher und klicke auf Text und füge hier einfach Text hinzu, also fügen wir Text wie Hero-Text hinzu. Dann sollten wir diesen Text hinzufügen. Es ist bereits in der Heldenabteilung. Okay. Bevor wir das tun, benennen wir im Hauptmenübereich diese Frame-Details um. Dieser Rahmen wird uns anrufen und er wird das Anrufsymbol sein und diesem Rahmen wird eine Nummer hinzugefügt. Nett. Lassen Sie uns nun den Hero-Abschnittstext oder den CtA-Text erstellen Dazu drücke ich hier auf T- oder Clec-Text und klicke hier Dann lass uns einen Text wie Hero verwenden. Jetzt werde ich diesen Hauptmenübereich minimieren , weil wir bereit sind. Unterschreiben Sie das und jetzt wählen wir von hier aus den Text aus und gehen dann zu Typografie und sagen Sie Kopfzeile oder wählen Sie den Kopfzeilentext so Okay. Dann fügen wir den Header hinzu, der mit GPT generiert wurde Hier ist die Überschrift. Ich kopiere es einfach. Sie können also selbst Inhalte mit GPT generieren, oder Sie können dort den Ressourcenbereich überprüfen In dieser Textdatei sehen Sie eine Textdatei. Sie können den Inhalt abrufen, den wir auf dieser Website verwenden Lass es uns so hinzufügen. Lassen Sie uns jetzt die Unterüberschrift hinzufügen, ich werde auf T klicken. Ja, ich werde auf T klicken und dann auf „Gefällt mir“ klicken. Dann fügen wir Text wie diesen hinzu. Dann fügen wir diesen Text hinzu, kopieren ihn, fügen ihn so hinzu. In Ordnung. Gehen wir jetzt zur Typografie und ändern sie in Unterüberschrift. Okay, jetzt haben wir die Unterüberschrift und die Überschrift. Eigentlich können wir, wenn wir wollen, eine weitere Textzeile hinzufügen und den Text vom Typ Absatz hinzufügen, aber das ist für die CtA-Kabeljaureaktion. Cd-Aktion sollte also klar sein . Okay, was wir jetzt tun können, ist, den Button zu erstellen. Wir werden also mehr als eine Taste benötigen. Lassen Sie uns also eine Schaltfläche erstellen und sie zu einer Komponente machen. Um das zu tun, gehe ich zu unserem Stiger-Blatt und lass uns das duplizieren und nennen wir es Button Okay Jetzt drücke ich T und hier werde ich sagen, aber ja Able, dann wähle ich die Typografie als Schaltflächen aus. Okay. Jetzt verschiebe ich die Pfadtaste A, um dieser Schaltfläche ein automatisches Layout hinzuzufügen. Und dann füge ich von hier aus die Feldfarbe hinzu. Fügen wir die Feldfarbe als blaue Farbe hinzu. Und dann wählen wir den Text dieser Schaltfläche und ändern ihn in weiß oder ändern wir den Text, und in diesem Rahmen ändere ich den Eckenradius auf 20. Dann füge ich für den horizontalen Rand 20 hinzu, fügen wir 30 hinzu, ist größer Fügen wir 20 hinzu und oben und unten werden 15 sein. Hier ist der Button. Jetzt können wir direkt die Instanz dieser Schaltfläche abrufen. Um das zu tun, gehe ich zu ASSets und hier komme ich zu den Bibliotheken und klicke hier. Okay. Jetzt werde ich das in eine Komponente umwandeln. Bevor ich das mache, werde ich diesen Frame in VTN umbenennen. Dann klicke ich auf die Schaltfläche „Komponente erstellen“ und sie wird zu einer Komponente. Jetzt gehe ich zu unserem Design und hier werde ich auf Asserts klicken und hier haben wir die Schaltfläche, also klicke ich einfach darauf und dann auf Insert Instant Jetzt gehe ich zu den Dateien, sodass sich diese Schaltfläche außerhalb des Frames befindet Fügen wir es dem Heldenrahmen hinzu. Füge es einfach so hinzu. Lassen Sie uns nun dieses Etikett ändern , um einen Termin anzufordern. Ich werde den heutigen Teil nicht hinzufügen. Fügen wir es hinzu, als ob Sie einen Termin anfragen möchten. Also wenn ich es überprüfe, scheint es wirklich klein zu sein. Also lass es uns größer machen. Um es größer zu machen, kannst du hier klicken und auf den Text klicken. Im Text klicke ich auf diese ausgerichtete Mitte und dann hier, dann beträgt der horizontale Abstand 30 und der obere und untere Abstand 25. Ist es zu viel? Lass uns machen. Okay, lass uns sehen, wie es aussieht. Okay, viel besser. Klicken Sie hier und lassen Sie uns von hier aus Änderungen vornehmen, damit wir deutlich sehen können, was wir auf diese Weise tun können. Für diesen Heldenbereich sollten wir eine größere Schaltfläche haben, um ihn zu erstellen Ich klicke auf die Komponente und von hier aus klicke ich auf Variante. darauf klicken, können wir eine Variante unserer Standardkomponente erstellen , was bedeutet, dass sie alle Eigenschaften unserer Komponente hat, und wir können diese Eigenschaft nach Belieben ändern. Also ändern wir es so, dass links und rechts 35 sind und oben und unten 25 ja, das wird besser sein. Okay, dann klicke ich darauf. Jetzt klicke ich auf die Schaltfläche und von hier aus ändere ich ihren Namen in „Gefällt -Header-Schaltfläche und drücke dann auf Okay. Gehen wir nun zu unserer Schaltfläche und von hier aus können wir die Eigenschaft ändern. Es ist derzeit Standard. Wenn ich dann auf die Kopfzeile klicke, wechselt sie zu der Variante oder der Variante, die wir erstellt haben. Okay, ich wähle alle aus und drücke Shift A, um ein automatisches Layout hinzuzufügen Dann benenne ich es in CtA Okay, dann werde ich hier zwischen Japa 220 setzen und von hier aus, lassen Sie es uns so sagen, ich werde es so platzieren, ich werde es so platzieren Okay. Dann möchte ich , dass das am Ende dieses Heldenbereichs steht. Also lass uns versuchen, es zu tun. Also, hier ist derzeit die Helden-Sektion. Im Heldenbereich haben wir das Menü, aber dieser CtA befindet sich außerhalb dieses Heldenbereichs Wenn ich also den Heldenbereich schließe, wird der CtA nicht geschlossen, also müssen wir ihn so in den Heldenbereich einfügen Okay. Jetzt können wir auf den Heldenbereich klicken und dann auf eine Zeile oben links Von hier aus stelle ich das zwischen den Seiten ein, dann setze ich die Höhe des Heldenabschnitts auf 800. Danach füge ich den unteren Teil hinzu und füge 20 hinzu. Es scheint, dass 20 zu klein ist. Machen wir 60 draus. Okay. Jetzt ist es viel besser und wir sollten es auf 40 machen. Okay. Schauen wir uns nun das Aussehen dieses Designs an. Okay, hier ist unser Design. Um das besser zu machen, können wir eine größere Unterüberschrift hinzufügen Versuchen wir, eine größere hinzuzufügen. Wenn wir bei Option zwei diese Unterüberschrift wählen, ist sie sogar Option zwei diese Unterüberschrift wählen, besser Also lasst uns versuchen, es einfach so hinzuzufügen und dann, um es zu korrigieren, wähle ich den CtA aus und lass uns die CtA-Größe als Hug Container wählen, und hier, lass es uns als Fill auswählen, eigentlich müssen wir es immer noch so verkleinern Lass es uns so ausdrücken. Okay. Schauen wir uns jetzt das Design an. Es wird so aussehen. Lassen Sie uns den Eckenradius auf 15 ändern. Lass uns versuchen, das zu tun. Ich klicke einfach hier und lass es uns auf 20 ändern. Nein 20, 15. Machen wir es für diesen einen, zwei, und wir werden sehen, wie es sich nebenbei ausgewirkt hat. Es ist jetzt viel besser. Und ich klicke auf den Hintergrund und lass uns die Dunkelheit des Hintergrunds erhöhen. Ich klicke auf linear und hier erhöhe ich die Deckkraft wie Unreno, hier isoliere ich den Heldenbereich und unten machen wir es Okay. Schauen wir uns jetzt das Design an. Jetzt wird es so aussehen. Wir können so etwas machen, und es wird jetzt viel besser sein. 54. Design über Abschnitt: Hallo, alle zusammen. Jetzt ist es an der Zeit, die Zusammenfassung über uns zu entwerfen. Also lass uns das machen. Zuerst müssen wir den Inhalt generieren, also gehe ich zu GPT, und hier werde ich sagen, Generieren Sie eine Zusammenfassung über uns mit Überschrift, Überschrift und Absatz mit einem Absatz mit der Belastung Wir sind also bereit für diesen Befehl. Wenn wir jetzt diesen neuen Befehl geben, wird er den Abschnitt generieren. Lassen Sie uns weitere Informationen hinzufügen. Jetzt ist es an der Zeit, einen zusammenfassenden Abschnitt über uns mit Überschrift und Schaltfläche zu erstellen . Lass uns die Eingabetaste drücken und mal sehen, ich habe drei Optionen. Jetzt möchte ich sagen, ich möchte unserer Struktur zwei Schaltflächen hinzufügen, wir haben zwei Schaltflächen. Lass uns okay, lass uns diese drei Optionen lesen. Okay. Mir gefallen die Überschrift und der Absatz der ersten Option und die vier Schaltflächen. Ich werde eine Schaltfläche hinzufügen, um mehr zu erfahren , und die nächste Schaltfläche, wenn es um Meat Tower-Anbieter geht. Okay, lass uns das machen. Also hier ist die Textdatei, in der ich alle Informationen hinzufüge, die ich mit KI generiert habe, also werde ich dieser Überschrift und diesem Absatz eine Zusammenfassung hinzufügen , dann müssen wir Schaltflächen hinzufügen, um mehr zu erfahren Schaltfläche „ Weitere Informationen“ hinzufügen und die Turmanbieter kennenlernen Es sind die Schaltflächen „ Weitere Informationen“ und die zweite Option werden MO-Anbieter sein Lassen Sie uns nun mit dem Design beginnen. Jetzt bin ich bei unserer Figma-Datei Als ersten Schritt werde ich auf Frame klicken und hier klicken. Dann setze ich Fame mit dieser Füllung und füge dann Höhen hinzu Fügen wir es etwa 600 hinzu. Okay, jetzt haben wir den Abschnitt. Dann werde ich Shift A drücken, um das automatische Layout hinzuzufügen. Wir fügen diesem Frame einfach ein automatisches Layout hinzu und ich werde diesen Frame als Zusammenfassung umbenennen. Okay. Jetzt müssen wir als ersten Schritt ein Bild hinzufügen und lassen Sie uns dieses Bild hinzufügen. Um zuerst ein Bild hinzuzufügen, klicke ich auf Vertragsdreieck und dann hier. Okay, unsere Größe wurde geändert. Klicken wir auf einen Übersichtsrahmen , in dem wir bereits das automatische Layout hinzugefügt haben. Fügen wir diese Höhe also als 600 hinzu. Okay, jetzt sollten wir auch die horizontale Polsterung und auch die vertikale Polsterung entfernen Dann stelle ich hier den Artikel zwischen Größe 20 ein. Okay. Jetzt werde ich das Bild so vergrößern. Das. Mal sehen, wie viele Spalten wir haben? Eins, zwei, drei, vier, fünf, sechs. Okay. Und für diese Seite haben wir eins, zwei, drei, vier, fünf, sechs. Okay. Eigentlich werde ich diese Größe einfach auf reduzieren. Lassen Sie uns diese Breite auf 520 setzen. Okay. Jetzt fügen wir das Bild hinzu. Um das Bild hinzuzufügen, klicke ich hier und klicke auf das Imagevideo. Okay, von hier aus müssen wir ein Bild auswählen, also habe ich dieses IMG Null, drei Bild gelassen und Enter gedrückt. Dann klicke ich hier auf das Rechteck wie dieses. Okay. Jetzt füge ich Corner Radice als 20 hinzu, so wie hier Lass es uns auf dem Design sehen, damit es so aussieht und lass uns versuchen, ein anderes Bild hinzuzufügen Ich klicke auf dieses rote Dreieck und klicke hier, klicke auf Bildvideos und lass uns diese Art von Bild hinzufügen, und lass uns diese Art von Bild hinzufügen weil mir diese Bildfarbe nicht gefällt. Okay. Okay, es sieht so aus. Okay. Jetzt müssen wir diese Art von Informationen hinzufügen. Fügen wir sie hinzu, um sie hinzuzufügen. Dazu muss ich zwei Arten von Text erstellen. Lassen Sie uns diesen Text mit Chat-GBT generieren. Nehmen wir an, eine Aktion im Zusammenhang mit IC. Eins, jetzt muss ich zwei Texte hinzufügen, um sie um die Bilder herum hinzuzufügen, zum Beispiel 100% K, wir haben Experten wie diesen. Nehmen wir an, Sie geben mir drei Auswahlmöglichkeiten, wenn mein Englisch in Ordnung ist. Lassen Sie uns sehen, was es generiert. Es ist zu lang. Nehmen wir an, es ist zu lang. Okay. Mir gefällt diese erste Option, also werde ich sie kopieren und sie so in unser Dokument einfügen. Okay, habe gerade Text zu Bildern hinzugefügt. Okay. Gehen wir jetzt zu unserer Datei und lassen Sie uns diese Texte plus Ist erstellen und unser erster Text wird zu 100% chaotisch sein. Lassen Sie uns einen weiteren Text erstellen, und lassen Sie uns das so , um diese Informationen zu erhalten. Und jetzt erstelle ich einen weiteren Text wie diesen, dann werde ich es tun. Entschuldigung, lassen Sie uns einen anderen Text erstellen. Dann füge ich hier Text ein und 100 pro hier. Dann klicke ich auf diesen Text und füge ihn in der Typografie als Kopfzeile hinzu Dann werde ich das für diesen als Unterbedingo hinzufügen Für diesen vertrauenswürdigen Experten werde ich nun Untergliederung hinzufügen Mal sehen, dass diese Schrift funktioniert. Ja, es scheint, dass es funktionieren wird. Wir haben hier Platz. Ich singe einfach dieses Leerzeichen, und jetzt muss ich diese Texte wie diesen hinzufügen, um sie hinzuzufügen Ich wähle einfach zwei davon aus und drücke Shift A, um das automatische Layout hinzuzufügen. Dann klicke ich auf das vertikale Layout und stelle es als mittleres Layout ein. Dann werde ich für diesen Artikel einfach einen Wert zwischen sechs setzen, so wie diesen. Lass uns vielleicht auf Null sinken. Er Null wird perfekt sein. Es scheint, dass K zu klein ist, also schauen wir uns einen anderen Text von hier zu 100% an, lassen Sie uns diesen kopieren und versuchen, ihn zu formulieren Okay, er scheint besser zu sein als nur K. Ja, fügen wir ihn so Dann werde ich vielleicht versuchen, die Typografie so zu gestalten, dass die Taste zu schwach ist Lass es uns in einen Absatz ändern. Okay, der Absatz ist viel besser. Ja. Der Absatz ist okay. der Absatzgröße müssen wir jetzt Farbe und Hintergrundfarbe hinzufügen. Fügen wir diesem Rahmen eine Hintergrundfarbe hinzu , wählen den Rahmen und benennen ihn in 100% K, Tag oder so um. Lassen Sie uns das so angehen. Dann klicke ich auf Plus kann füllen, und hier füge ich Y hinzu. Dann reduziere ich die Ecken auf 20, und jetzt gehe ich zu X und klicke auf dieses Plus Jetzt füge ich Schlagschatten hinzu und klicke hier. Von hier aus setze ich X auf Null, Y auf Null und lass uns Transparenz auf 15 setzen , Unschärfe auf 15. Okay. Jetzt muss ich das horizontale Padin hinzufügen. Fügen wir das horizontale Padin als sechs hinzu, viel besser und das vertikale Padding Okay. Von hier aus stellen wir es auf zwei ein Okay, 12 ist besser. In Ordnung, wir erstellen nur einen Teil. Jetzt muss ich das Element auswählen, das ich erstellt habe , dann klicke ich auf dieses IgnooToAyout und jetzt kann ich es so platzieren Lass es uns hier platzieren. Lass es uns hier hinstellen. Wir müssen es außerhalb dieses Themas über die Zusammenfassung hinzufügen. Dazu wähle ich es aus und füge es Fügen wir es zuerst hier hinzu Okay. Jetzt muss ich es so runterholen. Okay. Jetzt haben wir diesen Abschnitt. Lass es uns so ausdrücken, lass es uns so sagen. Dann haben wir diesen vertrauenswürdigen Expertenteil und für diesen müssen wir ein Logo hinzufügen. Lassen Sie uns das Logo hinzufügen. Um das Logo hinzuzufügen, klicke ich hier und füge das San-Widget ein. Dann klicken Sie hier auf die Fontosm-Symbole, Suche ist nicht gut Wir haben eine Krankenschwester. Fügen wir diese Krankenschwester hinzu. Klicken Sie einfach hier. Platzieren wir es außerhalb dieses Rahmens, klicken Sie einfach darauf und fügen Sie es zu einer Zusammenfassung wie dieser hinzu. Dann wähle ich diese beiden Elemente aus und drücke Shift A. Jetzt füge ich einfach das automatische Layout auf acht hinzu. Dann klicke ich auf dieses vertikale Layout und setze es als Linie, Mitte, okay, dann brauchen wir hier nicht die beiden Telefon-ALT-Einstellungen und den Schwesternrahmen. Wir haben diese beiden Rahmen erhalten, als wir ein Symbol hinzugefügt haben, also entferne ich sie einfach. Jetzt muss ich diese Größe erhöhen. Lass es uns so erhöhen. Fügen wir es so hinzu, dass es besser sein wird. Dann fügen wir für diese Zwischengröße etwa sechs hinzu. Sehen wir uns jetzt diesen an. Bei diesem fügen wir 12 und sechs als Zwischengröße hinzu. Lass uns auf diesen Rahmen klicken und hier, lass uns das Two Trust First Tago-Element so umbenennen , dann komme ich hierher und ändere die Feldfarbe Sicherlich ist die Feldfarbe diese weiße Farbe. Dann gehe ich hierher und bei Effekt kann ich einen Effekt wie diesen hinzufügen Tatsächlich haben wir bereits einen Effekt zu diesem Tab mit 100% Pflege hinzugefügt , also können wir einfach darauf klicken und auf Effekt Ich drücke dann auf Stil anwenden und dann auf dieses Plus-Symbol Dann füge ich Perfect, 01 hinzu und drücke. Okay. Nun, hier kann ich auf diesen verrosteten Experten-Tag klicken und von hier aus werde ich darauf klicken und dann auf EFFXs wie diesen klicken Dann muss ich vertikale und horizontale Felder wie diese hinzufügen . Dann ändern wir diese Größe auf 20. Okay. Lassen Sie uns dieses horizontale Muster zu zwei hinzufügen und das vertikale Muster wird 220 sein. Okay, es ist viel besser. Und dann ändere ich die Farbe der Krankenschwester, damit wir sie zu Blau machen. Okay. Sieht gut aus. Jetzt habe ich hier geklickt und auf dieses Igno Auto-Layout geklickt. Danach muss ich es einfach so ausdrücken. Lass uns das hier machen. Okay. Also, lassen Sie uns das hier so platzieren und das hier in der Mitte zwischen der Größenlinie und hier fügen wir es wie 60, 50, 50 hinzu. Ordnung, in Ordnung. Nun schauen wir uns das Design an, es wird also so aussehen. Und wir versuchen immer, eine minimalistische Version zu erstellen, also versuche nicht, zu viel Zeug hinzuzufügen. Jetzt ist es an der Zeit, den Text zu erstellen. Also werde ich zuerst T drücken und diese Art von Text hinzufügen. Dann fügen wir den Text hinzu , von dem wir ihn hier kopieren. Es ist auf unserem Inhalt. Ich kopiere es einfach und komme her. füge ich es ein, dann ändere ich die Typografie in einen Header wie diesen Gehen wir also über diese Größe hinaus, um das Problem zu beheben. Ich klicke hier und stelle das so ein, dass ein Behälter wie diesen gefüllt wird. Okay. Was ich jetzt tun muss, ist diese Zwischengröße so zu vergrößern. Lass uns das auf etwa 90 erhöhen. Erhöhen wir etwa 90, nicht 690. Okay. Und jetzt müssen wir eine Zusammenfassung hinzufügen , dazu drücke ich T und erstelle Text wie diesen, dann muss ich diese beiden Abschnitte markieren und Shift A drücken. Und jetzt haben wir hier einen neuen Rahmen für das automatische Layout hinzugefügt, dann ändere ich dieses horizontale Layout in ein vertikales Layout, und darin werde ich diese Kopfzeile nach oben bringen und diese wird unten sein. Lassen Sie uns diesen Rahmen also auf 22 ändern, was die Zusammenfassung angeht. Okay. Dann werde ich hier die Zwischengröße auf 20 setzen und dieser Text wird ein Absatz sein. Jetzt klicken wir hier, klicken wir auf unsere Web-Content-Textdatei und ich kopiere diesen Absatz einfach so, dann fügen wir diesen Absatz ein und ich werde diesen Hug-Inhalt so ändern, dass diesen Hug-Inhalt füllt, nicht Inhalt füllt, Container füllt, dann wird er wie folgt hinzugefügt Mal sehen, im echten Design wird es so aussehen, und die ganze Zeit vergesse ich, die Füllfarbe zu ändern Also lass uns die Füllung ändern. Klicken Sie hier und klicken Sie auf dieses Schwarz, da es sich nicht um eine dunkelschwarze Farbe handelt. Das ist ein bisschen hell. Lassen Sie uns die Füllfarbe auf diese dunkle Farbe ändern , die in unserer Farbpalette ausgewählt ist. Okay. Und jetzt müssen wir das in der Mitte platzieren , damit wir die Zusammenfassung versiegeln und ihre Position so ändern können, dass sie links in der Mitte ist wie folgt. Jetzt müssen wir zwei Buttons hinzufügen. Außerdem scheint dieses Bild zu groß zu sein. Lassen Sie uns also seine Höhe verringern, wenn der Befehl Iface in Windows die Steuerung übernehmen sollte Dann ändere ich es einfach so, lass es uns wie 500 ändern, und dann doppelklicke ich auf das Bild und lass uns das Bild so einstellen Okay. Dann klicke ich hier und stelle das hier ein. Okay, jetzt ist es viel besser weil wir hier nicht viele Inhalte hinzufügen können, also wird es jetzt so aussehen. Und jetzt kommen wir her und fügen unsere beiden Schaltflächen hinzu. Um zwei Schaltflächen hinzuzufügen, können wir die Schaltflächen verwenden, die wir als Komponente erstellt haben. Also lasst uns das tun, um das zu tun. Hier gehe ich zu Assets und Asserts. Klicken Sie hier. Dann haben wir diese BTN, klicken darauf und die Eigenschaft ist Standard, weil die Header-Schaltfläche größer als die Standard-Schaltfläche ist Fügen wir die Devolve-Schaltfläche hinzu und klicken Sie auf Insert Instant. Dann gehen wir zur Datei, und jetzt müssen wir diese Schaltfläche in das Dokument über die Zusammenfassung einfügen . Nein, über den Übersichtstext Fügen wir es also so hinzu. Okay. Lassen Sie uns jetzt das Button-Label ändern. Klicken Sie hier und das Button-Label wird mehr darüber erfahren. Lass es uns so hinzufügen. Okay, jetzt wird es so aussehen, dann werden wir auch hier einen Button haben. Lass uns diesen Button erstellen. In diesem Fall ist es dieser. Um das zu tun, werde ich es als Variante dieser Hauptschaltfläche erstellen . Um das zu tun, werde ich hier zu unserer Hauptkomponente gehen. Du erinnerst dich an die letzten Lektionen, wir erstellen diesen Button. Lassen Sie uns also eine Variante erstellen. Um eine neue Variante zu erstellen, klicke ich auf die BTN-Komponente und dann auf dieses Plus-Symbol , um eine Variante hinzuzufügen Okay. Jetzt müssen wir hier diese Art von Schaltfläche erstellen. Es zu erstellen ist einfach, also lass es uns tun. Also hier entferne ich zuerst die Füllfarbe und dann klicke ich auf dieses Etikett und ändere die Füllfarbe in Blau. Dann wähle ich die Variante aus und lass uns diesen Variantennamen wie folgt in sekundäres BTN ändern diesen Variantennamen wie folgt in sekundäres BTN Ich denke, die Worte sind richtig. Lass uns sehen. Nun, die Worte sind falsch. Nochmals, lassen Sie uns das Wort so ändern, sekundär tn, jetzt klicke ich auf die Variante und hier ändere ich es links und rechts auf etwa 20 und lasse oben und unten 20 stehen. Dann muss ich das Symbol hinzufügen. Füge das Symbol hinzu, ich klicke hier und gehe zu Fonosm und von hier aus tippe ich wie ein Pfeil Okay, diese Pfeile sind nicht gut verkauft. Fügen wir also diesen Pfeiltyp hinzu, klicken wir darauf und lassen Sie uns herausfinden, wo wir ihn anpassen. Okay. Es passt sich hier an, ich drücke einfach Befehl X, um es zu kartieren, und dann klicke ich hier und füge Befehl V ein, um es so einzufügen. Okay, jetzt ist es in dieser Variante und dazwischen wird Größe sechs sein. Lass uns diese Farbe zu einer blauen Farbe ändern. Okay, lassen Sie uns die Größe etwas verringern. Okay. Es ist zu klein. Drücken wir. Lass es uns so belassen. Und jetzt, wenn wir wollen, können wir diese Bezeichnung mit etwas mehr ändern , weil die Breite des Symbols größer ist Also werde ich diesen Stil unverändert lassen oder den Stil entfernen und ihn dann in Fett ändern Fett wird okay sein. Ordnung. Jetzt haben wir so ein Labor. Dann komme ich her und jetzt muss ich nach*** in Asats gehen Ich klicke auf BTN und wähle von hier aus sekundäres BTN aus und Dann füge ich es in diesen Rahmen mit automatischem Layout ein. Der Name des Rahmens bezieht sich auf den Übersichtstext Hier ist unsere Wette auf unseren Button. Ich ziehe es einfach per Drag-and-Drop wie hier. Ich bin nicht gekommen. Versuchen wir es noch einmal. Ich habe hinzugefügt und jetzt werde ich die Position der Schaltfläche so ändern. Jetzt sehe ich diese beiden Schaltflächen und drücke Shift A, um einen neuen Rahmen zu erstellen Hier werde ich ihn als horizontales Layout festlegen. Okay, die Größe dazwischen wird 220 sein, und jetzt werde ich diesen Rahmen so ändern, wie BTN eingestellt Ich habe diesen Frame-Namen einfach in TNS umbenannt, und jetzt muss ich diesen Text ändern Der Text wird in unser Dokument aufgenommen. Der Text ist erfüllt. Anbieter kopieren es, kommen her und fügen es so ein. Okay. Sehen wir es uns jetzt im Design an. Es wird so aussehen. Das ist zu groß, also ändern wir die Größe. Ich gehe einfach zur Variante und lass uns das Gewicht reduzieren, es auswählen und halbieren. Mittel. Mal sehen, mal sehen, Medium wird gut funktionieren. Dann werde ich dieses Icon noch ein bisschen vergrößern. Es ist zu groß. Behalten wir es. Okay. Vielleicht sollten wir die beiden nicht mittelgroß bis halbgroß machen. Viel besser. In Ordnung. Jetzt haben wir gerade die A-Zusammenfassung erstellt. 55. Designservices Abschnitt Teil 1: Hallo, alle zusammen. Jetzt müssen wir den Servicebereich erstellen. Lass uns das machen. Zuerst werde ich hier und int gB angeben, dass es jetzt an der Zeit ist, Servicebereiche zu erstellen. Nennen Sie mir die wichtigsten Dienstleistungen, die eine Familienklinik anbietet, und stellen Sie sicher, dass es mehr als acht Dienste in diesen Lastern gibt. Ich möchte, dass Sie diesem Namen, der kleinen Beschreibung und der Kreditbeschreibung folgen und mir auch den Titel der Schlagzeilen für ServiceOnPress Enter geben Titel der Schlagzeilen für ServiceOnPress Okay, es generiert Mmm. Jetzt muss ich sagen, dass die kleine Beschreibung zu kurz ist. Lassen Sie uns aus der kleinen Beschreibung hinzufügen, dass sie zu kurz ist. Gib mir eine kleine Beschreibung , die bis zu 150 Zeichen hat. Lass uns das versuchen. Es ist besser. Hier haben wir die Details, das wird die Kreditbeschreibung sein, und ich werde all diese Details in die Datei aufnehmen, weil wir diese kleine Beschreibung verwenden können. Auf der Homepage und auf einer Seite können wir dieses Format verwenden. Auf diese Weise wird das also perfekt sein. Gehen wir also zu unserem Dokument und ich werde alle Informationen sammeln. Und hier müssen wir den Inhalt der Startseite wie folgt einstellen . Dann werde ich einen neuen Abschnitt hinzufügen. Dies wird der Servicebereich sein. Okay, um einen Abschnitt zu bearbeiten, fügen wir diese Details wie folgt hinzu Ich werde all diese Details wie folgt kopieren. Dann füge ich einen weiteren Abschnitt hinzu, der als Seiteninhalt bezeichnet wird einen weiteren Abschnitt hinzu, der als Seiteninhalt bezeichnet und füge den Inhalt hinzu, den er zuvor generiert Das ist der Inhalt, und ich werde ihn einfach für die spätere Verwendung kopieren. Okay. Jetzt haben wir hier eine Schlagzeile. Es hat uns eine Schlagzeile generiert. Lassen Sie uns sehen, dass es gut ist, etwas Gutes zu sagen geben? . Können Sie mir drei Versionen und drei Auswahlmöglichkeiten für den Titel der Überschrift Lassen Sie uns diesen hier sehen. Lass uns das als Überschrift nehmen und ich werde es hier platzieren. Okay. Eigentlich werde ich das in Google Doc einfügen. Jetzt fangen wir an zu entwerfen. Zuerst gehe ich zur Figma-Datei und hier, wie wir es zuvor getan haben, müssen wir einen Rahmen erstellen, und ich werde diesen Rahmen in unser s umbenennen . Dann ändere ich mit fill container, und hier, sagen wir, das ist 600 Okay. Was wir jetzt tun können, ist diese Art von Design zu erstellen. Dazu klicke ich zuerst auf Text und dieser Text wird zur Überschrift. Ich mache es wie eine Überschrift und dann werde ich das Text-Duplikat für ein paar duplizieren , also duplizieren wir es nur für zwei Mal. Eigentlich vergesse ich, diesem Dienste-Frame ein automatisches Layout hinzuzufügen , also machen wir das. Ich drücke Shift A und dann müssen wir die Höhe bei 600 ändern. Wir sind im Bereich Dienste und von hier aus werde ich das CO einstellen, werde ich das CO einstellen weil wir kein horizontales oder vertikales Padding benötigen Fügen wir sie als C hinzu und dann wähle ich diese beiden Elemente aus und drücke Shift A, um ein neues automatisches Layout zu erstellen, und ich mache daraus ein vertikales Layout, und hier ändere ich das in sng Vs wie hier. Okay. Dann werde ich es einfach ändern. Es braucht Typografie, um es zu ändern Ich klicke hier und lass es uns zu einem Subding machen, und dann klicke ich hier und lass uns daraus einen Absatz machen Okay. Dann werde ich die Feldfarbe ändern. Klicken Sie hier und ändern Sie diese Feldfarbe in Schwarz und ändern Sie diese Feldfarbe Okay. Jetzt legen wir den Artikel zwischen den Größen 20 fest, in Ordnung, in Ordnung. Es scheint zu groß zu sein. Es scheint, dass der Artikel zwischen den Größen zu groß ist, aber lassen Sie uns beim wirklichen Inhalt bleiben. Hier ist unser Titel, dann werden wir die Beschreibung so haben. Okay, dann werde ich diesen Text mit zwei Containern wie diesem versehen. Lassen Sie es uns vorerst so belassen und ich vergesse eine Sache. Kannst du sagen, was es ist? Es ist die Überschrift, also vergesse ich, eine Überschrift hinzuzufügen. Lass uns eine Überschrift hinzufügen. Isolieren Sie zunächst unser Service-Autoayout und lassen Sie es als vertikales Layout formatieren Dann drücken wir T und fügen einen Text wie diesen hinzu. Dann gehe ich zu unserem Dokument oder dem GPT. In unserem Dokument können wir uns die Schlagzeilen besorgen, indem wir es kopieren und dann sind wir mal ehrlich Okay. Dann ändern wir die Schwerkraft des Tippfehlers in Header und die Füllfarbe wird diese schwarze Farbe sein Okay. Jetzt wähle ich das automatische Layout dieses Dienstes aus und setze Align Top Center als Ausrichtung ein. Dann mache ich hier den Bereich auf 20, richtig. Und hier, lassen Sie uns versuchen, es in zwei Teilen hinzuzufügen , also möchte ich das jetzt in der Mitte hinzufügen, also werde ich diese Typografie-Ausrichtung als Mittelpunkt wie folgt festlegen diese Typografie-Ausrichtung als Mittelpunkt wie folgt Jetzt haben wir zuerst diesen Teil, lassen Sie uns ihn nach Belieben anpassen Ich wähle den einzelnen Service bei Layout aus und lass uns einen Effekt hinzufügen. Wir haben bereits einen Effekt, also wähle ich ihn einfach aus und füge dann diesem einzelnen Dienst Breite hinzu, um das zu erreichen Ich werde ihn wie folgt erhöhen Eigentlich werde ich so etwas hinzufügen, aber es ist nicht dauerhaft. Aber ich wähle wieder die einzelnen Dienste füge dann die linken und rechten Felder 20 und 20 wie folgt Wenn wir nun das Design überprüfen, sehen wir den Effekt nicht, also fügen wir die Feldfarbe Wenn ich eine Feldfarbe wie Weiß hinzufüge, können wir den Effekt deutlich erkennen. Dann werde ich dieses Eckradio 20 ändern. Okay, so weit, so gut. Was ich jetzt tun werde, ist ein Symbol wie in diesem hinzuzufügen . Lass uns das machen. Um das zu tun, gehe ich einfach hierher und suche nach Ikonen über die pädiatrische Versorgung Lass uns Fantosom öffnen. Klicken Sie hier, klicken Sie auf Fontosom falls Sie den Namen des Pontosom-Symbols nicht kennen. Sie können einfach bei Google nach Kinderautosom suchen, Sie können einfach bei Google nach Kinderautosom suchen jetzt können wir sehen, dass es ein Kindersymbol hat, also kopiere ich den Teil mit Kindern und komme Dann fügen wir es hinzu. Eigentlich wird es nicht angezeigt, aber wir haben ein Kind. Mal sehen, was wir tun können. Schauen wir uns die Ikone der Kindheit an. Nein, wir haben nur ein Kind. Holen wir uns dieses Kind. Und es ist in Ordnung, diese Art von Symbol hinzuzufügen. Figma-Layout, aber in Elemento können wir ein besseres Symbol haben und ich werde Ihnen zeigen, wie Sie ein besseres Symbol erhalten Hier ist unser Symbol. Ich wähle einfach nur den Vektor und tippe zweimal auf diesen einzelnen Dienst und setze das Symbol so ein und lass uns die unnötigen Frames entfernen. Und hier, lass uns das ein bisschen größer machen. Bevor ich das mache, werde ich diese beiden Abschnitte verschieben und Shift A drücken. Dann wird es einfach zu einem neuen automatischen Layout hinzugefügt. Lassen Sie uns das automatische Layout in Sex umbenennen und hier haben wir das Vektor- und Einzelservice-Autolayout und dann die Insel Einzeldienst-Autolayout und klicken dann auf horizontales Layout wie dieses Ordnung. Jetzt werde ich es wie zuvor zwischen die Größen zwei und drei legen. Dann klicke ich hier darauf und lasse uns diese Farbe in Blau ändern. Hast du dich an unsere 603010-Regel erinnert? Lassen Sie uns also für Segan sehen, wir haben tatsächlich die 603010-Regel angewendet In diesem Fall haben wir Weiß als 50 und Schwarz als 30 und diese blaue Aber ich habe dir schon gesagt, dass die 60-, 30-, Zehn-Regel nur eine Regel ist. Wir können sie also brechen und jedes Mal, wenn wir einen Abschnitt erstellen, müssen wir ihn brechen, und hier haben wir 60 als Schwarz und 30 als Weiß und zehn als diese blaue Farbe. Zurück zur Arbeit und hier klicken wir auf „Eigenschaften enthalten und machen daraus sechs. Dann drücke ich Shift A, um diesem Symbol ein automatisches Layout hinzuzufügen, und dann ändere ich den Namen des Symbols. Dann füge ich links und rechts als 20, 20 hinzu. Tatsächlich haben wir ein Problem mit der Größe des Symbols. Gehen wir also zurück und hier füge ich 60 als hinzu, 60 als feste Breite, und versuchen wir es hier. Ich werde 20 mal 20 auf diese Weise hinzufügen. Der Grund dafür ist, dass wir uns auf den Single Service Layer gefixt haben. Um das Problem zu beheben, erstelle ich ein neues automatisches Layout oder füge das automatische Layout zu diesem einzelnen Service ändere dann die Serviceartikel. Dann werde ich das ändern, um den Behälter zu füllen. Jetzt können wir die genaue Größe ermitteln Heute wird eins, zwei, drei, vier, fünf, die Höhe wie folgt eingestellt und hier füge ich diese Höhe als Füllbehälter hinzu, und lassen Sie uns dieses Symbol so zentrieren, und wir setzen einfach auf 120, ich denke, es wird besser sein. Okay. Und hier reduziere ich Ecken, mache es etwa 20, und dann füge ich einen Strich wie diesen hinzu. Dann ändern wir die Strichfarbe auf Blau und erhöhen den Wert für den Wert, sodass wir tatsächlich diese Art von Design machen können. Also lass uns das machen. Zuerst muss ich die Größe dazwischen finden, Größe ist 20. Lassen Sie uns hier den gleichen Designstil hinzufügen. Dazu füge ich Füllfarbe und blaue Farbe hinzu. Dann klicken Sie auf das Symbol und die Symbolfarbe wird weiß, und dann müssen wir Estroke hinzufügen , damit die Strichfarbe hellblau ist Lassen Sie uns die hellblaue Farbe von hier aus so nehmen. Okay. Okay. Nun wollen wir mal sehen, wie groß der Strich ist. Es ist hier sieben und hat die Größe sieben. Okay. Jetzt wird es so aussehen, aber wir können mehr Höhe hinzufügen, weniger 22. Es wurden zehn hinzugefügt, zehn sind besser, also erstellen wir jetzt nur noch einen einzigen Servicebereich und das wird auf dem Design so aussehen. Und hier haben wir ein Problem. Wir müssen dieses Problem beheben. In der nächsten Lektion werden wir sie beheben. 56. Designservices Abschnitt Teil 2: Hallo, alle zusammen. Also habe ich eine bessere Idee für dieses Symbol. Lass es uns machen. Zuerst wähle ich das Symbol aus und hier machen wir für dieses horizontale Muster 15 und für das vertikale Muster 15. Dann werde ich diese Füllfarbe entfernen. Dann kopiere ich diese Estroke-Farbe und füge sie der Füllfarbe Dann werde ich den Strich zu entfernen. Okay, jetzt wähle ich das Vektorsymbol und lass uns das Vektorsymbol in Blau ändern. Lassen Sie uns das Vektorsymbol blau lassen. Lassen Sie uns das Vektorsymbol in die blaue Farbe ändern. Ändere es so. Okay. Sehen wir uns dieses Design an. Es wird so aussehen und dieser Effekt ist auf der linken Seite nicht sichtbar, also lassen Sie uns das beheben. Um das Problem zu beheben, gehe ich zu unserem Home-Frame und wähle hier den Servicebereich aus. Dann klicke ich auf dieses IgnooToAyout. Danach werde ich hier 20 Fixel erhöhen. Derzeit ist die Breite 1.160, also werde ich sie 1180 oder 70 80 machen Eigentlich müssen wir 1.200 daraus machen weil wir die zusätzlichen 20 von beiden Seiten hinzufügen müssen Jetzt klicke ich einfach auf unseren Service-Frame und drücke auf Alle Jetzt kann ich sehen, wie groß er bis zum Rand des Home-Frames Reduzieren wir es auf diese Weise bis 1020 und auf dieser Seite wird es 1020 sein Dann können wir innerhalb dieser Stunde eine linke und rechte Polsterung oder eine horizontale Polsterung als 20 hinzufügen oder eine horizontale Polsterung Und wenn wir jetzt das Design überprüfen, wird es perfekt ausgerichtet und es wird weder vom Schatten noch vom FA beeinflusst Okay, für hier mache ich 60, weil es zu nah beieinander liegt, also ist es jetzt besser und jetzt haben wir noch eine Frage. Das heißt, wenn wir einen neuen Abschnitt hinzufügen, fügen wir einen neuen Abschnitt wie diesen hinzu, er wird innerhalb dieses Abschnitts hinzugefügt. Um das Problem zu beheben, erstelle ich einfach einen leeren Rahmen und stelle dann die Breite als gefüllten Container ein und die Höhe beträgt 600. Dann werde ich diesen Frame wie folgt in unsere Services BG umbenennen . Wenn wir dann einen neuen Abschnitt erstellen, befindet er sich unter diesem Rahmen. Das ist jetzt also unser erster Service oder einzelner Service, und das ist ein sich wiederholendes Objekt, was bedeutet, dass wir es in eine Komponente konvertieren und wiederverwenden können . Wenn wir hier nachschauen, haben wir wiederholt solche Elemente, was bedeutet, dass wir die Komponente davon erstellen und auf der Seite verwenden können . Lass uns das machen. klicke ich auf diesen einzelnen Dienst und dann auf diese Komponente zum Erstellen. Und jetzt schneide ich es einfach von hier aus und gehe zu unserem Aufkleberblatt lege es dann so in das Aufkleberblatt. Dann hole ich mir diesen Text und lass uns diesen Text als Element umbenennen. Okay. Und jetzt zu diesem Abschnitt, ich klicke einfach auf die Serviceartikel. Jetzt müssen wir dieses Element zu diesem Abschnitt hinzufügen , um das zu tun Ich gehe zu Assens und klicke hier, und hier haben wir einen einzigen Service Ich klicke einfach darauf und klicke auf Insert Instant wie folgt und jetzt gehen wir zur Datei und hier fügen wir es in diese Serviceartikel können wir so machen. Okay. Jetzt kann ich diesen Abschnitt mit dem Services-Element auswählen, dann zu Asserts gehen und dann hier klicken, darauf klicken und auf Instance einfügen klicken und es wird so eingefügt Dann werde ich es noch zweimal so machen. Okay. Jetzt gehe ich zu Pis in Pis, hier sind die Abschnitte Ich sehe sie alle und ziehe sie einfach hierher. Okay. Und bei den Serviceartikeln werde ich das Layout auf ein horizontales Layout ändern. Eigentlich werde ich vorerst zwei dieser Elemente entfernen, und dann wähle ich das automatische Layout der Serviceelemente aus und klicke auf dieses horizontale Layout, und es wird so aussehen Das scheint zu eng zu Stellen wir das zwischen Größe 20 ein und jetzt passt es perfekt. Okay. Jetzt kann ich diesen Serviceartikel so duplizieren. Okay, auch hier sehe ich diese beiden Layouts für Serviceartikel und drücke Shift A, um eine andere Gruppe zu erstellen Hier werde ich sie in Serviceartikel-Set umbenennen und hier ändere ich und hier ändere ich die Zwischengröße auf 20 wie folgt. Jetzt wird es so aussehen. Jetzt müssen wir den Inhalt ändern. Lass uns sie ändern. Ich öffne unser Dokument und werde sie schnell so ändern. Ich werde das so formulieren und lassen Sie uns das schnell ändern. Okay. Jetzt haben wir gerade vier unserer Kategorien erstellt, und mein Plan ist, dass das Logo-Bild hervorgehoben wird, wenn wir mit der Maus über diese Kategorie Logo-Bild hervorgehoben wird, wenn wir mit der Tatsächlich können wir dieses Logo-Bild ändern, um es besser zu machen. Wenn wir zum Beispiel die Füllfarbe entfernen und den Strich hinzufügen, ändern wir die Konturfarbe auf hier und auf Blau und erhöhen sie für neun ein bisschen. Mal sehen, wie es aussieht, als ob es nicht gut aussieht. Aber was ist, wenn wir zwei zusammensetzen? Jetzt sieht es viel besser und wir werden diesem Symbol ein Liniensymbol hinzufügen. Auf diese Weise wird es vorerst so viel besser sein als dieses Design Lassen Sie es uns so belassen. Und ja, ich wähle einfach das Komponentendesign aus und Sie können das Gleiche tun. Okay. Wenn wir wollen, können wir die Feldfarbe mit Hellblau hinzufügen, wirklich hellblau so und nicht so sichtbar, aber lassen wir es so. Dann müssen wir diese ändern. 57. Designservices Abschnitt Teil 3: Hallo, alle zusammen. Wir haben hier ein Problem. Wenn ich also versuche, dieses Symbol zu ändern, versuchen wir es. Ich gehe zu Aktionen und Plugins und Widget und dann zu Font TSM. Dann ändern wir das Gesundheitssymbol für Frauen, sodass ich nach Frauen suche Okay, klicken Sie darauf. Jetzt haben wir das Symbol. Hier ist das Symbol. Ich werde es ausschneiden und diesen Rahmen entfernen, dann hier klicken und versuchen, ihn einzufügen. Wenn ich versuche, es einzufügen, A, ist es außerhalb dieser Komponente immer vorbei. Wenn ich das also innerhalb der Komponente hinzufügen möchte , kann ich das tun. Haben Sie eine schnelle Lösung, aber nachdem wir diese Lösung gefunden haben, wird diese Instanz nicht mehr unsere Hauptkomponente sein, was bedeutet, dass, wenn wir das Design dieser Komponente ändern, dies keine Auswirkungen auf unsere Kategorie hier hat. Versuchen wir also, das zu tun. Ich klicke auf die Instanz und hier klicke ich auf weitere Aktionen, und hier werde ich auf Instanz trennen klicken Wenn ich auf Detach Instant klicke, funktioniert sie nicht mehr als Komponente Ich bin nur ein Rahmen, den wir zum Layout hinzufügen. Jetzt kann ich hier ein Symbol hinzufügen. Um das zu tun, kann ich einfach das Symbol von hier ausschneiden, dann hier klicken, es so einfügen und hier ist es. Versuchen wir also, dieses Symbol so hineinzufügen . Okay. Lassen Sie uns nun die Größe dieses Symbols überprüfen. Es ist 60. Jetzt werde ich dieses Symbol damit ändern. Lassen Sie uns auf diesen Einschränkungsvorschlag klicken. Und jetzt ändern wir die Seite auf 60. 60 ist zu groß. Sagen wir es so. Dann werde ich dieses Symbol so entfernen. Okay. Dann klicke ich auf dieses Symbol und ändere die Feldfarbe auf Blau. Jetzt ist diese Symbolgröße 120. Sehen wir uns die tatsächliche Icon-Größe an. Die Breite 120 und die Höhe sind 110, sehen wir uns die Höhe an, die Höhe sollte 110 sein, also so. Okay. Dann kann ich das erhöhen, wie ich will. Okay. Jetzt machen wir dasselbe für diesen. Lassen Sie uns versuchen, das Symbol wie Fregan zu finden . Wir haben diese Art von Symbol nicht, also lassen Sie uns hier dieses Krankenhaus-Icon hinzufügen Und wenn wir die Website mit Word als Element entwerfen, werden wir ein besseres Symbol hinzufügen Lassen Sie uns also hier auf die Instanz dieser Komponente klicken , hier klicken und auf „Abgetrennte Instanz“ klicken, dann hier klicken und sie kartieren, dann diesen Abschnitt auswählen und ihn hier einfügen. werde dieses Symbol entfernen Ich werde dieses Symbol entfernen und dann diesen Hintergrund auf die Höhe des Hintergrunds auf 1.110 einstellen , dann werde ich diese Größe auf 60 erhöhen Okay. Als Nächstes ändere ich die Feldfarbe auf Blau. Okay, jetzt haben wir dieses Familienmagazin. Lass uns das Familiensymbol in der Fontosm-Suche herausfinden, tut uns leid. Suchen wir nach Familie, Familie, lassen Sie uns Familie sehen Wir haben kein Familienfontosum-Symbol. Suchen wir nach einem anderen Symbol oder suchen wir etwas, das damit zusammenhängt, an diesem Schutzsymbol Ich klicke auf das Symbol, schneide es aus und lösche diesen Rahmen. Und hier wähle ich zuerst das Serviceelement aus und klicke auf Instanz trennen und dann hier klicken, dieses Symbol verschieben, dieses entfernen, dann müssen wir die Höhe auf 1.100 setzen Entschuldigung, 110. Dann lassen Sie uns diese Symbolgröße auf sechs erhöhen. Okay. Dann lass uns die Feldfarbe ändern Okay. Jetzt haben wir vier Kategorien, vier Dienste, aber wir haben acht Dienste Fügen wir also diese Art von Slide-in-Schaltfläche hinzu, was bedeutet, dass innerhalb von 5 Sekunden automatisch zu den nächsten Kategorien gewechselt wird . Machen wir das, oder wenn jemand auf diesen Punkt klickt, wird er zum nächsten Kategoriensatz weitergeleitet. Also klicken wir hier und klicken auf Ellips und nicht hier, dann gehe ich in unseren Service und füge dann Ellipse hinzu. Also jetzt sollte es so sein, lass es uns wie hier hinzufügen. Es sollte in diesem Servicebereich sein, aber außerhalb dieses Services-Artikelsatzes werde ich es hier platzieren. Und jetzt reduzieren wir die Größe auf etwa 20 und ändern die Farbe wie Blau. Es scheint, dass wir keinen Espace haben, also erhöhen wir den Espace auf etwa 700 dieses Servicebereichs. Fügen wir 700 hinzu und hier haben wir 60, aber wir können weniger als 60 hinzufügen, also wähle ich diesen Service Item-Set aus und Ellips drücke dann Shift A, um ein automatisches Layout hinzuzufügen, und dann kann ich es so machen, als ob 2020 nicht gut ist Lass uns 30 daraus machen. Okay. Jetzt werde ich drei weitere Ellipsen erstellen und sie alle auswählen und Shift A drücken und sie horizontal machen und der Abstand wird 20 sein Dann entferne ich diese Farbe und ich ändere sie in helle Farbe Zu dieser Farbe. Okay, und klicken Sie auf diesen, trennen Sie ihn bei dieser hellen Farbe wie dieser Okay. Jetzt schauen wir uns das Design an, damit es so aussieht. Also fügen wir das unseren Services BG hinzu, die Höhe ist 600, aber machen wir es so 700. Okay. Jetzt erstellen wir das über eine Zusammenfassung und unsere Services, dann müssen wir unseren Anbieterbereich erstellen. Lassen Sie uns ihn in der nächsten Lektion erstellen. 58. Inhalte für unseren Anbieter-Bereich generieren: Hallo, alle zusammen. Jetzt müssen wir unseren Anbieterbereich erstellen. In unserem Anbieter werden wir das Bild des Anbieters sowie den Namen, Rolle und eine kleine Beschreibung haben. Lass es uns erstellen. Zuerst müssen wir den Inhalt generieren. Ich gehe zu JGBT und hier werde ich sagen, jetzt ist es an der Zeit, unseren Anbieterbereich zu generieren Nennen Sie mir fünf Anbieter. Geben wir Ärzte mit Namen, Rolle und Kurzbeschreibung hinzu. Lassen Sie uns ein Darlehen und eine Kreditbeschreibung erstellen. Lassen Sie uns das hier so zusammenstellen, weil wir eine Kreditbeschreibung für Anbieter benötigen. Lassen Sie uns das präsentieren und schauen wir, was wir bekommen. Okay. Hier haben wir die Details. Ich werde sie einfach alle kopieren und gehen wir zu unserer Inhaltsdatei und schauen uns diesen Inhalt so an. Sie können diese Inhaltsdatei auf Notepad Wordpad öffnen diese Inhaltsdatei auf Notepad Wordpad Lassen Sie uns also diese Details hinzufügen. Außerdem werden Sie Bilder für jeden Arzt in unserer Bilddatei sehen . 59. Unseren Anbieter-Bereich gestalten: Hallo, alle zusammen. Lassen Sie uns diesen Bereich für unsere Anbieter gestalten. Okay, jetzt komme ich zum Design, und hier haben wir den Inhalt, aber wir haben keinen Titel. Lassen Sie uns also Titel zwei generieren. Können Sie mir den Titel für unseren Anbieterbereich geben? Gib mir drei Möglichkeiten. Ich denke, die Entscheidungen sind falsch. Wie dem auch sei, ich mag diesen, also werde ich ihn kopieren und zweiten auswählen. Ich werde das kopieren und seien wir hier ehrlich. Dann werde ich einen Titel wie diesen sagen. Gehen wir jetzt zum Figmfle und hier werde ich einen Rahmen erstellen und die Rahmengrößen mit dem Füllbehälter festlegen Hallo, 600. Wir müssen den Home-Frame vergrößern, auf den Home-Frame klicken und in Windows die Befehlstaste drücken, die Strg-Taste drücken und hier die Größe erhöhen. Dann drücke ich für diesen Abschnitt Shift A und ändere hier den Namen in Presenter unseres Anbieters. Okay. Lassen Sie uns nun das Layout als vertikales Layout hinzufügen und von oben in der Mitte beginnen. Okay. Nun, hier brauchen wir diese Zwischengrößen nicht und hier füge ich die Zwischengröße als 60 hinzu. Soweit ich mich erinnere, fügen wir hier die 60 hinzu. Lassen Sie uns nun den Text erstellen. Ich drücke auf T und lass uns diese Art von Text erstellen und lass uns hier gehen und diese Tanks kopieren und kommen zu diesem Text wie diesem, dann ändere ich die Typografie auf Header und klicke auf den Text und lass uns mit einem Füllcontainer beginnen Okay, dann wird die Ausrichtung mittig sein. Okay. Jetzt sieht es gut aus. Jetzt wurde die Höhe des Provider-Abschnitts geändert, also ändern wir die Höhe wieder auf 600 wie folgt. Okay. Jetzt müssen wir diesen Abschnitt erstellen. Um diesen Abschnitt zu erstellen, erstelle ich einfach ein Rechteck wie dieses. Dann legen wir dieses Rechteck auf diese Seite. Dann eins, zwei, drei, vier, dann vergrößern wir es für so und dann sagen wir, Höhe als auch diese Größe. Okay, dann müssen wir den Namen, die Rolle und eine kleine Beschreibung hinzufügen . Also lass uns sie hinzufügen. Also klicke ich zuerst auf T und lege das als Namen fest, dann drücke ich erneut auf Text und stelle das als Rolle ein, und drücke erneut T und füge eine kleine Beschreibung wie diese hinzu. Okay. Nun hier, klicken wir auf den Namen und ändern den Typ in subd und auch hier wird die kleine Beschreibung ein Absatz sein und die Rolle lautet: Lasst uns den Button-Text zum Rollen hinzufügen Okay. Jetzt wähle ich alle drei Elemente aus und lege sie unter das Rechteck. Dann wähle ich all diese Informationen aus und drücke Shift A und einen Frame und ändere diesen Namen in Provider. Dann werde ich das zwischen Größe und 20 so machen. Jetzt ist dieser Abschnitt klein, lassen Sie uns den Abschnitt so vergrößern und jetzt beim Anbieter, ich werde Roll als obersten Namen als mittlere und kleine Beschreibung angeben, da es auch den Anschein hat, dass die Größe dazwischen zu lang ist, also machen wir es so, als ob es besser ist. Jetzt müssen wir hier ein Bild hinzufügen. Fügen wir das Bild hinzu, klicken Sie hier und klicken Sie auf Imagevideo und hier sehen wir das Bild des Anbieters und fügen wir dieses Bild hinzu und klicken Sie hier so. Jetzt wähle ich den Anbieter-Rahmen und hier füge ich Weiß eine Füllfarbe hinzu Dann mache ich einen Effekt und füge diesen Effekt so hinzu. Dann werde ich die Ecken dieses Bildes ändern. Die obigen Zahlen werden zwei sein und dann zwei, dann wird die Unterseite zwei und zwei sein. Mal sehen, ob ich da oben eigentlich nicht in die richtigen Ecken gegangen ist , also müssen wir auf das Bild klicken und lassen uns die Ecken dieses Bildes verkleinern. Wir müssen nur die oberen Ecken so verkleinern. Okay. Von hier aus muss ich etwas Abstand hinzufügen, um Dispasing hinzuzufügen Ich werde einfach hier klicken und sechs hinzufügen Okay, aber wir müssen es nicht auf diesen ganzen Abschnitt anwenden Wir müssen es nur für diese drei Artikel anwenden. Lassen Sie uns diese drei Punkte hervorheben. Eigentlich müssen wir den Button hinzufügen. Fügen wir die Schaltfläche hinzu, um die Schaltfläche hinzuzufügen Ich gehe zu Assens und hier haben wir die BTN Sie werden diese sekundäre Schaltfläche sehen und auf Einfügen klicken Dann schneide ich es aus und komme zur Datei, und hier werde ich es einfach so einfügen Okay. Und an dieser Schaltfläche müssen wir einige Änderungen vornehmen, um diese Änderungen vorzunehmen Wir können eine weitere Instanz erstellen oder hier Änderungen hinzufügen. Auf einfache Weise können Sie eine andere Variante erstellen. Lassen Sie uns eine Variante erstellen. Ich werde das Aufkleberblatt so vergrößern und auf Variante klicken. Eigentlich können wir hier klicken und dann auf Variante klicken dann lassen Sie uns diese Polsterungen wie folgt entfernen Okay. Lassen Sie uns diese Variante nun wie folgt in Kartenlink umbenennen. Okay. Gehen wir jetzt hierher und klicken auf die Schaltfläche und ändern wir sie in Kartenlink. In Ordnung. Jetzt wähle ich all diese vier Elemente aus und drücke Shift A und lass uns die Beschreibung umbenennen. Geben Sie eine Biografie ein, dann werde ich mit einem Füllbehälter beginnen und hier füge ich einen horizontalen Rand wie folgt hinzu. Okay. Was ich jetzt tun muss, ist, dass wir unten Platz hinzufügen müssen. Um das zu tun, werde ich hier klicken und hier weiter, ich werde Leerzeichen hinzufügen 20 Okay. Wenn wir es jetzt überprüfen, wird es auf dem Design so aussehen. Wenn wir wollen, können wir das jetzt in eine Komponente umwandeln. Klicken wir also auf das Element und dann auf Komponente, um eine Komponente zu erstellen. Okay. Dann schneide ich diese Komponente aus und komme zu Style Heat und füge sie dem Element so hinzu. Ich muss dazu kommen, Heat zu stylen und es so einzufügen. Okay. Gehen wir zurück, und dann klicke ich in ASRS auf ASRs, wir haben die Komponente Ich klicke einfach darauf und dann auf Isa Instance. Okay. Was wir nun tun können, ist Dateien zu bearbeiten und sie in unseren Provider-Bereich zu stellen, also lassen wir es so gestalten. Okay. Was wir jetzt tun können, ist das zu duplizieren. Um es zu duplizieren, wähle ich den Anbieter aus und drücke Strg C und Steuerung V wie folgt Lassen Sie uns diese beiden Abschnitte markieren und Shift A drücken und dann ein horizontales Layout wie dieses erstellen. Und wieder werde ich diesen so duplizieren. Okay. Jetzt ändere ich diesen Frame-Namen in Prods und hier ändere ich die Zwischengröße auf 20. Okay. Lassen Sie uns nun die Details zu dieser Rolle hinzufügen Ich werde diese Rolle in die blaue Farbe ändern. Komm her und klicke hier, dann ändere die Feldfarbe wie folgt in Blau. Okay, ich werde auf die Artikel einwirken, und hier fügen wir die Details hinzu, und dann können wir den Rest der Informationen ändern. Also komme ich einfach her. Hier sind die ersten Details, kopiere sie. Ändere seinen Namen. Dann komm wieder her und kopiere die Kurzbeschreibung wie folgt und die Kurzbeschreibung so auf. Hier lege ich die Breite als Füllbehälter fest und stelle den Tippfehler auf align lab ein. Dann werde ich dieses Etikett umbenennen, um mehr zu erfahren Dann benenne es mehr oder weniger View Profile um und wir müssen die Rolle hinzufügen Fügen wir das hinzu. Fügen wir das Brötchen so hinzu. Und ich werde dieses Rollentelefon ändern in, lass es uns in Absatz ändern. Um es zu ändern, gehe ich hierher und der Rollentext wird ein Absatz sein. Auf diese Weise wird es nicht wie der Link aussehen. Wenn wir jetzt zum Design gehen, wird es so aussehen, und lassen Sie uns weitermachen und die Details hinzufügen. Von hier aus kopiere ich den Namen und füge den Namen hier ein, dann komm her und kopiere die Rolle. Dann füge die Rolle so hinzu, dann kommen wir zur Kurzbeschreibung. Und tatsächlich hier ändere ich es von hier aus. Lass es uns nicht so ändern. Lass es uns von hier aus ändern. Auf diese Weise können wir es für Artikel auf der Seite wirksam machen . Also lass es uns für diesen machen. Und dieser. Das ist der Vorteil eines solchen automatischen Layouts. Kein automatisches Layout. Das ist der Vorteil von Komponenten. Wenn ich sie ändere, wirkt sich das auf den Artikel aus. Dann werde ich hier sein, lass es uns in Profil ändern. Eigentlich können wir es von hier aus ändern. Dann ändern wir es, es ändert sich. Jep Und hier müssen wir das Bild ändern, klicken Sie hier, Doktor Michel, lassen Sie uns dieses Foto finden und hier ist er, klicken Sie so, dann mache ich weiter Okay, lassen Sie uns weitere Angaben zum Arzt hinzufügen. Hier sind die Details, und lassen Sie es uns so ausdrücken. Dann fügen wir die Rolle hinzu. Fügen wir eine kurze Beschreibung wie diese hinzu. Okay. Lass uns das Foto jetzt so ändern. Eigentlich ist es besser, das Bild des Arztes mit diesem Arzt dem Namen entsprechend zu ändern , aber lassen wir es so. Dann werden wir einige Probleme sehen, also lasst uns sie beheben. Das erste Problem ist, dass diese Abschnitte nicht identisch sein werden und wir haben fünf Ärzte hier, wir haben fünf Ärzte, aber wir haben nur Platz für drei Ärzte, also müssen wir hier einen Slider hinzufügen. Wir haben eine andere Höhe als die Boxen, um das Problem zu beheben Lassen Sie uns die Größe überprüfen, die wir hinzufügen möchten, sie sollte 615 sein Gehen wir zu unserer Komponente und machen wir ihr eine Höhe 615, dann können wir sie einfach so korrigieren Wenn wir jetzt zum Design gehen, wird es so aussehen, aber jetzt müssen wir diesen Schatten so hinzufügen , dass er links und rechts sichtbar Denken Sie daran, als wir es das letzte Mal repariert haben. Um das Problem zu beheben, wähle ich diesen Abschnitt aus, unseren Anbieterbereich, und dann klicke ich auf diesen Ignotoayo und dann muss ich 40 zu dieser Breite hinzufügen Lass uns 40 hinzufügen. Wenn ich 40 zu 1.160 addiere, werden es 1.200 sein Dann werde ich hier Padins 20 wie folgt hinzufügen. Dann muss ich es in die Mitte stellen. Okay. Jetzt wollen wir sehen, dass es perfekt sichtbar ist. A hier, wir haben ein anderes Problem. Dieses Ansichtsprofil ist keine Zeile Um das Problem zu beheben, suchen wir uns die längste kleine Beschreibung heraus. Ich glaube, das ist es. Lass uns herausfinden, wie lang es 96 ist. Lass uns 100 draus machen. Wir kommen nur her und klicken hier, dann machen wir die Höhe hundert. Jetzt schau, was passiert. Also lass uns diesen Text so erfinden. Ich wähle einfach den Text aus und füge dieses Align Top zur Typografie Sehen wir uns jetzt das Design an. Jetzt wird es perfekt ausgerichtet sein. Bisher haben wir keine Fragen, und jetzt müssen wir dafür drei Punkte wie diesen hinzufügen Ich werde einfach hier klicken und den Namen in Folienpunkte ändern und jetzt klicken wir auf Komponente erstellen. Und schneiden Sie es aus, gehen Sie hier auf das Element, das eigentlich in den Stilen auf dem Element steht, wir fügen es einfach hinzu. Und jetzt kommen wir hierher und gehen zu Asserts in Asserts. Klicken wir auf unseren Schieberegler, klicken wir auf Instanz einfügen und lassen Sie uns das in unseren Gor-Empfang einfügen In unserem Service wähle ich in unserem Service aus und füge es dann einfach so ein, und es sollte sich innerhalb dieses Rahmens befinden, es wird perfekt ausgerichtet sein Dann müssen wir es nicht von Grund auf neu erstellen. Wir können einfach zu ASEDs gehen und auf Slider Dot klicken und dann auf Insert Instance klicken und es ausschneiden, indem Command X oder Control X drücken und hierher kommen. Dann müssen wir es zu unserem Provider-Bereich hinzufügen. Jetzt muss ich diese beiden Abschnitte auswählen und Shift A drücken, dann werde ich sie in die Mitte stellen. Schauen wir uns den Abstand an. Ich denke, das sollte es sein. Es ist tatsächlich 30, also lass uns und lass uns hinzufügen, lass uns diesen auswählen und lass uns das Element in Bits als 30 hinzufügen. Okay. Jetzt müssen wir diesen Bereich für unsere Anbieter etwas erweitern, also lassen Sie uns ihn vergrößern. Nicht dieser, wählen Sie die Anbieter aus. Lassen Sie uns diesen Abschnitt wie folgt vergrößern. Und was ist damit passiert? Mm hmm. Wir müssen diesen Frame 31 nicht erhöhen. Wählen wir diesen Frame 21 aus. Machen wir es wie einen Container-Container für Anbieter. Okay. Dann stelle ich die Höhe als Umarmungsbehälter Und jetzt ist es perfekt hier. Hier werde ich dasselbe tun. Eigentlich muss ich das nur auf unseren Services-Container ändern . Okay. Jetzt muss ich nur noch unseren Provider-Bereich so ändern . Mal sehen, wie viel es tatsächlich ist, lassen Sie uns diese Größe auf 820 setzen oder wir können das einfach unseren Provider-Container auswählen und überprüfen groß der Abstand zwischen diesen beiden Abschnitten ist. Also dann werde ich seine Größe einfach auf 20 reduzieren und hier können wir das Gleiche tun. Es ist 54, lassen Sie uns es verringern und weitere 20 verringern. Perfekt. Und dann müssen wir die Größe des Dienstes ändern . BG hat sich geändert. SLeTo-Service BG, perfekt. Jetzt müssen wir auch unsere Anbieter BG hinzufügen , denn wenn wir jetzt eine Ellipse wie diese hinzufügen, wird sie hier angezeigt, weil wir automatische Layout dieses Anbieterbereichs ignorieren Lassen Sie uns auf Con Frame klicken und einen Frame erstellen . Dieser Frame wird ein Füllcontainer sein und die Höhe wird 823 sein Und die Höhe wird 823 sein. Und was ist passiert? Hier. Dann müssen wir diesen Anbieterbereich sedieren und ihn so ansprechen , dass er dem Anbieter BG entspricht, wo ist unser Anbieter Okay, hier ist unser Anbieter, weshalb wir es einfach wie unseren Anbieter G machen, und dann werde ich ihn hier so platzieren Okay. Schauen wir uns jetzt das Design an. Das Design wird so aussehen. Okay. Und in der nächsten Lektion werden wir diesen Vorschaubereich entwerfen. 60. Die Abschnittsanordnung ändern: Als Nächstes müssen wir diesen Bewertungsbereich erstellen. Aber wenn wir unsere Website überprüfen, haben wir hier ähnliche Muster. Hier haben wir Dienstleistungen, dann haben wir unsere Anbieter und beide Bereiche sind identisch und beide Bereiche haben Slider. Wenn wir jedoch diesen Bewertungsbereich hinzufügen, wird dieser Bewertungsbereich auch einen Schieberegler haben. Aus diesem Grund habe ich vor, Kontakt C nach diesem Bereich für unseren speziellen Anbieter einzurichten. Nach dem Kontaktbereich können wir den Abschnitt mit den Bewertungen hinzufügen und dann können wir diese Fußzeile hinzufügen Für diesen Kontaktbereich werde ich mich für diese Art von Design entscheiden da dadurch die Konsistenz unserer Website gewahrt bleibt Dann werden wir eine separate Seite für dieses Formular erstellen und die Schaltfläche , die diesen Feed enthält, an dieses Formular anpassen. Okay, lassen Sie uns in der nächsten Lektion mit der Gestaltung dieses Kontaktbereichs beginnen. 61. Design-Kontaktabschnitt: Hallo, alle zusammen. Lassen Sie uns den Kontaktbereich erstellen. Gehen wir also zu JAD GPT und sagen wir, wir benötigen einen Bereich für schnelle Kontakte mit Telefonnummer, Standort und Schaltfläche, um einen Termin anzufordern Können Sie diese Informationen generieren und sie umsetzbar machen? Mal sehen, gib mir drei Auswahlmöglichkeiten und eine Überschrift für den zweiten Abschnitt Okay, mir gefällt Option zwei, also lasst uns den Inhalt kopieren und Gestaltung des Abschnitts beginnen. Hier werde ich diese Details hinzufügen. Es ist ein Bereich für schnellen Kontakt. Okay, jetzt fangen wir mit dem Design an. Dazu gehe ich zu unserem Rahmen und wähle den Rahmen aus. Lassen Sie uns die Befehlstaste drücken und das Design wie folgt vergrößern. Okay. Dann werden wir in einem Abschnitt wie diesem zuerst das machen, auf Frame klicken, hier klicken. Dann mache ich mich daran, den Behälter zu füllen und sagen wir mal 600. Okay. Jetzt habe ich vor, ein Bild auf der rechten Seite und Text auf der linken Seite hinzuzufügen . Also lass uns das machen. Um das zu tun, drücke ich auf T und erstelle diese Art von Text, und bevor ich das mache, muss ich diesen Abschnitt in ein automatisches Layout umwandeln oder diesem Rahmen ein automatisches Layout hinzufügen, also drücke ich einfach Shift A und dann ändere ich diesen Frame-Namen WIC-Kontakt, dann stelle ich in dieser Rahmeneinstellung den linken und rechten Abstand oder das horizontale Fading und Null und die vertikale Fadina Null dann setzen wir es auf eine Zeile oben links und die Höhe wird 600 sein. Jetzt wähle ich hier den Text aus und klicke hier und wähle ihn als Header aus. Dann lass uns die Überschrift kopieren. Also hier ist die Überschrift, ich kopiere sie einfach und füge sie hier ein, dann müssen wir diesen Inhalt hinzufügen. Wir können diesen Inhalt als Icon-Box hinzufügen. Lass uns das tun, um es zu tun. Zuerst muss ich eine Icon-Box erstellen. Drücken wir die Taste und drücken wir T und fügen Text wie diesen hinzu. Lassen Sie uns diesen Abschnitt mit Schnellinhalten vorerst als vertikales Layout ändern . Und lass uns das so aufschreiben. Dann werde ich den Text in eine Unterzeile ändern. Okay. Nun, hier werde ich diese Funktionen hinzufügen, dann werde ich diesen Text duplizieren und lassen Sie uns diesen Text zu einem Absatz machen . Außerdem muss ich die Füllfarbe in diese schwarze Farbe ändern, und das müssen wir auch hier tun. Okay. Dann werde ich diesen Text ändern, um uns anzurufen , um sofortige Hilfe oder Informationen wie diese Dann werde ich diesen Abschnitt duplizieren und hier einfügen und jetzt füge ich die Telefonnummer hinzu. Ich denke, das ist die Telefonnummer, die oben hinzugefügt wurde. Mal sehen, es ist dasselbe. Ich drücke einfach die Befehlstaste auf einem Telefon, Mac und steuere eine Schriftart unter Windows und füge den Text zu diesem Suchfeld hinzu und hier findet er einen ähnlichen Inhalt und jetzt füge ich ihn hier hinzu, dann klicke ich einfach darauf, weil wir das nicht mehr benötigen. Dann werde ich aus diesem Kopf Überschrift machen, aber die Schriftgröße ändern wir später. Jetzt füge ich das Symbol hinzu, um das Symbol hinzuzufügen. Ich gehe hier hin und schließe das San Widget an und klicke auf das cFontSM-Symbol, und von hier aus gehen San Widget an und klicke auf das cFontSM-Symbol, wir zu einem Symbol wie der Presse hier und jetzt haben wir dieses Ich schneide es einfach aus und entferne diesen einen ALT-Frame und komme hierher Dann füge es einfach ein. Ich füge es einfach in diesen Auswahlinhalt ein und drücke Shift A, um Otolao hinzuzufügen Dann sehen wir uns die Größe dieser Symbole an. Es ist also 12110. Lass uns die gleiche Größe machen. Wählen Sie hier und legen wir einen Wert von 120 und eine Höhe von 110 fest. Okay. Dann machen wir es in die Mitte. Okay, vergrößern Sie dazu das Symbol, ich wähle das Symbol aus, klicke auf die Einschränkungsvorschläge klicke auf die Einschränkungsvorschläge und ändere es dann auf 60. Okay. Jetzt muss ich diesem Symbol einen Rahmen hinzufügen. Also lass uns das machen. Um das zu tun, kann ich sogar hierher gehen und die Grenze überprüfen. Hier ist der Rand, er hat also Größe zwei. Fügen wir hier also wiedergewählten Strich blau hinzu, Größe zwei, und hier ist die Ecke zwei Okay. Jetzt werde ich diese drei Abschnitte zusammenfassen. Wählen Sie sie aus und drücken Sie Shift A, und dann werde ich den Behälter mit D füllen. Eigentlich muss ich diesen auswählen und ihn mit Füllbehälter einstellen und sieht gut aus. Dann muss ich die Füllfarbe ändern. Lass es uns so auf Blau ändern. Dann wähle ich diese beiden Elemente aus und drücke Shift A, um Autoa hinzuzufügen . Dann ändere ich das automatische Layout in ein horizontales Layout Dann gehe ich hinein und wähle hier den Vektor aus und platziere das Cticon darüber und wähle den Rahmen aus und stelle dann die Rahmenausrichtung so ein, dass der Rahmen so links ausgerichtet Jetzt müssen wir die Schriftgröße verringern, weil sie zu groß erscheint. Verkleinern wir sie, um sie in der Typografie zu reduzieren, ich werde den Stil entfernen, dann lassen Sie uns hier Lassen Sie uns eigentlich die Originalgröße beibehalten. Okay. Außerdem müssen wir einen Standortbereich und eine Schaltfläche hinzufügen Standortbereich und eine Schaltfläche die Sie einen Termin anfragen können. Bevor ich das mache, werde ich hier ein Bild hinzufügen. Also lass uns das zuerst machen. Und bevor wir das tun, können wir diesem Abschnitt einen Namen hinzufügen. Dieser Abschnittsname wird also reachus sein, und hier haben wir ein Symbol und hier haben wir das Steuersymbol Okay, jetzt füge ich das Bild hinzu, um das Bild hinzuzufügen, ich werde auf Contract Wrangle klicken und Dann lasst uns herausfinden, dass diese Bildgröße 52500 ist. Machen wir es also 52050520 mit 500 s i, dann wird die Ecke Okay. Jetzt fügen wir das Bild hinzu. Um das Bild hinzuzufügen, wählen Sie das Rec Wrangle aus, klicken Sie hier und klicken Sie auf Bildvideo Bis hier wähle ich dieses Bild aus, klicke fünf Mal hier und wir können es einfach so hinzufügen Dann muss ich diesen Abschnitt auf der linken Seite und dieses Bild auf der rechten Seite platzieren der linken Seite und dieses Bild , um das zu tun Ich kann diese beiden Abschnitte einfach auswählen und Shift A drücken, und dann kann ich einfach diesen ganzen Schnellkontakt-Abschnitt auswählen diesen ganzen Schnellkontakt-Abschnitt und sein Layout in ein horizontales Layout ändern. Okay. Jetzt muss ich in diesem Abschnitt den Text auswählen und Text mit einem Füllbehälter erstellen, und jetzt sieht alles gut aus. Und für den Abstand werde ich einen Artikel zwischen den Größen hinzufügen. Nein, nein, das nicht. Ich werde diesen Artikel zwischen den Größen 20 wie folgt hinzufügen. Okay. Und hier ändern wir die Größe auf 20 wie folgt. Machen wir 60 zwischen der Größe dieser beiden Abschnitte. 60. Okay, jetzt viel besser. Jetzt werde ich diesen kurzen Inhaltsbereich verschieben, und wenn wir wollen, können wir die Ausrichtung links mittig so einstellen . Jetzt können wir die Arbeit fortsetzen. Als zweiten Abschnitt werde ich diesen Reichweitenbereich so duplizieren und hier können wir die Größe 20 dazwischen hinzufügen . Bevor wir das tun, fügen wir Inhalt für diesen Abschnitt hinzu. Dazu öffne ich die Datei. Von hier aus müssen wir den Standortbereich hinzufügen, Standort der Klinik kopieren und ihn hier ablegen. Kopieren Sie dann den tatsächlichen Standort. Dann werde ich diesen Ort so hinzufügen. Und für diesen Abschnitt benötigen wir diese Zahlen nicht. Ich werde es einfach entfernen. Und hier kopieren wir diesen Text und platzieren ihn unter der Position. Duplizieren Sie den Ortstext und wählen Sie ihn aus , platzieren Sie den Text und kopieren Sie ihn so. Dann versuchen wir hier einen Link hinzuzufügen. Link, ich muss zu ASSets in ASSets gehen, hier klicken und auf Tn klicken und der Link wird ein Kartenlink sein. Der Kartenlink wird in Ordnung sein. Klicken Sie auf Instanz einfügen und hier unsere Instanz und ich werde sie einfach ausschneiden und hier klicken, dann fügen Sie sie ein und schneiden Sie einfach den Text aus und fügen Sie diesen Text ein. Wir können den Text hier drinnen sehen, aber er ist zu lang. Dazu müssen wir eine Kurzversion dieses Links hinzufügen. Ich werde zu diesem GPT gehen Okay, hier haben wir die drei Optionen. Also bei den drei Optionen werde ich diese Find-Us-Esialsierung kopieren und sie hier einfach so hinzufügen Okay. Jetzt müssen wir das Symbol hier ändern, um das Symbol zu ändern. Ich werde hier klicken und auf Plugins und Widgets klicken und hier Fon TSM-Symbol klicken und hier Kartensymbol für die Suche nach Standort, Karte hier klicken und das Symbol zur Leinwand hinzufügen und das Symbol ausschneiden Ich brauche diesen Rahmen nicht, gehe dann in diesen Symbolbereich und füge das Symbol ein, entferne dieses Symbol Dann sehen wir uns die Größe des Symbols an, es ist 60. Stellen wir die Größe des Symbols auf sechs P ein und ändern Sie dann die Farbe auf Blau. So weit, so gut und jetzt müssen wir den Button hinzufügen. Sehen wir uns den Button-Text an, der Button-Text wird nach Terminanfrage sein, und um diesen Button-Text hinzuzufügen, werde ich diese Art von Design nicht verwenden. Ich werde einfach Text erstellen und diese Art von Text für den Moment hinzufügen und dann die Terminanfrage kopieren. Dann muss ich das innerhalb dieser Abschnitte hinzufügen , so wie: Okay, für diesen Frame 20 werde ich ihn umbenennen, um es inhaltlich detailliert darzustellen. Dann werde ich diesen einzigartigen Ort umbenennen. Okay. Dann werde ich die Panzer so duplizieren und sie erscheinen hier nicht , weil die Größe dieses Abschnitts 600 ist. Ich werde es einfach auf 700 ändern. Okay. Jetzt können wir tatsächlich diese beiden Elemente auswählen und Shift A drücken und die Größe dazwischen auf 220 ändern . Dann kann ich diese Takes in diesen Frame einfügen. Okay. Und lassen Sie uns diesen Frame-Namen in ein Kontaktfeld wie dieses umbenennen. Okay. Dann fangen wir an , diesen Abschnitt zu gestalten. Isolieren Sie diesen Text für die Terminanfrage und duplizieren Sie ihn Dann kommen Sie her und ich werde diesen Teil tatsächlich kopieren. Wir können es so von hier kopieren, dann kommen Sie her und fügen es so ein. Okay. Dann gehe ich zu ASEDs in Assets, klicke auf BTN und dann auf Lassen Sie uns BTN herausfinden, das ist gut Lassen Sie uns BTN als Standard festlegen und klicken Sie auf Instanz. Hier füge ich den Text hinzu, was der Text Schedules sein wird, dann werde ich diesen Text Dann schneide ich diese Schaltfläche aus und gehe zu Dateien in Dateien Ich werde das hervorheben und die Schaltfläche so platzieren Das sollte außerhalb dieses Schnellkontakt-Buches A stehen. Es sollte drinnen sein. Und dieser Button sollte sich auch darin befinden. Dann wähle ich drei Optionen wie diese und drücke Chief A, um einen Groove zu erzeugen. Und jetzt fügen wir Details hinzu. Für die Typografie wähle ich die Unterteilung zum Testen aus, ich wähle den Absatz aus und die Schaltfläche wird so aussehen Wenn wir wollen, können wir hier auch ein Symbol hinzufügen Wenn wir also ein Symbol hinzufügen, ist es perfekt. Lassen Sie uns also ein Symbol hinzufügen. Zuerst werde ich diesen Frame 20 umbenennen, um einen Termin zu vereinbaren, und lassen Sie uns das Symbol von Grund auf neu erstellen oder wir können es einfach von hier kopieren. Lass es uns von hier kopieren. Ich hoffe, du verstehst, wie man ein Symbol erstellt. Wenn nicht, gib mir einfach die Befehle , damit ich dir zeige, wie es geht. Das Layout für Terminanfragen ist jetzt vertikal, aber wir brauchen es horizontal. Um das zu tun, wähle ich zuerst diese drei Elemente aus und drücke Shift A, und hier ändere ich das als Stufen. Dann haben wir das Symbol. Also wähle ich diesen Anfragetermin und ändere ihn in ein horizontales Layout. Und dann müssen wir die Position des Symbols so ändern. Okay, dann wähle es aus und klicke links auf dieses Logo. Okay. Was wir nun tun müssen, ist, diesen Text als Füllinhalt zu erstellen hier klicken und auch das ändern , um Container zu füllen, und hier müssen wir diesen Umarm-Inhalt erstellen Nein, nein, umarme den Inhalt nicht. Es sollte ein Füllcontainer sein und dieses Textlayout sollte ein Füllcontainer wie folgt sein Hier haben wir zwei Abschnittsebenen, aber wenn es nur einen Abschnitt hat, wäre das großartig. Lassen Sie uns die andere Option ändern , die uns JGBT bietet. Lass uns diesen versuchen, kopieren, herkommen und diesen Text so ersetzen Okay. Jetzt ist es viel besser. Hier haben wir immer noch ein Problem. Ich salze den Text und lass uns das zwischen den Artikeln auf zehn ändern. Jetzt ist es viel besser. Jetzt müssen wir dieses Symbol ändern. Lass es uns ändern, gehe hierher, klicke auf Plugin und Widget und klicke auf das Antosm-Symbol Von hier aus kommen wir zu diesem Typ. Der Vektor wird von hier aus ausgeschnitten, dann wird dieses Symbol ausgewählt und eingefügt Klicken Sie hier, um es zu entfernen, und setzen Sie dann die Dosenhöhe auf sechs. Das Symbol ist tatsächlich 60 und klicken Sie auf Füllen und dann auf blaue Farbe. Jetzt scheint es zu nah beieinander zu liegen, also machen wir es als Zwilling, nicht als 20, 30. Von hier aus machen wir das zu 30, also von hier aus müssen wir diese Größe auf zehn ändern. Dann ändern wir diesen Terminplaner-Besuch, den ich eintippen kann , auf Kartenlink und jetzt ist es perfekt Jetzt müssen wir diesem Bild einige Details hinzufügen. 62. Design-Überprüfungsabschnitt: Hallo, alle zusammen. Lassen Sie uns nun diesen Vorschaubereich gestalten. Okay, lass uns zu unserem Design gehen. Von hier aus werde ich als ersten Schritt einen Rahmen erstellen und diesen mit dem Füllbehälter vergrößern und die Höhe auf 600 erhöhen. Dann drücke ich Shift A zwei bei automatischem Layout. Dann ändere ich hier diesen Namen in Review. Dann entferne ich die linken zehn rechten Ränder, horizontale Polsterung und die vertikalen Schmerzen Dann werde ich einen Text hinzufügen, einen Text wie diesen voreinstellen Dann lassen Sie uns diesen Text so in eine Kopfzeile umwandeln. Dann muss ich wieder diesen Bewertungsbereich auswählen und die Höhe auf 600 ändern. Okay. Jetzt werde ich diese Position so ändern, dass sie die obere Mitte so ausrichtet. Okay, gehen wir hierher und lassen Sie uns generieren. Nehmen wir an, ich möchte jetzt Inhalte für den Bewertungsbereich generieren. Geben Sie mir fünf Bewertungen mit dem Namen des Patienten. Geben Sie mir dann auch Titelüberschrift für den Moderator der Bewertungsabteilung. Hier brauche ich drei Vorschläge. Geben Sie mir drei Vorschläge für die Überschrift, jedenfalls nicht für die Überschrift, was unsere Patienten sagen, lassen Sie uns diesen kopieren Familien wie Ihre vertrauen uns. Und fügen wir es diesem Abschnitt hinzu. Lassen Sie uns einen Abschnitt mit Rezensionen erstellen. Fügen Sie dann den Titel hier ein. Machen wir es wie eine Zeilenüberschrift. Dann müssen wir hier die Bewertung hinzufügen. Kopiere sie alle und komm her. Seite sie so ab. Okay. Ich werde es sagen. Okay, jetzt gehen wir hier zum Design und fügen zuerst den Titel hinzu, dem Familien wie Sie vertrauen, fügen dann diesen hinzu. Okay, jetzt muss ich diesen Bewertungsbereich erstellen. Okay, lass uns das machen. Zuerst erstelle ich einen Text und dieser Text wird ein Name sein, und bevor ich das mache, wähle ich diesen Abschnitt mit der Rezension und lass uns ihn auf die horizontale Ebene ändern, und dann wird diese Überschrift ganz oben stehen. Und hier haben wir den Namen und dann die Bewertung. Okay, Name und Bewertung. Jetzt wähle ich den Namen aus, ändere seine Größe auf Sub Din und klicke auf Überprüfen und ändere die Typografie in Absatz Okay. Jetzt komme ich hierher und klicke auf Ellipse und erstelle die Ellipse so Wenn ich es erstelle, drücke ich die Umschalttaste. Die Form wird also perfekt so ausgerichtet sein. Okay. Jetzt wähle ich all diese Bereiche aus und drücke Shift A. Dann wähle ich wieder nur diese beiden Elemente aus und drücke Shift A, um ein anderes automatisches Layout hinzuzufügen. Dann wähle ich den Hauptrahmen und mache daraus ein horizontales Layout. Dann werde ich diese Ellips so auf die Oberseite legen. Okay. Eigentlich funktioniert dieses Muster nicht, also werde ich diesen Rahmen entfernen, um ihn zu entfernen, ich wähle den Rahmen aus und gehe dann hierher, dann wähle ich den Rahmen und hier wähle ich Automatisches Layout entfernen, und dann füge ich das einfach so hinein und dann entferne ich diesen Rahmen und wir müssen das Foto des Rezensenten und den Namen gruppieren. Ich wähle einfach diese beiden Abschnitte aus und drücke Shift A, dann mache ich es horizontal und setze eine Linie links in der Mitte. Dann wähle ich den Hauptrahmen aus. Dann mache ich das als vertikales Layout, und hier werde ich es so einstellen, dass es oben links ausgerichtet ist. Okay. Jetzt haben wir das Design, und von hier aus wähle ich das automatische Hauptlayout um es oben links auszurichten, und klicke hier, mache dann diesen Füllbehälter und ändere den Text so, dass er mittig ausgerichtet ist. Okay. Jetzt wähle ich hier den Rahmen aus. Lassen Sie uns diese Stopps umbenennen. Das wird eine Vorschaubox sein, und das wird Avata Avata sein, so wie Okay. Jetzt wähle ich einfach das Bewertungsfeld aus und vergrößere es so, wie hier. Jetzt fügen wir echte Details hinzu und fügen dann Stil hinzu. Also gehe ich einfach zu dieser Textdatei und lass uns diesen Namen holen und hier einen Namen hinzufügen Dann lassen Sie uns die Bewertung wie folgt kopieren, kopieren und das Tempo der Bewertung so einstellen. Dann setze das Ganze mit der Füllung so ein. Okay. Lassen Sie uns jetzt auch das Bild einstellen. Ich wähle einfach diese Ellipse aus und klicke hier, dann klicke ich auf Image Video Dann werden wir hier die Rezensenten Avata haben. Also wähle ich hier das Foto aus und füge es einfach so ein. Okay. Dann werden wir das Bewertungsfeld auswählen. Im Bewertungsfeld lege ich die Feldfarbe als unsere weiße Farbe fest und fügen dann die Effekte hinzu, die wir bereits gespeichert haben. Okay. Jetzt wähle ich die Bewertungen aus, und hier setze ich links und rechts als und oben und unten als sechs. Nein, nicht dieser. Nicht der Bewertungsbereich, wir müssen das Bewertungsfeld auswählen, und das horizontale Muster wird sechs sein und das vertikale Muster wird sechs sein, so wie hier. Auch hier müssen wir die Ecken auf diese Weise auf 20 ändern. Lass uns eigentlich oben und unten da es schöner aussehen wird. Jetzt wird diese Innenseite 22 sein. Hier wird die Größe zwei sein. Okay. Dann wähle ich den Text und ändere die Feldfarbe in diese schwarze Farbe. Ich muss es für den Abschnitt machen. Und hier, lass es uns am Ende machen, aber jetzt müssen wir ISAs hinzufügen Um diese fünf Sterne hinzuzufügen, wähle ich das Bewertungsfeld und lasse es uns so ändern , wie es passiert ist Lassen Sie uns dieses horizontale Layout als erstellen. Um die Bewertungs-IAs hinzuzufügen, klicke ich hier und klicke auf das Pontosm-Symbol Hier suche ich und hier haben wir Sterne Ich klicke einfach auf diesen Stern und komme hierher, schneide ihn ab und entferne den Rahmen Wählen Sie dann dieses Bewertungsfeld aus und in diesem Bewertungsfeld drücke ich einfach auf den Stern und hier füge ich es so hinzu. Dann werde ich seine Farbe in diese goldene Farbe ändern. Dann wähle ich den Stern aus und dupliziere ihn fünfmal. Dann wähle ich alle aus und lass uns alle auswählen. Ich drücke einfach die Umschalttaste und wähle alle aus und drücke dann Shift A, um sie zum Layout hinzuzufügen Dann ändere ich die Position in ein horizontales Layout, und hier ändere ich das Element zwischen den Größen. Machen wir sechs draus. Okay, perfekt, und ich werde die Größe der Sterne beibehalten, aber wenn du willst, kannst du sie einfach auswählen und die Breite und Höhe ändern. Okay. Jetzt sieht es so aus, wir können sie einfach von hier aus duplizieren oder wir können eine Komponente erstellen. Lassen Sie uns das für dieses Beispiel einfach so duplizieren, wie es ist. Ich platziere einfach das Übersichtsfeld und drücke Befehl C und Befehl B, dann wähle ich diese beiden Überprüfungsfelder aus und drücke Shift A und mache es horizontal. Dann wird die Größe dazwischen 20 sein, also so. Ja, wir müssen das von einem Punkt aus erhöhen. Wir müssen hier auf diese Weise dasselbe tun. Okay, lassen Sie uns die Höhe erhöhen, lassen Sie uns die Höhe erhöhen. Erhöhen wir die Zahl um die Zeile 440. Machen wir dasselbe hier, 440, so. Dann füge ich das zwischen den Größen 60 hinzu, dann werde ich das nochmal duplizieren. Wenn ich es dupliziere, geht es außerhalb dieses Rahmens, aber das ist völlig okay, weil wir das als Slider machen werden. Okay, gut. Lass uns auch die Höhe erhöhen. Lassen Sie uns versuchen, die Höhe für 4.040 bis 2.440 auf diese Weise zu erhöhen. Lass es uns auch hier machen, für 40 und hier für 440 Okay. Allerdings haben wir nicht viel größere Bewertungen, also brauchen wir es vielleicht nicht als 440, aber lassen wir es bei 300. Ja, 300 werden okay sein. Sehen Sie sich das Problem an, dass wir kein Bauteil haben, wir haben die Höhe dieser Designs manuell angepasst. Nun, wenn wir das Design überprüfen, wird es so aussehen, also muss ich den Inhalt ändern und auch diesen Rahmen korrigieren, ohne dass irgendwelche Probleme angezeigt werden , um es zu beheben, wie wir es getan haben, bevor wir diesen Bewertungsbereich auswählen und die Höhe auf 1.200 hinzufügen Dann füge ich horizontale Patins für beide Seiten hinzu und lass uns das Problem so beheben. hier haben wir ein Problem Wenn Sie das Design überprüfen, wird es so aussehen, aber es gibt mehr Platz, um es von hier aus zu beheben Ich klicke hier und mache die Null als die Seite des Schmerzes und lass uns mit 1.180 beginnen. Okay. Jetzt ist es absolut ja. Jetzt, wenn wir es sehen , wird es so aussehen. Okay. Jetzt müssen wir als nächsten Schritt drei Punkte hinzufügen. Dazu gehe ich zu Assets, klicke auf den Seitenpunkt, klicke auf Instanz einfügen und lass es uns einfügen. Lass es uns ausschneiden und zu den Dateien gehen. Und hier drinnen werde ich es so drücken. Dann drücke ich einfach diese beiden Elemente und drücke A, um das automatische Layout hier hinzuzufügen Ich mache das auf 220 und das automatische Layout wird eine Linie zur Mitte wie folgt sein. Passen wir es jetzt manuell an, da dieser Abschnitt zu lang ist, also müssen wir ihn manuell anpassen. Um es manuell anzupassen, werde ich diesen Rahmen entfernen, nein, wir müssen ihn anpassen, ich wähle einfach die Elemente aus und klicke auf Ignorieren, und ich werde ihn einfach manuell so anpassen Dann werden es 20 sein. Okay. Gut. Und jetzt müssen wir diesem Bewertungsabschnitt so einen Hintergrund hinzufügen, dann wird der Bewertungsbereich 600 sein, aber wir brauchen nicht, dass er 600 sein muss. Also machen wir es so, dass es 500 enthält und wir es auf 500 machen. Mal sehen, mal sehen, lassen Sie uns die Größe so verringern. Dann wählen wir diesen aus und die Höhe ist 492 und wo ist der Rahmen , den wir hinzugefügt haben. Das ist es. Machen wir die Höhe 492 und es wird ein kostenloser Container sein. Lassen Sie uns diese Sachen jetzt umbenennen. Hier ändere ich das Bewertungssatz und wir brauchen diesen Rahmen nicht, also wähle ich einfach alle Bewertungen aus und füge sie zur Überprüfung und lass uns das Layout in ein horizontales Layout wie dieses ändern . Dann werde ich diesen Rahmen überprüfen und hier werde ich diesen Rahmen ändern, um G zu überarbeiten , und dieser Rahmen wird Lab One oder am selben Tag sein, dieselben Daten, dasselbe DA-Tag, und dieser wird 24 Schrägstrich 7 sein , all diese Texte taggen, wir müssen die Füllfarbe in diese schwarze Farbe wie diese ändern . Jetzt fügen wir die echte Waffe hinzu. Öffnen wir die Datei und wir haben David, kopieren den Text und testen ihn so Lass uns das Bild hinzufügen. Dann haben wir hier eine weitere Bewertung. Fügen wir es hier hinzu und ersetzen diesen Text. Jetzt ändere dieses Bild so. Jetzt sehen wir es uns im Design an. Ich werde so aussehen, damit wir die Größe dieser Box verringern können. Wir werden es im Elementor-Design machen. Lass es uns jetzt so belassen. Jetzt haben wir eine Sektion. Jetzt müssen wir nur noch den Puta-Bereich erstellen. im nächsten Video Lassen Sie uns im nächsten Video den Puta-Bereich entwerfen 63. Design-Fußzeile: Hallo, alle zusammen. Jetzt müssen wir nur noch diesen Fußzeilenbereich erstellen Wenn ich also den Fußzeilenbereich erstelle, werde ich ihn in dunkler Farbe erstellen, und hier füge ich ein Logo hinzu, und hier füge ich eine Zusammenfassung der Klinik hinzu, und hier füge ich ein Social-Media-Handle Danach werde ich hier nützliche Links hinzufügen. Dann diese Seite, ich werde diese Kontaktleiter hinzufügen. Okay. Lass uns anfangen. Zuerst vergrößere ich den Rahmen und füge einen neuen Rahmen hinzu, und wir machen ihn mit einem Füllcontainer, und er wird es vorerst auf 500 machen, und dann füge ich dem ein automatisches Layout hinzu, also drücke ich Shift A, gerade das automatische Layout hinzu, dann automatisches Layout. Die Richtung wird das horizontale Layout sein und hier setze ich den horizontalen Abstand auf Null und den vertikalen Abstand auf Dann müssen wir schwarzen Hintergrund hinzufügen. Wenn wir diese Füllfarbe einfach in Schwarz ändern, wird sie nicht auf die Größe dieses Rahmens festgelegt. Wir müssen nur hier klicken, auf das Rechteck klicken und so klicken, dann mit Füllung und Höhe einstellen, dann ist Rechteck klicken und so klicken, dann mit Füllung und Höhe einstellen, die Einstellung mit Füllung und Höhe 500 Okay. Jetzt werde ich auf diesen Igno Autoayo dieses Rechtecks klicken. Dann kann ich es so anpassen, wie ich will, es so anpassen und hier werde ich außerhalb dieses Rahmens so hinzugefügt Dann nicht im Bewertungsbereich direkt außerhalb des Rahmens wie diesem und wir sollten auf IgnotlaPut it as this so klicken Was ist passiert? Ernsthaft Okay, jetzt alles gut. Hier ist das Rechteck. Ich werde das Rechteck nicht an die Spitze setzen, dann werde ich Itroclor zum Rechteck hinzufügen Keine Itrolor-Feldfarbe. Die Feldfarbe wird diese schwarze Farbe sein. Dann ist unsere Feldfarbe jetzt dieselbe, dann müssen wir als ersten Schritt unser Logo hinzufügen. Gehen wir zu unserem Stylesheet. Hier ist unser Stylesheet und hier ist unser Logo. Das ist unser Logo, aber wir brauchen das weiße Logo. Erstellen Sie ein weißes Logo, ich platziere einfach das Logo und in der Eigenschaft kann ich auf die Variantenschaltfläche klicken und eine Variante erstellen. Bringen Sie den Abschnitt hierher Ich werde diese Farbe ändern, um die Variante festzulegen , und den Variantennamen in weißes Logo ändern Ordnung. Gehen Sie jetzt wieder auf die Website und hier werde ich das Logo hinzufügen, gehen Sie zu Assert Assets. Wir haben das JB-Logo, klicken Sie darauf und hier das schieferweiße Logo, klicken Sie auf Einfügungen, dann schneide ich die TG-Dateien in den Rahmen aus, füge es ein und lassen Sie uns diesen Frame-Namen in „Okay“ ändern Jetzt muss ich den Fußzeilenbereich so auswählen, dann müssen wir den oberen Rand hinzufügen, da er nur am oberen Rand 60 ist den Fußzeilenbereich so auswählen, dann müssen wir den oberen Rand hinzufügen , 60 ist zu groß, Kit 30 ist gut und die Artikelgröße werde ich vorerst auf Null setzen. Dann muss ich einen Text erstellen. Ich drücke T bei dieser Art von Text, dann ändere ich es von Ty für Tab in Absatztext und die Füllfarbe, lassen Sie uns die Füllfarbe auf diese weiße Farbe ändern. Dieser Text sollte sich wie folgt in der Fußzeile befinden. Jetzt werde ich diese beiden Optionen sehen und Shift A drücken , dann werde ich dieses Layout in vertikal ändern Hier muss ich dieses Logo über den Text legen. diesem Rahmen müssen wir die Größe zwischen den beiden Enden ändern . Als Nächstes fügen wir hier eine Zusammenfassung hinzu, gehen wir zu Hart GPT, und hier, sagen wir, jetzt brauche ich eine Zusammenfassung, nein, nein, ich muss den Put-Abschnitt entwerfen, diutertonGib mir Schauen wir uns an, welche Art von Details mit GPT generiert werden. Okay, ich generiere die Details so. Okay, und gut. Okay, wir haben alle Details, aber ich brauche eine Zusammenfassung. Nehmen wir an, ich benötige eine Zusammenfassung für Clean in 150 Zeichen. Verstanden, habe Text. Lass uns das hier hinzufügen. Füge einen Abschnitt hinzu, einige hier, ändere diesen Text so, dann werde ich ihn so einstellen, dass er gefüllt enthält. Jetzt muss ich diese Größe in vier Spalten ändern. Okay, wir müssen hier Social-Media-Handles hinzufügen, wir haben einen Link zu sozialen Netzwerken, ich werde Facebook, Twitter, Facebook, Sam, Twitter und Link haben . Fügen wir den Tag hinzu, auf den ich hier eingehen werde. Jetzt klicke ich hier und klicke auf Fontas Suchphase Diese Stelle, ich kann sie hier, einfach auswählen, diesen Teil entfernen und dann auf die Kreuzung klicken, die Position so platzieren Platziere es unter diesem Rahmen. Lassen Sie uns diesen Rahmen wie folgt zu einer reinen Summe machen. Jetzt müssen wir hier nur Shift A drücken, um das automatische Layout hinzuzufügen. Dann klicke ich auf das Vektorsymbol und lasse uns die Feldfarbe auf Weiß ändern , damit wir deutlich sehen können , was hier passiert ist. Also lass uns diesen Sarazeb hier umbenennen und hier stelle ich ihn als gesendete Zeile ein und hier ändere ich zu Umarmung und die Höhe wird Umarmungsinhalt sein Und jetzt können wir die horizontale und vertikale Patina ändern . 20 Und jetzt werde ich bei Field Color sein. Fügen wir diese blaue Farbe als Feld hinzu, dann Radio 20, machen wir es auf 20. Dann reduzieren wir die Ecken auf neun. Dann lass uns hier sein. Nicht schlecht, aber wir können dieses Facebook vergrößern . Ich klicke einfach auf die I 2542 Jetzt sieht es okay aus, jetzt muss ich dieses Presseblatt duplizieren. Lassen Sie uns diese beiden Symbole auswählen und Shift A drücken, um automatische Layout hinzuzufügen, und lassen Sie uns das horizontale Layout erstellen Und dazwischen Seite B 20. Und jetzt ändern wir dieses Vektorsymbol. Lass uns Link Thin hinzufügen. Fügen wir X Twitter C Hochtöner hinzu. Haben wir kein neues Tita-Symbol? Es sieht so aus, als hätten wir kein neues Twitter-Symbol. Lassen Sie uns vorerst dieses alte hinzufügen, und in Element können wir hier schnell das echte hinzufügen und es so einfügen. Dann entferne ich dieses Facebook und wähle das Twitter-Symbol aus und klicke auf C-Sorte Proposition und ändere mit 505250 ist ein bisschen groß und verringere Sechs sind jetzt okay für High Fill, lass uns einen Hi-Fill-Behälter machen Mit werden zwei mal zu klein sein. Lass es uns schaffen. Wir brauchen nur zwei. Lassen Sie uns die Breite hier mit 65 77 überprüfen. Wir können locker 657 so machen. Okay. Jetzt müssen wir diese Füllfarbe in weiße Farbe ändern. Und lassen Sie uns das noch einmal duplizieren und hier fügen wir ein verlinktes Symbol hinzu. Wir haben verlinkt, wählen Sie einfach das verlinkte Symbol aus, und wir brauchen diesen Rahmen nicht und klicken Sie hier, klicken Sie in diesen Vektor und platzieren Sie den Link hier. Jetzt sollten wir das verlinkte Symbol so vergrößern , dass es mit anderen übereinstimmt. Okay. Und jetzt fügen wir Instagram hinzu. Gehe zu Font tsm S Instagram. Hier haben wir das Symbol und ändern das Instagram, entfernen den Instagram-Rahmen und klicken hier, fügen es so Lassen Sie uns dann diese Größe erhöhen , um die Farbe auf Weiß zu ändern. Okay, isoliere jetzt dieses Set und lass uns dazwischen die Größe auf zwei ändern. Okay. Jetzt schauen wir uns das Aussehen an und es wird so aussehen. Wenn es also zu schwach erscheint, können wir es einfach verringern, indem wir die hohe 60 ändern sie auf 65 65 umstellen Ja, 65 65 wird gut funktionieren. Jetzt siehst du, jetzt wird es so aussehen. Und hier haben wir einen weißen. Lass es uns so ändern. Okay. Und jetzt ändern wir den anderen Abschnitt. Eigentlich kann ich sogar den Fotobereich sehen und er hat bei 30 eine horizontale Polsterung Und jetzt lassen Sie uns diese Sektionen, Klinikübersicht und hier umbenennen Klinikübersicht und hier Also soziale Medien. Dann müssen wir nützliche Links hinzufügen. Lassen Sie uns nützliche Links für diesen Typ ST und hier fügen wir diese Art von Panzern hinzu und lassen Sie uns das so ändern, dass wir das Sub Edin ersetzen, wir haben hier kein Sub. Lassen Sie uns schnell urteilen. Dann fangen wir hier an, fügen wir hier Text hinzu. Dann müssen wir unseren Quicklink hinzufügen. Ich werde es duplizieren, diese beiden Abschnitte löschen und Shift A drücken und das Layout in ein vertikales Layout ändern Und hier ändere ich den Text in Schaltflächen, und dann können wir Details wie Home hinzufügen, und dieses Zuhause wird blau angezeigt, weil das der gewählte Link ist Dann werde ich sie einfach duplizieren und dann gehen wir zu unserer Sitemap und kopieren diesen Abschnitt in den Blog. unsere Anbieter, unser Anbieter, unsere Anbieter, Anbieter, Anbieter, kontaktieren Sie uns über den Kontakt, und dann werden wir einen Termin anfragen müssen , zu denen wir unsere Serviceanfrage nicht benötigen , und vereinbaren einen Termin. Und dann und dann fügen wir eine Seite mit den Allgemeinen Geschäftsbedingungen hinzu. Okay, jetzt wähle ich einfach diese Links aus und drücke Shift A, und lass uns die Größe auf 12 ändern und diesen Frame auswählen. Und hier fügen wir es etwa 30 hinzu. Okay. Dann ändere ich diese Farbe, um einfach alle auszuwählen und ihre Farben auf Y zu ändern. Okay. Und jetzt fügen wir es etwa 60 hinzu, aber wir werden diese Größe natürlich ändern Und jetzt fügen wir unseren Standortbereich hinzu. Es ist unser Standort. Kopie des Kontakts. Und hier erstellen wir einen weiteren Text, drücken auf den Text und ändern die Typografie wieder in Subdin, drücken auf Text färben und von hier aus kopieren wir diese Details Zuerst haben wir die Telefonnummer, die Telefonnummer an der Telefonnummer wie diese, dann muss ich diese beiden Abschnitte wie diesen auswählen und Shift A drücken und dann die Position auf vertikales Layout ändern Und hier drücke ich das T und klicke hier, und hier werden wir diese Schriftgröße auf Absatz ändern. Okay. Jetzt fügen wir die Details hinzu. E-Mail. Ja. Ja. Duplizieren Sie diesen in der E-Mail. Lassen Sie uns das ein paar Mal duplizieren. Fügen Sie dann einfach die Dämme hinzu, wir haben Stunden Zeit. In Ordnung. Jetzt haben wir Probleme, also was ist, wenn wir es so hinzufügen? Lass es uns so hinzufügen. Okay. Okay. Und jetzt wähle ich all diese Elemente aus und drücke Shift A, um eine Gruppe hinzuzufügen, und diese Zwischengröße ist Datel In Ordnung Jetzt haben wir diese drei Abschnitte, und ich wähle einfach den Fußzeilenbereich aus und ich ändere diesen Zwischenraum in Otto und er passt sich an den Platz an, den er hat Und hier ist das Design. Wir müssen das ein bisschen vergrößern und jetzt die Rahmengröße verkleinern, damit sie in die Fußzeile passt Was wir jetzt tun müssen, ist ein Copyright-Bereich. Also lass uns das auch machen. Um das zu tun, können wir tatsächlich diesen Rahmen verwenden. Um das zu tun, vergrößere ich einfach dieses Rechteck. Lassen Sie uns rechteckiges Filmmaterial machen, B-Intervall. Jetzt füge ich Text an der Stelle hinzu, an der ich ihn angebracht habe, also füge ich ihn einfach dem A-Abschnitt hinzu. Und in diesem Fußzeilenabschnitt benennen wir diese Dinge um, damit wir sie leicht verstehen können Das werden also schnelle Klingeltöne für schwache Links sein, und hier wird der Tank sein. Im Moment haben wir die Information, wo der Kontakt ist, das wird Tinte sein . Das werden die Kontaktinformationen sein. Okay. Jetzt werden wir diese drei Abschnitte haben. Ich drücke einfach auf Ich wähle einfach diese drei Abschnitte aus und drücke Shift. A wird eingestellt, und dann füge ich ein und in diesen Poa-Abschnitt ein, ich ändere es in ein vertikales Layout Und jetzt geht der Text nach unten und hier setzen wir ihn wie füllen Die Größe 19 ist 60, das ist in Ordnung. Jetzt ändere ich diesen Tipo Gravity Barging-Typografie und ändere Isolieren Sie nun den Puta-Bereich im Fußzeilenbereich in der vertikalen Polsterung Ich werde hier klicken und Okay. Was ich jetzt tun werde, ist, diesem Abschnitt das Layout hinzuzufügen. Ich verschiebe einfach A und füge dann 30, 30 bis 2020 hinzu, okay. Lassen Sie uns jetzt hier die Copyright-Details hinzufügen. Hier haben wir Urheberrechte. Nein, kein Urheberrecht. Wir schreiben einen 2024, 2024, wie diesen. Jetzt kann ich einen Strich hinzufügen, auf Strich klicken und hier werde ich diese Farbe in weiße Farbe ändern und dann auf diesen klicken. Nicht dieser, klicken Sie auf diesen. Lass uns nur den oberen Teil auswählen und so sein, dann muss ich nur die Puta VG auswählen und sie so vergrößern Okay. Jetzt haben wir einen wöchentlichen Design-Puta-Bereich Also ich habe ein Set gemacht, ich muss die Withs einstellen, da wird etwas falsch sein . Hier drin mache ich 30. Jetzt machen wir 60 draus. Und in einem Schaumstoff-Set muss ich diese Zwischengröße zu Otto hinzufügen , so wie hier Also, es ist okay, und hier werden wir nicht 60, das sind ungefähr 30. Wird so aussehen. Okay. Also, diese Icons sind eigentlich zu groß. Lassen Sie uns das entfernen und dann versuchen, 56 mal 60 hinzuzufügen. Lassen Sie uns bei 66 zuerst das horizontale und vertikale Layout entfernen, und wir benötigen keine Polsterung und ändern es auf 56 mal 50. Behalten Sie das für all diese Elemente Machen wir es nochmal fifo. Jetzt sieht es so aus und sie sieht gut aus. Jetzt müssen wir die Homepage auswählen und Befehl oder Steuerung drücken und es so ausdrücken. Okay. Jetzt hier unser Webseitendesign. 64. Kursprojekt: Herzlichen Glückwunsch. Sie haben es bis zum Ende des Kurses zum Design der benutzerdefinierten Benutzeroberfläche für Websites geschafft. Sie haben so viel aus dem Verständnis der Website-Struktur gelernt , um ein einzigartiges Design zu erstellen, das sich von anderen abhebt Bevor Sie loslegen, haben wir eine spannende Herausforderung für Sie. Ihr Klassenprojekt. Ihr Projekt besteht darin, eine benutzerdefinierte Website UI-Design für ein Restaurant zu erstellen. Wenden Sie alles an, was Sie in diesem Kurs gelernt haben. Mach dir keine Sorgen. Ich werde Sie noch einmal durch die Schritte führen. In diesem Abschnitt mit den Ressourcen Kursprojekte findest du hier eine Frage des Restaurantbesitzers. Kopieren Sie es und fügen Sie es in Ihr Figma-Projekt ein. Verwenden Sie die Informationen als Leitfaden für Ihr Design Wählen Sie Farben und Schriftarten aus, die zu den Restaurants passen, erstellen Sie dann ein einfaches, aber professionelles Logo Marke. Ideen und Inspirationen für das Farbdesign, die zu Ihrem Konzept passen. Dies wird Ihnen helfen, eine klare Richtung für Ihr Design festzulegen. Verwenden Sie die Anweisungen der künstlichen Intelligenz, die Sie in diesem Kurs lernen , um Inhalte für die Website zu generieren Lassen Sie Ihrer Kreativität freien Lauf und gestalten Sie die Benutzeroberfläche der Website Abschnitt für Abschnitt Sobald Ihr Design fertig ist, laden Sie es in Ihren Projektbereich dieser Klasse hoch. Das ist deine Chance, deine Fähigkeiten unter Beweis zu stellen und Feedback von anderen zu erhalten. Ich bin so stolz auf den Prozess, den Sie gemacht haben. Abschluss dieses Projekts wird Ihr Selbstvertrauen stärken Der Abschluss dieses Projekts wird Ihr Selbstvertrauen stärken und Ihr Portfolio um wertvolle Gebühren erweitern. Wenn Sie sich jemals nicht weiterkommen, Sie sich die Lektionen noch einmal an oder stellen eine Frage im Diskussionsbereich Ich bin hier um zu helfen. Danke, dass du mit mir gelernt hast. Ich kann es kaum erwarten, dein fantastisches Design zu sehen. Machen Sie jetzt weiter und lassen Sie Ihrer Kreativität freien Lauf. Lasst uns die Welt schöner machen. Eine Website nach der anderen.