Gestalten mit Figma: Zielseite für Mobile App

1. Willkommen beim Kurs: Wollten Sie schon einmal eine Webseite entwerfen, wussten aber nicht, wo Sie anfangen sollten? oder vielleicht haben Sie begonnen, aber Sie sind irgendwann stecken geblieben, weil Sie nicht wussten, wie Sie die richtigen Farben, Schriftarten auswählen oder wie Sie ein gutes Layout erstellen können. Nun, das wirst du in dieser Klasse lernen. Aber hey, wenn wir uns gerade treffen, mein Name ist „ADI PURDILA“ und ich bin ein Webdesigner aus Rumänien. Ich arbeite seit über zehn Jahren in diesem Bereich und unterrichte auch seit ein paar Jahren. Webdesign nimmt die meiste Zeit in Anspruch, aber ich liebe es, einfach ab und zu weg zu gehen und in einem Garten zu arbeiten, mit meiner Familie, oder etwas Holzbearbeitung. Was ich mag, die Tastatur und die Maus, ich bin auch ein hübscher Typ zum Anfassen. Jetzt werden wir gemeinsam eine Landingpage für eine Budgetierungs-App entwerfen. Wir beginnen mit einer Projektbeschreibung und einem Drahtrahmen. In jeder Lektion werde ich Ihnen zeigen, wie Sie einen anderen Schritt dieses Prozesses bewältigen können. Beginnen Sie mit der Definition von Farben, Typografie und Bilddaten. Dann werden wir in einem Abschnitt der Seite zu einem Zeitpunkt entwerfen. Also an der Ziellinie endet mit dieser Zielseite komplett mit Abschnitten für Funktionen, Galerie, Testimonials und Preise. Für diese Klasse werden wir F-I-G-M-A verwenden. Dies ist kostenlos und plattformübergreifend, so dass Sie es unter Windows und Mac OS verwenden können. Und Sie können es direkt in Ihrem Browser öffnen. Indem ich diese Klasse nehme, garantiere ich zwei Dinge. Nummer eins, Sie lernen, wie man in F-I-G-M-A arbeitet, und Nummer zwei, Sie lernen einen effizienten Prozess der Gestaltung einer Webseite basierend auf einer Kundenanfrage. Diese Klasse ist für Anfänger gedacht, Sie brauchen keine vorherige Design-Erfahrung, und ich werde Sie durch jeden Schritt des Weges begleiten. Also lasst uns anfangen. 2. Dein Kursprojekt: Hallo und willkommen zur ersten Lektion dieser Klasse, wo ich Ihnen einen tieferen Blick auf das geben werde , was wir erstellen werden. Wir werden auch über die Klassenprojekte gehen , so dass Sie sehen können, was Sie brauchen, um zu erstellen wenn Sie diese Klasse zu nehmen.Sie werden auch erfahren, warum ich wählte dieses Projekt, wie es für Sie von Vorteil sein könnte und auch, was Sie tun müssen, um loszulegen. Lassen Sie uns beginnen.Dies ist die letzte Zielseite , die erstellen.Wie ich in der Einführungsvideo sagte, ist dies für eine mobile Budgetierungs-App. Nun ist dies natürlich, ein fiktives Produkt.Diese Bilder hier sind nur Platzhalter, es Demo-Bilder aus einem UI-Kit genommen. Aber lass mich dich schnell durch das führen, was wir haben. Ganz oben beginnen wir mit einem Heldenbereich, der eine Auswahl an Screenshots aus der App sowie unsere Navigation und Inhalte enthält. nach unten scrollen, finden wir den ersten Abschnitt, vier Features, in dem jedes Feature in dieser Rasterart angezeigt wird. Dann haben wir einen zweiten Abschnitt, vier Funktionen. Bewegen Sie sich weiter. Wir haben einen kleinen Aufruf zum Aktion.Das wird durch den dritten Abschnitt vier Funktionen gefolgt.Dann haben wir eine Screenshot-Galerie, die von Testimonials gefolgt wird.Schließlich haben wir den Haupt Aufruf zum Handeln und Preistabelle.Am Ende haben wir eine Fußzeile. Dies könnte aussehen, als wäre es eine Menge Arbeit.Aber wir werden die Dinge Schritt für Schritt zu nehmen, wird diese Seite in kleinere, überschaubare Stücke zerlegen. Wir werden einen Abschnitt nach dem anderen zu tun.Sie werden sehen, dass es wirklich nicht so kompliziert ist, so etwas zu erstellen. In Ordnung, jetzt für das Klassenprojekt besteht Ihre Aufgabe darin, eine Zielseite zu erstellen, die von diesem Drahtmodell ausgehend beginnt. Ich zeige dir das in ein bisschen. Dies ist der gleiche Draht-Frame, von dem ich beginne. Sie müssen dasselbe tun, um damit zu enden. Nun, Ihr Endprodukt muss nicht genau so aussehen wie meins. Ich werde Ihnen einen Weg zeigen, es zu tun. Offensichtlich können Sie genau verfolgen, was ich tue und am Ende mit einem identischen Ergebnis. Das ist völlig okay. Aber ich ermutige Sie, ein wenig zu experimentieren und Ihre eigenen Dinge zu drehen. Möglicherweise möchten Sie beispielsweise einen anderen Satz von Farben verwenden oder einen anderen Satz von Schriftarten verwenden Elemente auf der Seite unterschiedlich anordnen. Ich werde Ihnen alle Werkzeuge geben, die Sie brauchen, um das zu tun , und ich werde Ihnen zeigen, wie Sie diese Werkzeuge zu verwenden.Aber am Ende ist es wirklich an Ihnen zu bestimmen, wie Sie dieses Endergebnis aussehen möchten.Nun, lassen Sie mich Ihnen zeigen, wie Sie dass.Zunächst habe ich zusammen eine Zielseite Starter-Kit. Sie müssen diese zuerst herunterladen. In den Starterkits haben wir einige Markenbestandteile, die im Wesentlichen nur zwei Versionen des Platzhalter-Logos sind , das wir verwenden werden. Wir haben auch einige Demo-Bilder, die wir verwenden werden. Dann haben wir eine Projektbeschreibung. Die Projektbeschreibung ist ein PDF-Dokument und das ähnelt etwas, das Sie von einem Kunden erhalten würden, richtig? Unsere Kunden als fiktiver, es heißt Numm Inc. In der Projektbeschreibung haben wir einige Hintergründe über den Kunden und das Unternehmen. Wir haben die Taglines, die wir für dieses Projekt verwenden müssen. Ich nahm an, dass das Marketing-Team des Kunden dieses Dokument zusammengestellt hat und sie uns im Grunde alles gegeben haben, was wir brauchen. Welche Art von Taglines zu verwenden, welche Art von Titeln, Untertiteln, Schaltflächentext für den Aufruf von Aktionen zu verwenden. Alles ist hier. Dann haben sie derzeit einige Produkteigenschaften für uns angelegt. Sie können sehen, dass die Features kategorisiert sind. Dann haben wir individuelle Funktionen. Wir können den Feature-Titel, Beschreibung und so weiter sehen . Alles ist hier. Dann haben wir Preisinformationen für das Produkt, einige Testimonials und dann die vorgeschlagene Seitenstruktur. Schließlich, am Ende, einige Entwurfsüberlegungen. Welche Art von Farben mag der Kunde? Welche Art von Stil können wir für das Design verwenden? Welche Art von Websites mag der Kunde? Sie können sehen, dass sie uns drei Beispiele hier geschickt haben. Dies ist wiederum typischerweise die Art von Dokument, die Sie von einem Client erhalten würden , wenn Sie ein Projekt wie dieses ausführen. Zu jedem Zeitpunkt kann es auf diese Projektbeschreibung zurückkommen und alle Details erfahren, die Sie benötigen. Nun, basierend auf dieser Projektbeschreibung, ging ich voran und entwarf diesen Drahtrahmen. Ein Drahtrahmen ist im Grunde eine Skizze. Es ist eine Low-Fidelity-Darstellung des Endprodukts. Du musst das nicht wörtlich nehmen. Ein Drahtrahmen dient nur als Ausgangspunkt, als Richtlinie. Es ist da, um Ihnen zu zeigen, welche Art von Inhalt Sie zu Ihrer Seite hinzufügen müssen . Es bedeutet nicht, dass das Layout , das wir im Wire-Frame verwendet haben, im Endprodukt sein muss. Zum Beispiel zeigt mir das Layout für diesen Heldenbereich nur ein Bild auf der rechten Seite und den Inhalt auf der linken Seite. Aber wenn wir uns das Endprodukt ansehen, können wir sehen, dass wir ein Bild auf der rechten Seite und den Inhalt auf der linken Seite haben, aber es ähnelt nicht so etwas. Schauen Sie sich diesen Abschnitt an, dies ist für die Funktionen. Im Wireframe stelle ich mir vor, dass wir vielleicht ein Bild hier auf der linken Seite und dann die Funktionen auf der rechten Seite haben müssen , aber im Endergebnis haben wir dieses Bild nicht auf der linken Seite, irgendwo haben wir nur ein Gitter von -Icons. Was ist mit dem anderen Abschnitt für Features? So sieht es im Drahtmodell aus, und so sieht es hier aus. Hier habe ich ein Bild hinzugefügt, das nicht hier im Drahtmodell war, und ich entschied mich auch, diese Funktionen so anzuzeigen. Ich hoffe, du verstehst, was ich hier zu sagen versuche. Verwenden Sie das Drahtmodell als Leitfaden für den Inhalt, den Sie verwenden müssen, nicht für das eigentliche Layout. Im Starter-Kit finden Sie auch eine resources.pdf Datei. Hier finden Sie eine vollständige Liste der Ressourcen, die im Design verwendet werden, wie das Logo, die Bilder, die Symbole, Illustrationen und auch einige nützliche Links. Wann immer Sie keine Ressource finden, die ich verwende, um sicherzustellen, dass Sie zu diesem Dokument zurückschauen, und Sie werden definitiv einen Link finden. Nun, wie fangen Sie an und lassen Sie alles für die Hauptstunden einrichten? Nun, zuerst müssen Sie dieses Starter-Kit herunterladen. Einen Link dazu finden Sie in der Klassenbeschreibung. Nachdem Sie das getan haben, gehen Sie weiter und erstellen Sie ein Figma-Konto. Gehen Sie zu figma.com. Wenn Sie noch kein Konto haben, klicken Sie auf Anmelden und folgen Sie den Anweisungen dort. Wenn Sie ein Konto haben, dann gehen Sie einfach vor und loggen Sie sich ein. Schritt Nummer 3 besteht darin, das Starter-Kit oder die Starter-Figma-Datei zu öffnen, die ich bereitgestellt habe. Lassen Sie mich Ihnen zeigen, wie das aussieht. Es ist eine relativ leere Figma-Datei mit vier Seiten, die ich für Sie gemacht habe. Die erste Seite ist das Drahtmodell, und Sie können damit schnell überprüfen, was Sie tun. Die zweite Seite ist für Farben, und ich werde Ihnen zeigen, wie Sie diese bearbeiten, sobald wir zur nächsten Lektion kommen. dritte Seite ist für Typografie, und ich ging voran und erstellt diese Rahmen für Sie, damit Sie wissen, was Sie ausfüllen müssen, und dann haben wir eine Seite für das Hauptdesign. Hier erstellen wir das eigentliche Design für die Zielseite. Gehen Sie weiter und öffnen Sie diese Datei und Sie können direkt darin arbeiten. Jetzt ist der vierte und letzte Schritt tatsächlich optional, Sie können Figma für den Desktop herunterladen. Wie Sie jetzt sehen können, habe ich Figma im Browser geöffnet und Sie können so arbeiten, kein Problem, das Ergebnis ist genau das gleiche. Aber wenn es für Sie bequemer ist, können Sie Figma für den Desktop herunterladen. Sie können dies tun, indem Sie auf figma.com/downloads gehen und unter Desktop App die gewünschte für Mac OS oder Windows auswählen. Nachdem du das alles getan hast, bist du bereit zu gehen. Nun, Sie fragen mich vielleicht, Adi, warum dieses Projekt, warum eine Zielseite? Die Antwort darauf ist sehr einfach. Für diese Klasse wollte ich, dass Sie lernen, Nummer 1, wie man in Figma arbeitet, und Nummer 2, den Prozess des Übergangs von einer Kundenanfrage zu einem fertigen Produkt. Eine Landing Page ist ziemlich einfach. Es ist nur eine Seite, Sie müssen sich keine Gedanken über komplexe Elemente machen, die Sie normalerweise auf einer Website finden würden, und es ist schnell und einfach zu tun. Ich wollte, dass dieses Projekt einem realen Lebensszenario ähnelt. Sie beginnen mit einer Projektbeschreibung, Sie beginnen mit einer Reihe von Drahtmodellen, dies sind Dinge, die Sie normalerweise erhalten würden oder Sie würden normalerweise verwenden, wenn Sie mit Ihrem Client interagieren. Die Clients geben Ihnen alle Informationen, die Sie in der Projektbeschreibung benötigen, und basierend darauf erstellen Sie das Drahtmodell und basierend auf dem Drahtmodell entwerfen Sie die eigentliche Seite. Dies ist so nah an einem realen Projekt, das Sie in einer Klasse wie diesem bekommen können. Hoffentlich können Sie die hier erlernten Informationen nutzen und diese in zukünftigen Projekten anwenden. Nun, während Sie an dieser Klasse teilnehmen, ermutige ich Sie dringend, Ihre Ergebnisse in der Projektgalerie zu veröffentlichen. Ich möchte Ihr Ergebnis sehen. Ich möchte die Projekte sehen, die du machst. Wie ich schon sagte, ich möchte, dass Sie experimentieren und Ihre eigenen Spin auf Dinge hinzufügen. Es ist völlig in Ordnung, wenn Sie genau dem folgen, was ich tue, gehen Sie weiter und posten Sie das. Aber wenn Sie möchten, fühlen Sie sich frei, Ihre eigenen Farben, Ihre eigenen Schriften hinzuzufügen , lassen Sie mich Ihre eigene Vision sehen , um diese Landing Page basierend auf diesem Wireframe zu erstellen. Also gehen Sie weiter und posten Sie das in der Projektgalerie und ich werde Ihnen Feedback dafür geben, wenn Sie wollen. Ich würde nur gerne Ihre Ergebnisse sehen. Posten Sie auch in der Diskussions-Tab, wenn Sie Fragen oder Kommentare haben, es spielt keine Rolle, wie einfach Sie denken, sie könnten sein, wenn es etwas, das Sie mir fragen möchten, gehen Sie vor und tun Sie das. Ich beantworte jede einzelne Ihrer Fragen. In Ordnung. Hier ist, was Sie an dieser Stelle tun müssen. Gehen Sie vor und richten Sie sich ein, wie ich es Ihnen zuvor gezeigt habe. Laden Sie die Starter-Kits herunter, erstellen Sie ein Figma-Konto, öffnen Sie die Starter-Figma-Datei und installieren Sie optional auch Figma auf Ihrem Computer. Sobald Sie das tun, werden Sie gut für die wichtigsten Lektionen gehen. In der ersten Hauptstunde wird das Finden des Farbschemas sein. Ich werde Ihnen ein paar Werkzeuge zeigen, die Ihnen dabei helfen werden. Das kommt als Nächstes. 3. Farbschemata: Willkommen zurück in der Klasse. In dieser Lektion erstellen wir das Farbschema für unsere Lernseite. Jetzt ist dies ein entscheidender Schritt in jedem Designprozess, daher müssen wir genau darauf achten. Es gibt auch ein paar Werkzeuge, die ich die ganze Zeit benutze um diesen Teil zu vereinfachen, und ich werde Ihnen diese Werkzeuge als auch zeigen. Bereit? Lass uns gehen. Beginnen wir mit dem Öffnen unseres Starter-Kits in Figma und gehen Sie auf die Registerkarte Farben, Farbseite. Hier können Sie sehen, dass ich für Sie vier Frames erstellt habe. Wenn Sie nicht wissen, was Frames sind, na ja, das ist im Grunde ein Rahmen. Es ist eine Möglichkeit, Inhalte auf dem Canvas zu organisieren. Aber wir werden über Rahmen in nur ein wenig reden, jetzt konzentrieren wir uns auf die Farben. Wann immer Sie ein Projekt wie dieses starten. Ich empfehle Ihnen, Ihre Farben in diese vier Kategorien zu teilen primäre, sekundäre, tertiäre und graue. Die Primärfarben sind diejenigen, die Sie am häufigsten verwenden, und normalerweise würden Sie sie für Schaltflächen oder Links verwenden. Sekundärfarben sind in der Regel für bestimmte Handlungen und Stücke, und sie sollten harmonisch mit den Primärfarben arbeiten. Tertiäre Farben sind diejenigen, die nicht sehr prominent sind. Sie würden sie vielleicht einmal auf einer Seite oder in bestimmten Situationen wie kontextbezogene Färbung für einen Eingabezustand, Fehler, Erfolg, Informationen, solche Dinge verwenden. In unserem Fall werden wir die tertiären Farben verwenden, hauptsächlich für Symbole. Dann schließlich werden Grautöne meist auf Text verwendet. Aber Sie können sie auch für andere Elemente auf Ihrer Seite verwenden. Wie vielleicht einige Symbole, Trennwände und so weiter. Was ich hier habe, ist eine Sammlung von 10 dieser Quadrate in jeder Kategorie, und jedes ist um 10 Prozent leichter als das davor. Im Wesentlichen haben wir die Hauptfarbe und neun Tönungen. Wenn Sie nicht wissen, was ein Farbton ist, ist es sehr einfach. Wenn Sie eine Farbe mit Weiß mischen, erhalten Sie einen Farbton dieser Farbe. Wenn Sie eine Farbe mit Schwarz mischen, erhalten Sie einen Farbton dieser Farbe. Ein Farbton ist daher eine dunklere Version einer Farbe, ein Farbton ist eine hellere Version der Farbe. Ich empfehle immer, wenn Sie ein Farbschema definieren, dass Sie diese Farbtöne erstellen. Sie können auch Schattierungen erstellen, wenn Sie möchten, aber ich erstelle normalerweise nur Tönungen, weil es mir Optionen gibt. Wenn ich eine Farbe für unser Design auswähle, könnte ich mir die Hauptfarbe ansehen und sagen, okay, das ist ein bisschen zu intensiv für mich, vielleicht werde ich einen Farbton davon verwenden. Vielleicht irgendwo aus dieser Gegend oder aus dieser Gegend. Aber die Idee ist, dass ich sie sehen kann und ich kann entscheiden, welcher zu diesem Zeitpunkt am besten funktioniert. Wie wählen wir die Farben aus? Nun, normalerweise fängt alles mit dem Branding an. Welche Farben hat die Marke, die Sie für den Einsatz entwerfen? In unserem Fall, unter Markenvermögen, können wir dieses farbige Logo finden. Das macht es uns sehr einfach, weil ich von hier aus zwei Grundfarben definieren kann. Ich kann als blau definieren und als lila definieren. Was ich tun werde, ist, dass ich diese SVG-Datei in Figma einfach durch Ziehen undAblegen einbringen werde diese SVG-Datei in Figma einfach durch Ziehen und und Sie können sehen, dass wir durch Auswahl einer dieser Komponenten unter Füllung einen linearen Farbverlauf finden. Klicken Sie darauf, und das wird uns unsere zwei Farben geben. Lassen Sie uns auf diesen klicken, lassen Sie uns den Hexadezimalwert kopieren. Dies ist eine Darstellung dieser Farbe und, lassen Sie uns diesen gesamten Rahmen auswählen, diese ganze Gruppe von Elementen und wo es sagt Auswahl Farben, klicken und einfügen. Dies ist eine der fantastischeren Eigenschaften von Figma. Statt jedes Element einzeln auszuwählen und seine Farbe zu ändern, wird dieser Abschnitt, der als Auswahlfarben bezeichnet wird, aktiviert, wenn Sie mehr als ein Element auswählen . Sie können die Farben einzeln ändern, oder in meinem Fall, weil ich die gleiche Farbe verwendet habe, vorher schwarz, meine Auswahl zeigte mir nur, dass schwarze Farbe und indem Sie das ändern, änderte es die Farbe jedes einzelnen Elements in dieser Gruppe. Mach dir keine Sorgen, wenn das etwas seltsam erscheint, ich werde dir mehr darüber erzählen, während wir in dieser Klasse vorankommen. Im Moment können Sie sehen, dass wir die erste Primärfarbe definiert haben, die dieses Blau ist. Lassen Sie uns den zweiten definieren. Gehen wir zurück zu Linear, lassen Sie uns dieses Element auswählen, kopieren und dann werden wir diesen Rahmen auswählen, den Sie hier sehen können. Wir können eines von zwei Dingen tun, wir können es duplizieren, indem Sie Befehl drücken oder steuern D. Befehl D, wenn Sie auf einem Mac sind oder Steuerelement D, wenn Sie unter Windows sind und das wird es duplizieren, es wird eine Kopie davon zu machen. Alternativ können Sie es auswählen und zum Figma Menum bearbeiten gehen, duplizieren. Es wird genau das Gleiche tun. Oder Sie können einfach kopieren und einfügen, wie Sie es normalerweise tun würden. Machen wir hier ein bisschen Platz. Dann werde ich diese Gruppe auswählen und ich werde dann die andere Farbe einfügen und jetzt kann ich dieses Logo loswerden. Ziemlich cool und einfach so haben wir die beiden Grundfarben definiert, die wir verwenden werden. Nun, was ist mit den sekundären Farben. Lass uns das ein bisschen nach oben bewegen. Für die sekundären Farben, hier ist, was ich normalerweise tun. Ich wähle oder kopiere den Wert meiner Primärfarbe und gehe dann zu Adobe Color. Dies ist ein Tool, das ich die ganze Zeit verwende und Adobe Color ist ein kostenloses Tool, und es gibt mir die Möglichkeit, ein Farbschema basierend auf einer Farbe zu erstellen. Gehen Sie auf der Registerkarte „Erstellen“ vor und fügen Sie diesen Wert ein, und wenden Sie dann von der linken Seite eine Harmony-Regel an. Dies ist analog, das ist monochromatisch, Triade und kostenlos. Normalerweise verwende ich komplementäre Farbschemata, denn genau wie der Name schon sagt, ergänzen sich die Farben in diesem Pellet, sie schaffen Harmonie. In diesem Fall ist die erste sekundäre Farbe, die ich verwenden werde, diese Senf aussehende Farbe. Ich gehe weiter und kopiere das. Ich gehe hierher zurück, wähle meinen Rahmen aus, füge sie diese Farbe ein und wenn ich nicht mag, wie es aussieht, ist das völlig in Ordnung, ich muss nicht genau die gleiche Farbe verwenden. Ich kann das als Leitfaden verwenden und dann einfach den Schieberegler verwenden, um meine eigene Farbe zu erstellen und wählen Sie einfach eine, die meiner Meinung nach besser aussieht. In meinem Fall werde ich diesen FFC700 verwenden. Jetzt möchte ich auch eine zusätzliche sekundäre Farbe, also werde ich dieses Bit duplizieren und für diese Farbe werde ich F25C63 wählen. Nun gehen wir zu meinen tertiären Farben über. Lass uns das ein bisschen nach oben bewegen. Lassen Sie uns etwas Platz machen, weil wir eine Menge Tertiärfarben schaffen werden. Um genauer zu sein, werden wir sieben von ihnen erschaffen. Lassen Sie uns duplizieren diese 2,3,4,5,6,7 mit dem gleichen Tastaturbefehl D, weil ich auf einem Mac bin und jetzt werde ich nur diese mit den Farben füllen, die ich gewählt habe. Der erste ist 00DAA7. Der nächste ist 37c2cc. Als nächstes ist 3a96e8. Der vierte ist 64C9FF. Der fünfte wird 9E76FE sein. Dann wird Nummer 6 CC37BD sein. Und dann wird der letzte FFCA64 sein. In Ordnung. Das sind die tertiären Farben, die wir verwenden werden. Du fragst mich vielleicht, woher hast du all diese Farben? Nun, es geht nur darum, die Farbauswahl zu öffnen und die Schieberegler hier zu verwenden, um zu bestimmen, welche Farbe ich mag. Und ich habe all das durchgemacht und ich habe gerade eins ausgewählt, von dem ich dachte, dass es am besten für dieses Projekt funktionieren würde. Alternativ, hier ist ein anderes Tool, das ich verwende und ich denke, es ist sehr hilfreich. Es heißt „Dribbble Color“. Und ich bin mir sicher, dass Sie Dribbble kennen, die Website, auf der Sie Design-Inspiration finden können. Nun, Sie können jetzt nach Farben suchen, oder? Sie können aus einer dieser vordefinierten Farben auswählen, oder Sie können einfach Ihren eigenen Wert eingeben. Und es wird Ihnen eine Liste von Ergebnissen geben, die diese Farbe verwenden. Und wenn Sie eine dieser Dribbble-Aufnahmen öffnen, können Sie auch die Farbpalette finden, die verwendet wurde. Normalerweise gehe ich hierher und bekomme Inspiration für Farben. Oder ich gehe auf die Adobe Color-Website und klicke einfach auf Erkunden und schaue mir die Farbpaletten von dieser Website an oder wähle sie einfach von Hand aus. Nun, der Grund, warum ich so viele Farben gesucht habe, ist etwas, das ich in der Projektbeschreibung gelesen habe. Der Kunde sagte uns am Ende, unter Designüberlegungen, dass wir es bunt machen sollten. Und auch sollte das Hauptfarbschema um die Farbe Blau zentriert sein , weil es Vertrauen und Professionalität vermittelt. Und sie gaben uns auch eine andere Option, Gras grün für Frische und Neuheit. Aber die Grundidee ist, das Farbschema um Blau zu zentrieren und es auch bunt zu machen. Das ist der Grund, warum wir für so viele tertiäre Farben gegangen sind, weil wir Optionen wollen. Schließlich ist der letzte Schritt, den wir hier angehen müssen, die Grautöne zu definieren. Und diese werden meistens für Text verwendet. Und hier ist es sehr nützlich, mehrere Farbtöne der grauen Hauptfarbe zu haben , da Sie dieses Bit für die Hauptüberschriften verwenden könnten. Und Sie könnten dieses Bit verwenden, das 70 Prozent ist, oder das ist 80 Prozent für den Haupttext. Nun, wenn Sie eine graue Farbe wählen, hier ist mein sehr einfacher Prozess. Ich erstelle diese Form hier, und ich wähle meine Hauptmarkenfarbe. Ich füge das ein, und dann dupliziere ich diese Form und fülle sie mit Schwarz. Und dann senke ich einfach die Deckkraft auf dieser schwarzen Farbe, um zu sagen, 90 Prozent. Und ich bin mir nicht sicher, ob du es siehst, aber jetzt ist es nicht ganz schwarz. Etwas von dieser blauen Farbe von unten kommt durch. Nun, was ich mache, ist, dass ich einfach eine andere Form erstelle. Und ich benutze den Farbwähler, um diese Farbe zu testen. Und das gibt mir mein Hauptgrau. Und wenn ich nicht mag, wie es aussieht, kann ich zurückgehen die Deckkraft des Schwarzen ändern. Und das ist ein bisschen zu viel, vielleicht 88 Prozent, oder vielleicht wollte ich etwas dunkler sein, vielleicht 95 Prozent. Und dann kann ich weitermachen und das nochmal probieren und meine graue Farbe wählen. Ich verbringe normalerweise ein wenig Zeit mit diesem Prozess, bis ich die genaue Farbe bekomme, die ich will. In meinem Fall wäre es irgendwo in der Nähe, denke ich, dieser Bereich. Die endgültige graue Farbe, die wir verwenden werden, ist 030F1A. Jetzt können wir dies löschen und wir können in unserer Farbe direkt hier einfügen. Und das gab uns gerade das Hauptgrau und die neun Tönungen, die wir jetzt in unserem Design verwenden können. Alternativ, wenn Sie Tönungen und Schattierungen erstellen möchten, lassen Sie mich Ihnen auf einfache Weise ein sehr schönes Werkzeug zeigen, das zu tun. Es heißt Tint und Shade Generator. Wir können es auf maketintsandshades.com finden. Und was Sie im Grunde tun, lassen Sie uns dies als Beispiel geben, Sie wählen Ihre Hauptfarbe, Sie fügen das in und Sie treffen Tönungen und Schattierungen machen. Und das gibt Ihnen die Schattierungen auf der Oberseite und die Tönungen an der Unterseite, zusammen mit dem Hex-Code für jeden Wert. Und an jedem Punkt können Sie auf einem von ihnen schweben. Kopieren. Und dieser Wert wird jetzt in Ihre Zwischenablage kopiert und Sie können ihn überall verwenden. Oder wenn Sie ein solches Setup haben, legen Sie einfach eine andere Deckkraft auf jeder Ebene fest und Sie erhalten relativ das gleiche Ergebnis. Und damit ist das Farbschema komplett. In Ordnung. Jetzt bist du dran, damit du beschäftigt bist. Wenn du mitverfolgt und mit mir gearbeitet hast, dann ist dein Farbschema komplett. Großartig. Wenn nicht, dann machen Sie das sofort. Verwenden Sie die Vorlagen, die ich Ihnen in Figma gegeben habe, und auch die Werkzeuge, die ich Ihnen gezeigt habe, um Ihr eigenes Farbschema zu erstellen. Sie müssen nicht genau die gleichen Werte verwenden, die ich getan habe. Fahren Sie fort und experimentieren Sie. Das ist der beste Weg, um zu lernen. Verwenden Sie die Farben, die Sie am besten aussehen. Jetzt, wenn Sie das tun, sind Sie bereit, mit der nächsten Lektion fortzufahren, der es um Typografie geht. Dies ist ein weiterer entscheidender Schritt im Designprozess. Und das werden wir in der nächsten Lektion angehen. Wir sehen uns dort. 4. Typografie: Willkommen zurück in der Klasse. In dieser Lektion beschäftigen wir uns mit der Typografie für unsere Lernseite. Also, was bedeutet das? Nun, es bedeutet, die richtigen Schriftarten und alle anderen Texteigenschaften auszuwählen, um sicherzustellen, dass alles schön und ordentlich aussieht. Das bedeutet Schriftgrößen, Zeilenhöhen, Schriftstärken und so weiter und so weiter. Ich werde Ihnen auch einige sehr hilfreiche Werkzeuge zeigen , die Ihre Arbeit viel einfacher machen werden, und wir werden auch typografische Skalen diskutieren, und ich werde Ihnen eine Einführung in das Acht-Punkt-Gittersystem geben werden wir während dieses Entwurfsprozesses verwenden. Fangen wir an. Wir beginnen hier in der Starter-Figma-Datei unter Typografie, wo ich ein paar Frames erstellt habe, um Schriftarten, die Typskala, die Überschriftenformate, den Stil für die Blockanführungszeichen und die Absätze zu definieren die Typskala, die Überschriftenformate, . Das ist genug, um dich zum Laufen zu bringen. Fahren wir mit der Definition der Überschriften fort. Um dies zu tun, werden wir zunächst einen Blick auf die Projektbeschreibung werfen. Am Ende, unter Designüberlegungen, bittet uns der Kunde, die Zielseite modern, professionell und doch spielerisch zu gestalten. Wie übersetzt sich das zur Typografie? Nun, der spielerische Teil, wir können tatsächlich von den Farben bekommen. Wenn wir es bunt machen, machen wir es spielerisch. Aber dieses bisschen, machen Sie es modern und professionell. Das können wir mit Hilfe der Typografie vollkommen tun. Wenn Sie ein Projekt wie dieses starten, ist es immer eine gute Idee, die Websites zu besuchen, die Sie verwenden, um Ihre Schriftdateien zu erhalten. Es gibt eine Menge von ihnen. Ich benutze zwei von ihnen, hauptsächlich Adobe Fonts und Google Fonts. Jetzt ist Google Fonts kostenlos und Adobe Fonts, na ja, Sie benötigen ein Adobe-Abonnement, um Zugriff auf diese zu erhalten. Aber ich werde das sagen, Adobe hat viel höhere Qualität Schriften als Google. Sie können hier immer noch tolle Schriften finden, aber normalerweise strebe ich nach Adobe Fonts, weil sie nur ein bisschen raffinierter sind, und die Sammlung hier ist eigentlich viel größer als das, was Sie bei Google Fonts finden würden. Da ich ein Adobe-Abonnement habe, ist es für mich sinnvoll, ihre Schriftarten zu verwenden. Da der Kunde uns darum bat, die Zielseite modern aussehen zu lassen, verwenden wir eine serifenartige Schrift. Was ist eine serifenartige Schrift? Nun, lassen Sie mich Ihnen ein Beispiel geben. Ich werde Roboto hier öffnen. Eigentlich werde ich das wirklich groß machen, damit du den Unterschied sehen kannst. Eine Serife ist eine Schrift, die nicht die Serifen auf den Buchstaben hat. Ich denke eigentlich sollte ich mit einer Serifenschrift beginnen, damit Sie den Unterschied sehen können. Das ist eine serifenartige Schrift. Sehen Sie diese Dekorationen hier, und auch hier, und auch hier? Diese werden Serifen genannt. Serifen finden sich in der Regel auf älteren Schriften. Die moderneren Schriften sind serif oder ohne Serifen. Genau wie dieser hier. Sehen Sie hier, wir haben diese Dekorationen nicht mehr. Wir können sie weder hier noch hier oder hier finden. Diese sind sauberer und moderner. Nun, ich werde nicht über Serif gegen Serif in dieser Klasse gehen, das ist jenseits des Geltungsbereichs. Aber wenn Sie irgendwann ein Kunde fragt: „Okay, wir wollen eine modern aussehende Website.“ Was die Typografie betrifft, müssen Sie serifenartige Schriften verwenden. Nun, in meinem Fall, nachdem ich ein wenig auf Adobe Fonts gegraben habe, habe ich mich für Brandon Grotesque entschieden. Dies ist eine Schrift, die beide Kriterien erfüllt, es ist modern, es ist serif, und es ist auch sehr professionell aussehend, und es hat auch alle diese Stile. Wir haben Styles oder Gewichte, die von dünn über leicht bis normal bis schwarz reichen. Dies ist diejenige, die wir für die Überschriften und einige der anderen Elemente verwenden werden. Nun, wenn es um den Text geht, werden wir Tisa Sans Pro oder FF Tisa Sans verwenden, wie es hier genannt wird. Dies ist eine Schriftart, die Brandon Grotesque ähnlich ist, aber offensichtlich hat sie ihre eigenen Unterschiede. Ich benutze zwei Schriftarten, weil Brandon Grotesque für Überschriften großartig ist, also ist es große und große Schriftgrößen. Es macht das nicht gut auf kleinerem Textkörper. Aus diesem Grund verwende ich FF Tisa Sans oder Tisa Sans Pro. Dies funktioniert gut bei kleineren Textgrößen wie zum Beispiel 18, wenn wir den Textkörper machen, wird dies schön funktionieren. Nun, das sind meine Entscheidungen. Ihre Auswahl kann variieren, und ich schlage dringend vor Sie entweder auf Adobe Fonts oder Google Fonts herumgraben und die Schrift finden, dass Sie entweder auf Adobe Fonts oder Google Fonts herumgraben und die Schrift finden,die Ihrer Meinung nach am besten aussieht, und gehen Sie voran und verwenden Sie diese. In meinem Fall habe ich beide Schriftarten auf meinem System installiert. Alles, was ich jetzt tun muss, ist hier in Figma rein zu gehen und sie zu referenzieren. Ich werde Brandon Grotesque sagen, und ich werde hier unter Text gehen, und ich werde Brandon Grotesque auswählen. Lassen Sie uns das fett machen, und lassen Sie uns eine größere Schriftgröße verwenden, vielleicht wie 55. Was ich normalerweise mache, und lass mich die einfach aus dem Weg bringen. Normalerweise dupliziere ich diese Werte und ich markiere einfach alle Gewichte für diese Schriftart. Dies ist regelmäßig, das ist mittel, fett, und das ist schwarz. Dies gibt mir nur eine Vorstellung davon, wie die Schrift aussieht, ohne einen Text manuell ändern zu müssen. Zum Beispiel, wenn ich im Hauptdesign bin, kann ich einfach in Typografie kommen und ich kann sagen, okay, so sieht die leichteste Version davon aus, oder so sieht die schwerste Version davon aus. Gehen wir weiter und machen das gleiche für die Körpertexte, wir verwenden Tisa Sans Pro, und ich werde genau das gleiche hier tun. Dies hat auch ein paar Versionen. Ausgehend von dünn, leicht, oder tatsächlich sind diese weit herum beeinträchtigt, regelmäßig und dann mittel, fett, extra fett und schwarz. In Ordnung. Jetzt haben wir unsere Schriften bereit zu gehen. Übrigens, um so zu vergrößern, können Sie den Befehl auf dem Mac halten und einfach das Scrollrad zum Vergrößern und Verkleinern verwenden, oder unter Windows können Sie die Steuerung und das Mausrad verwenden, um dasselbe zu tun. Da wir uns mit dem Thema Vergrößern und Verkleinern beschäftigen, lassen Sie mich Ihnen zwei weitere Tastenkombinationen zeigen, die ich ständig verwende. Verschiebung Null wird unabhängig von Mac oder Windows immer auf 100 Prozent gezoomt . Shift 1 wird zoomen, so dass es alle Ihre Frames aufnehmen wird und es wird sie in den sichtbaren Teil Ihrer Leinwand passen. Wenn Sie ein Element oder einen Rahmen auswählen und die Umschalttaste 2 drücken, wird es zur Auswahl zoomen. Dies sind drei Tastenkombinationen, die ich ständig verwende. Auch hier wird die Umschalttaste 0 auf 100 Prozent gezoomt, Umschalttaste 1 zoomen, die Umschalttaste 2 auf die Auswahl zoomen. den Befehl auf Mac oder die Steuerung unter Windows gedrückt halten, können Sie im Grunde das Scrollrad verwenden, um zu vergrößern und zu verkleinern. Ziemlich cool. Gehen wir nun zur Typskala. Nun, was ist eine typografische Skala? Nun, der einfachste Weg, es zu erklären, ist, es dir zu zeigen. Hier haben wir eine Website, die ich die ganze Zeit benutze, sie heißt types-cale.com, und hier, was Sie tun, ist im Grunde, legen Sie Ihre Basisschriftgröße fest. Sie wählen einen Maßstab aus und erhalten eine Liste der Schriftgrößen, die Sie verwenden müssen, um diesen harmonischen Maßstab zu erstellen. Wenn ich das Verhältnis hier ändern würde, werden Sie sehen, dass sich auch die Skala ändert. Mit diesem Tool können Sie sagen: „Okay, das ist, was ich für Überschrift eins, Überschrift zwei, drei, vier, fünf und sechs verwenden werde. Dies ist, was ich für kleineren Text verwende. Mit diesem Tool stelle ich sicher, dass meine Typografie immer vor Ort ist, denn ohne sie wissen Sie nicht wirklich, welche Art von Schriftgrößen Sie verwenden sollten. Ich meine, Sie beginnen mit, sagen wir die Basisschriftgröße für den Textkörper, der normalerweise 16 Pixel beträgt. Aber was ist danach? Was verwenden Sie für das H1 oder das H3? Verwenden Sie 20 Pixel oder verwenden Sie 21 Pixel? Oder vielleicht verwenden Sie, was Sie denken, das am besten aussieht? Das kann funktionieren, aber ein Tool wie dieses zu haben, das Ihnen genau sagt, welche Art von oder welche Schriftgrößen basierend auf einer Skala verwendet werden sollen, ist entscheidend. Die Art und Weise, wie dies funktioniert, ist eigentlich sehr einfach. Lassen Sie mich einen Taschenrechner öffnen und das Prinzip dahinter erläutern. Typ-Skalierungsbasis basiert auf einem Verhältnis. Wir beginnen mit dem Basiswert, der 16 Pixel ist. Dieser Basiswert multiplizieren wir mit der Skala, die in unserem Fall 1.414 ist, und das gibt uns das Ergebnis, 22.624. Jetzt für den nächsten Punkt auf der Skala nehmen wir diesen Wert, 22,624 oder 22,62. Wir können zwei Dezimalstellen verwenden und wir teilen sie, oder wir multiplizieren es mit dem gleichen Verhältnis, 1.414 und das gibt uns den nächsten Wert. In unserem Fall habe ich hier tatsächlich das falsche Trennzeichen verwendet. In unserem Fall ist es 31.98 und Sie tun das immer und immer wieder , bis Sie alle Werte für den Rest Ihrer Textelemente erhalten. Der Vorteil der Verwendung eines Werkzeugs wie Typenskala besteht darin, dass Sie diese Berechnungen nicht manuell vornehmen müssen. Es tut es für Sie, und es tut es sowohl in M als auch in Pixeln. Jetzt, weil ich Figma verwende, habe ich ein praktisches Plugin, das Typpalagen für mich generiert und dieses Plugin heißt Font Scale. Wenn Sie es installieren möchten, müssen Sie einfach zu Plugins gehen, Plugin verwalten und dann nach Font Scale suchen und installieren. Es ist wirklich, wirklich einfach. Nun, um dieses Plugin zu verwenden, geben Sie die Basisschriftgrößen, in meinem Fall wird 18 sein und wählen Sie den Skalierungsfaktor in meinem Fall wird Haupt dritte sein und dann, Ebenen generieren. Das erzeugte diese Ebenen und es kann sie tatsächlich hier einfügen. Wie Sie sehen können, erhalten Sie Textelemente, die die richtigen Schriftgrößen haben. Es ist genau das gleiche wie hier zu gehen und zu sagen: „Okay, ich möchte 18 Pixel und 1.250 oder große Drittel verwenden.“ Das wird Ihnen genau das gleiche Ergebnis geben, der Unterschied ist, in Figma haben Sie diese Ebenen und Sie können sie jederzeit referenzieren. Wählen wir alle diese aus und lassen Sie uns die Schrift in Brandon Grotesque ändern , da gehen wir. Jetzt werde ich hier auch ein weiteres Element hinzufügen, weil ich diesen Endwert von 55 Pixeln möchte. Nun, was ich tun werde, werde ich durch jeden gehen und ich werde die Schriftgröße abrunden. Das ist 43,95, wir machen es 44, das sind 35, das sind 28, das sind 22,5. Ich kann entweder 22 oder 23 gehen. Gehen wir mit 23. Das ist 18, und das ist 14.4, aber wir werden 14. Nun, da wir die typografische Skala an Ort und Stelle haben, lassen Sie uns ein wenig Simulation für die Überschriftenstile machen. Wir werden sagen, Überschrift eins und dann multiplizieren wir das, um Überschriften von eins bis sechs zu erstellen. Lassen Sie uns auch ein kleines Element hier machen. All diese werden Brandon Grotesque und Überschriften eins bis drei verwenden, wir werden sie mutig machen. Rubrik fünf, werden wir wahrscheinlich dieses Medium machen. Rubrik sechs wird regelmäßig sein, und die kleinen werden Großbuchstaben verwenden. Sie können diese erweiterten Typdetails öffnen, indem Sie hier auf diese kleine Schaltfläche klicken und Großbuchstaben wählen, und dies wird auf 14 Pixel eingestellt. Machen wir 5 Prozent Buchstabenabstand, es wird fett und wir sollten gut sein, dorthin zu gehen. Lassen Sie uns nun die Stile oder den Stil für die anderen Überschriften definieren. Wir haben Überschrift eins. Das wird 55 Pixel sein, weil 55 die Schriftgröße dieses Elements aus unserer Type-Skala ist. Überschrift zwei, wir werden 44 verwenden, Überschrift drei, wir werden 35 verwenden. Dann haben wir 28 für Überschrift vier, 23 für Überschrift fünf und dann für Überschrift sechs werden wir 18 verwenden, was die Basisschriftgröße ist. Auf diese Weise finden wir im Grunde die Schriftgrößen für alle unsere Überschriften basierend auf dieser Typskala. Ziemlich cool und sehr, sehr einfach. Gehen wir weiter und bewegen das. Da wir auf dem Thema der Definition von Stilen sind, lassen Sie uns einen Stil für die Block Anführungszeichen definieren und hier werden wir auch Brandon Grotesque verwenden und wir werden die 35 Pixel Schriftgröße verwenden. Lassen Sie uns das aus dem Weg bewegen und schließlich, lassen Sie uns einen Stil für die Absätze festlegen. Diese werden mit Tisa Sans Pro, regulär, 18 Pixel. Unsere Typografie ist so ziemlich eingerichtet. Das letzte, was wir tun müssen, ist, die richtigen Zeilenhöhen festzulegen. das zu tun, werden wir mit dem Acht-Punkt-Gittersystem arbeiten. Lassen Sie mich Ihnen ein bisschen darüber erzählen. Es gibt einen tollen Artikel, den ich in den Ressourcen verlinkt habe, P-D-F-Datei. Geh weiter und sieh dir das an. Es erklärt wirklich, warum es vorteilhaft ist, das Acht-Punkt-Gittersystem im Webdesign zu verwenden. Im Wesentlichen versuchen wir, einen konsistenten vertikalen Rhythmus zu erreichen. Also jede Messung oder jede Entfernung, jede Marge oder Polsterung, die wir anwenden werden, jede Höhe, die wir auf unsere Elemente anwenden, sollte ein Vielfaches von acht sein. Das gilt auch für die Textelemente. Die Schriftgröße muss nicht unbedingt ein Vielfaches von acht sein. Wichtig ist, dass die Zeilenhöhe ein Vielfaches von acht ist, weil die Zeilenhöhe vorgibt, wie hoch die Textzeilen sind und wenn es Vielfache von acht gibt, dann wird alles gut auf ein Grundlinienraster fallen. Ich werde Ihnen ein wenig darüber zeigen, wenn wir mehr Elemente hinzufügen und wir diesem Acht-Punkt-Gittersystem folgen. Aber im Moment sollten Sie wissen, dass wir, wenn es um Typografie geht, die Zeilenhöhe der Textelemente auf ein Vielfaches von acht festlegen. Gehen wir weiter und machen das jetzt. Überschrift 1 hat eine Zeilenhöhe, die etwa 79 Pixel betragen sollte. Dies wird automatisch von Figma berechnet, also werde ich es auf 80 Pixel setzen. Rubrik zwei sollte etwa 63 sein, oder die nächste, oder das nächste Vielfache von acht ist 64. Also machen wir das. Rubrik drei ist 50. Hier können wir entweder 48 gehen, das ist ein Vielfaches von acht, oder wir können mit 56 gehen. Lasst uns das mit 56 machen. Überschrift vier ist 40, also ist das an Ort und Stelle. Rubrik fünf ist 36 und wir können entweder mit 40 oder 32 gehen. Also lasst uns 32 gehen. Rubrik sechs ist 18. Wir können 24 hier gehen und das hier, wir können auch 24 gehen. Das ist die Zeilenhöhe, die für die Überschriften festgelegt wurde. Nun, für die Block Anführungszeichen, sehen wir 35, wir werden 56 verwenden, weil das ist, was wir auch hier verwendet haben. Aber wenn Sie das Gefühl haben, dass das zu viel ist und jetzt, wo ich es tatsächlich sehe, könnte ich einfach auf 48 zurückkehren. Ich denke, das sieht ein bisschen besser aus. Also lasst uns das auch hier machen, 48. Übrigens, diese sind nicht endgültig, wir können diese immer ändern, wenn Sie zum Designpunkt kommen und Sie feststellen, dass das nicht wirklich so gut funktioniert. Sie können immer darauf zurückkommen und sich ändern. Es ist keine große Sache. Paragraph 18, wir werden 24 als Zeilenhöhe verwenden und damit haben wir die Typografie-Merkmale für unsere Landingpage erstellt. Okay, wenn du neben mir gearbeitet hast, dann solltest du die Typografie herausfinden. Wenn nicht, machen Sie das jetzt und genau wie mit Farben, experimentieren Sie ein wenig, Sie müssen nicht die gleichen Schriftarten verwenden, die ich benutze oder die gleiche Skala wie ich. Wählen Sie eine Schriftart aus oder wählen Sie die beiden Schriftarten aus, die Ihrer Meinung nach für diese Art von Produkt oder für diese Art von Projekt am besten geeignet sind. Es spielt keine Rolle, ob es sich um eine freie oder kostenpflichtige Schrift handelt. Wenn du denkst, dass es gut aussieht, mach weiter und benutze es. Außerdem müssen Sie nicht die gleiche 1,25-Skala verwenden, die ich verwendet habe. Spielen Sie mit ihnen herum. Wählen Sie eine, die Ihrer Meinung nach am besten aussieht, und wenn Sie die verschiedenen Verhältnisse wählen, beachten Sie, wie sich diese auf die Gesamtzusammensetzung dieser Textelemente auswirken. Sehen Sie, wie sich dadurch die visuelle Hierarchie ändert. Auf der Seite sehen Sie, dass je niedriger das Verhältnis ist, desto geringer ist der Unterschied zwischen jedem Schritt in der Skala. Je höher das Verhältnis, desto höher ist die Differenz zwischen den einzelnen Schritten in der Skala. Wenn Sie beispielsweise ein goldenes Verhältnis verwenden, sehen Sie, dass es einen dramatischen Unterschied zwischen den kleineren Schriftgrößen und den größeren Schriftgrößen gibt. Jede Typskala, jedes Verhältnis hat seinen Platz für verschiedene Dinge. Sie würden vielleicht kleinere Verhältnisse für Blogs oder für ein Dashboard verwenden, wo Sie keinen so großen Unterschied zwischen den Schriftgrößen benötigen und Sie etwas wie das goldene Verhältnis verwenden würden , wenn Sie eine Aussage machen möchten, wenn Sie eine Website mit großer mutiger Typografie haben. Wenn Sie einen großen Unterschied zwischen dem Textkörper und der größten Überschrift haben. Spielen Sie also mit diesen, und wenn Sie fertig sind, können Sie mit der nächsten Lektion fortfahren, bei der es um Bilder und andere visuelle Elemente wie Symbole geht. Nun werden wir einige Platzhalterbilder verwenden und obwohl diese nicht endgültig sind, geben sie uns zumindest einen Ausgangspunkt. Das kommt in der nächsten Lektion. Wir sehen uns dort. 5. Bilder und andere Assets: Willkommen zurück in der Klasse. In dieser Lektion werden wir uns mit den Bildern und den Symbolen vertraut machen , die wir für dieses Design verwenden werden. Es ist immer eine gute Idee, diese vorzubereiten, bevor Sie mit dem eigentlichen Designprozess beginnen, denn es wird Ihnen nur die Dinge einfacher machen. Natürlich können Sie sie später ändern, aber zumindest haben Sie einen Ausgangspunkt. Also werde ich Ihnen zeigen, welche Bilder und Symbole wir verwenden werden. Außerdem werde ich ein paar Ressourcen teilen, die Sie verwenden können , um diesen gesamten Prozess zu erleichtern. Fangen wir an. In Ordnung, für die Bilder, wie ich Ihnen gezeigt habe, haben wir die Logos, die Markenlogos. Sie können einen Link in der Ressourcen-PDF-Datei zu diesem genauen Logo finden, und Sie können es herunterladen. Nun, für die Platzhalterbilder, habe ich diese Bilder von einem UI Kit, einem Finance UI Kit, bekommen. Lassen Sie mich das etwas kleiner machen, damit Sie sie besser sehen können. Da wir mit einem Dummy-Projekt arbeiten, haben wir keine Screenshots oder Bilder vom eigentlichen Produkt. Also werden wir nur diese Demo-Bilder verwenden, und tatsächlich lassen Sie mich nur zeigen, wo Sie das bekommen können. Dies wird als Free Finance UI Kit bezeichnet. Sie können es auf Behance finden, und hier kann es auch herunterladen. Ich glaube, das war eine Skizze, ja. Es ist also eine Skizzendatei. Nur für den Fall, dass Sie keine Skizze installiert haben, habe ich diese JPEG-Bilder für Sie exportiert, so dass Sie sie sofort in Ihrem Design verwenden können. Nun oben auf diese, wir haben auch diese Gerät Renders. Dies ist für ein iPad Pro, und das ist für ein iPhone 7, und wir werden diese auch in unseren Designs verwenden. Dies sind PNG-Dateien und ich exportierte sie aus den Photoshop-Dateien, die von hier heruntergeladen werden können. Diese sind übrigens auch in der PDF-Datei verlinkt. Dies sind kostenlose Ressourcen von Pixeden. Dies ist ein Psd iPhone 7 Pro Mockup, und das ist ein iPhone 7 Mockup. Dies sind alle Vektoren, sie sind in Photoshop, und sie haben dieses intelligente Objekt als Bildschirm. Sie können einfach darauf doppelklicken und einfügen was Screenshot oder Bild Sie wollen, genau wie ich es getan habe. Beachten Sie, ich habe eines dieser anderen Bilder im Telefonbildschirm und das gleiche gilt für dieses iPad. Dies sind also die Platzhalterbilder, die wir verwenden werden. Wenn Sie nun nur nach Platzhalterbildern suchen, ist eine Ressource, die ich ständig verwende, Unsplash. Sie suchen einfach nach einem Foto, wie zum Beispiel iPhone. Dadurch erhalten Sie eine Liste von Bildern, die diesen Suchkriterien entsprechen. Dies sind kostenlose Bilder, die Sie sie überall verwenden können, große Ressource. Nun, wenn es um Symbole geht, gibt es so viele Websites da draußen, die es Ihnen erlauben, Lasten und viele Sätze von Icons herunterzuladen. Eine Option, zu der ich die ganze Zeit gehe, ist Iconfinder. Sie können kostenlos Premium Icon Sets finden und Sie können auch einzelne Icons herunterladen. Hier suchen Sie einfach nach Hause, und Sie können nach Stil suchen. Sie können kostenlose Symbole nur finden und Sie können auf eines dieser klicken und es als PNG, SVG oder andere Formate herunterladen , es hängt von der Symbol-Satz ab. So können Sie Icon-Sets von hier erhalten. Aber für diese spezielle Demo werden wir einige Icons aus diesem Icon-Set verwenden. Es heißt „Micons“. Dies ist von einem rumänischen Gefährten namens Cosmic Negoita. Dies ist eine großartige Icons, die ich in vielen meiner Projekte verwende. Ein weiteres Symbolset, das wir verwenden werden, heißt Ionicons. Dies ist wieder, Ich liebe dieses Icon-Set wirklich. Ich benutze es die ganze Zeit, ich mag es wirklich und ich kann es Ihnen auch dringend empfehlen. Jetzt, mit jedem dieser Sets, können Sie sie einfach herunterladen. Es wird Ihnen ein Archiv geben, und Sie haben wahrscheinlich SVG- und PNG-Dateien. Aber was ich gerne mache, ist eine App namens Iconset zu verwenden. Dies ist eine kostenlose App, es ist plattformübergreifend und es funktioniert sowohl unter Mac OS und Windows; Es sieht ungefähr so aus. Sie können hier Icon-Sets erstellen und sie von Ihrer Festplatte importieren. Wie Sie sehen können, habe ich die beiden Sets, die wir hier verwenden werden geladen. Sie können alle Symbole sehen, Sie können nach einem bestimmten Symbol suchen, und sobald Sie es finden, ist es wirklich einfach. Sie einfach mit der rechten Maustaste, Sie können es kopieren, und dann können Sie zu Figma gehen oder welcher Designsoftware Sie verwenden, und fügen Sie diese einfach ein. Oder Sie können klicken und ziehen, das wird genau das Gleiche tun. Also, das sind die Werkzeuge, die ich Ihnen empfehlen zu bekommen. Aber wenn Sie nichts anderes auf Ihrem Computer installieren möchten, ist das völlig in Ordnung. Nehmen wir an, wir möchten dieses Ionikon-Set herunterladen. Es wird ein Archiv herunterladen, und sobald Sie das entpacken, gibt es Ihnen nur diese Liste von SVG-Dateien. Sie können einfach die Datei, die Sie wollen, und ziehen Sie sie in Figma, und Sie sind gut zu gehen. An dieser Stelle sollten Sie die Bilder und Icons alle bereit haben. Da wir für ein fiktives Produkt arbeiten, verwenden wir natürlich einige Platzhalterbilder. Aber denken Sie daran, dass Sie bei einem echten Projekt Bilder verwenden würden , die für dieses spezifische Produkt relevant sind. Fühlen Sie sich frei, die Bilder, die ich zur Verfügung gestellt oder laden Sie Ihre eigenen. Wenn Sie denken, dass Sie Bilder oder Symbole finden könnten, die besser für Ihr Design funktionieren, gehen Sie auf jeden Fall weiter und tun Sie das. Ich würde gerne verschiedene Ergebnisse in der Galerie des Projekts sehen. Angenommen, Sie haben alles eingerichtet und das umfasst Farbe, Typografie und Bilder, sind wir bereit, mit dem eigentlichen Seitendesign fortzufahren. Diese Lernseiten sind in mehrere Abschnitte unterteilt, und wir werden einen Abschnitt nach dem anderen im Rest dieser Klasse angehen. Wir beginnen mit dem Heldenbereich, und das kommt in der nächsten Lektion. Wir sehen uns dort. 6. Hero Header und Hintergrund: Willkommen zurück in der Klasse. In dieser Lektion beginnen wir mit dem eigentlichen Seitendesign. Bisher haben wir uns vorbereitet, alles fertig gemacht, einschließlich Farben, Typographie Bilder. Jetzt sind wir bereit, die ersten Pixel zu legen. Jetzt fangen wir mit dem Heldenbereich an. Das ist ziemlich komplex und wir teilen es in zwei Teile. In diesem Teil werden wir die Logo-Navigation hinzufügen und wir werden auch einen schön aussehenden Hintergrund dafür erstellen. Wenn du bereit bist zu gehen, fangen wir an. Zurück in figma wechseln wir zur Hauptdesignseite und erstellen damit einen Rahmen. Um dies zu tun, können wir die Verknüpfung F für Frame verwenden und dies aktiviert diese rechte Seitenleiste, wo Sie eine vordefinierte Rahmengröße wählen können. Dies ist in verschiedenen Formaten erhältlich, die von Desktop-Größen bis hin zu Tablet- und Telefongrößen reichen. Hier auf der rechten Seite sehen Sie die Größe in Pixel. Es kann auch zwischen einigen gängigen Papiergrößen und Social-Media-Größen wählen. Oder wenn Sie eine benutzerdefinierte Größe wünschen, können Sie einfach klicken und ziehen, um den Rahmen auf die gewünschte Größe zu erstellen. Wenn Sie die Größe danach ändern möchten, müssen Sie nur den Rahmen entweder aus der Leinwand oder aus der Ebenenliste auswählen und die Eigenschaften für Breite und Höhe in diesem Inspektor auf der rechten Seite ändern. In meinem Fall werde ich diese 1600 Pixel breit und etwa 2000 Pixel hoch machen. Letztendlich wird es viel größer und höher als das enden. Aber als Ausgangspunkt ist das mehr als genug. Wir können hier doppelklicken oder wir können hier doppelklicken, um dies umzubenennen. Ich werde Desktop sagen. Definieren wir nun ein Stützenraster. Wenn Sie mit der Verwendung von Rastern im Webdesign nicht vertraut sind, ist es sehr einfach. Ein Stützenraster ist im Grunde eine Liste von vertikalen Spalten, die Sie verwenden können , um Elemente oder Größenelemente auszurichten. Wenn Sie also über ein Drei-Spalten-Layout nachdenken, geht es darum, den Inhalt an drei gleichen Spalten auf dieser Seite auszurichten. Lassen Sie mich Ihnen zeigen, was ich meine. In figma ist es wirklich einfach, ein Spaltenraster hinzuzufügen. Wählen Sie einfach den gewünschten Rahmen aus, gehen Sie in den Inspektor und wählen Sie Layoutraster. Klicken Sie einfach darauf oder klicken Sie einfach auf das Pluszeichen. Es macht genau das Gleiche. Von dieser Liste, wo es Layout Grid-Einstellungen sagt, können Sie zwischen Gitter wählen, das ist dies, Spalten, was wir brauchen, oder Zeilen, die die gleiche Sache, aber horizontal ist. Also werden wir Spalten wählen und normalerweise würden Sie für 12 Spalten gehen. Dies ist eine Standardnummer, da 12 leicht durch 2,3,4 und 6 teilbar ist. Als nächstes würden Sie eine Farbe für dieses Raster festlegen. Sie können mit jeder gewünschten Farbe gehen, aber machen Sie es zu einer Farbe, die Sie wissen lässt , dass dies tatsächlich ein Raster ist und es nicht Teil des tatsächlichen Designs ist. Es kann auch seine Deckkraft hier ändern. Unter Typ würden wir Mitte wählen und dann würden wir die Breite jeder Spalte definieren, in meinem Fall werde ich mit 72 gehen. Unter Gutter wählen wir 32 aus. Die Rinne ist im Grunde der Abstand zwischen diesen Säulen. Jetzt fühlen Sie sich offensichtlich frei, jede Art von Rastereigenschaften zu verwenden, die Sie möchten. In meinem Fall werde ich das verwenden. Nun, wenn Sie irgendwann das Raster ausblenden möchten, können Sie dieses Augensymbol hier klicken oder wenn Sie es vollständig entfernen möchten, können wir das Minuszeichen anklicken.Es gibt auch eine Tastenkombination dafür, seine Steuerung G. Sie können das ein- und ausschalten, aber Sie können leicht die richtige Tastenkombination finden, wenn Sie zum figma-Menü, Ansicht, Layout-Raster gehen . Es kann offensichtlich von hier aus ein- und ausschalten. So wird nun Layout-Gitter oder Stützenraster erstellt. Lass uns weitermachen. Um zu wissen, was genau in diesen Heldenbereich gelegt werden soll, verweisen wir auf unseren Wireframe. Wir können zu dieser Seite wechseln. Übrigens, es gibt einen schnelleren Weg, das zu tun. Sie diese Tasten zum Wechseln zwischen den Seiten haben, können Sie auf der Tastatur die Taste „Bild nach oben“ oder „Bild-unten“ drücken WennSie diese Tasten zum Wechseln zwischen den Seiten haben, können Sie auf der Tastatur die Taste „Bild nach oben“ oder „Bild-unten“ drücken. Dies funktioniert in Windows und unter Mac OS. Es ist genau die gleiche Tastenkombination. Wenn wir also zum Wireframe gehen, können wir sehen, dass der Heldenbereich , der hier ist, unseren Header hat, der das Logo und die Navigation enthält. Dann hat es den Heldeninhalt , der aus diesem Medienobjekt und Titel, Untertitel und Call to Action besteht . Jetzt werden wir dieses Stück in der nächsten Lektion angehen. Also machen wir uns jetzt keine Sorgen. Aber in dieser Lektion werden wir unsere Logo-Navigation hinzufügen und auch einen schön aussehenden Hintergrund für diesen Heldenbereich erstellen. So machen wir das. Fangen wir mit diesem Hintergrund an. Lass uns einen Kopf gehen und dieses Gitter verstecken, weil wir es jetzt nicht brauchen. Beginnen wir mit einer rechteckigen Form für die drücken „R“ oder Sie können aus dieser Liste von Werkzeugen direkt hier wählen und wir werden einfach auf die Leinwand klicken oder wir können klicken und ziehen und eine von einer benutzerdefinierten Größe erstellen. Also lassen Sie uns eine machen, die die gleiche Breite wie unsere Leinwand hat. Schieben wir es nach oben und wählen Sie unter Füllen einen linearen Farbverlauf aus. Um nun die richtigen Farbwerte zu erhalten, verweise ich auf die Registerkarte Farbe. Also werde ich meine Grundfarbe nehmen und sie hier platzieren. Mal sehen, welches es ist, es ist dieser. Dann für die andere Farbe werde ich meine zweite Primärfarbe wählen, die dies ist. Dies muss tatsächlich 100 Prozent Deckkraft sein. Wenn Sie nun nicht ganz zufrieden sind, wie der Farbverlauf aussieht, können Sie diese Schieberegler verwenden, um die Farbstopps nach oben und unten, links oder rechts zu verschieben. Es hängt wirklich von Ihrer Ansicht hier ab. Wenn Sie also mehr von diesem Lila wollen, würden Sie sich einfach so bewegen. Wenn Sie mehr von dem Blau wollen, würden Sie es so bewegen. Wenn Sie wie ein Winkel erstellen möchten, können Sie auf diese einzelnen Griffe klicken und sie verschieben, bis Sie an der gewünschten Stelle sind. Also in meinem Fall denke ich, ich werde so etwas tun. Das sollte vorerst viel stark sein. Nun, was ich tun werde, ist, ich werde dieses Rechteck auswählen und ich werde es drehen. Dazu können Sie hier einen neuen Wert in das Drehfeld eingeben. Gehen wir mit 16 Grad. Alles klar, das ist ziemlich gut. Jetzt werde ich die Größe ändern, so dass es meine Seite vollständig ausfüllt. Ich werde auch die Ecken abrunden. Ich werde einen großen Grenzradius von 64 Pixeln hinzufügen. Nun, wie Sie diese Werte bekommen, ist es nicht wirklich wichtig. In meinem Fall benutze ich das Acht-Punkte-System. 16, 64, das sind alle Vielfachen von acht. Es spielt keine Rolle für den vertikalen Rhythmus, aber es macht es mir einfach, mich zu erinnern. Jetzt können Sie das nach links und rechts, nach oben und unten bewegen , bis wir eine geeignete Position dafür finden. Sie können das Layoutraster auch aktivieren und auf Wunsch am Raster ausrichten. Also in meinem Fall werde ich es einfach dort lassen. Jetzt. Etwas anderes, was ich tun werde, ist ein Schlagschatten hinzuzufügen. Dazu wählen Sie es, gehen Sie zu Effekten, klicken Sie auf, wählen Sie Schlagschatten und wählen Sie dieses Sonnensymbol. So öffnen Sie die Einstellungen. Für die Einstellungen werde ich 30 für Unschärfe, Null x 20 für y. wie für die Farbe, na ja, ich werde meine graue Hauptfarbe verwenden. Kopieren Sie es von hier. Fügen Sie das hier ein und für eine Deckkraft werde ich 20 Prozent wählen. Hier ist ein Profi-Tipp. Wann immer Sie diese Effekte verwenden, kann es tatsächlich Vorlagen für sie erstellen. also das Element ausgewählt haben, wo Sie den Effekt hatten, klicken Sie auf diesen Stil-Button und klicken Sie auf das Pluszeichen und geben Sie einfach einen Namen ein. In meinem Fall werde ich Schlagschatten sagen, Stil schaffen. Also, was das tut, ist, wenn ich zum Beispiel ein anderes Element habe und den exakt gleichen Schlagschatten hinzufügen möchte. Ich kann das auswählen, zu Effekten gehen und Schlagschatten auswählen. Jetzt hat es genau das gleiche. Nun, wenn ich den Schlagschatten auf beiden ändern möchte, kann ich auf das oder außerhalb eines Elements klicken und das wird meine Leinwand auswählen. Ich kann hier lokale Stile finden. Ich kann Schlagschatten auswählen, Stil bearbeiten und seine Eigenschaften hier ändern. Vielleicht will ich eine andere Farbe. Sehen Sie, wie es sich auf beiden Elementen ändert?. Das ist die Kraft, mit lokalen Stilen wie diesen zu arbeiten. Es macht wiederverwendbare Stile sehr effektiv. Jetzt können Sie das Gleiche beispielsweise mit Farbverläufen machen. Wo es „fill“ heißt, möchte ich vielleicht diesen Farbverlauf für die spätere Verwendung speichern. Ich kann auf die gleiche Farbe oder die gleiche Schaltfläche klicken , wo es Stil und unter Farbstile sagt, ich werde Plus treffen. Ich werde Hauptgradient eingeben. Lassen Sie uns nun ein wenig mehr visuelles Interesse zu diesem Abschnitt hinzufügen. Ich werde das auswählen, Befehl D, um es zu duplizieren. Ich werde seine Rotation auf 12 Grad ändern. Ich werde mit der rechten Maustaste klicken und Senden an zurück auswählen. Das wird es hinter meine Hauptschicht legen. Ich werde nur seine Positionierung ein wenig anpassen. So etwas. Vielleicht schieben Sie es auch ein bisschen runter. Ich werde seine Gesamtkapazität auf 30 Prozent ändern. Ich möchte dir hier ein paar coole Tricks zeigen. Wenn Sie ein Element ausgewählt haben, können Sie eine beliebige Zahl zwischen eins und Null drücken, um die Deckkraft zu ändern. Wenn ich also eins drücke, setzt es seine Deckkraft von 10 Prozent auf 20 Prozent, 3,4,5,6,7,8,9 und Null ändert es auf 100 Prozent. Nun, wenn Sie diese Zahlen in schneller Folge tun, zum Beispiel drei vier. Dadurch wird die Kapazität auf 34. Hier ist ein weiteres Beispiel, 12, 76, 32. Wenn ich es tue, drei und zwei, ändert es seine Deckkraft auf 30 Prozent und dann 20 Prozent. In meinem Fall lassen wir das bei 30 Prozent liegen. Jetzt machen wir das noch mal. Lassen Sie uns duplizieren. Dieser Hauptabschnitt. Ändern wir seine Rotation auf 26 Grad. Wir werden das den ganzen Weg in den Rücken legen. Dazu können Sie mit der rechten Maustaste klicken und rückwärts senden auswählen. Sie dann erneut mit der rechten Maustaste rückwärts senden. Oder es kann alles auf einmal tun, indem Sie Senden an zurück auswählen. Das wird es den ganzen Weg in den Rücken stecken. Alternativ können Sie einfach auf das Rechteck klicken und aus dem Ebenenbedienfeld ziehen. Für dieses Bit werde ich seine Deckkraft auf 10 Prozent ändern. Ich werde es einfach nach links und nach rechts bewegen, bis ich eine geeignete Position dafür finde. Ich finde, das sieht ziemlich gut aus. Hier ist noch ein Tipp. Es kann die Pfeiltasten auf Ihrer Tastatur verwenden, um Elemente zu verschieben. oben, unten, verschiebt das Element um ein Pixel nach dem anderen. Links, rechts, tut das Gleiche. Aber wenn Sie dabei die Umschalttaste gedrückt halten, wird es 10 Pixel auf einmal verschieben. Dies ist eine sehr schnelle Möglichkeit, Objekte auf Ihrer Leinwand zu verschieben , ohne die Maus zu verwenden. Das sieht ziemlich gut aus. Nun, um das zu beenden, lasst uns das tun. Lassen Sie uns das noch einmal duplizieren. Ändern wir diese Rotation auf 26. Aber dieses Mal lassen Sie es uns hineinziehen, zu irgendwo wie diesem. Ich finde, das sieht ziemlich gut aus. Jetzt unter Füllung, werde ich meine Hauptverläufe entfernen und ich werde eine lineare Füllung von weiß zu transparent hinzufügen. Also, das ist eigentlich weiß, null Prozent und lassen Sie uns diese wirklich tauschen. > Wir gehen also von massiv zu weiß zu transparentem Weiß, und ich werde seine Deckkraft auf fünf Prozent ändern. Indem ich das mache, bekomme ich einfach diesen sehr schön aussehenden Effekt, bei dem ich hier mit Weiß beginne und es verblasst, wenn es nach oben geht. Ich kann das sogar kleiner machen. Damit können wir alle diese Befehle G oder Steuerung G auswählen , wenn Sie auf einem PC sind, um alle diese zusammen zu gruppieren, und nennen wir es den Hintergrund. Damit ist der Held Hintergrund fertig. Gehen wir weiter und fügen Sie das Logo und die Navigation dazu hinzu. Lassen Sie uns das Layoutraster aufklappen und öffnen Sie unsere Markenwerte. Wir schnappen uns unser weißes Logo. Klicken und ziehen Sie einfach. Lassen Sie es uns irgendwo auf unserer Seite positionieren. Nun, das Logo, Wir werden es 48 Pixel in der Höhe machen. Dieser kleine Knopf hier wird als Proportionen einschränken. Das heißt, wenn Sie einen Wert ändern, entweder Breite oder Höhe, ändert sich der andere Wert entsprechend. Wenn Sie diese Option deaktivieren, können Sie diese Werte einzeln ändern. Aber in meinem Fall möchte ich mein Logo 48 Pixel hoch machen, warum 48, weil ich das Acht-Punkt-Gittersystem verwende, also sollte jedes Element eine Höhe haben, die ein Vielfaches von acht ist. Jetzt werde ich mein Logo nehmen und ich werde es so positionieren , dass es 64 Pixel von dieser Kante entfernt ist. Um das zu tun, werde ich die Option auf Mac gedrückt halten, aber es kann Alt auf einem PC gedrückt halten. So auf Windows. Ich werde meinen Mauszeiger bewegen, bis ich die gewünschten Kanten referenzieren kann. Also beachten Sie, wo es 71 Pixel hier sagt. Das bedeutet, dass das Logo 71 Pixel von diesem Rand entfernt ist. Ich kann meine Pfeiltasten jetzt auf meiner Tastatur verwenden , um es einfach an Ort und Stelle zu schieben, so dass es jetzt 64 Pixel sind, von diesem linken Rand. Ich werde es auch 64 Pixel von oben platzieren. Um das zu tun und es mir einfacher zu machen, kann ich die Down-Taste zweimal benutzen. Jetzt halte ich Shift gedrückt und benutze die Aufwärtstaste dreimal. Denn wenn Sie sich daran erinnern, während Sie die Umschalttaste gedrückt halten, wird ein Element dies in Schritten von zehn Pixeln anstelle von einem Pixel tun. Jetzt ist mein Logo perfekt positioniert, genau dort, wo ich es will. Jetzt machen wir die Navigation dafür. Beginnen wir mit dem Textelement. Sie können T auf Ihrer Tastatur drücken oder diesen kleinen Knopf hier klicken. Ich werde den ersten Menüpunkt eingeben. Nach unserem Drahtrahmen. Wir haben vier Menüpunkte: Funktionen, Screenshots, Erfahrungsberichte und Preise. Eine Sache, die Sie tun können, ist, dass Sie diese Links einzeln greifen,sie aus dem Draht-Frame kopieren und sie hier einfügen können sie aus dem Draht-Frame kopieren . Wie cool ist das? Nun, für die Farbe, werden wir, weiß, 90 Prozent verwenden. Für den Text verwenden wir Brandon grotesk, die die Schriftart für unsere Überschriften ist. 18 Pixel regelmäßig. 24 Pixel Zeilenhöhe. Dann müssen wir diese in gleicher Entfernung voneinander positionieren. Wir könnten dies manuell tun, indem wir jede auswählen. Okay, das sind 24 Pixel. Vielleicht wollte ich 32 Pixel sein. Ich kann das tun. Dann müssen Sie dasselbe mit dem Rest tun. Normalerweise funktioniert das. Aber es gibt eine viel einfachere Möglichkeit, Dinge zu tun, und das ist die Verwendung von Auto-Layout. Dies ist wahrscheinlich mein Lieblingsfeature in Figma. automatischen Layout können Sie einen Satz von Elementen gruppieren und gleichen Abstand zwischen ihnen oder um sie herum festlegen. Es ist das gleiche wie die Verwendung von Rand und Padding in CSS. Um dies zu tun, würden Sie alle Elemente auswählen, die Sie hinzufügen möchten. Sie können auf das automatische Layout klicken oder die Umschalttaste A auf Mac und Windows drücken. Oder es kann mit der rechten Maustaste klicken und wählen, Automatisches Layout hinzufügen. Dies wird also den neuen Rahmen erstellen, der alle Ihre Elemente enthält. Standardmäßig betrachtet es dann, wie Ihre Elemente positioniert sind. Meines sind nacheinander, also zeigt es horizontal, aber ich kann dies in vertikal ändern, wenn ich möchte. Das ist der coole Teil hier. Ich kann horizontale Polsterung einstellen. Dies wird also Platz auf der rechten und auf der linken Seite hinzufügen. Ich kann vertikale Polsterung hinzufügen, die oben und unten Platz hinzufügen wird, und ich kann den Abstand zwischen den Elementen angeben. Das ist derjenige, an dem wir gerade interessiert sind. Also lassen Sie mich rückgängig machen, und ich werde 24 Pixel angeben. Also jetzt sind meine Elemente perfekt auseinander angeordnet. Dies ist eine Funktion, die ich Ihnen empfehlen die ganze Zeit zu verwenden, weil es nur Ihre Arbeit so viel einfacher macht. Damit greifen wir unser Hauptmenü und positionieren es. Wir werden es am Gitter ausrichten. Ich bin mir nicht sicher, ob du es hier richtig sehen kannst. Aber jetzt ist es auf das Gitter ausgerichtet und Figma ist eigentlich sehr schlau. Es rastet es automatisch ein. Dann kann ich mein Menü und mein Logo auswählen. Ich kann hier zum Ausrichtungsfeld gehen und ich kann eine Linie vertikale Mitte setzen. Einfach wie Kuchen. Damit ist der erste Teil unseres Helden komplett. Wir haben das Logo, die Navigation und den Hintergrund. [ Unhörbar] Der erste Teil des Heldenabschnitts ist jetzt abgeschlossen. Wenn du nicht mitgefahren bist und an meiner Seite gearbeitet hast, dann mach weiter und erstelle es jetzt, damit du bereit für den nächsten Schritt bist. Fühlen Sie sich wie gewohnt frei, Ihr eigenes Flair oder Ihre eigene Vision in dieses Design zu bringen. Ich würde diese Ergebnisse gerne in der Projektgalerie sehen. Nun, vorausgesetzt, Sie haben erfolgreich in diesem ersten Teil des Heldengebiets entworfen, denke ich, es ist an der Zeit, es zu beenden. Wir beschäftigen uns in der nächsten Lektion, wo wir den Heldeninhalt hinzufügen. Also sehe ich dich dort. 7. Herden Inhalt: Willkommen zurück in der Klasse. In dieser Lektion werden wir das Entwerfen des Heldenbereichs beenden. Zuvor haben wir die Struktur dafür mit dem Raster, dem Logo, der Navigation und dem Hintergrund erstellt. Jetzt ist es an der Zeit, den Inhalt hinzuzufügen. Lasst uns anfangen. Der Heldeninhalt, wenn wir uns das Drahtmodell ansehen, besteht aus einem Medienobjekt, das Bild, Video was auch immer sein kann , und ein Titel, Untertitel und das ist ungenannte Option. Wir haben diesen Button, und diesen Link, der wahrscheinlich nur zu einem Pop-up-Video führt, stelle ich mir vor. Um uns die Dinge leichter zu machen, wählen wir alle diese Elemente aus. Eigentlich, wählen wir diese ganze Gruppe, wo es Inhalt sagt, und ich werde es einfach hier einfügen. Lasst uns zuerst die Überschrift anpacken. Hier ist ein kurzer Tipp für Sie. Wenn Sie ein Element auswählen möchten, das sich innerhalb einer Gruppe befindet, müssen Sie normalerweise die Gruppe auswählen und dann doppelklicken, um in die Gruppe einzugeben. Aber wenn Sie das ohne Doppelklicken tun möchten, können Sie die Befehlstaste auf dem Mac oder die Steuerung unter Windows gedrückt halten. Dadurch können Sie auf ein beliebiges Element klicken und auswählen , unabhängig davon, wie tief es in der Ebenenstruktur ist. Für die Überschrift werden wir seine Farbe in Weiß ändern. Dann gehen wir zurück zu unserer Typografie und wir werden den Stil von Überschrift 1 verwenden. Jetzt können Sie über diese Werte schauen und sie in den Speicher übertragen und sie dann auf der anderen Seite replizieren, oder Sie können mit der rechten Maustaste klicken, zu Kopieren/Einfügen gehen, Eigenschaften kopieren, und dann können Sie zum Hauptdesign zurückkehren, rechts- Klicken Sie auf, Kopieren/Einfügen, Eigenschaften einfügen. Das wird alles ändern, die Schriftfamilie, das Gewicht, die Schriftgröße, die Zeilenhöhe, alles. Jetzt müssen wir nur die Farbe wieder ändern und das Gitter aufheben, lassen Sie uns das Raster ausrichten, und wir werden die Breite dieses Elements ändern , so dass es sich über sieben Spalten erstreckt. Wir haben 1, 2, 3, 4, 5, 6, 7. Als nächstes wollen wir dieses Stück anvisieren. Gehen wir dazu zurück zur Typografie und wählen Sie einen Stil aus, der für uns am besten geeignet ist. In unserem Fall werden wir wahrscheinlich Überschrift 5 verwenden. Rechtsklick, Kopieren/Einfügen, Eigenschaften kopieren, zurückgehen und Eigenschaften einfügen. Nun, das funktioniert in Medium nicht wirklich so gut, also wechseln wir zurück zu regulären. Sie können diese Änderungen vornehmen, kein Problem. Lassen Sie uns auch die Größe ändern und ändern Sie uns tatsächlich in die automatische Breite. Das bedeutet, dass die Größe des Textfelds auf die maximale Breite des darin enthaltenen Textes angepasst wird. Lassen Sie uns seine Farbe auf Weiß wechseln, und verwenden Sie einen gedämpften Farbton, 60 Prozent, sagen wir. Ehrfürchtig. Wir machen große Fortschritte. Sehen wir uns jetzt diesen Knopf an. Für diesen Button möchte ich, dass der Text sagt, kostenlos herunterladen, aber ich möchte auch einen schönen Pfeil, der direkt daneben sitzt. Ich werde Ihnen eine erstaunliche Möglichkeit zeigen, Schaltflächen in Figma zu erstellen , mit der Sie jeden Text eingeben können, den Sie in sie wollen, und sie werden automatisch ändern. Das ist mit Hilfe unseres treuen Freundes Auto-Layout. Was ich tun werde, ist den Text selbst auszuwählen, und ich werde das tatsächlich nach draußen verschieben, und ich werde die Gruppierung aufheben. bei ausgewähltem Text „Umschalt+A“, Drücken Siebei ausgewähltem Text „Umschalt+A“,um ein automatisches Layout hinzuzufügen, und ich werde 32 Pixel, horizontale Polsterung, 16 Pixel, vertikale Polsterung und 16 Pixel Abstand zwischen den Elementen auswählen horizontale Polsterung, 16 Pixel, . Nun, was ich tun kann, ist, dass ich eine Füllfarbe hinzufügen kann und ich werde Füllweiß 100 Prozent hinzufügen. Ich werde auch einen 100 Pixel Eckenradius hinzufügen. Weißt du, warum ich das getan habe? Denn wenn wir uns die Projektbeschreibung unter Designüberlegungen ansehen, sagt uns der Kunde: „Hey, wir mögen Pillen- und Geister-Tasten.“ Ein Pillenknopf ist derjenige mit sehr abgerundeten Ecken. Sieht aus wie eine echte Pille. Damit fertig, kann ich den Text darin auswählen und ich kann ihn auf meine primäre Farbe setzen. Gehen wir zu Farben, wählen Sie meine primäre, kommen wir zurück und fügen Sie sie ein. Was den Text angeht, werden wir Brandon Grotesque benutzen. Lassen Sie mich hier reinzoomen. Wir werden fett 18 Pixel verwenden, 24 für die Zeilenhöhe, und wir sollten gut gehen. Jetzt werde ich auch einen Schlagschatten hinzufügen. Ich werde meinen Rahmen auswählen , den ich Button aufrufen werde, und unter Effekten werde ich Schlagschatten wählen. Das gleiche, das wir für diese Elemente hier verwendet haben. Das letzte, was wir hier tun müssen, ist, einen schönen Pfeil hinzuzufügen. Dafür werde ich hier zu meiner App gehen, ich werde nach Pfeil suchen, und wir werden den Pfeil rechts aus dem Mikron-Set wählen. Klicken Sie also auf und ziehen Sie es und legen Sie es ab. Hier werden wir es auf 24 Pixel halten und ich werde „Befehl+X“ drücken. Ich werde diesen Text und Befehl+V+V oder Strg+V für unter Windows auswählen. Dies wird es direkt neben diesem Text in meinem Schaltflächenrahmen einfügen. Alles, was ich jetzt tun muss, ist, die Farbe in die gleiche Farbe wie der Text zu ändern. Hier, ich gebe dir noch einen Profi-Tipp. Wenn Sie in Figma arbeiten und die Farbe auf mehreren Elementen ändern möchten, können Sie das übergeordnete Element auswählen. Wenn Sie Auswahlfarben sehen, erhalten Sie im Grunde die Farben jedes einzelnen Elements in dieser Auswahl. Wenn ich die Farbe dieses Pfeils auf die Farbe dieses Textes ändern möchte, muss ich nur die Farbe des Textes kopieren, ihn einfügen, und ich bin gut zu gehen. Jetzt ist unsere Schaltfläche abgeschlossen, und weil ich das automatische Layout verwende, kann ich den Text auf dieser Schaltfläche ändern, und die Schaltfläche wird automatisch ändern. Wie cool ist das? Natürlich kann ich auch die Polsterung und den Abstand zwischen den Gegenständen ändern. Ich kann das tun, und ich kann das tun. Ich kann das tun. Nun, das war ein sehr großer Wert, aber du verstehst den Punkt. Ich bekomme sehr gute Kontrolle darüber, wie das aussieht und es ist super einfach zu bedienen. Nun, lassen Sie uns über diesen Video-Einführungslink sehen. Dafür werde ich meine sekundäre Farbe verwenden. Wählen wir das aus, kopieren Sie es, fügen Sie es ein, geben Sie Gesicht ein. Wir werden Brandon Grotesque wieder benutzen, 18, 24 und Bold. Das letzte, was zu tun ist, ist auch ein kleines Symbol hinzuzufügen, weil ich die Tatsache zeigen wollte, dass, hey, wenn Sie auf diesen Link klicken, ein Video abgespielt wird. Also brauchen wir ein Symbol, auf dem Spiel steht. Wir haben das hier oder wenn wir zu Ionicons gehen, werden wir dieses bekommen. Drag & Drop. Ich werde die Größe auf 24 ändern, und ich werde das Symbol und den Text auswählen. Ich werde „Shift + A“ drücken, um ein automatisches Layout zu erstellen. Nun, wenn Sie dies tun, können Sie Elemente auf verschiedene Arten ausrichten. Wenn das automatische Layout horizontal war, können Sie Elemente oben, Mitte oder unten ausrichten. Wenn das automatische Layout auf vertikal eingestellt ist, können Sie Elemente links, zentriert und rechts ausrichten. Das ist es, was es tut. Sie können auch wählen, ob ein Element nach oben oder nach unten verschoben werden soll. Wenn sich das Layout im horizontalen Modus befindet, können Sie natürlich Elemente nach links und rechts verschieben. Sie können auch die Tastenkombinationen links, rechts, oben, unten verwenden. In meinem Fall werde ich wählen, dieses Symbol in der Mitte und auch diesen Text in der Mitte auszurichten . Was die Entfernung zwischen den Elementen betrifft, werde ich 16 Pixel wählen. Ich werde sicherstellen, dass ich die gleiche Farbe auf diesem Symbol verwende. Nun, was Sie tun können, ist, dass Sie diese beiden Elemente mit automatischem Layout gruppieren können. Sie können „Umschalt+A“ drücken und das wird ein weiterer Rahmen für beide erstellen. Es kann seinen Abstand zwischen den Elementen auf 32 einstellen. Standardmäßig werden diese Elemente in der Mitte ausgerichtet. Nun, ich möchte den gleichen Abstand zwischen diesen drei Elementen. Was ich tun kann, ist, dass ich alle auswählen kann, indem ich „Shift“ gedrückt halte. Ich kann „Shift + A“ tun, um ein automatisches Layout hinzuzufügen. Ich werde einfach den Abstand zwischen ihnen oder den Abstand zwischen ihnen auf 32. Außerdem werde ich sicherstellen, dass alle diese nach links ausgerichtet sind. So wie so. Jetzt ist das letzte, was zu tun ist, diesen Inhalt in einem respektablen Abstand vom Header zu positionieren . In unserem Fall sind es 96 Pixel, was übrigens ein Vielfaches von acht ist. Ich werde diese Positionierung beibehalten. Aber wenn Sie es anders positionieren möchten, würden Sie die Pfeiltasten nach oben und unten verwenden. Cool. Nun, das ist der erste Teil des Inhalts. Der letzte Teil besteht darin, dieses Medienobjekt hinzuzufügen. Hier ist, wie wir das vorgehen. Wir werden beginnen, indem wir eine einfache Form erstellen und wir werden einen Rahmenradius von 8 hinzufügen, eine Höhe von 240 Pixel. Was ist mit der Breite? Nun, für die Breite können Sie im Grunde jede Breite gehen, die Sie wollen. Aber was ich gerne tun würde, ist, dass ich gerne ein Verhältnis von 16 x 9 verwenden möchte. Ich habe ein cooles kleines Plugin dafür. Es nennt sich Aspekte. Diese finden Sie im Figma-Plugins-Verzeichnis. Suchen Sie einfach nach Aspekten und Sie werden es finden. Dadurch kann ich ein Element auswählen, ein Seitenverhältnis auswählen und eine Eigenschaft auswählen, die auf diesem Seitenverhältnis angepasst werden soll. In meinem Fall möchte ich die Breite ändern, da die Höhe auf ihre richtigen Abmessungen eingestellt ist. Ich werde anwenden drücken und dies änderte die Breite auf 427 Pixel. Jetzt habe ich eine perfekt dimensionierte Form für ein Verhältnis von 16 mal 9. Mit dem ausgewählten, was ich jetzt tun kann, ist es klicken und unter Füllen, wählen Sie „Bild“, wählen Sie „Bild“. Ich kann meine Zielseite Starterkit öffnen, zu Platzhalterbildern wechseln und jedes der Bilder aus diesem UI-Kit auswählen. Lassen Sie uns „Main“ wählen. Hier haben Sie mehrere Möglichkeiten, wie sich das Bild verhält. Sie können zwischen Füllung, Einpassen, Zuschneiden und Kacheln wählen. In meinem Fall werde ich es nur auf Fill belassen. Dann werde ich das auswählen und ich werde einen Schlagschatten hinzufügen. So wie so. Nun, was ich tun möchte, ist ein nettes Gitter aus diesen Bildern zu erstellen. Ich werde „Duplizieren“ auswählen und ich werde dies auf 32 Pixel von dem anderen positionieren . Lassen Sie uns noch einmal duplizieren, 32 Pixel. Lass uns das nochmal machen. Lass uns das nochmal machen. Lasst uns eine dritte Spalte machen. So wie so. Jetzt gehen wir weiter und fügen ein paar frische Bilder hier hinzu. Um es interessanter zu machen, hier ist, was wir tun werden, werden wir die Top-Bilder hier löschen. Wir werden die so nach oben bewegen. Es fügt nur ein wenig ein visuelles Interesse hinzu. Lasst uns jetzt die Bilder ändern. Wenn Sie eine Rechteck-Form mit einer Bildfüllung haben, können Sie tatsächlich darauf doppelklicken, um den Fülldialog zu öffnen. Also lassen Sie uns ein anderes Bild wählen, vielleicht dieses und lassen Sie uns dasselbe für den Rest tun. Alles klar, wenn Sie also mit dem Ergebnis zufrieden sind, tun Sie hier, was Sie tun. Sie wählen alle diese und Sie gehen genau hier, wo es Komponenten heißt, und wählen Komponente erstellen. Komponenten und fig-ma können Sie nun bestimmte Elemente wiederverwenden. Wenn Sie Änderungen an der übergeordneten Komponente vornehmen, werden auch die untergeordneten Komponenten geändert. Wenn ich diese Komponente auf einer anderen Seite duplizieren würde und ich Änderungen an dieser Master-Instanz vornehmen würde, werden diese Änderungen auch auf den anderen Seiten wiedergegeben. Jetzt, da ich das in eine Komponente verwandelt habe, kann ich es auswählen und es drehen. Wir werden die gleiche 16-Grad-Drehung verwenden, die wir auf diesen Elementen verwendet haben. Denken Sie daran, diese Zahl 16 Grad. Wir werden dies häufig bei der Gestaltung dieser Seite verwenden. Jetzt ist es gedreht. Ich kann es in seiner endgültigen Position bewegen und das liegt wirklich an dir und wie du willst, dass es aussieht. In meinem Fall werde ich es wahrscheinlich einfach so etwas lassen oder etwas anderes, das ich tun kann, ist das Folgende. Ich kann das Bild hier in das Hauptbild ändern. Ich kann wählen, dieses Bild vollständig zu verstecken und ich kann es sogar in so etwas schieben und ich kann es nach unten verschieben , so dass der Text hier irgendwie mit diesem Bild verwebt vielleicht ein bisschen mehr so. Auch hier ist dies eine Frage der persönlichen Präferenz, aber ich denke, das wird ziemlich gut aussehen. Gehen Sie voran und fummeln Sie damit, spielen Sie herum, sehen Sie, was am besten für Sie aussieht. Wenn wir jetzt davon sprechen, was am besten aussieht, werfen Sie einen genaueren Blick auf diesen Schatten. Siehst du, wie es hier abgeschnitten ist? Das liegt daran, dass beim Hinzufügen oder beim Erstellen eines Frames mit automatischem Layout normalerweise dieses Kästchen auschecken wird, in dem Clipinhalt steht und im Grunde jeden Inhalt abschneidet, der sich außerhalb der Grenzen dieses Frames befindet. In unserem Fall ist der Schatten außerhalb der Grenzen. Ich kann das Kontrollkästchen deaktivieren und dann können wir noch tiefer hineingehen und dieses Kästchen deaktivieren und jetzt sehen, wie der Schatten auftaucht. Das ist etwas, was Sie tun können, wenn Sie sehen, dass dies geschieht. Wenn ein Bild, das außerhalb der Grenzen Ihres Rahmens liegen sollte , normalerweise nicht auftaucht, ist das hier der Schuldige. Ordnung, es gibt eine letzte kleine Sache, die wir hier tun müssen. Hier unten werden wir ein kleines Symbol hinzufügen, das den Benutzern mitteilt, dass „hey, du kannst diese Seite nach unten scrollen.“ Um das zu erstellen, beginnen Sie mit einem Rechteck. Wir werden seine Breite auf 24 einstellen, seine Höhe auf 48, seinen Radius auf 100, und wir werden tatsächlich die Füllfarbe entfernen und wir werden einen Strich oder einen Rahmen hinzufügen, und der Rand wird weiß sein. Es wird innerhalb eines Pixels sein und dann innerhalb, dass wir einen schönen Kreis mit dem Ellipsenwerkzeug erstellen. Wenn Sie das Ellipsenwerkzeug verwenden, können wir die Hand freigeben oder wir können die Shift gedrückt halten und es wird auf die gleiche Breite und Höhe einrasten. Lassen Sie uns das sehr klein machen, sechs mal sechs sollten den Trick tun. Füllen Sie weiß, und bewegen Sie es dann einfach in mein kleines Symbol hier. Sie können es auf acht Pixel von oben einstellen. Das sollte den Trick machen. Wählen Sie beides, Befehl G, um sie alle zusammenzufassen, und benennen Sie es scrollen oder was auch immer Sie wollen. Lassen Sie uns nun das Raster aufheben und es am Gitter ausrichten. So wie so. Offensichtlich müssen Sie es nicht am Raster ausrichten, wenn Sie das Gefühl haben, es sieht in einer bestimmten Position besser aus , so dass Sie das tun können - kein Problem. Nur weil wir ein Gitter verwenden , bedeutet das nicht , dass wir jedes einzelne Ding darauf ausrichten müssen. Das ist der fertige Heldenbereich. Alles klar, jetzt bist du dran, den Heldenbereich zu beenden. Wenn du das schon getan hast, fantastisch. Wenn nicht, gehen Sie weiter, schauen Sie sich diese Lektion erneut an, wenn Sie müssen, und füllen Sie diesen Abschnitt aus. Nun, Sie werden feststellen, dass dies etwas sehr Interessantes ist, was ich Ihnen sagen wollte, Sie werden feststellen, dass in den meisten Fällen der Held oder der Kopfteil einer Website am schwierigsten ist. Ich weiß nicht, warum das so ist, aber normalerweise, wenn man es geschafft hat, ist es von diesem Punkt an einfach reibungslos segeln. Ich denke, es liegt daran, dass Sie, nachdem Sie den Header oder den Heldenbereich abgeschlossen haben, ein Fundament haben, auf dem Sie aufbauen können, richtig? Sie haben einen Ausgangspunkt. Also denke ich, geistig macht es dir einfach, Dinge in Gang zu bringen. Wir sind jetzt bereit, weiterzumachen. Der nächste Abschnitt auf unserer Liste ist der erste Abschnitt für Funktionen. Das werden wir in der nächsten Lektion angehen. Wir sehen uns dort. 8. Erster Abschnitt für Funktionen: Willkommen zurück in der Klasse. In dieser Lektion werden wir den ersten Abschnitt für Features entwerfen. Hier werden wir die Mehrheit der Symbole verwenden und auch viel mit Farben spielen. Das sollte Spaß machen, also lasst uns anfangen. Lassen Sie uns zunächst einen Blick auf den Drahtrahmen werfen , damit wir genau wissen, was wir tun müssen. Das ist also der Abschnitt, den wir entwerfen müssen. Wie Sie sehen können, beginnen wir mit dem Kategorientitel, dann eine kleine Beschreibung und dann wird jedes Feature so präsentiert. Es hat einen Titel und es hat eine Beschreibung. Einige der Funktionen sind nur in der Pro-Version verfügbar, daher müssen wir eine Art Badge dafür entwerfen. Wir werden auch einige Symbole hinzufügen. Wenn ich mich richtig an der Projektbesprechung erinnere, hat jede dieser Feature-Kategorien eine Art von Untertiteln. Wenn wir also die Projektbeschreibung öffnen und uns die Funktionen ansehen, gibt es eine Feature-Kategorie, und hier ist eine weitere Feature-Kategorie, die wir jetzt brauchen „Budgetierung einfach gemacht“. Wir haben einen Untertitel, der heißt „Umschlag-Budgetierung“. Also müssen wir sicherstellen, dass wir das auch irgendwo hinzufügen. Also gehen wir eigentlich weiter und schnappen uns das. Kopiere es und lass uns hier rüber gehen, lass es uns einfügen. Lassen Sie uns auch so ziemlich alle Inhalte bekommen, die wir hier haben. Wir kümmern uns darum, es in ein bisschen zu stylen. Eine andere Sache, die ich gerne tun würde, ist die Höhe dieses Rahmens zu erhöhen. Fangen wir jetzt von oben an, sollen wir? Damit nennen wir es Untertitel. Nun, weil dies sehr zurückhaltend sein muss, also muss es nicht so viel herauskommen. Wir gehen zurück zu unserer Typografie, und wir werden die kleinen Stile verwenden. Also gehen Sie vor und kopieren Sie die Eigenschaften von diesem und fügen Sie sie hier ein. Außerdem werden wir seine Farbe ändern. Ich denke, wir sollten diese sekundäre Art von korallenroter Farbe verwenden. Also geh weiter und kopiere das, füge das hinein, und wir sollten gut gehen. Lasst uns das Gitter aufstellen. Lassen Sie uns dies tatsächlich am Raster ausrichten und lassen Sie es im Vergleich zu diesem Element auf etwa 120 Pixel positionieren . Es muss nicht perfekt sein. In einigen Fällen ist es wichtiger, dass das gesamte Layout richtig aussieht , anstatt sich an diese strengen Regeln zu halten. Also gerade jetzt habe ich es auf 120 Pixel von diesem Element hier positioniert. Aber wenn es nicht richtig aussieht, könnte ich es einfach ein bisschen runterdrücken. Es muss nicht pixelgenau sein. Gehen wir nun zu den nächsten Elementen über. Lassen Sie uns zuerst diese auswählen, können Sie die Gruppierung aufheben. Nun diese Überschrift, lassen Sie uns sehen, welchen Stil wir dafür verwenden sollten. Ich denke, vielleicht Überschrift drei oder Überschrift vier, aber Überschrift drei scheint angemessener zu sein, also lassen Sie uns das kopieren und einfügen und lassen Sie uns auch die richtige Farbe dafür verwenden. Also gehen wir zu unserem Grau, ich hole das und wir fügen es hier ein. Wir werden graue 100 benutzen. Übrigens, wenn ich grau 100 sage, bedeutet es grau 100% Deckkraft. Wenn ich grau 40 sage, bedeutet dies diesen Wert, diese Farbe hier, grau 40% Deckkraft. Also bedenken Sie das im Hinterkopf. Lassen Sie uns das auch hier richtig ausrichten. Lassen Sie uns das tatsächlich nach oben schieben und lassen Sie etwa 32 Pixel Abstand zwischen diesen beiden Elementen. Nächster Schritt ist dieses Element hier, das auch 32 Pixel vom Haupttitel entfernt platziert werden sollte. Eigentlich werde ich die Größe zuerst ändern. Ich möchte, dass das ungefähr fünf Gittersäulen belegt. Also werden wir die Größe bis hier ändern. Nun, für den eigentlichen Stil, gehen wir zurück zur Typografie und ich denke daran, Überschrift fünf zu verwenden. Rubrik fünf sollte den Trick tun. Aber wir werden dieses mittlere Gewicht tatsächlich entfernen, weil es ein bisschen zu viel ist. Wenn ich darüber nachdenke, haben wir hier tatsächlich den gleichen Stil benutzt, oder? 25,32 für Zeilenhöhe. Also lasst uns konsequent sein. Regelmäßig und wir werden diese Farbe verwenden. Aber ich denke, wir werden einen Farbton dieses Grauen verwenden. Also mal sehen, vielleicht ist das hier 50 oder 60. Ja, ich denke, das sieht gut aus. Also lasst uns grau 60. Cool. Also, was ich jetzt tun kann, ist einfach alle diese auswählen, verschieben Sie A, um Auto-Layout hinzuzufügen. Jetzt, wenn ich diesen Text ändere, auch die Elemente, die ihn umgeben, betroffen sein. Dies ist eine sehr effiziente Arbeitsweise in Figma. Lassen Sie uns nun unsere Aufmerksamkeit auf die tatsächlichen Funktionen richten. Das erste, was ich tun werde, ist die Farbe und die Schriftfamilie und alle Textinformationen zu ändern . Also für diese Titel müssen wir die Überschrift Schrift verwenden, aber für den Text müssen wir die Körperschrift verwenden und im Moment sind diese wie ein Textelement, ist nur der Titel, geben Sie und dann die Text selbst. Wir müssen das aufteilen, also werde ich das von dort entfernen, duplizieren. Ich lege den Titel im Grunde in ein eigenes Textelement. Ich werde Auto Width darauf einstellen. Dann werde ich es mit diesem gruppieren und Verschiebung A auswählen. Für den Abstand zwischen den Elementen werde ich 16 Pixel auswählen. Wir brauchen hier keine Polsterung. Jetzt werde ich das an meinem Gitter ausrichten, und der Text wird drei Spalten breit oder 280 Pixel sein. Lassen Sie uns die Farbe ändern. Für dieses bisschen werde ich Überschrift fünf verwenden. Kopieren Sie die Eigenschaften von hier und fügen Sie die Eigenschaften ein, und stellen Sie erneut sicher, dass wir die Textfarbe aktualisieren. Für den Text werden wir die Absatzformatvorlage verwenden. Kopieren Sie die Eigenschaften davon, fügen Sie sie hier ein, und stellen Sie sicher, dass Sie auch die Farbe aktualisieren. Für die Absätze, Tisa Sans Pro, 18 Pixel, Schriftgröße und 24 Zeilenhöhe. Eine andere Sache, die ich tun möchte, ist die Deckkraft auf diesen ein wenig zu senken. Ich werde 80% verwenden. Lassen Sie mich Ihnen zeigen, wie das aussieht. 80% auf den Titel und 60% auf den Text. Wir müssen im Grunde dasselbe mit den restlichen Gegenständen tun. Ich werde eines dieser Elemente wieder tun, damit Sie den Prozess sehen können, und dann werde ich für die anderen schnell vorwärts gehen. Zuerst müssen wir den Titel von der Beschreibung trennen. Dann müssen wir den Titel Auto Breite machen. Wählen Sie den Titel und die Beschreibung aus. Verschieben Sie A, um das automatische Layout zu erstellen. Legen Sie den Abstand auf 16 fest, kopieren Sie dann die Eigenschaften für den Text, fügen Sie sie ein. Kopieren Sie die Eigenschaften für den Titel, und fügen Sie sie ein. Das war's. Also lassen Sie uns jetzt schnell vorwärts, bis ich den Rest der Änderungen vornehme. Jetzt, da hier alles richtig eingerichtet ist, lasst uns voran gehen und diese zusammenfassen. Wir haben Zahlungsempfänger, Kategorien und wir können hier geplante Transaktionen einführen. Lassen Sie uns diese auch am Gitter ausrichten. Die Art und Weise, wie ich das möchte, ist, dass die tatsächlichen Textelemente drei Spalten umfassen, dann lasse ich eine Spalte leer. Dann beginnt die nächste Gruppe bei der nächsten Spalte und so weiter und so weiter. Eigentlich eine letzte Sache, die ich hier tun muss, ist die Größe all dieser Textelemente auf 280 Pixel zu ändern. Da gehen wir. Also sollte ich relativ gehen, einfach so. Wir werden alle von ihnen auswählen, werden sie an der Spitze ausrichten, dann wählen Sie sie erneut, Befehl oder Steuerung G, um eine Gruppe zu erstellen. Als nächstes wird, sagen wir, Mehrere Budgets, dann vielleicht Zielverfolgung und Synchronisierung zwischen Geräten. Schließlich werden wir Berichte haben und so mit Ihrer Bank synchronisieren. Wählen Sie diese nun aus, richten Sie sie an den obersten Befehl G. Wählen Sie diese aus, richten Sie sie an den obersten Befehl G zu Gruppe aus. Hier ist, was ich will. Ich möchte 64 Pixel Abstand zwischen jeder dieser Gruppen. Ich meine vertikale Abstände, so. Auch 64 Pixel zwischen diesen und dieser Gruppe hier. Das ist wirklich einfach mit dem automatischen Layout zu tun. Wählen Sie also alle aus. Verschieben Sie A, 64 Pixel hier, und stellen Sie dann sicher, dass alles wie folgt nach links ausgerichtet ist. Ich bin gut zu gehen. Das letzte, was wir hier tun müssen, ist, die Symbole hinzuzufügen. Fügen Sie hier ein Pro-Badge anstelle dieser Textstücke hinzu, wo Pro steht. Lassen Sie uns eigentlich voran und erstellen Sie dieses Pro-Abzeichen, und dafür werde ich das Rechteck-Werkzeug wählen oder R auf der Tastatur drücken. Oder machen wir dies wieder mit dem automatischen Layout. Also T für Text-Werkzeug, Ich werde Pro sagen, für die Schriftart, Ich werde Brandon Grotesque verwenden, fett, 14 Pixel und auch 5% Buchstabenabstand. Hier ist ein Pro-Tipp, Wenn Sie mit Großbuchstaben oder Großbuchstaben arbeiten, mit einer niedrigen Schriftgröße; Um die Lesbarkeit zu verbessern, sollten Sie immer den Buchstabenabstand erhöhen. Nur um Ihnen ein Beispiel zu geben, hier ist ohne Buchstabenabstand und hier ist mit Buchstabenabstand. Sehen Sie, wie Sie dieses Bit leichter lesen können als dieses Bit. Deshalb haben wir diesen Stil hier oder zu diesen Textelementen auch Buchstabenabstände hinzugefügt. Sie nun die Option ausgewählt haben, verschieben Sie A, um einen Rahmen um ihn herum zu erstellen. Lassen Sie uns eine Füllung hinzufügen. Die Füllung wird unsere Primärfarbe sein, dann 100 für den Rahmen radious Lassen Sie uns vielleicht acht Pixel horizontale Polsterung und vielleicht vier Pixel auf vertikalem Polstern hinzufügen . Wir brauchen hier keine Abstände. Der Text selbst werden wir weiß machen. Ich denke, wir sollten gut gehen. Was wir hier tun können, können wir die Schriftgröße noch mehr verringern und auch mit dem Buchstabenabstand. Wir werden jeweils 16 Pixel für den Buchstabenabstand verwenden. Ich denke, das sieht ein bisschen besser aus. Da wir es an mehreren Stellen verwenden werden, ist es immer eine gute Idee, eine Komponente zu erstellen. Wählen Sie es also aus und gehen Sie zum Erstellen einer Komponente oder verwenden Sie die Tastenkombination. Also, jetzt werde ich Befehl X drücken, um es zu schneiden, und ich werde anfangen, es anstelle dieses Textes einzufügen . Also mehrere Budgets, Befehl V und dann ein automatisches Layout mit nur diesen beiden Elementen zu erstellen, werde ich sie auswählen und Shift A drücken und dann werde ich den Modus horizontal auswählen. Ich werde sicherstellen, dass Clip-Inhalte deaktiviert werden. Ich werde dieses Abzeichen an der Mitte ausrichten und sicherstellen, dass dies auch an der Mitte ausgerichtet ist. Was den Abstand betrifft, sind 16 Pixel reichlich. Also, jetzt werde ich voran gehen und dasselbe für den Rest tun. In Ordnung. Kühle Bohnen. Jetzt, da wir so ziemlich alles an Ort und Stelle haben, müssen wir nur noch die Symbole hinzufügen. Also, um das zu tun, können wir in unserem Icon-Setup beginnen. Ich werde das Ionicons Set verwenden. Also lasst uns nach Menschen suchen. Ich werde verwenden, People Outline, Kopieren Sie das, Fügen Sie es hinein und ich werde es neu anpassen. Nun, hier ist eine Situation, auf die Sie stoßen könnten , wenn Sie figma für bestimmte SVG-Elemente verwenden. Beim Importieren in figma und die Größe der normalen Art und Weise mit dem Werkzeug Verschieben ausgewählt. Sie werden sehen, dass die Formen darin oder die Striche der Formen sehr dick werden. Das ist nicht etwas, was du tun willst. Stattdessen müssen Sie hier nach oben gehen und Maßstab oder K auswählen. Wenn Sie das tun, wird das Element jetzt korrekt geändert. Also werden wir die Größe ändern, auf 24 Pixel in der Höhe. So etwas wie das. Also, jetzt werde ich das nach links ausrichten. Sie können auch die linke Tastatur Pfeil drücken und ich werde es auch nach oben bewegen, indem Sie den Pfeil nach oben auf der Tastatur drücken. Alles, was jetzt noch zu tun ist, ist eine schöne Farbe dafür zu finden. Dafür gehen wir zu unseren treuen Tertiärfarben. Dies ist einer der Gründe, warum wir sie benutzen. Also, es ist tatsächlich nehmen sie in Ordnung. Ich werde diese Farbe kopieren, das hier einfügen und, wir sind gut zu gehen. Also, jetzt ist alles, was noch zu tun ist, füllen Sie den Rest der Elemente mit Symbolen. Ich werde genau das gleiche Verfahren verwenden. Ich werde noch einen machen und dann werde ich schnell vorwärts gehen. Also für Kategorien, vielleicht suchen wir nach einem Gitter. Mal sehen, ob wir es finden können. Ich werde Grid-Umriss verwenden. Also kopiere das. Markieren Sie den Text oder das Element, in dem ich einfügen möchte. Befehl V und dann K, um diese Größe auf 24 Pixel in der Höhe zu ändern. Bewegen Sie es nach oben und lassen Sie uns eine schöne Farbe dafür wählen. Vielleicht weiß ich es nicht, dieses Purple. Es spielt keine Rolle. Sie wählen einfach die Farben aus, von denen Sie denken, dass sie am besten aussehen. In Ordnung. Also lassen Sie mich jetzt schnell vorwärts und füllen Sie den Rest der Symbole. In Ordnung. Das war nicht so schlimm. War es? Ziemlich schneller Prozess, vor allem, wenn Sie es auf Schnellvorlauf beobachten. Aber alle Scherz beiseite, es ist eine wirklich einfach, wenn Sie den Hang davon bekommen, sobald Sie ein oder zwei Elemente erstellen, ist nur spülen und wiederholen, um den Rest zu machen. [ MUSIK] Alles klar, im ersten Featurebereich ist nun abgeschlossen. Jetzt bist du dran. Wenn Sie es noch nicht getan haben, erstellen Sie es jetzt. Ich habe hier einen dreispaltigen Ansatz verwendet, aber Sie könnten Dinge anders machen. Warum nicht zwei Spalten oder vier Spalten verwenden? Probieren Sie es aus. Sehen Sie, wie sich das Layout ändert, wenn Sie diese Elemente anders anordnen. Jetzt, wenn Sie das tun, sind Sie natürlich bereit, mit der nächsten Lektion fortzufahren. In der nächsten Lektion werden wir einen weiteren Abschnitt für Features erstellen, diesmal jedoch auf andere Weise. Also freue ich mich darauf, Sie dort zu sehen. 9. Zweiter Abschnitt für Funktionen: Willkommen zurück in der Klasse. In dieser Lektion entwerfen wir den zweiten Satz von Features oder den zweiten Abschnitt für Features, wie auch immer Sie ihn nennen möchten, und wir werden es auf eine andere Weise tun als die erste. Wenn Sie nun eine Zielseite wie diese oder jede Art von Präsentationswebsite entwerfen, ist es sehr wichtig, die Art und Weise zu variieren, wie Sie diese Funktionen anzeigen, und wenn Sie dies tun, stellen Sie sicher, dass Sie die Interessen des Benutzers am Leben halten. Stellen Sie sich vor, Sie müssen 30 Features auf einer Seite anzeigen. Nun, wenn Sie diese 30 Funktionen nehmen und Sie sie alle in eine Liste geworfen haben, zum Beispiel, wird es einfach langweilig sein. Niemand wird das durchlesen. Stattdessen, wenn Sie zehn von ihnen nehmen, zeigen Sie sie vielleicht in einem Raster mit einigen Symbolen, wie wir es getan haben, und dann nehmen Sie die anderen zehn oder zehn und Sie zeigen sie weiter unten auf der Seite auf eine andere Weise und dann Sie nehmen Sie die letzten zehn und zeigen Sie sie noch weiter unten auf der Seite, vielleicht mit einigen begleitenden Bildern oder Illustrationen. Nun, das ist ein viel besserer Ansatz, weil es den Benutzer engagiert halten wird und der Benutzer diesen Inhalt viel einfacher verdauen wird. In dieser Lektion verwenden wir also ein anderes Layout für den zweiten Satz von Features. Fangen wir an. Werfen wir einen Blick auf das Drahtmodell, um genau zu sehen, was wir tun müssen. Also haben wir diese Feature-Kategorie mit dieser Beschreibung und dann vier Features. Jetzt habe ich im Drahtmodell dieses schwarze Feld als Platzhalter für ein Bild hinzugefügt. Wir können hier ein Bild verwenden oder wir können einfach den Text verwenden. Es liegt wirklich an uns. Also hier ist, was wir tun werden. Wir werden all das kopieren, den ganzen Text, der ist, und wir werden ihn in unserem Hauptdesign so einfügen. Aber bevor wir das tun, lassen Sie uns ein bisschen aufräumen. Ich denke, es ist wirklich wichtig, dass wir so sauber wie möglich arbeiten. Also lassen Sie uns diese Features nennen oder tatsächlich Features eins, und dann können Sie diese Gruppen auch umbenennen. Ich werde das hier nicht tun, weil die Zeit von entscheidender Bedeutung ist aber wissen Sie, dass, wenn Sie ein Design erstellen,Ihre Ebenen und Gruppen entsprechend benennen, Ihre Ebenen und Gruppen entsprechend benennen weil es Ihnen einfach das Leben viel einfacher machen wird. Ordnung. Jetzt gibt es ein paar gemeinsame Elemente, die diese beiden Sätze von Features teilen. Also werden wir auch einen Untertitel wie so hinzufügen. Also lass mich das einfach runterbringen. Der Untertitel für diesen Abschnitt ist, wenn ich mich richtig erinnere, iOS-Magie. Jetzt, um Zeit zu sparen, kopieren Sie Eigenschaften, fügen Sie Eigenschaften, kopieren Sie Eigenschaften und fügen Sie Eigenschaften ein. Cool. Stellen Sie nun sicher, dass dieser Text auf maximal fünf Spalten angezeigt wird, genau so, und diese auch, und dann wählen wir alle diese Verschiebung A und wählen Sie 32 Pixel zwischen ihnen und stellen Sie sicher, Deaktivieren Sie den Clip-Inhalt, wenn Sie feststellen, dass einige der Absender auf dem Text hier abgeschnitten sind. Cool. Stellen Sie sicher, dass alles nach links ausgerichtet ist und wir bereit sind zu gehen. Jetzt werde ich all das nehmen und es 240 Pixel aus dem obigen Abschnitt positionieren und jetzt auf diese Seite schauen, merke ich, dass ich tatsächlich vergessen habe, etwas zu tun. Ich habe vergessen, einen sehr hellen Hintergrund zu den ersten paar Abschnitten hinzuzufügen, zu den ersten beiden Abschnitten, entschuldigen Sie mich. Also lassen Sie mich das schnell beheben. Ich werde damit beginnen, ein Rechteck zu erstellen, und ich werde das unten positionieren. Lasst uns das so größer machen, und so. Lassen Sie uns die Größe ändern, so dass wir eine Polsterung hier auf der Unterseite oder Abstand zwischen der Kante und diesen Elementen von 120 Pixeln haben. Nun, hier ist ein weiterer kurzer Tipp und eine sehr hilfreiche Tastenkombination. Erinnerst du dich, als ich dir von den Nudging-Tools erzählte, wo du mit den Pfeilen der Tastatur ein Element nach links, rechts, oben und unten verschieben kannst ? Wenn Sie nun Befehl auf einem Mac oder Steuerelement unter Windows drücken, können Sie die Größe eines Elements ändern. Wenn ich zum Beispiel den Befehl gedrückt halte und die Pfeiltaste nach unten drücke und hier genau beachte, kann ich dies tatsächlich von der Tastatur aus ändern, und wenn ich auch die Umschalttaste gedrückt halte, kann ich die Größe noch schneller ändern. Dasselbe gilt für die Breite. Also Command oder Control und dann linke und rechte Pfeile erlauben es mir die Breite eines Elements zu ändern und wieder, wenn ich Shift gedrückt halte, kann ich diese Werte in Schritten von zehn im Vergleich zu Schritten von eins mit nur den Befehl oder die Strg-Taste gedrückt. So können Sie die Größe eines Elements mit Ihrer Tastatur ändern. Also zurück zu diesem Bit. Wir müssen diese Größe ändern, so dass wir 120 Pixel Polsterung auf der Unterseite haben, genau so und jetzt lassen Sie uns eine schöne Hintergrundfarbe verwenden. Ich könnte eine graue, eine sehr hellgraue, vielleicht graue Zehn von hier oder ich kann die primäre Zehn verwenden. Also lasst uns das machen. Also primäre 10 Prozent und wenn ich denke, dass das ein bisschen zu viel ist, kann ich noch niedriger gehen 5 Prozent und ich denke, eigentlich, das ist der Wert, den ich behalten werde, um 5 Prozent und das schafft eine schöne Trennung zwischen diesem Abschnitt hier und diesem Abschnitt hier. Also wählen wir jetzt alle diese aus und schieben wir sie wieder nach unten, bis wir zu 240 Prozent von diesem Top-Element kommen. Cool. Jetzt lasst uns diese Elemente stylen. Für all diese, werden wir die folgenden Stile verwenden, Brandon Grotesque, regelmäßig, und ich werde genau den gleichen Stil verwenden, den wir hier haben. Kopieren Sie also Einfügen, Kopieren von Eigenschaften, Einfügen von Eigenschaften. Der einzige Unterschied ist, dass ich 80 Prozent für die Farbe anstelle von 60 Prozent verwenden werde und wir auch die Großschreibung hier beheben. Also jetzt, was ich tun werde, ist Kartenelemente aus diesen Textelementen zu erstellen. Wirklich einfach, das zu tun, wählen Sie ein Element, verschieben Sie A, um Auto-Layout hinzuzufügen, und wählen Sie dann vertikale 32, horizontale Polsterung 64, vertikale Polsterung 0 hier. Wir können eine Füllung als weiß hinzufügen und wir können auch einen Schlagschatten hinzufügen. Also wird der Schlagschatten so sein, 30 für Unschärfe, 0 x, 20 y, und dann werden wir diese Farbe verwenden, unsere Haupt Grau 25 Prozent als Schattenfarbe und auch, lassen Sie uns einen Grenzradius von acht Pixeln hinzufügen. Nun, was ich tun kann, ist, dass ich den Text so einstellen kann, dass er sich an der Mitte ausrichtet, und ich kann dies ändern, so dass es drei Spalten umfasst, und wir werden diese Größe ändern, bis wir zum gewünschten Polster hier auf der linken Seite kommen. Okay, jetzt ist es einfach ausspülen und wiederholen für die anderen beiden Elemente. Lassen Sie uns also alle auswählen und sie an der Mitte ausrichten. Lassen Sie uns ihre Breite auf 216 Pixel und dann werden wir tun Verschiebung A, Verschiebung A, Verschiebung A, wählen Sie diesen Rahmen, kopieren Eigenschaften, wählen Sie diese Rahmen, fügen Sie Eigenschaften ein. Ziemlich cool, richtig? Nun, lassen Sie uns diese an unserem Text ausrichten. Wir werden einen Abstand von 64 zwischen diesen Elementen verwenden, und lassen Sie uns sie so positionieren. Ich werde 32 Pixel Abstand zwischen diesen Elementen verwenden. Jetzt, wo wir sie alle zusammen sehen, stellen wir fest, dass dieser kleiner ist als der Rest. Wir müssen eine feste Breite dafür festlegen. Da wir das automatische Layout hinzugefügt haben, müssen wir die Ausrichtung auf die vertikale wechseln, so dass wir dann eine feste Breite anstelle der automatischen Breite auswählen können . So wie so. Jetzt kann ich dies auf jeden Wert ändern, den ich brauche. Um dies ein wenig interessanter zu machen, werde ich beide auswählen und ich werde sie 32 Pixel nach unten schieben. Halten Sie Shift gedrückt und drücken Sie die Nach-unten-Taste, 1, 2, 3, Ich lasse Shift 1, 2. Jetzt habe ich eine 32 Pixel Lücke von der Spitze dieses zu dem, dass die Spitze davon. Jetzt können wir weitermachen und diese zusammenfassen. Wir können weitermachen und auf dieser Ebene A verschieben. Vergewissern Sie sich, dass Sie Clip-Inhalt deaktivieren. Dieser Teil ist jetzt fertig. Um diesen Abschnitt etwas interessanter zu machen, werden wir zwei weitere Dinge tun. Erstens, wir werden ein paar Bilder hinzufügen. Dafür werde ich tatsächlich diesen gesamten Abschnitt nach rechts verschieben und ich gehe zurück zu meinem Starter-Kit, ich werde die Platzhalter-Bilder auswählen und ich werde das iPad Pro und das iPhone 7 auswählen. Drag & Drop auf meine Seite. Diese sind im Moment etwas zu groß, also lassen Sie uns die Größe ändern. Ich werde die Größe auf etwa, ich weiß nicht, 700 ändern, und dann werde ich die Größe dieses Telefons auf etwa die Hälfte dieses Werts ändern, auf 350. Ich kenne das genaue Verhältnis zwischen diesen beiden Elementen nicht, aber auf einen Blick sieht das richtig aus. Was ich jetzt tun werde, ist, legen Sie das iPhone auf das iPad, so dass sie so aussehen. Dann werde ich das hier runterdrücken, 10, 20, 30, 1, 2, also 32 Pixel. Ich werde beide auswählen, Befehl G, um sie zu gruppieren und dann werde ich den Rand des iPhone mit dem Rand dieser Spalte ausrichten. Die Idee ist, diese Spalte hier leer zu lassen. Ich wähle diese beiden aus, wähle diese, richte oben aus. Schließlich ist das letzte, was ich tun möchte, wählen Sie dieses Bild des iPad und fügen Sie Schlagschatten. Wählen Sie das iPhone aus und machen Sie dasselbe. Dies erzeugt nur ein wenig Tiefe. Ziemlich cool. Jetzt endlich möchte ich hier ein paar Streifen hinzufügen. Wenn Sie sich fragen, wie ich die Inspiration für dieses Design mit den Winkeln und so bekam , nun, ich hatte einen Blick auf die Projektbeschreibung, wo der Kunde uns gesagt hat, dass , hey, hier sind ein paar Websites, die wir mögen und eine davon ist Stripe. Wenn Sie die Stripe-Website noch nicht gesehen , ist es sehr cool. Es sieht in etwa so aus. Sie können sehen, dass ich eine Menge Inspiration von hier mit den kräftigen Farben, mit den Winkeln, mit wie dieser Bildabschnitt hier präsentiert wird. Da ich angefangen habe, diesen diagonalen oder diesen abgewinkelten Ansatz zu verwenden, werde ich ihn im Rest der Seite verwenden. Ich werde damit beginnen, ein Rechteck über dieses große zu erstellen. Ich werde seine Rotation auf 16 Grad einstellen. Dann werde ich es irgendwo hier positionieren, so dass es nur durch die Liste der Funktionen geht. Ich werde es unter diesen Rahmen bringen, so. Ich werde einen Farbverlauf hinzufügen. Um einen Farbverlauf hinzuzufügen, können wir es auf zwei verschiedene Arten tun. Wir können es auswählen, gehen Sie zu füllen, wählen Sie Linear, Radial, einen Winkel, einen Diamantverlauf, was auch immer, aber linear ist normalerweise das, was Sie tun würden. Wählen Sie dann die Farben manuell aus. Ich habe tatsächlich eine großartige Ressource für Sie und das heißt WebGradients. Sie können es auf webgradients.com finden. Es zeigt Ihnen im Grunde eine Liste von vorgefertigten Farbverläufen. Ziemlich cool, richtig? Sie können die Anfangs- und Endfarben sehen und Sie können sogar CSS-Code dafür kopieren. Das Schöne an dieser Website ist, dass sie auch ein Plug-in für Figma bietet. Dieses Plugin heißt WebGradients. Gehen Sie weiter und installieren Sie es wie jedes andere Plug-in. Sie müssen lediglich die Form auswählen, auf der Sie den Farbverlauf verwenden möchten , und klicken Sie dann auf diese Liste. Das Plugin füllt automatisch den Farbverlauf für Sie aus. Wie cool ist das? Es liegt wirklich an Ihren Vorlieben, welche Art von Farbverläufen Sie hier verwenden möchten. Ich werde das hier wählen, Rainy Ashville. Ich werde das hier vorerst positionieren. Ich werde seine Ebenendeckkraft auf 10 Prozent ändern. Ich mache das, weil ich einen weiteren Farbverlauf hinzufügen werde. Ich werde seinen Winkel auf vielleicht 12 Grad ändern. Bewegen Sie es nach oben, so etwas. Dafür werde ich einen dunkleren Farbverlauf verwenden, vielleicht etwas mit verschiedenen Farben. So etwas. Sie können mit der Deckkraft auf diesem spielen. Gehen wir ein bisschen höher, 20 Prozent. Lasst uns auch mit 20 Prozent gehen. Es ist nur ein Detail oder diese beiden Streifen, aber ich denke, sie machen den Unterschied. Sie sehen einfach fabelhaft aus mit den restlichen Elementen. Dann wählen Sie alles, Befehl G, um alles zu gruppieren, und wir rufen diese Features 2. Der zweite Abschnitt für Features ist fertig. Jetzt sind Sie dran, Ihren eigenen Spin drauf zu setzen. Sie können das auf so viele verschiedene Arten tun. Sie können verschiedene Verläufe für diese beiden Streifen verwenden. Sie können das Bild mit dem geschriebenen Inhalt austauschen. Sie können einen anderen Stil für diese weißen Karten verwenden. Es kann viele Dinge tun. Experimentieren Sie und stellen Sie sicher, dass Sie Ihr Projekt in der Projektgalerie posten , damit wir alle einen Blick werfen können. Damit sind wir nun bereit, mit dem nächsten Abschnitt fortzufahren. Nach einem kurzen Blick über den Drahtrahmen können wir sehen, dass dieser Abschnitt eine kleine kalte Aktion ist. Das machen wir in der nächsten Lektion. Wir sehen uns dort. 10. Kleiner Call-to-Action: Willkommen zurück in der Klasse. In dieser Lektion werden wir erneut mit Formen und Farben spielen, um den kleinen Aktionsaufruf zu erstellen, der zwischen dem zweiten und dem dritten Feature-Abschnitt liegt. Wir sind so ziemlich alles bereit, also fangen wir an. Wenn wir uns den Drahtrahmen ansehen, können wir sehen, was wir hier tun müssen. Also haben wir im Grunde einen Titel, kleine Beschreibung und dann den eigentlichen Call to Action Button. Also gehen wir weiter und kopieren diese, und eigentlich werde ich nur den Text kopieren. Ich werde das hier einfügen und ich werde diese Stile tatsächlich verwenden. Also kopieren, einfügen und kopieren und einfügen. Und das wird uns ein Haufen Zeit sparen. Wir werden diese an der Mitte ausrichten, und dann greifen wir diesen Knopf. Ich werde es hier einfügen. Und das wird sagen, Download kostenlos. Das ist in Ordnung. Und lasst uns weitermachen und all diese auswählen. Verschieben Sie a, um ein automatisches Layout hinzuzufügen. Stellen Sie sicher, dass Sie das Häkchen deaktivieren. Wir werden 32 Pixel Abstand zwischen den Elementen hinzufügen. Und dann hier ist, was wir tun werden, wir fügen eine Füllfarbe in Form unseres Hauptverlaufs hinzu. Und dann werden wir acht Pixel hinzufügen, Grenzradius. Und dann werden wir 64 Pixel laterale Polsterung hinzufügen, 64 vertikale Polsterung. Und dann bleibt nur noch die Textfarbe zu ändern. Also lasst uns diese mit Weiß tauschen und wir sollten gut sein, dieses Ziel zu erreichen. Jetzt werde ich auch sicherstellen, dass sich das erstreckt, sagen wir sechs Spalten. Und wir sind fast da. Wir müssen das nur ein bisschen so anpassen. Und schließlich fügen wir unseren gespeicherten Schlagschatten hinzu. Und wir sind ziemlich gut zu gehen, oder? Nun, ich denke nicht, dass wir es so lassen sollten, weil es ziemlich einfach ist, oder? Es sitzt irgendwie nur da, eine eigenständige Box. Und ich denke, wir können es besser mit allem, was um ihn herum ist, integrieren. Und um das zu tun, werden wir mit einigen Formen und vielen und vielen Steigungen herumspielen . Also greifen Sie das Rechteck-Werkzeug und zeichnen Sie ein Rechteck, das 320 mal 64 und 100 in den Radius und fügen Sie unseren gespeicherten Schlagschatten hinzu. Also, was ich jetzt tun werde, ist, dass ich das duplizieren werde, es so verschieben und es einschieben werde, 10, 20, 30, 40, 50, 60, eins, zwei, drei, vier. So 64 Pixel, können Sie sogar bei 60 stoppen. Die Idee ist, dass Sie diese Naht hier verstecken wollen, damit Sie es sogar manuell machen können, aber ich finde, dass die Verwendung einer bestimmten Nummer mir erlaubt, sehr präzise zu sein. Also wieder eins, zwei, drei, vier, fünf, sechs, eins, zwei, drei, vier. Jetzt werde ich es duplizieren und den Vorgang wiederholen. Eins, zwei, drei, vier, fünf, sechs, eins, zwei, drei, vier. Und wieder. Nun wählen wir diese aus und duplizieren sie und verschieben sie so nach unten. Und dupliziere das noch einmal und schiebe sie nach unten. Also, jetzt werde ich die mittlere Reihe nehmen und ich werde sie nach rechts schieben, 10, 20, 30, oder irgendetwas, vielleicht ein bisschen mehr, 40, 50, 60, eins, zwei, drei, vier. In Ordnung. Also, jetzt werde ich diese gruppieren, also Befehl G oder Control G, wenn Sie unter Windows sind. Und ich werde mein Verlaufs-Plug-in öffnen. Und ich werde damit anfangen, wählen Sie einfach ein Element aus, wählen Sie einen Farbverlauf, wählen Sie ein Element aus, klicken Sie auf einen Farbverlauf usw. und so weiter und machen Sie dasselbe für den Rest. Nun, wie Sie sich entscheiden, dies zu verkleiden, ist wirklich an Ihnen. Aber so machst du es. Nun, da das erledigt ist, wählen Sie alles aus und lassen Sie uns eine Komponente erstellen. Und lassen Sie uns 16 Grad Rotation einstellen. Jetzt werde ich das in der Mitte meiner Seite ausrichten. Und ich werde es auch irgendwo in diesem Bereich positionieren, denke ich 120 von den obigen Elementen. Auch hier muss das nicht genau sein. Du kannst es augapfel. Was auch immer gut aussieht, benutze es. Also, jetzt werde ich das einfach unter meine kleine Kiste hier verschieben. Und wir können voran gehen und sie vertikal an der Mitte ausrichten. Und wenn es etwas flach aussieht, kannst du reingehen. Und Sie können diese Gruppen so verschieben , dass der Schatten von der Gruppe oben auf die Gruppe darunter geworfen wird. War das schwer zu tun? Nicht wirklich. Sie haben gesehen, wie einfach es ist, mit Formen und Verläufen zu arbeiten und sehr interessante Elemente zu erstellen. Und damit können wir nun G befehlen, es zu gruppieren. Und ich nenne es Kleines CTA für Call to Action. Alles klar, Call to Action erledigt. Jetzt möchte ich Ihre einzigartige Perspektive dazu sehen. Spielen Sie mit diesen Farben, diesen Farbverläufen oder verwenden Sie vielleicht gar keine Farbverläufe. Ich habe dir eine Art gezeigt, es zu tun, aber offensichtlich ist das nicht der einzige Weg. Spielen Sie also herum und werden Sie kreativ. Und ich freue mich darauf, zu sehen, was du dir einfällt. Sobald Sie diesen Abschnitt abgeschlossen haben, können Sie mit dem nächsten Schritt fortfahren. Und der nächste ist der dritte und letzte Abschnitt für Features. Und wie üblich, werden wir ein anderes Layout verwenden, um diesen dritten Satz anzuzeigen. Das passiert in der nächsten Lektion, also sehen wir uns dort. 11. Dritte Abschnitt für Funktionen: Willkommen zurück in der Klasse. In dieser Lektion entwerfen wir den dritten und letzten Abschnitt für Features. Wenn Sie sich erinnern, was ich in den vorangegangenen Lektionen über das Entwerfen von Features gesagt habe, ist es immer eine gute Idee, es zu vermischen. Um dem treu zu bleiben, verwenden wir für diesen dritten Stapel ein anderes Layout, und wir werden auch einige Illustrationen hinzufügen. Also, wenn du bereit bist, fangen wir an. Werfen wir einen kurzen Blick auf das Drahtmodell, und wie Sie sehen können, sind dies die beiden Abschnitte, die wir erstellen müssen. So machen wir das. Wir gehen zurück zu unserem Hauptdesign und wir werden das kopieren. Lassen Sie uns diesen Rahmen ein bisschen größer machen. Wir werden die hier einfügen. Wir werden das Raster aufstellen und das gut an das Gitter ausrichten. Ich werde etwa 240 Pixel Abstand zwischen diesem Element und dem Aufruf zum Handeln belassen . Mal sehen, ob das genug ist, wir werden es nur schnell betrachten und ich denke, wir brauchen vielleicht ein bisschen mehr als das. Also gehen wir mit etwa 320, so etwas. So sieht das jetzt visuell ausgewogen aus. Dieser Aufruf zur Aktion sieht etwa auf halbem Weg zwischen diesem Element und diesem Element aus. Wie ich bereits in einer vorherigen Lektion sagte, müssen Sie sich nicht immer auf genaue Messungen verlassen. Wie zum Beispiel, zwischen diesem und diesem, habe ich eine 120 Pixel. Normalerweise würden Sie geneigt zu sagen, okay, nun, lassen Sie uns diese Entfernungen gleich halten, und so werde ich das bei 120 Pixeln platzieren. Aber wenn man es aus der Vogelperspektive betrachtet, werden Sie sehen, dass es visuell nicht ausgewogen aussieht, und in diesem Fall müssen Sie nur mit dem, was sich am besten anfühlt. In meinem Fall sieht mir das viel gut aus. Für den Inhalt dieses Abschnitts können wir den Text von unseren Wireframes abrufen und wir werden das gleiche hier tun. Aber anstatt die Sicherheit der Haupttitel zu sein, werden wir es tatsächlich ein wenig ändern. Wir werden Sicherheit als Untertitel hier verwenden und was den Haupttitel betrifft, sagen wir, dass Ihre Daten sicher sind. Es macht so mehr Sinn. Dann greifen wir zwei Unterabschnitte. Außerdem möchte ich sicherstellen, dass sich dieses Element auf sechs Spalten und nicht auf fünf erstreckt, genau so, weil ich zwei dieser kleineren Abschnitte einfügen möchte , die sich auf jeweils drei Spalten erstrecken. Lassen Sie uns dies auf 64 Pixel von dem Element darüber positionieren. Lassen Sie uns das Symbol loswerden, das brauchen wir nicht und für den Text haben wir was? Online-Banking, lassen Sie uns diesen Text hier kopieren. Nun, hier ist ein kurzer Tipp für Sie. Wenn Sie vorhaben, ein Stück Text von figma zu kopieren und Sie werden es hier wie so einfügen. Sie werden feststellen, dass der Stil nicht beibehalten wird. So wird stattdessen der ursprüngliche Stil des Kopiertextes verwendet. Um das zu umgehen, müssen Sie auf Bearbeiten gehen, einfügen und Stil anpassen, wie so. Cool. Also lassen Sie uns diese Ausrichtung mit dem Raster duplizieren und kopieren Sie den anderen Text und das ist für die Datenverschlüsselung. Lassen Sie uns wieder voran gehen, bearbeiten, einfügen und Stil anpassen. Cool. Also sind wir hier fast fertig. Das letzte, was wir tun müssen, ist eine Illustration hinzuzufügen. Also machen wir ein klassisches Layout für eine Funktion, bei der wir ein Bild auf der Seite und Inhalt auf der anderen Seite haben. Jetzt für die Illustration, und Sie können Links zu allem, was ich verwende und diese Ressourcen, diese PDF-Datei finden. Ich werde eine Illustration verwenden, die ich von flüchtigen Elementen bekommen habe, lasst es uns bringen. Ich werde die Oberseite der Elemente ausrichten, so dass die Oberseite des Bildes, ich werde es an der Spitze dieses Elements ausrichten, und ich werde dieses Bild so positionieren, dass es außerhalb des Gitters geht. Das ist völlig in Ordnung, aber stattdessen werde ich diese linke Kante mit dem Gitter ausrichten. Um den gleichen Abstand zu halten, den wir in anderen Teilen unseres Designs verwendet haben, werde ich diese eine Spalte leer lassen. Das ist also ein Abschnitt. Lassen Sie uns noch Befehl, eine Gruppe zu erstellen und jetzt werden wir es duplizieren. Wir werden es runterziehen. Nehmen wir an, 120 Pixel Abstand zwischen den beiden und wir werden genau das Gegenteil tun. Also werde ich dieses Bild löschen, ich werde das auf die andere Seite verschieben. Auch hier ist dies eine klassische Art der Anzeige von Features. Sie machen das Bild und den Inhalt und dann in der nächsten Zeile spiegeln Sie das Bild und den Inhalt. Hier werden wir die zweite Illustration greifen. Auch hier werde ich es mit dieser Spalte ausrichten, um diese Spalte leer zu lassen, sie an der Spitze auszurichten und das war's. Jetzt ist das letzte, was zu tun ist, die Kopie auf dem Text zu aktualisieren. Also hier haben wir Unterstützung. Sagen wir also Unterstützung dort. Was den Haupttitel betrifft, werden wir große Unterstützung für großartige Produkte sagen. Hier, bearbeiten, einfügen und anpassen Stil und die beiden Unterabschnitte sind die folgenden; 24/7 Online-Support und wir haben auch einen Link dort unten. So 24/7 Online-Support basierend auf Match-Stil. Dieser wird als kostenlose Bildungskurse bezeichnet. So fügen Sie das in so ein und es hieß freie Bildungskurse, ich vergaß. In Ordnung. Nun, das letzte, was hier zu tun ist, ist, diese beiden Links schnell zu erstellen. Also der erste, und ich werde diesen Unterstützungstext dort duplizieren. Aber anstatt diese rote Farbe zu verwenden, werde ich die blaue Farbe verwenden, weil dies ein Link ist und dieses Blau derzeit meine primäre Farbe ist. Ich werde auch diesen Pfeil packen, fügen Sie ihn ein. Wählen Sie diese beiden aus, verschieben Sie A, um ein automatisches Layout zu erstellen. Ändern Sie die Ausrichtung in horizontal. Stellen Sie sicher, dass beide Elemente in der Mitte ausgerichtet sind und stellen Sie den Abstand zwischen ihnen auf 8 Pixel, wie so und jetzt können wir diese Textzeile löschen und aktualisieren Sie dies zu sagen, senden Ticket. Eine andere Sache, die wir hier tun können, ist, dass wir diesen Pfeil neu dimensionieren können , anstatt 24, wir machen es 16 Pixel. Nur ein wenig kleiner, weil es an dieser winzigen Verbindung dort befestigt ist. Also, jetzt können wir das kopieren. Ich kann es hineinkleben. Wir können sagen, besuchen Kanal, und wir können dieses Bit löschen. Lassen Sie uns schließlich alles auswählen. Befehl G zu Gruppe oder Steuerung G, wenn Sie auf einem Windows-Computer sind, und wir werden diese Funktionen nennen 3. Ehrfürchtig. Bevor wir die Dinge einpacken, habe ich dir gesagt, dass diese Illustrationen aufgenommen werden oder von Envato Elementen heruntergeladen werden. Das ist ein kostenpflichtiger Service. Aber wenn Sie ein paar kostenlose Illustrationen wollen, lassen Sie mich schnell zeigen, dass jetzt, können Sie zu OnDraw.co gehen klicken Sie jetzt durchsuchen und hier finden Sie eine Reihe von SUP-Illustrationen. Es gibt viele von ihnen, Sie können sogar nach einem bestimmten Schlüsselwort suchen und was cool ist daran, Sie können die Akzentfarbe auf ihnen wirklich leicht ändern. Sobald Sie eine gefunden haben, die für Sie funktioniert, klicken Sie einfach darauf und Sie können ein PNG oder ein SVG herunterladen , es hängt wirklich davon ab, was Sie damit machen möchten. SVG steht für Scalable Vector Graphics und dies ist ein Vektorformat, was bedeutet, dass Sie die Größe des Bildes so viel wie Sie wollen ändern können und es wird nicht an Qualität verlieren. Ein PNG ist ein Raster-Format, das bedeutet, wenn Sie die Größe ändern und es größer als seine ursprüngliche Größe machen, wird es pixelig aussehen. Es hängt also wirklich von Ihrer Anwendung ab, aber ja, OnDraw.co/Illustrationen, großartige Ressource, um kostenlose SVG-Illustrationen zu erhalten. Ordnung, mit dem letzten Abschnitt für Funktionen fertig, sind wir weit über den halben Punkt bei der Gestaltung dieser Lernseite. Wenn du so weit gekommen bist, lass mich einfach sagen, großartiger Job. Nun, wie üblich, besteht Ihre Aufgabe für diese Lektion darin, diesen dritten und letzten Abschnitt für Features zu erstellen. Genau wie ich es bisher gesagt habe, machen Sie Ihre eigenen Spin auf die Dinge. Tun Sie nicht unbedingt genau das, was ich tue, obwohl das völlig okay ist, können Sie viel lernen, indem Sie das tun. Aber es ist auch eine gute Idee, Dinge auf eigene Weise zu machen und zu experimentieren und zu sehen, was die Ergebnisse sind. Nun, wenn du das schon getan hast und bereit bist, weiterzumachen, dann sollten wir wohl richtig gehen. Der nächste Abschnitt auf unserer Liste ist die Screenshot-Galerie. Das kommt in der nächsten Lektion. Also sehe ich dich dort. 12. Screenshot Galerie: Willkommen zurück in der Klasse. In dieser Lektion entwerfen wir die Screenshot-Galerie. Das ist ziemlich einfach zu tun, also lasst uns anfangen. Wenn wir einen Blick zurück auf den Drahtrahmen werfen, können wir sehen, dass ich die Screenshot-Galerie ursprünglich als ein einfaches Gitter von Bildern verspottet habe, und obwohl dies eine perfekt praktikable Lösung ist, denke ich, dass wir etwas interessanteres tun können als und wir werden ein Karussell von Bildern zu machen. Ein Karussell ist im Grunde, wenn Sie eine Zeile von Bildern sehen können und Sie Steuerelemente links und rechts haben, um diese Zeile von Bildern zu verschieben. Wenn Sie es nach links und rechts bewegen, werden andere Bilder enthüllt. Also, lassen Sie uns zum Hauptteil des Designs springen und ich werde Ihnen zeigen, was ich damit meine. Nun werde ich dazu einige der Platzhalterbilder verwenden , die in diesen [unhörbar] zur Verfügung gestellt werden. und lass uns sehen. Ich werde die wichtigsten offenen Ersparnisse ergreifen, vielleicht dieses, dieses hier, dieses und das Haupt. Also mit diesen einfach klicken und ziehen und abbilden. Okay, und das hat ein paar Bilder geladen. Nun möchten wir, dass unsere Bilder entsprechend dem von uns verwendeten Gitter dimensioniert werden. Also werde ich das Raster aufheben und wir werden es so machen, dass jedes Bild vier Rasterspalten einnimmt. Also, lassen Sie uns voran und ändern Sie die Größe so, und die Größe, nach der wir suchen, ist 384 Pixel. Also, jetzt werde ich dasselbe für die anderen tun. Also mit 384, und jetzt werde ich anfangen, sie in einem nach dem anderen zu bringen. Also lassen Sie uns Statistiken bringen, Dies werde ich tatsächlich bewegen. Also Statistiken gehen hier und dieses Bild werde ich es auf 32 Pixel von der anderen positionieren. Was sonst noch? Lassen Sie uns das Hauptbild einbringen und machen Sie sich keine Sorgen, dass dieses Bild viel größer ist, wir werden das in nur ein wenig beheben. Was haben wir sonst noch? Wir haben die, und ich glaube, wir haben genug Bilder hier. Also, lasst uns diese richtig so positionieren. Lassen Sie uns nun das Raster ausblenden und wählen Sie jedes dieser Bilder aus und fügen Sie einen schönen Schlagschatten und auch acht Pixel Rahmenradius. Was machen wir nun mit diesem großen Bild? Wir wollen, dass es genau die gleiche Höhe hat wie die anderen, das ist 683. Nun, das können wir tun. Kein Problem. Deaktivieren Sie einfach abhängige Proportionen, geben Sie 683 ein, und doppelklicken Sie darauf. Im Moment ist es zu füllen, aber wenn wir es bewegen wollen, können wir es auf beschneiden setzen.Dann können wir wählen, welchen Teil des Bildes wir anzeigen möchten. Ziemlich cool. Also, lassen Sie es uns nach unten bewegen, nur eine Berührung. wir sicher, dass es genau dort ist, wo es sein sollte. Ich denke, irgendwo wie hier sollte gut sein. Mal sehen. Nur ein bisschen, ein Pixel höher sollte den Trick gut machen. Ok. Also jetzt hier ist, was wir tun können, um ein wenig visuelles Interesse hinzuzufügen. Wir werden diese Bilder staffeln, was bedeutet, dass jedes andere Bild 64 Pixel niedriger als das vorherige positioniert wird. Also wählen wir das und das aus und wir sagen 1-2-3-4-5-6, das ist 60, und dann 1-2-3-4, das ist 64. Cool. Wählen wir nun diesen Befehl G aus, um sie zu gruppieren. Lasst uns sie weiter nach unten bewegen. Was ich tun möchte, um im Design konsistent zu sein , ist, dass ich diese beiden Winkelstreifen greifen und sie als Hintergrund verwenden möchte , und das wird schön mit dem ganzen Winkelmotiv binden, das wir verwenden, um hier Winkel zu haben, hier und auch hier. Ok? Also lasst uns weitermachen und das tun. Lassen Sie uns diese einfügen. Bringen wir sie unter unsere Gruppe. Jetzt kann ich beide auswählen. Lass uns das individuell machen und dann kann ich sie größer oder kleiner machen, hängt davon ab, welche Art von Effekt ich suche, so etwas und lasst uns den anderen packen. Lass uns das ein bisschen größer machen, so etwas. Also schneiden sie sich irgendwie aufeinander und lassen Sie uns das so weiter bewegen. Sie können mit diesen beiden Formen herumspielen und sobald Sie das tun, können Sie die Farbverläufe öffnen und Sie können ihnen verschiedene Farben geben. So etwas oder so etwas. Es kann sogar ihre Reihenfolge ändern, je nachdem, welcher Verlauf Sie zuerst anzeigen möchten. Jetzt brauchen wir auch eine Art Navigation hier, oder? Wie werden wir dieses Karussell bewegen? Nun, gehen wir weiter und machen das dann. Beginnen wir mit dem Rechteck-Werkzeug oder R. Und lassen Sie uns ein Rechteck erstellen, das 320 mal 320 ist. Fügen wir 64 Pixel, Randradius hinzu und lassen Sie uns einen Winkel oder eine Drehung von 26 Grad machen . Ich werde den schönen Schlagschatten hinzufügen. Ich werde seine Füllung auf Weiß setzen und ich werde seine Kapazität auf 95 Prozent einstellen. So wird dies auf diese Punkte bleiben, wie so und wir können sogar in das Netz bringen, so dass wir eine Art von Messung haben. Was ich tun werde, ist in das Raster auszurichten und dann nach rechts 10,1,2,3,4,5,6, 16 Pixel so etwas zu schieben . Ich werde es auch in der Mitte mit meinen Screenshots ausrichten, also werde ich jetzt den Pfeil greifen und ich werde ihn hier einfügen und ihn in diese Gruppe bringen. Befehl G, um es zu gruppieren und lassen Sie uns seine Höhe auf 32 ändern, also machen Sie es nur ein wenig größer. Jetzt können Sie diesen Pfeil einfach nach Herzenslust positionieren. Ich werde so etwas tun, 1, 2, also 20, 1, 2, 3, 4, 24 und ich denke, wir müssen es ein bisschen größer machen. Versuchen wir 48 ja 1, 2, 3, 4, 5, 6. Ja, so etwas. Du musst damit herumspielen, bis du es genau richtig hast, genau so, wie ich es mag, aber für mich sieht das jetzt ziemlich gut aus. Was ich tun werde, ist dieses Bit zu duplizieren und ich werde es einfach auf die andere Seite verschieben , so. Lassen Sie mich zuerst in der Mitte ausrichten und wieder, ich werde es mit dem Gitter ausrichten und dann nach links drücken, 10, 1, 2, 3, 4, 5, 6, 16 Pixel. Dann werde ich nur den Pfeil in relativ ähnlicher Position positionieren. Sie können ein viel höheres Maß an Präzision erreichen, wenn Sie dies mit CSS codieren. Also mach dir jetzt keine Sorgen mehr darüber. Das letzte, was zu tun ist, ist es einfach horizontal zu drehen, was es in die andere Richtung dreht. Jetzt haben wir die Tasten, um das Karussell vorwärts und rückwärts zu bewegen. Das letzte, was ich hinzufügen möchte, ist eine Art Indikator, um uns wissen zu lassen, auf welcher Seite des Karussell wir sind, also hier ist, was wir tun werden. Wir greifen das Rechteck-Werkzeug wieder. Wir zeichnen einfaches Rechteck und wir machen dieses 32 Pixel breit, 4 Pixel hoch und den Radius 16 Pixel. Jetzt haben wir eine kleine Form, die ungefähr so aussieht. Für die Farbe möchte ich die gleiche Primärfarbe wie so verwenden, aber ich werde 10 Prozent Kapazität machen. Dies ist eine Darstellung einer Karussellseite, die derzeit nicht aktiv ist. Wiederholen Sie den Vorgang. Wir werden es duplizieren, lassen Sie uns beide „Shift A“ wählen, um ein automatisches Layout hinzuzufügen. Lassen Sie uns 16 Pixel Abstand zwischen den beiden und jetzt lassen Sie uns den aktiven Zustand erstellen. Für das noch einmal dupliziert, aber dieses Mal, lassen Sie es wie 80 Pixel in der Breite machen. Wir werden eine verwenden 100 Prozent die primäre Farbe und dann fügen Sie einfach ein paar mehr, um andere inaktive Seiten darzustellen , und ich denke, das sollte den Trick tun. Jetzt wählen wir dies aus, richten Sie es in der Mitte der Seite aus und lassen Sie es ein wenig aufzeigen. Lassen Sie uns es tatsächlich an der unteren Kante dieser Form ausrichten und das ist die Screenshot-Galerie. Jetzt wählen wir alles aus. Befehl G, um es zu gruppieren und nennen wir es Screenshot-Galerie. Lassen Sie es uns schließlich nach oben verschieben oder verschieben Sie es nach unten und lassen Sie etwa 240 Pixel Abstand zwischen der Galerie und dem Abschnitt darüber. Wenn wir nun eine Vogelperspektive machen, können wir sehen, dass wir eine ziemlich gute Balance zwischen Weißraum haben. In Ordnung, wie immer, jetzt ist es Zeit, Maßnahmen zu ergreifen und Ihre Version der Screenshot-Galerie zu erstellen. Ich ging für einen Schieberegler Schrägstrich Karussell Ansatz, aber Sie können dem Drahtrahmen treu bleiben und einfach eine einfache Gruppe von Bildern machen oder Sie können ein anderes Layout erstellen. Es liegt wirklich ganz an dir. Ich freue mich darauf, zu sehen, was du dir einfällt. Jetzt mit dem besagten, ist es Zeit, weiterzumachen. Der nächste Punkt auf unserer Liste ist der Testimonial Abschnitt und dort werde ich die Dinge wirklich sehr einfach halten. Lassen Sie mich Ihnen meine Meinung in der nächsten Lektion zeigen. Wir sehen uns dort. 13. Erfahrungsberichte: ( MUSIK) Willkommen zurück in der Klasse. Wir haben große Fortschritte mit diesem Landing Page-Design gemacht. Wir müssen nur noch drei weitere Abschnitte entwerfen, und wir sind fertig. In dieser Lektion werden wir die Testimonial Abschnitte erstellen. Bereit? Lasst uns gehen. Schauen wir uns zuerst den Drahtrahmen an, um zu sehen, womit wir es zu tun haben. Anfangs war meine Idee, hier nur eine Liste von Avataren zu haben, und wenn man auf einen Avatar klickt, würde sich das Zeugnis selbst ändern. Ich denke, was wir werden die Dinge viel einfacher als das halten, und machen Sie einfach eine Navigation mit Pfeil nach rechts, Pfeil nach links und das war's. Gehen wir hierher zurück. Gehen wir zur Typografie und schnappen wir uns dieses Blockzitat, das ich hier habe, fügen Sie es ein und bringen wir das Raster ein. Lassen Sie uns dies richtig am Raster ausrichten und es auf 10 Spalten genau in der Mitte der Seite formatieren. Lassen Sie uns auch die Textfarbe auf eine Grade von 80 Prozent ändern. Um die Tatsache zu markieren, dass dies ein Abschnitt für Zeugnisse ist, gehen wir weiter und fügen Sie eines davon hinzu, ein Zitat. Dies wird Brandon Grotesk verwenden. Lassen Sie uns eine wirklich große Schriftgröße machen und machen Sie es fett und ich denke ein bisschen größer, so etwas wie eine 110. Es spielt keine Rolle, dass wir gerade nicht genau an der Typenskala festhalten , weil dies ein dekoratives Element ist. Also eine 110 und das sollte okay sein. Lasst uns die Farbe ändern, benutzen wir diese, aber ein bisschen gedämpfter, wie 80 Prozent, so etwas. Das sieht gut aus, lassen Sie uns beide auswählen, die an der Mitte ausgerichtet sind und wir werden Dinge wie so ausrichten. Dann unter dem eigentlichen Zitat, werden wir einen Avatar des Zitats, des Autors, des Namens und vielleicht der Position und dann die Pfeilnavigation setzen . 40 Avatar, wir greifen das Ellipsenwerkzeug oder O auf der Tastatur und wir werden eine Ellipse machen, die 64 mal 64 ist. Das sollte den Trick machen. Wir brauchen keinen sehr großen Avatar. Wir werden das auf 32 Pixel von der Tafel oben positionieren , und wir müssen ein Porträt hineinlegen. Es gibt viele verschiedene Möglichkeiten, dies zu tun. Sie können ein kostenloses Bild aus dem Internet herunterladen, wenn Sie einen Platzhalter machen möchten. Wenn du ein richtiges Projekt machst, dann würdest du das Bild der Person machen, die dir dieses Zeugnis gegeben hat. In meinem Fall möchte ich nur ein Platzhalter Bild, damit ich ein Plugin namens unsplash öffnen kann. Das ist für die unsplash Website und ich kann nach einem Porträt suchen. Ich kann das benutzen und das wird einfach so ausfüllen. Für den Namen und die Position, lassen Sie uns tatsächlich greifen diese Art von Textstil und lassen Sie uns tatsächlich eine Verschiebung tun, um ein automatisches Layout hinzuzufügen. Stellen Sie sicher, dass Sie die Standardauffüllung löschen, die hinzugefügt werden. Wir werden 16 Pixel Abstand zwischen den Elementen oder Abstand zwischen den Elementen zu tun. Wir werden die Dinge vertikal machen und ich werde dieses Element einfügen und dann einfach die Farbe ändern. Ich werde 80 Prozent Grau verwenden. Wir sagen nur Mary Anne, Anwältin , cool. Lasst uns nun diese Ausrichtung in der Mitte nehmen. Stellen Sie sicher, dass wir es 32 Pixel vom tatsächlichen Zitat positionieren und dann greifen wir die linken und rechten Pfeile. Fügen Sie das hier ein. Duplizieren Sie es, verschieben Sie es zur Seite, klicken Sie mit der rechten Maustaste, kippen Sie horizontal. Lassen Sie uns eine 10-prozentige Deckkraft bei diesem hier machen. Eigentlich machen wir es auf der Ebene selbst, so. Dies zeigt uns, wie ein inaktiver Pfeil aussieht. Lassen Sie uns A diese verschieben, um Auto-Layout hinzuzufügen und lassen Sie uns 16 Pixel Abstand zwischen den beiden setzen. Wir können sogar noch höher als die 32 Pixel gehen, weil wir vielleicht in der Zukunft dem Raum um sie herum etwas füllen wollen und wir müssen den Raum haben, damit wir das tun können. Ich werde diese nehmen und ich werde sie 72 Pixel vom Autor positionieren. Nun nimm das alles, befehle G und lass uns diese Zeugnisse nennen. Stellen Sie sicher, dass es richtig in der Mitte ausgerichtet ist, und positionieren Sie es auf 240 Pixel vom obigen Abschnitt. Lassen Sie uns nun eine andere Vogelperspektive machen, um zu überprüfen, ob alles gut aussieht und es tut. [ MUSIK] Hast du gesehen, wie einfach es war, diesen Testimonial Abschnitt zu entwerfen? Offensichtlich gibt es viele Möglichkeiten, dies zu tun. Sie können mit Gittern gehen. Sie können mit einer anderen Art von Schieberegler gehen. Es liegt wirklich an Ihrer Phantasie. Erstellen Sie diese oder Ihre eigene Version der Testimonials und sobald Sie das tun, sind wir bereit, weiterzumachen. Der nächste Punkt auf unserer To-Do-Liste ist wahrscheinlich der wichtigste Abschnitt der Seite und das ist der Hauptaufruf zum Handeln. Es ist ein ziemlich komplexer Abschnitt, weil es eine Preistabelle enthält. Nichts, mit dem wir nicht umgehen können, aber es kann ein bisschen knifflig sein. Lassen Sie uns sehen, wie wir das in der nächsten Lektion erstellen können. 14. Main: Willkommen zurück in der Klasse. In dieser Lektion werden wir den wichtigsten Call-to-Action entwerfen, und dies ist wohl der wichtigste Abschnitt auf der Seite, da es sich um einen Deal Breaker handeln kann. Besucher werden diesen Abschnitt verwenden, um das Produkt zu kaufen oder die kostenlose Version herunterzuladen, aber im Wesentlichen ist dies, wo die Benutzer konvertieren. Stellen wir sicher, dass wir das richtig machen, und kommen wir dazu. Ein kurzer Blick auf den Wire-Frame zeigt uns, dass ich ursprünglich geplant hatte, den Preisbereich und den Call-to-Action separat zu erstellen, aber ich denke, es ist eine viel bessere Idee, beide in einen einzigen Abschnitt zu integrieren , weil es macht Sinn richtig. Wenn ich sie separat machen würde, hätte ich zwei Sätze von Schaltflächen, aber wenn ich sie zusammenführe, werde ich einen einzigen Satz von Schaltflächen haben. Weise ist es viel klarer. Auch diese Spalte der Preistabelle ist für die Pro-Version oder die kostenpflichtige Version der App, also müssen wir dies irgendwie hervorheben. Alles klar, lass uns dran kommen. Wir beginnen damit, den Text einzugeben, den wir für die Abschnittsüberschrift verwenden werden. Lassen Sie uns diese kopieren, fügen Sie sie hier ein. Ich denke, wir werden genau die gleichen Stile verwenden, die wir hier verwendet haben. Lassen Sie uns eine Kopie einfügen. Kopieren Sie Eigenschaften, fügen Sie Eigenschaften, und das gleiche gilt für diese, kopieren und einfügen. Lassen Sie uns sie an der Mitte ausrichten, und lassen Sie uns sie auch an der Mitte miteinander ausrichten. Lassen Sie uns A verschieben und 32 Pixel Abstand zwischen ihnen hinzufügen. Ok. Großartig. Nun, gehen wir weiter und fügen Sie unsere Preistabelle hinzu. Dafür, hier ist, was wir tun werden. Wir beginnen mit dem Einbringen des Logos. Wir gehen zu Marken-Assets, Logo-Farbe, und lassen Sie uns die Größe dieses Logos so ändern, dass es 48 Pixel hoch ist. Wir werden die farbige Version für die erste Spalte der Preistabelle verwenden. Hier müssen wir im Grunde das Wort frei anzeigen, um den Preis des Plans, dann die Liste der Funktionen und der Call-to-Action, die Schaltfläche zum Download anzuzeigen dann die Liste der Funktionen . Das sollte relativ einfach sein. Lasst uns diesen Text packen und wir werden ihn hier einfügen. Es wird nur frei sagen. Ich werde etwas hineinzoomen, damit du sehen kannst, was wir tun. Auch hier werden wir es an der Mitte ausrichten, wir werden es mit dem Logo ausrichten. Wir werden A verschieben, diese beiden, um ein automatisches Layout hinzuzufügen, und wir werden 32 Pixel Abstand zwischen ihnen einstellen. Als nächstes fügen wir die Liste der Features hinzu. Dafür werde ich einen einfachen Absatz greifen. Fügen Sie es hier ein, und fangen wir an, die Funktionen einzugeben. Jetzt richten wir diese in der Mitte aus. Schriftgröße, 18, Zeilenhöhe, wählen wir 32 Pixel, weil ich möchte, dass diese ein wenig mehr Abstand haben, und schließlich, was wir brauchen, ist eine dieser ausgefallenen Tasten, die wir gemacht haben. Kopieren Sie das, fügen Sie es ein. Nun, was wir tun können, ist, dass wir alles auswählen können, verschiebt A, um ein automatisches Layout hinzuzufügen. Stellen Sie sicher, dass Sie dieses Bit deaktivieren. Es wird vertikal sein, und wir werden 64 Pixel, horizontal, vertikal, padding und auch 64 Abstände zwischen den Elementen machen . Dazu können wir tatsächlich eine Füllfarbe von Weiß hinzufügen. Fügen wir einen Schlagschatten und lassen Sie uns auch die Ecken abrunden. Acht Pixel sollten gut sein. Ordnung, jetzt sollte dieses Element in vier dieser Rasterspalten passen. Wenn dies nicht der Fall ist, können wir einfach die Größe dieses Elements ändern, da dies dem gesamten Rahmen seine Breite verleiht. Wenn du das nicht verstehst, hier ist eine sehr einfache Erklärung. Dieses Textfeld, dieses Textfeld, hat derzeit eine Breite von 260 Pixeln. Der Rahmen, den ich mit dem automatischen Layout erstellt habe, hat eine horizontale Polsterung von 64 Pixeln. Neben diesen 260 müssen wir 64 nach links, 64 nach rechts hinzufügen . wenn ich dieses Textfeld neu anpasse, Größe meines gesamten Rahmens. Eigentlich ist es ganz einfach. Wir können das tun, bis wir die perfekte Breite erreicht haben, so dass es in vier Rastersäulen passt. Nun, lassen Sie uns das duplizieren und die Spalte für die Pro-Version erstellen. Nun, wenn Sie sich erinnern, was ich zuvor gesagt habe, dass dies abhebt , denn das ist schließlich für die Pro-Version, gibt es eine sehr einfache Möglichkeit, das zu tun. Anstatt weiße Füllung zu verwenden, können wir unseren Hauptverlauf verwenden. Dann können wir einfach dieses Logo auswählen und wir können alles weiß machen , so. Dann kann ich dieses gesamte Element auswählen, und ich kann die Farben in Weiß ändern. Nun, diese Beschreibung ist nicht ganz genau, weil wir ein paar Dinge hinzufügen müssen. Die Pro-Version verfügt alle Funktionen in kostenlosen plus mehrere Budgets, Zielverfolgung, Synchronisierung zwischen Geräten, Berichte und Synchronisierung mit Ihrer Bank. Das, ich werde fett machen, und ich werde meine sekundäre Farbe verwenden, was das ist. Ich werde es auf 100 Prozent setzen. Vergessen wir nicht, den Preis zu ändern. Dies wird $9,99 pro Monat sein. Lassen Sie uns auch den Stil dieser Schaltfläche ändern. Ich werde diese gleiche sekundäre Farbe für den Hintergrund und für den Text im Inneren verwenden , ich werde grau verwenden, vielleicht 80 Prozent, so etwas. Cool. Nun, lasst uns die zusammenfassen. Lassen Sie uns diese auf 64 Pixel vom obigen Text positionieren. Lasst uns sie zusammenfassen, Kommando G. Was meinst du? Sollen wir hier enden? Wie sieht das für Sie aus? Persönlich denke ich, wir könnten mit etwas mehr Trennung von dem obigen Abschnitt und auch ein bisschen mehr Betonung auf diesem Abschnitt verwenden , weil dies schließlich der wichtigste Abschnitt auf der Seite ist, oder? Um hier mit unserem Motiv mithalten zu können, muss ich einfach diesen Winkel kopieren, den Streifen. Ich werde es hier reinkleben. Ich werde es nur schieben, bis ich die richtige Balance gefunden habe, und ich werde es auch größer machen, so. Ich werde es unter unsere neu geschaffene Gruppe stellen. Dann werde ich das nehmen, ich werde es so hineinlegen. Ich denke, das sieht ziemlich gut aus, vielleicht nur ein bisschen größer. Ja, das sieht ziemlich gut aus. Jetzt müssen wir nur mit dem Gradienten ein bisschen herumspielen. Öffnen wir unser Plugin und lassen Sie uns hier etwas mit einem schönen Blauton machen, vielleicht so etwas oder so. Ich will nicht etwas, das zu dunkel ist, aber ich will auch nicht etwas, das zu stark gefärbt ist. Ich denke, vielleicht werde ich es dem überlassen, weil es auch einige Farben hat, die in diesem Abschnitt hier zu finden sind. Das ist gut. Außerdem werde ich es duplizieren, es ein wenig drehen. Dafür können wir sogar eine andere Reihe von Farben verwenden, vielleicht so etwas, oder vielleicht etwas etwas mehr gedämpft. Wir können sogar die Deckkraft auf dieser Ebene senken. Ich denke, das sieht genau richtig aus. Natürlich kann man immer reingehen und an den Details knabbern, alles einstimmen, genau richtig, aber im Moment denke ich, das ist gut genug. Als letzte Sache, wie wir es immer tun, wählen Sie alles, Befehl G, um alles zu gruppieren. Wir werden das Haupt-C-T-A oder Call-to-Action nennen. Cool. Ordnung, wie Sie in dieser Lektion gesehen haben, habe ich mich davon entfernt, dem Drahtrahmen zu folgen, und stattdessen habe ich mein eigenes Layout erstellt. Das ist völlig in Ordnung. Wie ich in einer vorherigen Lektion sagte, ist der Drahtrahmen da, um Sie zu führen, und es ist da, um als Leitfaden für den Inhalt wirklich zu dienen, nicht unbedingt für das Layout. Dieser Abschnitt hier war ein gutes Beispiel dafür. Jetzt, wie üblich, gehen Sie vor und erstellen Sie Ihre eigene Version dieses Haupt-Call-to-Action, entweder indem Sie dem Drahtrahmen folgen oder genau das tun, was ich getan habe, oder einfach etwas Neues einfallen lassen. Es liegt ganz an dir. Sobald Sie dies tun, sind Sie bereit für den letzten Abschnitt der Seite, und das ist die Fußzeile. Das kommt in der nächsten Lektion. 15. Fußer: Willkommen zurück in der Klasse. In dieser Lektion entwerfen wir den letzten Abschnitt dieser Zielseite, die Fußzeile. Es ist eine ziemlich unkomplizierte Aufgabe, also lasst uns anfangen. nun einen Blick auf das Drahtmodell werfen, können wir die Zusammensetzung der Fußzeile sehen. Wir haben hier das Logo, ein kleines Seitenmenü auf der rechten Seite, einige Informationen über das Unternehmen, die typischen Copyright-Informationen und eine Liste von Links für Social Media. Lasst uns anfangen. Ich werde damit beginnen, das Logo einzubringen, und da wir es hier haben, werde ich dieses einfach kopieren, es hier einfügen. Ich werde auch das Raster einbringen, damit wir die Elemente hier richtig ausrichten können. Dann lassen Sie uns das Seitenmenü erstellen, das Sie hier oben gesehen haben. Kopieren wir das, fügen Sie es hier ein. Lassen Sie uns eine Umschalttaste A tun, um ein automatisches Layout zu erstellen, horizontal, lassen Sie uns 32 Pixel zwischen den Elementen tun. Was den Stil betrifft, nun, wir werden einen Stil verwenden, den wir zuvor verwendet haben , der hier ist, also Eigenschaften kopieren, Eigenschaften einfügen, schön. Nehmen wir diese beiden und richten vertikale Zentren aus. Nun nehmen wir das und richten es an der rechten Kante unseres Gitters aus. Nun, als nächstes, fügen wir hier ein Trennzeichen hinzu. Um das zu tun, werden wir uns diesen Elementen genau hier zuwenden. Ich werde mir einen von ihnen schnappen, und ich werde hierher ziehen, fügen Sie das ein. Verschieben Sie es einfach an Ort und Stelle, und lassen Sie es ändern, bis es die gesamte Breite meines Rasters erweitert und lassen Sie uns seine Höhe auf 48 Pixel zurückbringen , weil ich es versehentlich dort vergrößert habe. Lassen Sie uns das positionieren, gerade jetzt ist es bei 48 Pixeln, lassen Sie uns vielleicht 64. Das sollte den Trick gut machen. Aber ich denke, es könnte ein bisschen zu viel sein, also gehen wir zurück zu 48 eigentlich, so. Ich denke, das sieht ein bisschen besser aus. Als Nächstes müssen wir die Unternehmensinformationen hinzufügen. Kopieren wir das, fügen Sie das hier ein. Wir werden dafür das Absatzformat verwenden, also lassen Sie uns die Eigenschaften daraus kopieren, einfügen und alles nach links ausrichten. Auch was ich hier tun möchte, ist, diese fett zu machen und die Primärfarbe zu verwenden. Weil es sich um Links handelt. Eigentlich werde ich regelmäßig benutzen. Ich glaube nicht, dass kühn hier so gut aussieht. Bold werden wir für diese Arten von Links zu halten, aber für diese, wir werden das regelmäßige Gewicht verwenden. Lassen Sie uns das ein wenig ansprechen, um den Abstand zu entsprechen, so. Wir haben 48 von Text zu Separator und dann 48 von Separator zu Logo. Lassen Sie uns schließlich die Copyright-Informationen hinzufügen. Lassen Sie uns Bearbeiten, Einfügen und Match Stil tun. Lassen Sie uns auch positionieren, dass 48 Pixel von dem Element darüber. Was sonst noch? Nun, wir müssen die Links für soziale Medien machen, aber anstatt nur Links zu spielen, lassen Sie uns Symbole machen. Das sollte super einfach sein. Ich werde Symbole aus dem Set verwenden, das wir diese gesamte Klasse verwendet haben. Suchen wir nach Twitter. Lassen Sie uns das kopieren, fügen Sie es in, K, um es zu ändern, und wir werden die Größe auf, ich denke, 24 Pixel, es ist ein bisschen schwierig. Lassen Sie uns auch die richtige Farbe zu ihnen hinzufügen. Was haben wir sonst noch? Facebook, denke ich, Ich füge Instagram hinzu. Lassen Sie uns greifen Facebook, gleichen Drill K für Skalierung, und ändern Sie es dann auf 24 Pixel. Fügen wir es hier in meinen Hauptrahmen ein, und Instagram, kopieren Sie es, fügen Sie es ein und ändern Sie es auf 24 Pixel. Nun, bringen Sie alles zusammen, wählen Sie diese Umschalttaste A, um ein automatisches Layout hinzuzufügen. Lassen Sie uns 32 Pixel zwischen ihnen machen. wir sicher, dass alles in der Mitte ausgerichtet ist. Lassen Sie uns die richtige Farbe auf all diesen verwenden. Ich wähle beide aus, vertikale Mittelpunkte aus, und ich werde hier die Liste der Symbole direkt an den Rand meines Rasters bringen. Dann schnappen Sie sich diese beiden, befehlen Sie G, um sie zu gruppieren. Nun, was ich tun kann, ist sicherzustellen, dass meine Messungen korrekt sind. 48 dort, 48 und 48, wählen Sie alles aus, Befehl G, und gruppieren Sie es als Fußzeile. Nun, das einzige, was noch zu tun ist herauszufinden, welche Art von Abstand wir unten brauchen. Ein guter Weg, dies zu tun, ist zu sehen, welchen Abstand Sie oben verwendet haben, und in meinem Fall ist es, ich glaube 64 Pixel. Es gibt viele Elemente hier. Es sind 64 Pixel. Lasst uns das machen. Wählen wir meinen Desktop aus, und lassen Sie uns die Größe entsprechend ändern. Save, und das hier, Ladies und Gentleman ist unsere fertige Landingpage. Werfen wir einen letzten letzten Blick darauf. Ich werde die Benutzeroberfläche hier verstecken, damit wir sie besser sehen können. Alles begann mit dem Heldenbereich. Zuerst haben wir dieses Logo, Navigation und Hintergrund erstellt und dann den Textinhalt und die Collage der Bilder hinzugefügt. Als nächstes haben wir den ersten Abschnitt für Features, gefolgt von einem zweiten Abschnitt für Features, wobei natürlich ein anderes Layout verwendet wird. Dann fügen wir einen kleinen Aktionsbereich hinzu. Anstatt eine einfache Box zu machen, haben wir diesen Hintergrund mit einfachen Formen, Schatten und Farbverläufen hinzugefügt. Darauf folgt der dritte und letzte Feature-Abschnitt. Auch hier mit einem anderen, aber etwas klassischeren Layout. Dann folgten wir das mit der Screenshot-Galerie, die wir es wie ein Karussell komplett mit Navigation, Schaltflächen und auch Seite in den Trägern aussehen lassen. Nach oben ist ein einfacher Abschnitt für Testimonials, mit einem einfachen Schieberegler. Dann wahrscheinlich der wichtigste Abschnitt auf der Seite, der Hauptaufruf zum Handeln, auch die Preistabelle enthält. Schließlich haben wir in dieser Lektion den letzten Abschnitt auf der Seite erstellt, bei dem die Fußzeile handelt. Jetzt sind Sie an der Reihe, die Landing Page zu entwerfen. Gehen Sie voran und erstellen Sie die Fußzeile. Nachdem Sie das getan haben, möchte ich Ihnen gratulieren, weil Sie gerade diese Klasse mit Bravour bestanden haben. Bitte begleiten Sie mich in der nächsten Lektion für den Abschluss. 16. Die Epische Schlussfolgerung: Nun, herzlichen Glückwunsch für den Abschluss dieser Klasse. Ich hatte wirklich gehofft, dass es Ihren Erwartungen entspricht und Sie etwas Wertvolles gelernt haben, etwas, das Ihnen in Ihrer Karriere helfen wird. Bitte nehmen Sie sich einen Moment Zeit und schreiben Sie die wichtigsten Takeaways aus dieser Klasse auf. Wie ich bereits in den vorangegangenen Lektionen sagte, ermutige ich Sie dringend, Ihre eigene Version dieser Zielseite zu erstellen. Sobald Sie das tun, gehen Sie weiter und posten Sie es in der Projektgalerie, weil ich Ihnen Feedback geben werde, wenn Sie möchten. Ich bin sicher, dass auch andere Schüler Ihnen Feedback geben werden. Wenn Sie Fragen oder Kommentare haben, wenn Sie weitere Inhalte wie diesen auf Skillshare sehen möchten, stellen Sie sicher, dass Sie Ihre Kommentare im Diskussions-Tab hinterlassen. Ich würde gerne von dir hören. Bevor wir die Dinge einpacken, möchte ich nur diese kurze Notiz machen. Diese Klasse, oder dies war die erste Klasse einer Serie namens Designing with Figma. Ich plane, mehr Klassen wie diese zu machen. Wenn Sie mehr Inhalte wie diesen sehen möchten, stellen Sie sicher, dass Sie mir folgen. Mit diesem gesagt, vielen Dank für das Anschauen und ich hoffe wirklich , Sie bald wieder in der nächsten Klasse. Viel Liebe und Respekt, achten Sie darauf.